Aplicativos do Windows
Recolher sumário
Expandir sumário

Controles (XAML com C#/C++/VB)

Adicione novos recursos ao seu aplicativo da Windows Store, inclusive seletores de data e hora e suporte à navegação melhorada, com os novos controles XAML no Windows 8.1. Com as atualizações, os controles existentes ficam mais fáceis de usar e mais versáteis. Esses novos controles e as atualizações dos controles tornam mais fácil que nunca criar um aplicativo com recursos completos.

Novos controles e novas atualizações de controles

O Windows 8.1 apresenta estes novos controles e recursos:

O Windows 8.1 inclui atualizações para estes controles existentes:

Controles AppBar

[Obtenha o exemplo de controle XAML AppBar agora.]

O Windows 8.1 introduz novos controles para XAML que permitem criar mais facilmente botões de comandos da barra de aplicativos, os quais refletem os comportamentos e as diretrizes de design adequados: os controles AppBarButton, AppBarToggleButton e AppBarSeparator.

Botões da barra de aplicativos para XAML

 

Os botões da barra de aplicativos são diferentes dos botões padrão em várias coisas:

  • Sua aparência padrão é de um círculo, em vez de um retângulo.

  • Você usa as propriedades Label e Icon e não a propriedade Content para definir o conteúdo. A propriedade Content é ignorada.

  • A propriedade IsCompact do botão controla seu tamanho.

Os controles de botão da barra de aplicativos têm dois tamanhos: normal e compacto. Por padrão, eles têm um rótulo de texto e preenchimento total. Quando a propriedade IsCompact é definida como true, o rótulo de texto fica oculto e o preenchimento ao redor dos botões é reduzido. O AppBarSeparator também tem um estado compacto com preenchimento reduzido.

Veja aqui os mesmos comandos mostrados antes, mas no estado compacto.

Botões compactos da barra de aplicativos

 

Quando você usa os controles da barra de aplicativos no novo controle da CommandBar, a CommandBar define sua propriedade IsCompact automaticamente. Se usar um botão da barra de aplicativos fora de uma CommandBar, como em uma AppBar ou na tela do aplicativo, você precisará definir a propriedade IsCompact de forma adequada no código.

Você pode usar botões da barra de aplicativos fora de uma barra de aplicativos. Um exemplo comum é usar um botão da barra de aplicativos como botão voltar em um cabeçalho de página. Quando um botão é usado fora da barra de aplicativos, as diretrizes do Windows indicam que ele deve estar sempre no estado compacto.

Use as propriedades Label e Icon para definir o conteúdo dos botões da barra de aplicativos. Defina a propriedade Label como uma cadeia de caracteres para especificar o rótulo de texto. O rótulo é mostrado por padrão, mas fica oculto quando o botão está em estado compacto. Por isso, você também precisa especificar um ícone significativo. Para fazer isso, defina a propriedade Icon do botão para um elemento derivado da nova classe IconElement. São fornecidos quatro tipos de elementos de ícone:

  • FontIcon—O ícone se baseia em um glifo da família de fontes especificada.

  • BitmapIcon—O ícone se baseia em um arquivo de imagem de bitmap com o Uri especificado.

  • PathIcon—O ícone se baseia em dados de Path.

  • SymbolIcon—O ícone se baseia em uma lista predefinida de glifos da fonte Segoe UI Symbol.

Criando um botão da barra de aplicativos

Este exemplo mostra como criar controles AppBarButton, AppBarSeparator e AppBarToggleButton com cada tipo de ícone.


<!-- 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>

Esse exemplo de código cria esses controles.

Exemplos de ícones de botões da barra de aplicativos.

 

CommandBar

[Obtenha o exemplo de controle XAML AppBar agora.]

O Windows 8.1 introduz um novo controle para XAML que permite criar facilmente barras de aplicativos projetadas corretamente: o controle CommandBar.

A barra de comandos

 

A CommandBar torna a criação de barras de aplicativos básicas mais simples, com:

  • Layout automático de comandos com comandos principais à direita e comandos secundários à esquerda.

  • Redimensionamento automático de comandos da barra de aplicativos quando o tamanho do aplicativo muda.

Quando precisar de uma barra de aplicativos que contenha apenas controles AppBarButton,AppBarToggleButton e AppBarSeparator, use esta nova CommandBar. Se precisa de conteúdo mais complexo, como imagens, barras de progresso ou blocos de texto, use um controle AppBar.

Por padrão, os itens que você adiciona à CommandBar são adicionados à coleção de PrimaryCommands. Esses comandos são mostrados no lado direito da CommandBar. Você também pode adicionar comandos à coleção de SecondaryCommands e estes itens são mostrados no lado esquerdo.

Os controles de botão da barra de aplicativos têm dois tamanhos: normal e compacto. Por padrão, eles têm um rótulo de texto e preenchimento total. Quando a propriedade IsCompact é definida como true, o rótulo de texto fica oculto e o preenchimento ao redor dos botões é reduzido. O AppBarSeparator também tem um estado compacto com preenchimento reduzido. Quando você usa esses controles no novo controle CommandBar, ele define sua propriedade IsCompact automaticamente quando não há espaço suficiente para mostrá-los no tamanho completo.

Veja aqui os mesmos comandos principais mostrados antes, mas no estado compacto.

A barra de comandos com botões compactos

 

Criando uma CommandBar

Este exemplo cria a barra de comando 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

[Obtenha os exemplos de controles XAML DatePicker e TimePicker agora.]

O Windows 8.1 apresenta um novo controle para XAML que permite que o usuário defina uma data localizada no aplicativo: o controle DatePicker.

O seletor de data

 

O seletor de data oferece uma maneira padronizada de permitir que os usuários escolham uma data localizada usando o toque, o mouse ou os métodos de entrada do teclado. Você pode usar o controle DatePicker em sua forma padrão com uma quantidade mínima de XAML ou outro código ou pode personalizá-lo de diversas maneiras.

O DatePicker é compatível com todos os sistemas de calendário com suporte no Windows. Esses nove calendários são especificados na classe Windows.Globalization.CalendarIdentifiers. O DatePicker usa o calendário correto para o idioma padrão de seu aplicativo, ou você pode definir a propriedade CalendarIdentifier para usar um sistema de calendário específico.

Criando um DatePicker

Este exemplo mostra como criar um DatePicker simples com um cabeçalho


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

Esse DatePicker tem esta aparência quando o seletor de dia está aberto.

Um seletor de data com o seletor de dia aberto

 

Você pode definir a data no código ou vincular o controle a uma instância de DateTimeOffset. Aqui, o DatePicker é definido no código com o padrão de 2 meses a partir da data de hoje, e o ano mínimo é definido como o atual.


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;
}

