Controles (XAML con C#, C++ o VB)

Agrega nuevas características a tu aplicación de la Tienda Windows, como selectores de fecha y hora, y compatibilidad con la navegación mejorada, con los nuevos controles XAML en Windows 8.1. Las actualizaciones de los controles existentes facilitan su uso y aumentan su versatilidad.Estos nuevos controles y actualizaciones de controles hacen que sea más fácil que nunca crear una aplicación completa.

Nuevos controles y actualizaciones de controles

Windows 8.1 presenta estos nuevos controles y características:

Windows 8.1 incluye actualizaciones para estos controles existentes:

Controles AppBar

[Obtén la muestra del control XAML AppBar ahora.]

Windows 8.1 presenta nuevos controles para XAML que te permiten crear con mayor facilidad botones de comandos de la barra de la aplicación que reflejan los comportamientos y las directrices de diseño que son adecuados: los controles AppBarButton, AppBarToggleButton y AppBarSeparator.

Botones de la barra de la aplicación para XAML

 

Los botones de la barra de la aplicación se diferencian de los botones estándar en varios aspectos:

  • Su apariencia predeterminada es un círculo en lugar de un rectángulo.

  • Usas las propiedades Label y Icon para establecer el contenido en lugar de la propiedad Content. La propiedad Content se omite.

  • La propiedad IsCompact del botón controla su tamaño.

Los controles de botón de la barra de la aplicación tienen dos tamaños: normal y compacto. De forma predeterminada, tienen una etiqueta de texto y relleno completo. Cuando la propiedad IsCompact se establece en true, la etiqueta de texto se oculta y el relleno alrededor de los botones se reduce. AppBarSeparator también tiene un estado compacto en el que se reduce el relleno.

Aquí puedes ver los mismos comandos mostrados anteriormente, pero en su estado compacto.

Botones de la barra de la aplicación compactos

 

Cuando usas controles de la barra de la aplicación en el nuevo control CommandBar, CommandBar establece su propiedad IsCompact automáticamente. Si usas un botón de la barra de la aplicación fuera de un control CommandBar, como en AppBar o en el lienzo de la aplicación, necesitas establecer la propiedad IsCompact de forma adecuada en el código.

Puedes usar botones de la barra de la aplicación fuera de una barra de la aplicación. Un ejemplo habitual sería utilizar un botón de la barra de la aplicación como un botón Atrás en un encabezado de página. Cuando se usa un botón fuera de una barra de la aplicación, las directrices de Windows indican que debería estar siempre en su estado compacto.

Usas las propiedades Label y Icon para definir el contenido de los botones de la barra de la aplicación. Establece la propiedad Label en una cadena para especificar la etiqueta de texto. La etiqueta se muestra de forma predeterminada pero se oculta cuando el botón está en su estado compacto, de modo que también es necesario especificar un icono significativo. Para ello, establece la propiedad Icon del botón en un elemento derivado de la nueva clase IconElement. Se proporcionan cuatro tipos de elementos de icono:

  • FontIcon: —el icono se basa en un glifo de la familia de fuentes especificada.

  • BitmapIcon: —el icono se basa en un archivo de imagen de mapa de bits con el Uri especificado.

  • PathIcon: —el icono se basa en los datos de Path.

  • SymbolIcon: —el icono se basa en una lista predefinida de glifos de la fuente Segoe UI Symbol.

Creación de un botón de barra de la aplicación

En este ejemplo se muestra cómo crear controles AppBarButton, AppBarSeparator y AppBarToggleButton con cada tipo de icono.


<!-- App bar button with symbol icon. -->
<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         

<!-- App bar button with bitmap icon. -->
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarSeparator />

<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

<!-- App bar toggle button with path icon. -->
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Este código de ejemplo crea estos controles:

Ejemplos de icono de botón de la barra de la aplicación.

 

CommandBar

[Obtén la muestra del control XAML AppBar ahora.]

Windows 8.1 presenta un nuevo control para XAML que te permite crear fácilmente barras de la aplicación diseñadas de forma adecuada: el control CommandBar.

La barra de comandos

 

El control CommandBar simplifica la creación de barras de la aplicación básicas, ya que proporciona:

  • Diseño automático de comandos con comandos principales a la derecha y comandos secundarios a la izquierda.

  • Cambio automático de tamaño de los comandos de la barra de la aplicación cuando la aplicación cambia de tamaño.

Cuando necesites una barra de la aplicación que contenga únicamente controles AppBarButton,AppBarToggleButton y AppBarSeparator, usa este nuevo control CommandBar. Si necesitas contenido más complejo, como imágenes, barras de progreso o bloques de texto, usa un control AppBar.

De forma predeterminada, los elementos que agregas a CommandBar se agregan a la colección PrimaryCommands. Estos comandos se muestran en la parte derecha de CommandBar. También puedes agregar comandos a la colección SecondaryCommands; estos elementos se mostrarán a la izquierda.

Los controles de botón de la barra de la aplicación tienen dos tamaños: normal y compacto. De forma predeterminada, tienen una etiqueta de texto y relleno completo. Cuando la propiedad IsCompact se establece en true, la etiqueta de texto se oculta y el relleno alrededor de los botones se reduce. AppBarSeparator también tiene un estado compacto en el que se reduce el relleno. Cuando usas estos controles en el nuevo control CommandBar, establece la propiedad IsCompact de estos controles automáticamente si no hay espacio suficiente para mostrarlos en su tamaño completo.

Aquí puedes ver los mismos comandos principales mostrados anteriormente, pero en su estado compacto.

La barra de comandos con botones compactos

 

Creación de un control CommandBar

Este ejemplo crea la barra de comandos mostrada anteriormente.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

DatePicker

[Obtén la muestra de los controles XAML DatePicker y TimePicker ahora.]

Windows 8.1 presenta un nuevo control para XAML que permite que un usuario establezca una fecha localizada en la aplicación: el control DatePicker.

Selector de fecha

 

El selector de fecha te ofrece una forma estandarizada de permitir a los usuarios seleccionar una fecha localizada con los métodos de entrada táctil, de mouse o de teclado. Puedes usar el control DatePicker en su forma predeterminada con una mínima cantidad de XAML u otro código, o puedes personalizarlo de diversas maneras.

DatePicker admite todos los sistemas de calendario compatibles con Windows. Estos nueve calendarios se especifican en la clase Windows.Globalization.CalendarIdentifiers. El control DatePicker usa el calendario correcto para el idioma predeterminado de tu aplicación o puedes establecer la propiedad CalendarIdentifier para usar un sistema de calendario específico.

Creación de un control DatePicker

En este ejemplo se muestra cómo crear un DatePicker sencillo con un encabezado.


<DatePicker x:Name=arrivalDatePicker Header="Arrival Date"/>

Este DatePicker tiene este aspecto cuando se abre el selector de día.

Un selector de fecha con el selector de día abierto

 

Puedes establecer la fecha en el código o puedes enlazar a una instancia de DateTimeOffset. Aquí, DatePicker se establece en el código con un valor predeterminado de 2 meses a partir de la fecha actual y el año mínimo está establecido en el año actual.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default date to 2 months from the current date.
    arrivalDatePicker.Date = DateTimeOffset.Now.AddMonths(2);

    // Set the minimum year to the current year.
    arrivalDatePicker.MinYear = DateTimeOffset.Now;
}