Você pode formatar o texto em cada ComboBox usando modelos de formato padrão. Este exemplo mostra como formatar o campo de dia para mostrar o dia do mês e o dia da semana abreviado. O campo de ano fica oculto porque a propriedade YearVisible é definida como False.


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

Este exemplo cria este DatePicker.

Seletor de data com o ano oculto

 

O DatePicker também dá suporte a layouts verticais, por meio da definição de sua propriedade Orientation. E é altamente personalizável: você pode usar Estilos e Modelos para personalizar quase qualquer aspecto do DatePicker e seu conteúdo.

Flyout

[Obtenha o exemplo XAML de Flyout e MenuFlyout agora.]

O Windows 8.1 apresenta um novo controle para XAML que permite mostrar temporariamente a interface do usuário referente ao que ele está fazendo agora: o controle Flyout.

Um botão com um submenu

 

Um Flyout mostra a interface do usuário leve (chamado de submenu) que é informativa ou requer interação do usuário. Diferentemente de uma caixa de diálogo, é possível ignorar um submenu de maneira simples, clicando ou tocando fora dele. Ele é usado para coletar entradas do usuário, mostrar mais detalhes de um item ou pedir que o usuário confirme uma ação. Um submenu deve ser mostrado somente em resposta a um toque ou clique do usuário e é sempre ignorado quando o usuário toca fora dele.

É comum anexar um submenu a um botão, para que o controle Button tenha uma nova propriedade Flyout para simplificar as ações de anexar e abrir um controle Flyout. Um submenu anexado a um botão é aberto automaticamente quando o botão é clicado.

Você também pode conectar um controle Flyout a qualquer objeto FrameworkElement usando a propriedade anexada FlyoutBase.AttachedFlyout. Se fizer isso, você deverá responder a uma interação no FrameworkElement, como Tapped, e abrir o Flyout em seu código.

Criando um submenu

Este exemplo cria o controle Button com um Flyout que foi mostrado na ilustração 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>