Puedes aplicar formato al texto en cada ComboBox mediante plantillas de formato estándar. Este ejemplo muestra cómo aplicar formato al campo de día para mostrar el día del mes y el día de la semana abreviado. El campo de año se oculta al establecer la propiedad YearVisible en False.


<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False"/>

Este ejemplo crea este control DatePicker.

Selector de fecha con el año oculto

 

DatePicker también admite diseños verticales, si se establece su propiedad Orientation. Y se puede personalizar en gran medida: puedes usar estilos y plantillas para personalizar prácticamente cualquier aspecto de DatePicker y de su contenido.

Flyout

[Obtén la muestra de los controles XAML Flyout y MenuFlyout ahora.]

Windows 8.1 presenta un nuevo control para XAML que te permite mostrar temporalmente la interfaz de usuario relacionada con lo que está haciendo el usuario: el control Flyout.

Un botón con un control flotante

 

Un Flyout muestra interfaz de usuario ligera (que se denomina control flotante) que es informativa o requiere la interacción del usuario. A diferencia de los cuadros de diálogo, un control flotante puede descartarse haciendo clic o pulsando fuera de él. Úsalo para recopilar información del usuario, mostrar más detalles sobre un elemento o pedir al usuario que confirme una acción. Un control flotante solamente debería aparecer cuando un usuario haga clic o pulse, y se descarta siempre que el usuario pulsa fuera de él.

Es habitual adjuntar un control flotante a un botón, de forma que el control Button tenga una nueva propiedad Flyout para simplificar las tareas de adjuntar y abrir un control Flyout. Un control flotante adjunto a un botón se abre automáticamente al hacer clic en el botón.

También puedes adjuntar un control Flyout a cualquier objeto FrameworkElement mediante la propiedad adjunta FlyoutBase.AttachedFlyout. Si lo haces, debes responder a una interacción en FrameworkElement, como Tapped, y abrir el control Flyout en tu código.

Creación de un control Flyout

En este ejemplo se crea un control Button con un Flyout que muestra en la ilustración anterior.


<Button Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{StaticResource BasicTextStyle}">All items will be removed. Do you want to continue?</TextBlock>
                <Button Click="DeleteConfirmation_Click">Yes, empty my cart</Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

El ejemplo siguiente muestra un Flyout adjunto a un TextBlock. Como ya se ha dicho anteriormente, puedes ajuntar un Flyout a cualquier FrameworkElement mediante la propiedad adjunta FlyoutBase.AttachedFlyout.


<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
           Tapped="TextBlock_Tapped" FontSize="18">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

Para abrir este Flyout, administra el evento Tapped y llama al método FlyoutBase.ShowAttachedFlyout.


private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

El bloque de texto tiene este aspecto.

Texto con control flotante cerrado

 

Cuando se pulsa el bloque de texto, se abre el control flotante que contiene el control TextBox y el texto puede cambiarse.

Texto con control flotante abierto

 

Puedes crear un Flyout como un recurso y usarlo en más de un control. Aquí, se define un Flyout como un recurso y se comparte entre dos controles distintos.


<Page.Resources>
    <Flyout x:Key="SharedFlyout">
        <StackPanel>
            <TextBlock Text="This Flyout is shared."/>                      
        </StackPanel>
    </Flyout>
</Page.Resources>

...

<Button Content="Button" Flyout="{StaticResource SharedFlyout}"/>
<TextBlock Text="TextBlock" FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" Tapped="TextBlock_Tapped"/>

Para obtener más información sobre Flyout, consulta Inicio rápido: Agregar un control flotante.

Hub

[Obtén la muestra del control XAML Hub ahora.]

Windows 8.1 presenta un nuevo control para XAML que te permite crear fácilmente el diseño de concentrador que refleja los comportamientos y las directrices de diseño que son adecuados: el control Hub.

Una página de concentrador

 

Las páginas de concentrador son el punto de acceso del usuario a la aplicación. Muestran el contenido en una vista panorámica enriquecida que permite a los usuarios obtener una vista rápida de lo que es nuevo y atractivo, para luego profundizar en el contenido de la aplicación. El concentrador muestra distintas categorías de contenido, cada una de las cuales se asigna a las páginas de sección de la aplicación. De cada sección debe emerger contenido o funcionalidades. El concentrador debe ofrecer una amplia variedad visual, atraer a los usuarios y llevarlos a distintas partes de la aplicación.

El control XAML Hub proporciona elementos que te ayudarán a implementar con mayor facilidad el patrón de diseño de concentrador para tu aplicación. A diferencia del control GridView o ListView, que muestra datos de un único origen, cada sección de concentrador puede mostrar datos de un origen distinto. Cualquier contenido XAML se puede usar para crear una página de concentrador rica en elementos visuales. Para empezar a crear rápidamente una aplicación con una página Hub, usa la plantilla Hub App de Microsoft Visual Studio 2013.

Agrega un encabezado a Hub para permitir a los usuarios conocer el contexto de tu concentrador. Suele ser el nombre de la aplicación. Puedes usar un Header de texto sencillo o definir una HeaderTemplate que use cualquier contenido XAML. Es importante recordar que, aunque puedes usar contenido arbitrario en el encabezado, el alto del encabezado afectará a la cantidad de espacio vertical disponible para el contenido de tu sección de concentrador. El encabezado permanece fijo en su posición y no se desplaza con las secciones de concentrador.

Secciones de concentrador

Debes colocar el contenido de tu concentrador en diversos controles HubSection. Al igual que el concentrador, cada HubSection tiene una propiedad Header y HeaderTemplate que puedes usar para establecer un encabezado opcional para la sección. También puedes hacer que el encabezado de sección sea interactivo. Normalmente, el usuario puede pulsar un encabezado interactivo para ir a la página de sección de la aplicación correspondiente. Cuando su propiedad IsHeaderInteractive es true, el encabezado predeterminado incluye un glifo de comillas angulares y los estados visuales "Mantener" y "Presionado". Si usas una HeaderTemplate personalizada, proporciona indicaciones visuales similares para indicar que el encabezado es interactivo.

No agregas contenido directamente a una sección de concentrador, sino que defines el contenido de HubSection en un objeto DataTemplate. El contenido puede definirse en línea o puede enlazarse a un origen de datos. Cualquier XAML válido puede utilizarse en una sección de concentrador.

Creación de un control Hub

En este ejemplo se muestra el XAML básico que se usa para crear un control Hub.


<Hub Header="News">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>   
                <TextBlock Text="The most recent news will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Tech page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Sports page." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>

Ese ejemplo crea este control Hub.

Un control de concentrador sencillo

 

Hyperlink

Windows 8.1 agrega el elemento Hyperlink al modelo de objetos de texto XAML en el espacio de nombres Windows.UI.Xaml.Documents.

El elemento Hyperlink te permite agregar un hipervínculo a una ejecución de texto. El hipervínculo se trata como el resto del texto y participa en los saltos de línea. Cuando se marca como un hipervínculo, el texto se muestra en un color específico y, cuando se pulsa, se va al identificador uniforme de recursos (URI) especificado en la propiedad NavigateUri.

Aquí tienes un bloque de texto con un elemento Hyperlink insertado.

Texto con un hipervínculo

 

Uso de un elemento Hyperlink

Este ejemplo crea el texto mostrado anteriormente. El Hyperlink fluye con el resto del texto y abre el Centro de desarrollo de Windows cuando un usuario lo pulsa.


<RichTextBlock Width="200" Style="{StaticResource BasicRichTextStyle}">
    <Paragraph>Hyperlinks let you give readers a visual hint that certain text links to other content.
        <Hyperlink NavigateUri="http://dev.windows.com">Read more on the Windows Dev Center</Hyperlink>
        ... Text in a Hyperlink element is treated like the rest of the text and participates in line breaking.
    </Paragraph>