O próximo exemplo mostra um Flyout anexado a um TextBlock. Como observado anteriormente, você pode anexar um Flyout a qualquer FrameworkElement usando a propriedade anexada 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 esse Flyout, manipule o evento Tapped e chame o método FlyoutBase.ShowAttachedFlyout.


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

O bloco de texto tem a aparência a seguir.

Texto com o submenu fechado

 

Quando o bloco de texto é tocado, o submenu que contém o controle TextBox é aberto e o texto pode ser alterado.

Texto com o submenu aberto

 

Você pode criar um Flyout como um recurso e usá-lo em mais de um controle. Aqui, um Flyout é definido como um recurso e compartilhado entre dois controles diferentes.


<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 saber mais sobre o Flyout, veja Guia de início rápido: adicionando um submenu.

Hub

[Obtenha o exemplo de controle XAML Hub agora.]

O Windows 8.1 introduz um novo controle para XAML que permite criar facilmente o padrão de design de hub, que reflete os comportamentos e as diretrizes de design adequados: o controle Hub.

Uma página de hub

 

As páginas de hub são o ponto de entrada do usuário em seu aplicativo. Elas mostram o conteúdo em uma rica exibição panorâmica em que os usuários têm uma prévia das novidades para que depois possam ir mais fundo no conteúdo de seu aplicativo. O hub mostra diferentes categorias de conteúdo, mapeadas para as páginas das seções do aplicativo. Cada seção deve fervilhar com conteúdos ou funcionalidades. O Hub deve oferecer ampla variedade visual, entreter os usuários e atraí-los para partes diferentes do aplicativo.

O controle Hub XAML fornece elementos para ajudá-lo a implementar mais facilmente o padrão de design de hub em seu aplicativo. Diferentemente de um controle GridView ou ListView que exibe dados de uma única fonte, cada seção do hub pode exibir dados de uma fonte diferente. Você pode usar qualquer conteúdo XAML para criar uma página de hub visualmente sofisticada. Para começar rapidamente, criando um aplicativo com uma página de Hub, use o modelo de Aplicativo Hub do Microsoft Visual Studio 2013.

A adição de um cabeçalho ao Hub permite que os usuários saibam qual é o contexto do hub. Normalmente, esse é o nome do aplicativo. Você pode usar um Header em texto simples ou definir um HeaderTemplate que use qualquer conteúdo XAML. É importante lembrar que, embora você possa usar qualquer conteúdo no cabeçalho, a altura do cabeçalho afeta o espaço vertical disponível para o conteúdo da seção do hub. O cabeçalho fica fixo na posição e não rola com as seções do hub.

Seções do hub

Você coloca o conteúdo do hub em vários controles HubSection. Assim como o hub, cada HubSection tem uma propriedade Header e HeaderTemplate que você pode usar para definir um cabeçalho opcional para a seção. Você também pode tornar o cabeçalho da seção interativo. Normalmente, o usuário pode tocar em um cabeçalho interativo para ir para a página da seção do aplicativo correspondente. Quando a propriedade IsHeaderInteractive é true, o cabeçalho padrão inclui um glifo de divisa, e os estados visuais "Focalizar" e "Pressionado". Se você usar um HeaderTemplate personalizado, forneça indicações visuais semelhantes para sinalizar que o cabeçalho é interativo.

Você não adiciona conteúdo diretamente a uma seção do hub; em vez disso, você define o conteúdo de HubSection em um objeto DataTemplate. O conteúdo pode ser definido como embutido ou pode ser associado a uma fonte de dados. Qualquer XAML válido pode ser usado em uma seção do hub.

Criando um hub

Este exemplo mostra o XAML básico usado para criar um controle 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>

O exemplo cria este Hub.

Um controle hub simples

 

Hiperlink

O Windows 8.1 adiciona o elemento Hyperlink ao modelo de objeto de texto XAML no namespace Windows.UI.Xaml.Documents.

O elemento Hyperlink permite adicionar hiperlinks a uma execução de texto. O hiperlink é tratado como o resto do texto e participa da quebra de linhas. Quando marcado como um hiperlink, o texto é mostrado em uma cor específica e, quando tocado, vai para o URI (Uniform Resource Identifier) especificado na propriedade NavigateUri.

Veja aqui um bloco de texto com um elemento Hyperlink inserido.