</RichTextBlock>

MenuFlyout

[Obtén la muestra de los controles XAML Flyout y MenuFlyout ahora.]

Windows 8.1 presenta un nuevo control para XAML que te permite mostrar temporalmente una lista de opciones o comandos relacionados con lo que está haciendo el usuario: el control MenuFlyout.

Un botón con un control flotante de menú

 

Un MenuFlyout muestra interfaz de usuario ligera (que se denomina control flotante de menú) que puede descartarse haciendo clic o pulsando fuera de él. Úsalo para permitir al usuario elegir en una lista contextual de opciones o comandos sencillos. Un control flotante de menú solamente debería aparecer cuando un usuario haga clic o pulse, y se descarta siempre que el usuario pulsa fuera de él.

Para definir el contenido del menú, debes agregar objetos MenuFlyoutItem, ToggleMenuFlyoutItem y MenuFlyoutSeparator al MenuFlyout. Estos objetos permiten:

Es habitual adjuntar un control flotante de menú a un botón, de forma que el control Button tenga una nueva propiedad Flyout para simplificar las tareas de adjuntar y abrir un control MenuFlyout. Un control flotante de menú adjunto a un botón se abre automáticamente al hacer clic en el botón.

También puedes adjuntar un control MenuFlyout a cualquier objeto FrameworkElement mediante la propiedad adjunta FlyoutBase.AttachedFlyout. Si lo haces, debes responder a una interacción en FrameworkElement, como Tapped, y abrir el control MenuFlyout en tu código.

Creación de un control MenuFlyout

En este ejemplo se crea un control Button con un MenuFlyout que muestra en la ilustración anterior.


<Button Content="Options">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
            <MenuFlyoutSeparator/>
            <ToggleMenuFlyoutItem Text="Shuffle" IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
            <ToggleMenuFlyoutItem Text="Repeat" IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

SettingsFlyout

[Obtén la muestra de configuración de la aplicación ahora.]

Windows 8.1 presenta un nuevo control para XAML que te permite crear fácilmente controles flotantes de configuración de la aplicación que reflejan los comportamientos y las directrices de diseño que son adecuados: el control SettingsFlyout.

SettingsFlyout

 

Al igual que un control Page, un control SettingsFlyout puede declararse en XAML como un elemento raíz de un documento, con un atributo x:Class especificado para ser subclase de SettingsFlyout. Puedes establecer el ancho del control flotante de configuración, pero el alto será siempre el alto de la pantalla.

Un SettingsFlyout tiene una sección de encabezado y una sección de contenido. El encabezado contiene un botón Atrás, un título y un icono opcional. Establece HeaderBackground y HeaderForeground conforme a los colores de tu aplicación. De forma predeterminada, el icono muestra el icono pequeño de tu aplicación. Puedes especificar un icono distinto si estableces la propiedad IconSource. El botón Atrás siempre está visible.

Mostrar y descartar el control SettingsFlyout

Los usuarios pueden acceder a un control flotante de configuración a través del acceso a Configuración. Puedes mostrar un control SettingsFlyout mediante programación llamando al método Show o ShowIndependent, y descartarlo llamando a su método Hide.

De forma predeterminada, el botón Atrás descarta el control flotante de configuración. Si un control SettingsFlyout se muestra al llamar a Show, al hacer clic en el botón Atrás se descarta el control flotante y se reabre el panel de configuración. Si un control SettingsFlyout se muestra al llamar a ShowIndependent, al hacer clic en el botón Atrás se descarta el control flotante y se devuelve al usuario a la aplicación. Por ejemplo, si abres un control SettingsFlyout desde un botón de configuración de tu aplicación, normalmente llamarás a ShowIndependent para que los usuarios vuelvan directamente a tu aplicación cuando descarten el control flotante.

Solo puede mostrarse un control SettingsFlyout a la vez. Al llamar a Show en un SettingsFlyout, se cierra cualquier otro SettingsFlyout que se esté mostrando.

Puedes invalidar el comportamiento predeterminado del botón Atrás mediante la administración del evento BackClick. Este evento se genera siempre que el usuario hace clic en el botón Atrás. Para invalidar el comportamiento predeterminado, crea un controlador de eventos para el evento y establece la propiedad BackClickEventArgs.Handled en true.

Conexión con SettingsPane

Debes asociar manualmente el control SettingsFlyout al objeto SettingsPane de la aplicación. Para ello, debes administrar el evento SettingsPane.CommandsRequested y agregar un SettingsCommand a la colección ApplicationCommands. El SettingsCommand tiene una etiqueta para tu control SettingsFlyout que se muestra en el acceso a Configuración y especifica un método que se ejecuta cuando un usuario selecciona el comando en el acceso a Configuración. En este método, creas una instancia del control SettingsFlyout y lo muestras.

Creación de un control SettingsFlyout