Texto com um hiperlink

 

Usando um elemento Hyperlink

Este exemplo cria o texto mostrado acima. O Hyperlink flui com o resto do texto e abre o Centro de Desenvolvimento do Windows quando um usuário toca nele.


<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

[Obtenha o exemplo XAML de Flyout e MenuFlyout agora.]

O Windows 8.1 apresenta um novo controle para XAML que permite mostrar temporariamente uma lista de comandos ou opções relacionados ao que o usuário está fazendo agora: o controle MenuFlyout.

Um botão com um submenu de menu

 

Um MenuFlyout mostra a interface do usuário leve (chamada de submenu de menu), que você pode ignorar de forma simples, clicando ou tocando fora dela. Use-o para que o usuário possa escolher comandos ou opções simples em uma lista contextual. Um submenu de menu deve ser mostrado somente em resposta a um toque ou clique do usuário e é sempre ignorado quando o usuário toca fora dele.

Você define o conteúdo do menu adicionando objetos MenuFlyoutItem, ToggleMenuFlyoutItem e MenuFlyoutSeparator ao MenuFlyout. Estes objetos servem para:

É comum anexar um submenu de menu a um botão, para que o controle Button tenha uma nova propriedade Flyout para simplificar as ações de anexar e abrir um MenuFlyout. Um submenu de menu anexado a um botão é aberto automaticamente quando o botão é clicado.

Você também pode conectar um controle MenuFlyout a qualquer objeto FrameworkElement usando a propriedade anexada FlyoutBase.AttachedFlyout. Se fizer isso, você deverá responder a uma interação em FrameworkElement, como Tapped, e abrir o MenuFlyout em seu código.

Criando um MenuFlyout

Este exemplo cria o controle Button com um MenuFlyout que foi mostrado na ilustração 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

[Obtenha o exemplo de configuração de Aplicativo agora.]

O Windows 8.1 introduz um novo controle para XAML que permite criar facilmente submenus de configurações de aplicativos, os quais refletem os comportamentos e as diretrizes de design adequados: o controle SettingsFlyout.

O SettingsFlyout

 

Assim como um controle Page, um controle SettingsFlyout pode ser declarado em XAML como um elemento raiz de um documento, com um atributo x:Class especificado para subclasse de SettingsFlyout. Você pode definir a largura do submenu de Configurações, mas a altura é sempre a altura total da tela.

O SettingsFlyout tem uma seção de cabeçalho e uma seção de conteúdo. O cabeçalho contém um botão voltar, o título e um ícone opcional. Defina o HeaderBackground e o HeaderForeground para corresponder às cores de seu aplicativo. Por padrão, o ícone mostra o ícone pequeno de seu aplicativo. Você pode especificar um ícone diferente definindo a propriedade IconSource. O botão voltar está sempre visível.

Mostrando e descartando o SettingsFlyout

Os usuários podem acessar um submenu Configurações por meio do botão Configurações. Você pode mostrar um controle SettingsFlyout de forma programática chamando o método Show ou ShowIndependent e ignorá-lo chamando seu método Hide.

Por padrão, o botão voltar ignora o submenu Configurações. Se um controle SettingsFlyout for mostrado por meio de uma chamada a Show, clicar no botão voltar fará com que o submenu seja ignorado e reabrirá o painel de configurações. Se um SettingsFlyout for mostrado por meio de uma chamada a ShowIndependent, clicar no botão voltar fará com que o submenu seja ignorado e levará o usuário de volta ao aplicativo. Por exemplo, se abrir um controle SettingsFlyout por meio de um botão configurações no aplicativo, você normalmente chamará ShowIndependent para que os usuários sejam levados diretamente de volta para seu aplicativo ao ignorar o submenu.

Apenas um controle SettingsFlyout pode ser mostrado de cada vez. Chamar Show em um SettingsFlyout fecha todos os outros SettingsFlyout mostrados.

Você pode substituir o comportamento padrão do botão voltar manipulando o evento BackClick. Esse evento é acionado sempre que o usuário clica no botão voltar. Para substituir o comportamento padrão, crie um manipulador de eventos para o evento e defina a propriedade BackClickEventArgs.Handled como true.

Conectando-se ao SettingsPane