Bg182878.wedge(es-es,WIN.10).gifPara agregar un control SettingsFlyout en Visual Studio

  1. Selecciona Proyecto > Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, selecciona Control flotante de configuración en el panel del medio.

  3. Escribe un nombre para el archivo de control flotante de configuración y haz clic en Agregar. En este ejemplo, el control flotante de configuración se llama UpdateSettingsFlyout.

    Nota  Cuando agregas un control flotante de configuración, estás creando una nueva clase con el nombre que especifiques derivado de SettingsFlyout. Para crear una instancia del control flotante de configuración, usa el nombre que especificaste como new UpdateSettingsFlyout().

En este ejemplo se crea un control SettingsFlyout mostrado en la ilustración anterior.


<SettingsFlyout
    x:Class="SettingsFlyoutExample.UpdateSettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsFlyoutExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="App Updates"
    d:DesignWidth="346"
    Width="346" 
    HeaderBackground="#FF2B4A80">
    <SettingsFlyout.Resources>
        <Style x:Key="SettingsFlyoutSectionStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="0,0,0,39"/>
        </Style>
    </SettingsFlyout.Resources>

    <!-- This stack panel acts as a root panel for vertical layout of the content sections. -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The stack panels below define individual content sections. -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                                 Text="Automatic updates" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Turn automatic updating on or off.
                </TextBlock.Text>
            </TextBlock>
            <ToggleSwitch Header="Download updates automatically" />
            <ToggleSwitch Header="Install updates automatically" />

        </StackPanel>

        <!-- Define more Content Sections below as necessary. -->

    </StackPanel>
</SettingsFlyout>

En este ejemplo se muestra cómo agregar el control SettingsFlyout al panel de configuración.


public MainPage()
{
    this.InitializeComponent();

    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}

void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsCommand updateSetting = 
        new Windows.UI.ApplicationSettings.SettingsCommand("AppUpdateSettings", "App updates", (handler) =>
    {
        UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
        updatesFlyout.Show();

    });

    args.Request.ApplicationCommands.Add(updateSetting);
}

En este ejemplo se muestra cómo abrir el SettingsFlyout desde un botón de la aplicación.


<Button Content="App update settings" Click="UpdateSettingsButton_Click"/>


private void UpdateSettingsButton_Click(object sender, RoutedEventArgs e)
{
    UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
    updatesFlyout.ShowIndependent();
}

TimePicker

[Obtén la muestra de los controles XAML DatePicker y TimePicker ahora.]

Windows 8.1 presenta un nuevo control para XAML que permite que un usuario seleccione un valor de hora en la aplicación: el control TimePicker.

TimePicker

 

El selector de hora te ofrece una forma estandarizada de permitir a los usuarios seleccionar una hora localizada de forma táctil, mediante el mouse o el teclado. Puedes usar el control TimePicker en su forma predeterminada con una mínima cantidad de XAML u otro código, o puedes personalizarlo de diversas maneras. TimePicker puede usar un reloj de 12 horas o de 24 horas.

Creación de un control TimePicker

En este ejemplo se muestra cómo crear un TimePicker sencillo con un encabezado.


<TimePicker x:Name=arrivalTimePicker Header="Arrival Time"/>

En este ejemplo se muestra cómo crear un TimePicker con un reloj de 24 horas.


<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock"/>

El TimePicker de ese ejemplo tiene este aspecto. El selector de a.m./p.m. se oculta automáticamente.

TimePicker con reloj de 24 horas

 

Puedes establecer la hora en el código o puedes enlazar a una instancia de TimeSpan. Aquí, TimePicker está establecido en el código con un valor predeterminado de 8:00 a.m.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default time to 8 A.M.
    arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
}

Puedes establecer el incremento del selector de minutos en un valor que tenga sentido en tu aplicación. Aquí, el incremento de minutos es 15 minutos.


<TimePicker x:Name=arrivalTimePicker Header="Arrival Time" MinuteIncrement="15"/>

El TimePicker de ese ejemplo tiene este aspecto cuando se abre el selector de minutos.

TimePicker con incrementos de 15 minutos

 

TimePicker también admite diseños verticales, si se establece su propiedad Orientation. Y se puede personalizar en gran medida: puedes usar estilos y plantillas para personalizar prácticamente cualquier aspecto de TimePicker y de su contenido.

Actualizaciones de FlipView

[Obtén la muestra del control XAML FlipView ahora.]

El control XAML FlipView admite tres modos de navegación: táctil, con botones y mediante programación. Cuando un usuario usa la navegación táctil, los elementos FlipView se desplazan suavemente para aparecer en la vista. Sin embargo, si se navega con el mouse, el teclado o mediante programación, no se produce la animación y los elementos simplemente aparecen en la vista. Esto produce una experiencia incoherente entre los modos de navegación.

Windows 8.1 agrega la nueva propiedad UseTouchAnimationsForAllNavigation al control FlipView para permitir una experiencia del usuario coherente en todos los modos de navegación. Cuando estableces esta propiedad en true, se produce la misma animación tanto si la navegación es táctil, con botones o mediante programación.

Encabezados para controles ComboBox, DatePicker, TimePicker, Slider y Edit

[Obtén la muestra de controles XAML esenciales ahora.]

Algunos controles, como ComboBox, suelen ir acompañados de una etiqueta que describe el contexto del control. Agregar una etiqueta a estos controles puede resultar incómodo y requiere el uso de elementos adicionales, como objetos TextBlock y StackPanel, para obtener el diseño correcto.

Windows 8.1 agrega las propiedades Header y HeaderTemplate a varios controles para que resulte más cómodo etiquetarlos. Estos controles tienen las propiedades nuevas:

El Header predeterminado no puede someterse a pruebas de posicionamiento y no acepta el foco, ni las entradas de mouse o teclado. Un valor de cadena null o vacío crea un encabezado vacío. Un encabezado vacío no acepta espacios ni afecta al diseño.

Puedes usar una HeaderTemplate si necesitas algo más que un encabezado de texto sencillo. Una HeaderTemplate puede contener cualquier XAML válido, incluidos los elementos que pueden someterse a pruebas de posicionamiento, como un Button.

Aquí puedes ver cómo agregar un Header a un ComboBox y un PasswordBox.


<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

Ese ejemplo crea estos controles.

Un ComboBox con encabezado

 

Un PasswordBox con encabezado

 

En el ejemplo siguiente, una HeaderTemplate en un RichEditBox de solo lectura contiene un control Button. Cuando el usuario hace clic en el botón, el cuadro de edición enriquecida puede editarse y el encabezado cambia.


<RichEditBox x:Name="richTextBox1" IsReadOnly="True">
    <RichEditBox.HeaderTemplate>
        <DataTemplate>
            <Button Content="Click to edit" Click="Button_Click"/>
        </DataTemplate>
    </RichEditBox.HeaderTemplate>
</RichEditBox>


private void Button_Click(object sender, RoutedEventArgs e)
{
    richTextBox1.IsReadOnly = false;
    richTextBox1.HeaderTemplate = null;
    richTextBox1.Header = "Editable RichEditBox";
}

Ese ejemplo crea este control RichEditBox.

Un RichEditBox con plantilla de encabezado

 

Cuando el usuario hace clic en el botón, el cuadro de edición enriquecida puede editarse y el encabezado cambia, del siguiente modo:

Un RichEditBox con encabezado

 

PlaceholderText

Windows 8.1 agrega la propiedad PlaceholderText a varios controles que contienen texto. Algunos controles, como ComboBox o PasswordBox, pueden requerir la entrada del usuario. Si no quieres asumir un valor predeterminado o mostrar un control vacío, puedes agregar texto de marcador de posición para ofrecer contexto al usuario.

Estos controles tienen la propiedad nueva PlaceholderText:

En un ComboBox, el texto de marcador de posición se muestra cuando el valor de SelectedIndex es -1 y el valor de SelectedItem es null. (Estas dos propiedades se mantienen sincronizadas). Un usuario no puede mostrar el texto de marcador de posición cuando ya se ha seleccionado un elemento. Sin embargo, mediante programación puedes configurar SelectedIndex en -1 o SelectedItem en null para hacer que el texto de marcador de posición vuelva a mostrarse.

En los controles de edición de texto, el texto de marcador de posición se muestra cuando los controles están vacíos. El usuario puede devolver el control a su estado eliminando todo el texto de los controles.

Aquí puedes ver cómo agregar texto de marcador de posición a un ComboBox y un PasswordBox.


<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

Ese ejemplo crea estos controles:

Un ComboBox con encabezado

 

Un PasswordBox con encabezado

 

Actualizaciones de WebView

[Obtén la muestra del control XAML WebView ahora.]

Windows 8.1 hace que sea mucho más sencillo incluir contenido web y HTML en tus aplicaciones. En Windows 8.1, el control WebView corrige varios problemas y agrega nueva funcionalidad, como por ejemplo:

Windows 8.1 deja de utilizar los siguientes elementos de API de WebView:

Estos cambios no afectan a las aplicaciones de Windows 8 que se ejecutan en Windows 8.1.

Representación del árbol XAML en un mapa de bits

Windows en tiempo de ejecución para Windows 8.1 agrega un nuevo tipo al espacio de nombres Windows.UI.Xaml.Media.Imaging: RenderTargetBitmap.

Este tipo proporciona dos métodos clave:

  • RenderTargetBitmap.RenderAsync, que toma un árbol visual XAML y crea una representación de mapa de bits.

    Nota  Esta operación representa de forma asincrónica el árbol de elementos XAML proporcionado en un mapa de bits. Este método no está sincronizado con la actualización de pantalla y no garantiza la sincronización exacta de los marcos, por lo que puede ser que el mapa de bits se represente una fracción de segundo antes o después del momento de captura asumido.

  • RenderTargetBitmap.GetPixelsAsync, que devuelve una matriz de bytes de píxeles en un formato específico.

Aquí puedes ver cómo se representa un árbol de elementos XAML.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(myElementTree);