Você deve associar manualmente o controle SettingsFlyout ao objeto SettingsPane do aplicativo. Para fazer isso, manipule o evento SettingsPane.CommandsRequested e adicione um SettingsCommand à coleção ApplicationCommands. O SettingsCommand tem um rótulo para seu SettingsFlyout que é mostrado no botão Configurações e especifica um método que é executado quando um usuário seleciona o comando no botão Configurações. Neste método, você cria uma instância do controle SettingsFlyout e o exibe.

Criando um SettingsFlyout

Bg182878.wedge(pt-br,WIN.10).gifPara adicionar um SettingsFlyout no Visual Studio

  1. Selecione Projeto > Adicionar Novo Item.

  2. Na caixa de diálogo Adicionar Novo Item, selecione Submenu de Configurações no painel central.

  3. Digite um nome para o arquivo de submenu Configurações e clique em Adicionar. Neste exemplo, o submenu Configurações é denominado UpdateSettingsFlyout.

    Observação  Ao adicionar o submenu Configurações, você está criando uma nova classe com o nome especificado, que é derivado do SettingsFlyout. Para criar uma instância do submenu Configurações, use o nome especificado, como new UpdateSettingsFlyout().

Este exemplo cria o controle SettingsFlyout mostrado na ilustração 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>

Este exemplo mostra como adicionar o SettingsFlyout ao painel Configurações.


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);
}

Este exemplo mostra como abrir o SettingsFlyout por meio de um botão em seu aplicativo.


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


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

TimePicker

[Obtenha os exemplos de controles XAML DatePicker e TimePicker agora.]

O Windows 8.1 apresenta um novo controle para XAML que permite que o usuário escolha um valor de hora no aplicativo: o controle TimePicker.

O TimePicker

 

O seletor de hora oferece uma maneira padronizada de permitir que os usuários escolham uma hora usando o toque, o mouse ou os métodos de entrada do teclado. Você pode usar o controle TimePicker em sua forma padrão com uma quantidade mínima de XAML ou outro código ou pode personalizá-lo de diversas maneiras. O TimePicker pode usar um relógio de 12 ou de 24 horas.

Criando um TimePicker

Este exemplo mostra como criar um TimePicker simples com um cabeçalho


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

Este exemplo mostra como criar um TimePicker com um relógio de 24 horas.


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

O TimePicker no exemplo tem a aparência a seguir. O seletor AM/PM fica automaticamente oculto.

TimePicker com relógio de 24 horas

 

Você pode definir a hora no código ou vincular o controle a uma instância de um TimeSpan. Aqui, o TimePicker é definido no código como padrão para 08:00


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

Você pode definir o incremento no seletor de minutos para um valor que faça sentido para o aplicativo. Aqui, o incremento de minutos é de 15 minutos.


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

O TimePicker neste exemplo tem esta aparência quando o seletor de minuto está aberto.

TimePicker com incrementos de 15 minutos

 

O TimePicker também dá suporte a layouts verticais, por meio da definição de sua propriedade Orientation. E é altamente personalizável: você pode usar Estilos e Modelos para personalizar quase qualquer aspecto do TimePicker e seu conteúdo.

Atualizações de FlipView

[Obtenha o exemplo de controle XAML FlipView agora.]

O controle XAML FlipView dá suporte a três modos de navegação: baseada em toque, baseada em botão e programática. Quando o usuário navega usando o toque, os itens do FlipView rolam suavemente para a exibição. Mas ao navegar usando o mouse, teclado ou de forma programática, não tem animação e os itens simplesmente aparecem na exibição. Isso resulta em uma experiência inconsistente entre os modos de navegação.

O Windows 8.1 adiciona a nova propriedade UseTouchAnimationsForAllNavigation ao controle FlipView para permitir uma experiência do usuário consistente para todos os modos de navegação. Quando você define essa propriedade como true, a mesma animação ocorre, independentemente de a navegação ser baseada em toque, baseada em botão ou programática.

Cabeçalhos para os controles ComboBox, DatePicker, TimePicker, Slider e edit

[Obtenha o exemplo de controles essenciais XAML agora.]

Alguns controles, como ComboBox, normalmente são acompanhados de um rótulo que descreve o contexto do controle. A adição de um rótulo a esses controles pode ser inconveniente e requer o uso de elementos extra, como objetos TextBlock e StackPanel, para formar o layout correto.

O Windows 8.1 adiciona as propriedades Header e HeaderTemplate a vários controles para que seja mais conveniente classificá-los. Estes controles têm as novas propriedades:

O Header padrão não pode ser submetido a testes de cliques e não aceita o foco ou a entrada do mouse ou do teclado. Um null ou um valor de cadeia de caracteres vazio cria um cabeçalho vazio. Um cabeçalho vazio não ocupa nenhum espaço, nem afeta o layout.

Você poderá usar um HeaderTemplate se precisar de mais do que um cabeçalho de texto simples. Um HeaderTemplate pode hospedar qualquer XAML válido, inclusive elementos que possam ser submetidos a testes de cliques, como um Button.

Veja como adicionar um Header a um ComboBox e a um 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"/>

Esse exemplo cria esses controles.

Uma ComboBox com cabeçalho

 

Uma PasswordBox com cabeçalho

 

No próximo exemplo, um HeaderTemplate em um RichEditBox somente leitura contém um controle Button. Quando o usuário clica no botão, a caixa de edição com formato torna-se editável e o cabeçalho é alterado.


<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";
}

Esse exemplo cria esse controle RichEditBox.

Uma RichEditBox com modelo de cabeçalho

 

Quando o usuário clica no botão, a caixa de edição com formato torna-se editável e o cabeçalho é alterado, da seguinte forma:

Uma RichEditBox com cabeçalho

 

PlaceholderText

O Windows 8.1 adiciona a propriedade PlaceholderText a vários controles que contêm texto. Alguns controles, como uma ComboBox ou PasswordBox, podem exigir a entrada do usuário. Quando você não quer pressupor um valor padrão ou mostrar um controle vazio, pode adicionar um texto de espaço reservado para dar contexto ao usuário.

Esses controles têm a nova propriedade PlaceholderText:

Em uma ComboBox, o texto do espaço reservado é mostrado quando o valor de SelectedIndex é -1 e o SelectedItem é null. (Essas duas propriedades são sincronizadas.) O usuário não pode mostrar o texto do espaço reservado depois que um item é selecionado. Mas você pode definir de forma programática SelectedIndex como -1 ou SelectedItem como null para fazer o texto do espaço reservado aparecer de novo.

Nos controles de edição de texto, o texto do espaço reservado é mostrado quando os controles estão vazios. O usuário pode fazer o controle voltar a esse estado excluindo todo o texto dos controles.

Veja como adicionar um texto de espaço reservado a uma ComboBox e uma 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"/>

Esse exemplo cria estes controles:

Uma ComboBox com cabeçalho

 

Uma PasswordBox com cabeçalho

 

Atualizações de WebView

[Obtenha o exemplo de controle XAML WebView agora.]

No Windows 8.1, é muito mais fácil hospedar conteúdo HTML e baseado na Web em seus aplicativos. No Windows 8.1, o controle WebView corrige vários problemas e adiciona novas funcionalidades, como:

O Windows 8.1 substitui os seguintes elementos da API de WebView:

Essas mudanças não afetam os aplicativos do Windows 8 executados no Windows 8.1.

Renderizando a árvore XAML para um bitmap

O Tempo de Execução do Windows 8.1 adiciona um novo tipo ao namespace Windows.UI.Xaml.Media.Imaging: RenderTargetBitmap.

Esse tipo fornece dois métodos principais:

  • RenderTargetBitmap.RenderAsync, que utiliza uma árvore visual XAML e cria uma representação de bitmap dela.

    Observação  Essa operação renderiza a árvore de elementos XAML fornecida de forma assíncrona para um bitmap. Esse método não é sincronizado com a atualização de tela e não garante uma temporização exata dos quadros, portanto, o bitmap pode ser renderizado uma fração de segundo antes ou depois do momento presumido da captura.
  • RenderTargetBitmap.GetPixelsAsync, que retorna uma matriz de bytes de pixels em um formato específico.

Veja como renderizar uma árvore de elementos XAML.

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

myImage.Source = renderTargetBitmap;

RenderTargetBitmap herda de ImageSource, então pode ser definido diretamente como a origem de um objeto Image, sem chamar GetPixelsAsync para obter e mostrar os dados do bitmap.

Veja como gravar o bitmap renderizado em um arquivo.

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();
}

Atualizações de outros controles

  • Aprimoramentos de XAML ScrollViewer:

    O Windows 8.1 adiciona as propriedades ScrollViewer (TopHeader, LeftHeader e TopLeftHeader) que permitem definir áreas "congeladas" semelhantes aos painéis congelados no Microsoft Excel. O conteúdo dessas áreas não rola ou rola apenas em uma direção, em conjunto com o conteúdo principal. O cabeçalho superior esquerdo não rola; o cabeçalho esquerdo rola na vertical, mas não na horizontal; e o cabeçalho superior rola na horizontal, mas não na vertical.

  • Aprimoramentos de vinculação de dados XAML:

    O Windows 8.1 adiciona os seguintes elementos da API:

    • O evento FrameworkElement.DataContextChanged permite responder a alterações no valor da propriedade DataContext. Você pode usar esse evento para atualizar propriedades de controle manualmente em vez de usar a vinculação de dados. Isso é útil para lidar com problemas de desempenho de vinculação de dados.

    • As propriedades Binding.FallbackValue e Binding.TargetNullValue permitem definir valores padrão para exibição quando uma vinculação não pode resolver um valor ou quando ele é resolvido como um valor null.

    • A propriedade Binding.UpdateSourceTrigger, o método FrameworkElement.GetBindingExpression e a classe BindingExpression permitem alterar o comportamento padrão das vinculações bidirecionais à propriedade TextBox.Text. Por padrão, vinculações de TextBox.Text atualizam sua origem de vinculação somente quando o controle perde o foco. Defina UpdateSourceTrigger como PropertyChanged para atualizar a origem sempre que o valor da propriedade TextBox.Text for alterado. Defina UpdateSourceTrigger como Explicit para atualizar a origem de forma programática usando o método BindingExpression.UpdateSource.

  • Aprimoramentos de navegação XAML:

    O Windows 8.1 adiciona os seguintes elementos da API:

    • Novas propriedades de Frame: BackStack, ForwardStack, BackStackProperty e ForwardStackProperty. Use essas propriedades para mudar de forma programática as pilhas de navegação para voltar e avançar, adicionando ou removendo objetos PageStackEntry. Isso é útil em cenários como a remoção de uma página de entrada do histórico de navegação depois que o usuário entra ou a limpeza da pilha de navegação quando o aplicativo é reiniciado com outro contrato de ativação.

    • Uma sobrecarga de Frame.Navigate que usa um valor de parâmetro NavigationTransitionInfo. Use essa sobrecarga para navegar para uma página usando uma transição animada específica, em vez de qualquer transição definida no XAML da página. Você também pode acessar o valor do parâmetro em manipuladores de eventos de navegação por meio das classes NavigationEventArgs e NavigatingCancelEventArgs.

    • Uma propriedade NavigatingCancelEventArgs.Parameter. Use essa propriedade para cancelar uma navegação de acordo com os valores de parâmetros da navegação.

  • Temas dinâmicos:

    No Windows 8, os temas claros e escuros para alto contraste eram carregados na inicialização do aplicativo. Mas se o usuário mudasse o tema enquanto o aplicativo era executado, o sistema XAML de temas não conseguia detectar isso e os temas não mudavam no aplicativo. No Windows 8.1, o sistema XAML de temas consegue detectar mudanças de tema em tempo de execução e recarregará os recursos. Os recursos padrão compartilhados de controles XAML fazem isso automaticamente no Windows 8.1. Para habilitar esse comportamento em um modelo personalizado que você mesmo define, referencie o recurso específico do tema usando a nova extensão de marcação ThemeResource. Qualquer recurso que você definir de forma diferente por tema será, então, definido em vários dicionários de recursos, um por tema. Esses dicionários de recursos são mesclados ao conjunto global de recursos definidos por XAML para um aplicativo. O dicionário correto é carregado dinamicamente quando o sistema detecta uma alteração de tema, mesmo que isso aconteça enquanto o aplicativo está sendo executado.

  • Aplicando temas por controle:

    No Windows 8, o tema é definido usando a propriedade Application.RequestedTheme e se aplica a toda a interface do usuário no aplicativo. Application.RequestedTheme não pode ser alterado no tempo de execução. No Windows 8.1, você pode solicitar que qualquer elemento específico da interface do usuário use um tema diferente do que estiver definido para Application.RequestedTheme. Para fazer isso, defina RequestedTheme como um atributo no elemento ou nos elementos em que você quer usar um tema diferente. Esse RequestedTheme é uma propriedade da classe FrameworkElement e, assim, existe em basicamente todos os elementos da interface do usuário. O valor RequestedTheme por elemento pode ser definido no tempo de execução.

  • GetOpenPopups:

    Quando você cria um controle XAML Popup, ele não existe na árvore visual. Se você quiser fechar pop-ups devido a navegação, suspensão ou outros motivos e não tiver salvo uma referência, poderá ser difícil encontrar e fechar os elementos Popup com código do Windows 8. O Windows 8.1 introduz a API VisualTreeHelper.GetOpenPopups, para que você tenha um utilitário que retorna todos os pop-ups abertos como uma lista. Você poderá, então, definir IsOpen como false em qualquer pop-up que quiser fechar.

  • Acessibilidade e Automação da Interface do Usuário:

    O Windows 8.1 adiciona pares para certos controles que existiam no Windows 8, mas usavam a classe FrameworkElementAutomationPeer para suporte. Por exemplo, o controle AppBar tem um par dedicado. Se você está criando pares personalizados para classes, pode usar esses pares como base e reutilizar o as implementações de API de padrão existente ao implementar seu próprio par Automação da Interface do Usuário da Microsoft. Também há suporte para código gerenciado, para padrões que foram adicionados à estrutura geral de Automação da Interface do Usuário do Windows 8. Por exemplo, há uma interface IStylesProvider que você pode usar para implementar o padrão Styles em um par de controles XAML. Finalmente, há uma propriedade anexada AccessibilityView no nível do aplicativo. Ela pode ser usada para ajustar como um determinado elemento da interface do usuário aparece nas várias representações da árvore que o cliente de Automação da Interface do Usuário vê—por exemplo, se o elemento aparece na árvore de conteúdo ou na árvore de controle.

  • Propriedade MaxLines:

    (Aplica-se aos controles TextBlock, RichTextBlock e RichTextBlockOverflow)

    Essa propriedade permite especificar o número máximo de linhas de texto mostradas em um bloco de texto. O controle de texto ajusta sua altura para não mostrar mais que o número de linhas especificado, independentemente do tamanho da fonte, do estilo da fonte ou do comprimento do texto.

  • Propriedade PreventKeyboardDisplayOnProgrammaticFocus:

    (Aplica-se aos controles TextBox, RichEditBox e PasswordBox)

    Defina esta propriedade como true para impedir que o teclado virtual na tela seja mostrado quando o foco é definido de forma programática em uma caixa de texto. Por padrão, o teclado virtual aparece sempre que o foco está em uma caixa de texto editável e a entrada mais recente foi gerada por toque. Isso acontece independentemente do foco ser definido de forma programática ou pela interação do usuário. Em algumas situações, você pode não querer que o teclado seja mostrado quando o foco é definido de forma programática. Por exemplo, você pode evitar que o teclado cubra parte da interface do usuário até que o usuário esteja pronto para continuar uma interação.

  • Propriedade SelectionHighlightColor:

    (Aplica-se aos controles TextBlock, TextBox, RichEditBox, RichTextBlock e PasswordBox)

    Você pode especificar um SolidColorBrush para mudar a cor de destaque do controle do texto para combinar com a identidade visual de seu aplicativo.

  • Evento Paste:

    (Aplica-se aos controles TextBox, RichEditBox e PasswordBox)

    Você pode fornecer tratamento personalizado do evento Paste em controles de texto editáveis em seu aplicativo

  • Valor de TextWrapping.WrapWholeWords:

    Use esse valor para que não ocorram quebras no meio de palavras. A última palavra fará o bloco de texto estourar, em vez de ser quebrado.

    Com esse valor, a quebra de linha ocorre quando a linha vai além da largura do bloco disponível. Mas uma linha pode estourar além da largura do bloco, quando o algoritmo de quebra de linha não consegue determinar uma oportunidade de quebra de linha. Isso ocorre, por exemplo, no caso de uma palavra muito longa restrita em um contêiner de largura fixa sem rolagem.

  • Valor de TextTrimming.Clip:

    Com esse valor, o texto é cortado em nível de pixel, recortando visualmente os glifos em excesso.

  • Valor de TextTrimming.CharacterEllipsis:

    Com esse valor, o texto é cortado no limite de um caractere e não no limite de uma palavra. Um sinal de reticências ("...") é desenhado no lugar do texto restante.

 

 

Mostrar:
© 2017 Microsoft