myImage.Source = renderTargetBitmap;

RenderTargetBitmap hereda de ImageSource, por lo que puede establecerse directamente como el origen de un objeto Image sin llamar a GetPixelsAsync para obtener y mostrar los datos de mapa de bits.

Aquí puedes ver cómo se escribe el mapa de bits representado en un archivo.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.Render(myElementTree);
var pixels = await renderTargetBitmap.GetPixelsAsync();

var picker = new FileSavePicker();
// Picker setup
var file = await picker.PickSaveFileAsync();
// File validation

using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    var encoder = await 
        BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);
    
    encoder.SetPixelData(BitmapPixelFormat.Rgba8, 100, 0, 96, 96,         
        await renderTargetBitmap.GetPixelsAsync());
        
    await encoder.FlushAsync();
}

Otras actualizaciones de controles

  • Mejoras de ScrollViewer de XAML:

    Windows 8.1 agrega propiedades ScrollViewer (TopHeader, LeftHeader y TopLeftHeader) que te permiten definir áreas inmóviles similares a los paneles inmóviles de Microsoft Excel. Estas áreas incluyen contenido que no puede desplazarse o que se desplaza únicamente en una dirección y conjuntamente con el contenido principal. El encabezado superior izquierdo no se desplaza, el encabezado izquierdo se desplaza verticalmente pero no horizontalmente y el encabezado superior se desplaza horizontalmente pero no verticalmente.

  • Mejoras de enlace de datos XAML:

    Windows 8.1 agrega los siguientes elementos de API:

    • El evento FrameworkElement.DataContextChanged te permite responder a los cambios de valor de la propiedad DataContext. Puedes usar este evento para actualizar manualmente las propiedades del control en lugar de usar el enlace de datos. Esto es útil para poder hacer frente a los problemas de rendimiento del enlace de datos.

    • Las propiedades Binding.FallbackValue y Binding.TargetNullValue te permiten establecer valores predeterminados que se mostrarán cuando un enlace no pueda resolver un valor o cuando dé como resultado un valor null.

    • La propiedad Binding.UpdateSourceTrigger, el método FrameworkElement.GetBindingExpression y la clase BindingExpression te permiten cambiar el comportamiento predeterminado de los enlaces bidireccionales en la propiedad TextBox.Text. De forma predeterminada, los enlaces TextBox.Text actualizan su origen de enlace únicamente cuando el control pierde el foco. Establece UpdateSourceTrigger en PropertyChanged para actualizar el origen cuando cambie el valor de la propiedad TextBox.Text. Establece UpdateSourceTrigger en Explicit para actualizar el origen mediante programación a través del método BindingExpression.UpdateSource.

  • Mejoras de navegación XAML:

    Windows 8.1 agrega los siguientes elementos de API:

    • Nuevas propiedades de Frame BackStack, ForwardStack, BackStackProperty y ForwardStackProperty. Usa estas propiedades para cambiar mediante programación las pilas de navegación hacia atrás y hacia delante, agregando o quitando objetos PageStackEntry. Esto es útil, por ejemplo, cuando se quita una página de inicio de sesión del historial de navegación después de que el usuario haya iniciado sesión o se borra la pila de navegación cuando se reinicia la aplicación con un contrato de activación distinto.

    • Una sobrecarga de Frame.Navigate que toma un valor de parámetro NavigationTransitionInfo. Usa esta sobrecarga para navegar a una página mediante una transición animada específica, en lugar de cualquier transición definida en el XAML de la página. También puedes acceder al valor del parámetro en controladores de eventos de navegación a través de las clases NavigationEventArgs y NavigatingCancelEventArgs.

    • Una propiedad NavigatingCancelEventArgs.Parameter. Usa esta propiedad cuando necesites cancelar una navegación en función de los valores de parámetros de navegación.

  • Temas dinámicos:

    En Windows 8, los temas claros y oscuros para alto contraste se cargan cuando se inicia la aplicación. Pero si el usuario ha cambiado el tema mientras se estaba ejecutando la aplicación, el sistema de temas de XAML no lo puede detectar y los temas no cambian en la aplicación. En Windows 8.1, el sistema de temas de XAML puede detectar los cambios de tema en tiempo de ejecución y recargar los recursos. Los recursos predeterminados compartidos para controles XAML realizan esto de forma automática en Windows 8.1. Para habilitar este comportamiento en una plantilla personalizada definida por ti, haz referencia al recurso específico del tema mediante la nueva extensión de marcado ThemeResource. Cualquier recurso que definas de forma diferente por tema se define a continuación en varios diccionarios de recursos, uno por tema. Estos diccionarios de recursos se combinan en el conjunto global de recursos definidos por XAML en una aplicación. El diccionario correcto se carga dinámicamente cuando el sistema detecta un cambio de tema, incluso si se produce mientras se ejecuta la aplicación.

  • Aplicación de temas por control:

    En Windows 8, el tema se establece mediante la propiedad Application.RequestedTheme y se aplica a toda la interfaz de usuario de la aplicación. Application.RequestedTheme no se puede cambiar en tiempo de ejecución. En Windows 8.1, puedes solicitar que cualquier elemento específico de la interfaz de usuario utilice un tema que sea distinto al Application.RequestedTheme en el que se configure. Para ello, debes establecer RequestedTheme como un atributo en el elemento o los elementos en los que quieras usar un tema distinto. Este RequestedTheme es una propiedad de la clase FrameworkElement y, por lo tanto, existe básicamente en cualquier elemento de la interfaz de usuario. El valor de RequestedTheme por elemento puede establecerse en tiempo de ejecución.

  • GetOpenPopups:

    Cuando creas un control Popup de XAML, no existe en el árbol visual. Si quieres cerrar elementos emergentes porque se ha suspendido la navegación o por otros motivos y no has guardado una referencia, puede ser difícil encontrar y cerrar los elementos Popup con código de Windows 8. Windows 8.1 presenta la API VisualTreeHelper.GetOpenPopups para que puedas disponer de una utilidad que devuelva todos los elementos emergentes abiertos en forma de lista. Luego puedes establecer IsOpen en false en cualquier elemento emergente que quieras cerrar.

  • Accesibilidad y automatización de la interfaz de usuario:

    Windows 8.1 agrega elementos del mismo nivel para determinados controles que existían en Windows 8 pero que usaban FrameworkElementAutomationPeer como soporte. Por ejemplo, el control AppBar tiene un elemento del mismo nivel dedicado. Si estás creando elementos del mismo nivel personalizados para clases, puedes usarlos como base y reutilizar las implementaciones de API de patrón existentes al implementar tu propio elemento del mismo nivel de automatización de la interfaz de usuario de Microsoft. También se incluye soporte de código administrado para los diseños que se agregaron al marco global de automatización de la interfaz de usuario para Windows 8. Por ejemplo, hay una interfaz de IStylesProvider que puedes usar para implementar el diseño de Styles en un control XAML del mismo nivel. Por último, hay una propiedad adjunta AccessibilityView en el nivel de la aplicación. Puedes usarla para ajustar el modo en que aparece un determinado elemento de la interfaz de usuario en las diversas representaciones de automatización de la interfaz de usuario que ve un cliente de automatización de la interfaz de usuario; por ejemplo, si el elemento aparece en el árbol de contenido o en el árbol de controles.

  • Propiedad MaxLines:

    (Se aplica a los controles TextBlock, RichTextBlock y RichTextBlockOverflow)

    Esta propiedad te permite especificar el número máximo de líneas de texto que se muestran en un bloque de texto. El control de texto ajustará su alto para mostrar como máximo el número de líneas especificado, independientemente del tamaño de fuente, estilo de fuente o longitud de texto.

  • Propiedad PreventKeyboardDisplayOnProgrammaticFocus:

    (Se aplica a los controles TextBox, RichEditBox y PasswordBox)

    Establece esta propiedad en true para evitar que el teclado táctil en pantalla aparezca cuando el foco se haya establecido mediante programación en un cuadro de texto. De forma predeterminada, el teclado táctil se muestra cuando el foco se mueve a un cuadro de texto y la entrada más reciente se ha generado de forma táctil. Esto ocurre si se ha establecido el foco mediante programación o a través de la interacción del usuario. En algunas situaciones, es posible que no quieras que el teclado aparezca cuando se ha establecido el foco mediante programación. Por ejemplo, quizás quieras evitar que el teclado cubra parte de la interfaz de usuario hasta que el usuario esté listo para continuar su interacción.

  • Propiedad SelectionHighlightColor:

    (Se aplica a los controles TextBlock, TextBox, RichEditBox, RichTextBlock y PasswordBox)

    Puedes especificar un SolidColorBrush para cambiar el color de resaltado de un control de texto de manera que coincida con la personalización de marca de tu aplicación.

  • Evento Paste:

    (Se aplica a los controles TextBox, RichEditBox y PasswordBox)

    Puedes proporcionar administración personalizada del evento Paste en controles de texto editables de tu aplicación.

  • Valor TextWrapping.WrapWithOverflow:

    Usa este valor cuando no quieras que se ajuste el texto en mitad de una palabra. La última palabra se desbordará del bloque de texto en lugar de ajustarse.

    Con este valor, se produce un salto de línea si la línea se desborda más allá del ancho del bloque disponible. Sin embargo, una línea puede desbordarse más allá del ancho de bloque si el algoritmo de salto de línea no puede determinar una oportunidad de salto de línea, como ocurre en una palabra muy larga restringida en un contenedor de ancho fijo donde no se permite el desplazamiento.

  • Valor TextTrimming.Clip:

    Con este valor, el texto se recorta en el nivel de píxel y se recorta visualmente el exceso de glifos.

  • Valor TextTrimming.CharacterEllipsis:

    Con este valor, el texto se recorta en el límite de un carácter y no en el límite de una palabra. Se dibujan puntos suspensivos ("...") en lugar del texto restante

 

 

Mostrar:
© 2014 Microsoft