Layouts dinâmicos com XAMLResponsive layouts with XAML

O sistema de layout XAML fornece dimensionamento automático de elementos, painéis de layout e estados visuais para ajudar você a criar uma interface do usuário dinâmica.The XAML layout system provides automatic sizing of elements, layout panels, and visual states to help you create a responsive UI. Com um layout dinâmico, é possível aprimorar a aparência do aplicativo em telas com diferentes tamanhos, resoluções, densidades de pixel e orientações de janela.With a responsive layout, you can make your app look great on screens with different app window sizes, resolutions, pixel densities, and orientations. Também é possível usar o XAML para reposicionar, redimensionar, refluir, mostrar/ocultar, substituir e reformular a interface do usuário do aplicativo, conforme discutido em Técnicas de design dinâmicas.You can also use XAML to reposition, resize, reflow, show/hide, replace, or re-architect your app's UI, as discussed in Responsive design techniques. Discutiremos aqui como implementar layouts dinâmicos com o XAML.Here, we discuss how to implement responsive layouts with XAML.

Layouts fluidos com propriedades e painéisFluid layouts with properties and panels

A base de um layout dinâmico é o uso apropriado de propriedades e painéis de layout XAML para reposicionar, redimensionar e refluir o conteúdo de maneira fluida.The foundation of a responsive layout is the appropriate use of XAML layout properties and panels to reposition, resize, and reflow content in a fluid manner.

O sistema de layout XAML dá suporte a layouts estáticos e fluidos.The XAML layout system supports both static and fluid layouts. Em um layout estático, você pode dar posições e tamanhos de pixel explícitos aos controles.In a static layout, you give controls explicit pixel sizes and positions. Quando o usuário altera a resolução ou a orientação de seu dispositivo, a interface do usuário não é alterada.When the user changes the resolution or orientation of their device, the UI doesn't change. Layouts estáticos podem ser recortados em diferentes fatores forma e tamanhos de tela.Static layouts can become clipped across different form factors and display sizes. Por outro lado, os layouts fluidos reduzem, crescem e refluem para responderem ao espaço visual disponível em um dispositivo.On the other hand, fluid layouts shrink, grow, and reflow to respond to the visual space available on a device.

Na prática, você usa uma combinação de elementos estáticos e fluidos para criar sua interface do usuário.In practice, you use a combination of static and fluid elements to create your UI. Você ainda usa elementos e valores estáticos em alguns lugares, mas verifique se a interface do usuário geral responde a diferentes resoluções, tamanhos de tela e modos de exibição.You still use static elements and values in some places, but make sure that the overall UI is responsive to different resolutions, screen sizes, and views.

Discutiremos aqui como usar painéis de layout e propriedades XAML para criar um layout fluido.Here, we discuss how to use XAML properties and layout panels to create a fluid layout.

Propriedades do layoutLayout properties

As propriedade de layout controlam o tamanho e a posição de um elemento.Layout properties control the size and position of an element. Para criar um layout fluido, use o dimensionamento automático ou proporcional de elementos e permita que os painéis de layout posicionem seus filhos conforme necessário.To create a fluid layout, use automatic or proportional sizing for elements, and allow layout panels to position their children as needed.

Aqui estão algumas propriedades de layout comuns e como usá-las para criar layouts fluidos.Here are some common layout properties and how to use them to create fluid layouts.

Height e WidthHeight and Width

As propriedades Height e Width especificam o tamanho de um elemento.The Height and Width properties specify the size of an element. Você pode usar valores fixos medidos em pixels efetivos, ou usar o dimensionamento automático ou proporcional.You can use fixed values measured in effective pixels, or you can use auto or proportional sizing.

O dimensionamento automático redimensiona os elementos de interface do usuário para caber no contêiner de conteúdo ou pai.Auto sizing resizes UI elements to fit their content or parent container. Você também pode usar o dimensionamento automático com as linhas e as colunas de uma grade.You can also use auto sizing with the rows and columns of a grid. Para usar o dimensionamento automático, defina Height e/ou Width dos elementos de interface do usuário como Auto.To use auto sizing, set the Height and/or Width of UI elements to Auto.

Observação

O redimensionamento de um elemento para seu conteúdo ou seu contêiner depende de como o contêiner pai manipula o dimensionamento dos filhos.Whether an element resizes to its content or its container depends on how the parent container handles sizing of its children. Para obter mais informações, confira Painéis de layout posteriormente neste artigo.For more info, see Layout panels later in this article.

O dimensionamento proporcional, também chamado de dimensionamento em estrela, distribui o espaço disponível entre as linhas e as colunas de uma grade segundo proporções ponderadas.Proportional sizing, also called star sizing, distributes available space among the rows and columns of a grid by weighted proportions. Em XAML, os valores estrela são expressos como * (ou n* para dimensionamento em estrela ponderado).In XAML, star values are expressed as * (or n* for weighted star sizing). Por exemplo, para especificar se uma coluna é cinco vezes mais larga do que a segunda coluna em um layout de duas colunas, use "5*" e "*" para as propriedades Width nos elementos ColumnDefinition.For example, to specify that one column is 5 times wider than the second column in a 2-column layout, use "5*" and "*" for the Width properties in the ColumnDefinition elements.

Esse exemplo integra dimensionamentos fixo, automático e proporcional em um Grid com quatro colunas.This example combines fixed, auto, and proportional sizing in a Grid with 4 columns.

ColunaColumn DimensionamentoSizing DescriçãoDescription
Coluna_1Column_1 AutomáticoAuto A coluna será dimensionada para ajustar o conteúdo.The column will size to fit its content.
Coluna_2Column_2 * Depois que as colunas Auto forem calculadas, a coluna obterá parte da largura remanescente.After the Auto columns are calculated, the column gets part of the remaining width. Column_2 terá metade da largura de Column_4.Column_2 will be one-half as wide as Column_4.
Coluna_3Column_3 4444 A coluna terá 44 pixels de largura.The column will be 44 pixels wide.
Coluna_4Column_4 2*2* Depois que as colunas Auto forem calculadas, a coluna obterá parte da largura remanescente.After the Auto columns are calculated, the column gets part of the remaining width. Column_4 terá o dobro da largura de Column_2.Column_4 will be twice as wide as Column_2.

Como a largura da coluna padrão é "*", você não precisa definir explicitamente esse valor para a segunda coluna.The default column width is "*", so you don't need to explicitly set this value for the second column.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

No designer XAML do Visual Studio, o resultado fica assim.In the Visual Studio XAML designer, the result looks like this.

Uma grade de quatro colunas no designer do Visual Studio

Para obter o tamanho de um elemento em runtime, use as propriedades somente leitura ActualHeight e ActualWidth, em vez de Height e Width.To get the size of an element at runtime, use the read-only ActualHeight and ActualWidth properties instead of Height and Width.

Restrições de tamanhoSize constraints

Ao usar o dimensionamento automático na interface do usuário, você talvez ainda precise fazer restrições ao tamanho de um elemento.When you use auto sizing in your UI, you might still need to place constraints on the size of an element. Você pode definir as propriedades MinWidth/MaxWidth e MinHeight/MaxHeight para especificar valores que restrinjam o tamanho de um elemento ao mesmo tempo em que permitam o redimensionamento fluido.You can set the MinWidth/MaxWidth and MinHeight/MaxHeight properties to specify values that constrain the size of an element while allowing fluid resizing.

Em um Grid, MinWidth/MaxWidth também pode ser usado com definições de coluna, e MinHeight/MaxHeight pode ser usado com definições de linha.In a Grid, MinWidth/MaxWidth can also be used with column definitions, and MinHeight/MaxHeight can be used with row definitions.

AlinhamentoAlignment

Use as propriedades HorizontalAlignment e VerticalAlignment para especificar como um elemento deve ser posicionado no contêiner pai.Use the HorizontalAlignment and VerticalAlignment properties to specify how an element should be positioned within its parent container.

  • Os valores para HorizontalAlignment são Left, Center, Right e Stretch.The values for HorizontalAlignment are Left, Center, Right, and Stretch.
  • Os valores para VerticalAlignment são Top, Center, Bottom e Stretch.The values for VerticalAlignment are Top, Center, Bottom, and Stretch.

Com o alinhamento Stretch, os elementos preenchem todos o espaço oferecido no contêiner pai.With the Stretch alignment, elements fill all the space they're provided in the parent container. Stretch é o valor padrão para ambas as propriedades de alinhamento.Stretch is the default for both alignment properties. No entanto, alguns controles, como Button, substituem esse valor no seu estilo padrão.However, some controls, like Button, override this value in their default style. Qualquer elemento que possa ter elementos filho pode tratar o valor Stretch das propriedades HorizontalAlignment e VerticalAlignment de maneira exclusiva.Any element that can have child elements can treat the Stretch value for HorizontalAlignment and VerticalAlignment properties uniquely. Por exemplo, um elemento que use os valores Stretch padrão colocados em um Grid se amplia para preencher a célula que o contém.For example, an element using the default Stretch values placed in a Grid stretches to fill the cell that contains it. O mesmo elemento colocado em um Canvas é dimensionado segundo seu conteúdo.The same element placed in a Canvas sizes to its content. Para obter mais informações sobre como cada painel manipula o valor Stretch, consulte o artigo Painéis de layout.For more info about how each panel handles the Stretch value, see the Layout panels article.

Para obter mais informações, consulte o artigo Alinhamento, margem e preenchimento e as páginas de referência HorizontalAlignment e VerticalAlignment.For more info, see the Alignment, margin, and padding article, and the HorizontalAlignment and VerticalAlignment reference pages.

VisibilidadeVisibility

Você pode revelar ou ocultar um elemento definindo sua propriedade Visibility como um dos valores de enumeração Visibility: Visible ou Collapsed.You can reveal or hide an element by setting its Visibility property to one of the Visibility enumeration values: Visible or Collapsed. Quando um elemento é Collapsed, ele não ocupa nenhum espaço no layout da interface do usuário.When an element is Collapsed, it doesn't take up any space in the UI layout.

Você pode alterar a propriedade Visibility de um elemento no código ou em um estado visual.You can change an element's Visibility property in code or in a visual state. Quando o Visibility de um elemento é alterado, todos os seus elementos filho também são alterados.When the Visibility of an element is changed, all of its child elements are also changed. Você pode substituir seções de sua interface do usuário, revelando um painel e recolhendo outro.You can replace sections of your UI by revealing one panel while collapsing another.

Dica

Quando você tiver elementos em sua interface do usuário Collapsed por padrão, ainda assim os objetos serão criados na inicialização, mesmo quando não estiverem visíveis.When you have elements in your UI that are Collapsed by default, the objects are still created at startup, even though they aren't visible. Você pode adiar o carregamento desses elementos até que eles sejam mostrados definindo o atributo x:DeferLoadStrategy como "Lazy".You can defer loading these elements until they are shown by setting the x:DeferLoadStrategy attribute to "Lazy". Isso pode melhorar o desempenho da inicialização.This can improve startup performance. Para obter mais informações, consulte Atributo x:DeferLoadStrategy.For more info, see x:DeferLoadStrategy attribute.

Recursos de estiloStyle resources

Você não precisa definir cada valor de propriedade individualmente em um controle.You don't have to set each property value individually on a control. Costuma ser mais eficiente agrupar valores de propriedade em um recurso Style e aplicar o Style a um controle.It's typically more efficient to group property values into a Style resource and apply the Style to a control. Isso é especialmente verdadeiro quando você precisa aplicar os mesmos valores de propriedade a muitos controles.This is especially true when you need to apply the same property values to many controls. Para obter mais informações sobre como usar estilos, consulte Definindo o estilo de controles.For more info about using styles, see Styling controls.

Painéis de layoutLayout panels

Para posicionar objetos visuais, você deve colocá-los em um painel ou em outro objeto de contêiner.To position visual objects, you must put them in a panel or other container object. A estrutura XAML fornece diversas classes de painel, como Canvas, Grid, RelativePanel e StackPanel, que servem como contêineres e que permitem posicionar e organizar os elementos da interface do usuário neles.The XAML framework provides various panel classes, such as Canvas, Grid, RelativePanel and StackPanel, which serve as containers and enable you to position and arrange the UI elements within them.

A principal coisa a ser considerada quando se escolhe um painel de layout é como o painel é posicionado e dimensiona seus elementos filho.The main thing to consider when choosing a layout panel is how the panel positions and sizes its child elements. Você também pode precisar considerar como os elementos filho sobrepostos são colocados uns sobre os outros.You might also need to consider how overlapping child elements are layered on top of each other.

Eis uma comparação dos principais recursos dos controles de painel fornecidos na estrutura XAML.Here's a comparison of the main features of the panel controls provided in the XAML framework.

Controle do painelPanel Control DescriçãoDescription
TelaCanvas Canvas não dá suporte à interface do usuário fluida; você controla todos os aspectos do posicionamento e do dimensionamento dos elementos filho.Canvas doesn’t support fluid UI; you control all aspects of positioning and sizing child elements. Você normalmente o usa em casos especiais, como a criação de elementos gráficos, ou para definir pequenas áreas estáticas de uma interface do usuário adaptável maior.You typically use it for special cases like creating graphics or to define small static areas of a larger adaptive UI. Você pode usar o código ou os estados visuais para reposicionar elementos em runtime.You can use code or visual states to reposition elements at runtime.
  • Os elementos são posicionados de maneira absoluta usando-se as propriedades anexadas Canvas.Top e Canvas.Left.Elements are positioned absolutely using Canvas.Top and Canvas.Left attached properties.
  • A disposição em camadas pode ser especificada explicitamente usando-se a propriedade anexada Canvas.ZIndex.Layering can be explicitly specified using the Canvas.ZIndex attached property.
  • Os valores Stretch de HorizontalAlignment/VerticalAlignment são ignorados.Stretch values for HorizontalAlignment/VerticalAlignment are ignored. Caso o tamanho do elemento não seja definido explicitamente, ele é dimensionado segundo seu conteúdo.If an element's size is not set explicitly, it sizes to its content.
  • O conteúdo filho não será recortado visualmente se for maior do que o painel.Child content is not visually clipped if larger than the panel.
  • O conteúdo filho não é restringido pelos limites do painel.Child content is not constrained by the bounds of the panel.
  • GridGrid Grid dá suporte ao redimensionamento fluido de elementos filho.Grid supports fluid resizing of child elements. Você pode usar o código ou os estados visuais para reposicionar e refluir elementos.You can use code or visual states to reposition and reflow elements.
  • Os elementos são organizados em linhas e colunas usando-se as propriedades anexadas Grid.Row e Grid.Column.Elements are arranged in rows and columns using Grid.Row and Grid.Column attached properties.
  • Os elementos podem abranger várias linhas e colunas usando-se as propriedades anexadas Grid.RowSpan e Grid.ColumnSpan.Elements can span multiple rows and columns using Grid.RowSpan and Grid.ColumnSpan attached properties.
  • Os valores Stretch de HorizontalAlignment/VerticalAlignment são respeitados.Stretch values for HorizontalAlignment/VerticalAlignment are respected. Se o tamanho de um elemento não for definido explicitamente, ele se ampliará para preencher o espaço disponível na célula da grade.If an element's size is not set explicitly, it stretches to fill the available space in the grid cell.
  • O conteúdo filho será recortado visualmente se for maior do que o painel.Child content is visually clipped if larger than the panel.
  • Como o tamanho do conteúdo é restringido pelos limites do painel, o conteúdo rolável mostra barras de rolagem, caso necessário.Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.
  • RelativePanelRelativePanel
  • Os elementos são organizados em relação à borda ou ao centro do painel e em relação uns aos outros.Elements are arranged in relation to the edge or center of the panel, and in relation to each other.
  • Os elementos são posicionados usando-se uma variedade de propriedades anexadas que controlam o alinhamento do painel, o alinhamento do irmão e a posição do irmão.Elements are positioned using a variety of attached properties that control panel alignment, sibling alignment, and sibling position.
  • Os valores Stretch de HorizontalAlignment/VerticalAlignment são ignorados, a menos que as propriedades anexadas RelativePanel do alinhamento causem o alongamento (por exemplo, um elemento está alinhado com as bordas direita e esquerda do painel).Stretch values for HorizontalAlignment/VerticalAlignment are ignored unless RelativePanel attached properties for alignment cause stretching (for example, an element is aligned to both the right and left edges of the panel). Caso o tamanho de um elemento não seja definido explicitamente e não seja ampliado, ele é dimensionado segundo seu conteúdo.If an element's size is not set explicitly and it's not stretched, it sizes to its content.
  • O conteúdo filho será recortado visualmente se for maior do que o painel.Child content is visually clipped if larger than the panel.
  • Como o tamanho do conteúdo é restringido pelos limites do painel, o conteúdo rolável mostra barras de rolagem, caso necessário.Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.
  • StackPanelStackPanel
  • Os elementos são empilhados em uma única linha vertical ou horizontalmente.Elements are stacked in a single line either vertically or horizontally.
  • Os valores Stretch de HorizontalAlignment/VerticalAlignment são respeitados na direção oposta à da propriedade Orientation.Stretch values for HorizontalAlignment/VerticalAlignment are respected in the direction opposite the Orientation property. Caso o tamanho de um elemento não seja definido explicitamente, ele se amplia para preencher a largura disponível (ou a altura caso o Orientation seja Horizontal).If an element's size is not set explicitly, it stretches to fill the available width (or height if the Orientation is Horizontal). Na direção especificada pela propriedade Orientation, um elemento é dimensionado segundo seu conteúdo.In the direction specified by the Orientation property, an element sizes to its content.
  • O conteúdo filho será recortado visualmente se for maior do que o painel.Child content is visually clipped if larger than the panel.
  • Como o tamanho do conteúdo não é restringido pelos limites do painel na direção especificada pela propriedade Orientation, o conteúdo rolável se amplia além dos limites do painel e não mostra barras de rolagem.Content size is not constrained by the bounds of the panel in the direction specified by the Orientation property, so scrollable content stretches beyond the panel bounds and doesn't show scrollbars. Você deve restringir explicitamente a altura (ou a largura) do conteúdo filho para fazer suas barras de rolagem serem mostradas.You must explicitly constrain the height (or width) of the child content to make its scrollbars show.
  • VariableSizedWrapGridVariableSizedWrapGrid
  • Os elementos são organizados em linhas ou colunas que se ajustam automaticamente em uma nova linha ou coluna quando o valor MaximumRowsOrColumns é atingido.Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.
  • A propriedade Orientation especifica se os elementos devem ser organizados em linhas ou colunas.Whether elements are arranged in rows or columns is specified by the Orientation property.
  • Os elementos podem abranger várias linhas e colunas usando-se as propriedades anexadas VariableSizedWrapGrid.RowSpan e VariableSizedWrapGrid.ColumnSpan.Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.
  • Os valores Stretch de HorizontalAlignment/VerticalAlignment são ignorados.Stretch values for HorizontalAlignment/VerticalAlignment are ignored. Os elementos são dimensionados conforme especificados pelas propriedades ItemHeight e ItemWidth.Elements are sized as specified by the ItemHeight and ItemWidth properties. Caso essas propriedades não sejam definidas, o item na primeira célula é dimensionado segundo seu conteúdo, e todas as outras células herdam esse tamanho.If these properties are not set, the item in the first cell sizes to its content, and all other cells inherit this size.
  • O conteúdo filho será recortado visualmente se for maior do que o painel.Child content is visually clipped if larger than the panel.
  • Como o tamanho do conteúdo é restringido pelos limites do painel, o conteúdo rolável mostra barras de rolagem, caso necessário.Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.
  • Para obter informações detalhadas e exemplos desses painéis, consulte Painéis de layout.For detailed information and examples of these panels, see Layout panels. Consulte também a Amostra de técnicas dinâmicas.Also, see the Responsive techniques sample.

    Os painéis de layout permitem organizar sua interface do usuário em grupos lógicos de controles.Layout panels let you organize your UI into logical groups of controls. Ao usá-los com as configurações de propriedade apropriadas, você tem certo suporte para redimensionamento automático, reposicionamento e refluxo de elementos da interface do usuário.When you use them with appropriate property settings, you get some support for automatic resizing, repositioning, and reflowing of UI elements. No entanto, a maioria dos layouts de interface do usuário ainda precisa de mais modificações quando ocorrem alterações significativas no tamanho da janela.However, most UI layouts need further modification when there are significant changes to the window size. Para isso, você pode usar estados visuais.For this, you can use visual states.

    Layouts adaptáveis com estados visuais e gatilhos de estadoAdaptive layouts with visual states and state triggers

    Use estados visuais para fazer alterações significativas na interface do usuário com base no tamanho da janela ou em outras alterações.Use visual states to make significant alterations to your UI based on window size or other changes.

    Quando a janela do aplicativo é ampliada ou reduzida além de um determinado valor, convém alterar as propriedades do layout para reposicionar, redimensionar, refluir, revelar ou substituir seções de sua interface do usuário.When your app window grows or shrinks beyond a certain amount, you might want to alter layout properties to reposition, resize, reflow, reveal, or replace sections of your UI. Você pode definir estados visuais diferentes para sua interface do usuário e aplicá-los quando a largura ou altura da janela ultrapassar um limite especificado.You can define different visual states for your UI, and apply them when the window width or window height crosses a specified threshold.

    Um VisualState define valores de propriedade aplicados a um elemento quando ele está em um estado específico.A VisualState defines property values that are applied to an element when it’s in a particular state. Você agrupa estados visuais em um VisualStateManager que aplica o VisualState apropriado quando as condições especificadas são atendidas.You group visual states in a VisualStateManager that applies the appropriate VisualState when the specified conditions are met. Um AdaptiveTrigger oferece uma forma fácil de definir o limite (também chamado de 'ponto de interrupção'), em que um estado é aplicado em XAML.An AdaptiveTrigger provides an easy way to set the threshold (also called 'breakpoint') where a state is applied in XAML. Ou, então, você pode chamar o método VisualStateManager.GoToState no código para aplicar o estado visual.Or, you can call the VisualStateManager.GoToState method in your code to apply the visual state. São mostrados exemplos das duas maneiras nas próximas seções.Examples of both ways are shown in the next sections.

    Definir estados visuais no códigoSet visual states in code

    Para aplicar um estado visual no código, você chama o método VisualStateManager.GoToState.To apply a visual state from code, you call the VisualStateManager.GoToState method. Por exemplo, para aplicar um estado quando a janela do aplicativo tem um determinado tamanho, manipule o evento SizeChanged e chame GoToState para aplicar o estado apropriado.For example, to apply a state when the app window is a particular size, handle the SizeChanged event and call GoToState to apply the appropriate state.

    Aqui, um VisualStateGroup contém duas definições VisualState.Here, a VisualStateGroup contains two VisualState definitions. A primeira, DefaultState, está vazia.The first, DefaultState, is empty. Quando ela é aplicada, os valores definidos na página XAML são aplicados.When it's applied, the values defined in the XAML page are applied. A segunda, WideState, altera a propriedade DisplayMode do SplitView para Inline e abre o painel.The second, WideState, changes the DisplayMode property of the SplitView to Inline and opens the pane. Esse estado é aplicado no manipulador de eventos SizeChanged caso a largura da janela seja superior a 640 pixels efetivos.This state is applied in the SizeChanged event handler if the window width is greater than 640 effective pixels.

    Observação

    O Windows não permite que o aplicativo detecte o dispositivo em que o aplicativo está sendo executado.Windows doesn't provide a way for your app to detect the specific device your app is running on. Ele pode informar a família de dispositivos (móvel, área de trabalho etc) em que o aplicativo está sendo executado, a resolução efetiva e a quantidade de espaço na tela disponível para o aplicativo (o tamanho da janela do aplicativo).It can tell you the device family (mobile, desktop, etc) the app is running on, the effective resolution, and the amount of screen space available to the app (the size of the app's window). É recomendável definir estados visuais para tamanhos de tela e pontos de interrupção.We recommend defining visual states for screen sizes and break points.

    <Page ...
        SizeChanged="CurrentWindow_SizeChanged">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultState">
                            <Storyboard>
                            </Storyboard>
                        </VisualState>
    
                    <VisualState x:Name="WideState">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="SplitView.DisplayMode"
                                Storyboard.TargetName="mySplitView">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <SplitViewDisplayMode>Inline</SplitViewDisplayMode>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="SplitView.IsPaneOpen"
                                Storyboard.TargetName="mySplitView">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <SplitView x:Name="mySplitView" DisplayMode="CompactInline"
                       IsPaneOpen="False" CompactPaneLength="20">
                <!-- SplitView content -->
    
                <SplitView.Pane>
                    <!-- Pane content -->
                </SplitView.Pane>
            </SplitView>
        </Grid>
    </Page>
    
    private void CurrentWindow_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        if (e.Size.Width > 640)
            VisualStateManager.GoToState(this, "WideState", false);
        else
            VisualStateManager.GoToState(this, "DefaultState", false);
    }
    
    // YourPage.h
    void CurrentWindow_SizeChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::SizeChangedEventArgs const& e);
    
    // YourPage.cpp
    void YourPage::CurrentWindow_SizeChanged(IInspectable const& sender, SizeChangedEventArgs const& e)
    {
        if (e.NewSize.Width > 640)
            VisualStateManager::GoToState(*this, "WideState", false);
        else
            VisualStateManager::GoToState(*this, "DefaultState", false);
    }
    
    

    Definir estados visuais na marcação XAMLSet visual states in XAML markup

    Antes do Windows 10, as definições VisualState exigiam objetos Storyboard para alterações de propriedade, e você precisava chamar GoToState no código para aplicar o estado.Prior to Windows 10, VisualState definitions required Storyboard objects for property changes, and you had to call GoToState in code to apply the state. Isso é mostrado no exemplo anterior.This is shown in the previous example. Você ainda verá muitos exemplos que usam essa sintaxe, ou pode ter um código existente que o use.You will still see many examples that use this syntax, or you might have existing code that uses it.

    A partir do Windows 10, você pode usar a sintaxe Setter simplificada mostrada aqui e usar um StateTrigger na marcação XAML para aplicar o estado.Starting in Windows 10, you can use the simplified Setter syntax shown here, and you can use a StateTrigger in your XAML markup to apply the state. Você usa gatilhos de estado para criar regras simples que disparam alterações de estado visuais automaticamente em resposta a um evento do aplicativo.You use state triggers to create simple rules that automatically trigger visual state changes in response to an app event.

    Este exemplo faz a mesma coisa que o exemplo anterior, mas usa a sintaxe simplificada Setter, em vez de um Storyboard para definir as alterações de propriedade.This example does the same thing as the previous example, but uses the simplified Setter syntax instead of a Storyboard to define property changes. E, em vez de chamar GoToState, ele usa o gatilho de estado AdaptiveTrigger interno para aplicar o estado.And instead of calling GoToState, it uses the built in AdaptiveTrigger state trigger to apply the state. Ao usar gatilhos de estado, você não precisa definir um DefaultState vazio.When you use state triggers, you don't need to define an empty DefaultState. As configurações padrão são reaplicadas automaticamente quando as condições do gatilho de estado não são mais atendidas.The default settings are reapplied automatically when the conditions of the state trigger are no longer met.

    <Page ...>
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState>
                        <VisualState.StateTriggers>
                            <!-- VisualState to be triggered when the
                                 window width is >=640 effective pixels. -->
                            <AdaptiveTrigger MinWindowWidth="640" />
                        </VisualState.StateTriggers>
    
                        <VisualState.Setters>
                            <Setter Target="mySplitView.DisplayMode" Value="Inline"/>
                            <Setter Target="mySplitView.IsPaneOpen" Value="True"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <SplitView x:Name="mySplitView" DisplayMode="CompactInline"
                       IsPaneOpen="False" CompactPaneLength="20">
                <!-- SplitView content -->
    
                <SplitView.Pane>
                    <!-- Pane content -->
                </SplitView.Pane>
            </SplitView>
        </Grid>
    </Page>
    

    Importante

    No exemplo anterior, a propriedade anexada VisualStateManager.VisualStateGroups está definida no elemento Grid.In the previous example, the VisualStateManager.VisualStateGroups attached property is set on the Grid element. Ao usar StateTriggers, certifique-se sempre de que VisualStateGroups esteja anexado ao primeiro filho da raiz para que os gatilhos entrem em vigor automaticamente.When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root in order for the triggers to take effect automatically. (Aqui, Grid é o primeiro filho do elemento Page raiz.)(Here, Grid is the first child of the root Page element.)

    Sintaxe da propriedade anexadaAttached property syntax

    Em um VisualState, você normalmente define um valor para uma propriedade de controle ou para uma das propriedades anexadas do painel que contém o controle.In a VisualState, you typically set a value for a control property, or for one of the attached properties of the panel that contains the control. Ao definir uma propriedade anexada, use parênteses no nome da propriedade anexada.When you set an attached property, use parentheses around the attached property name.

    Este exemplo mostra como definir a propriedade anexada RelativePanel.AlignHorizontalCenterWithPanel em um TextBox chamado myTextBox.This example shows how to set the RelativePanel.AlignHorizontalCenterWithPanel attached property on a TextBox named myTextBox. O primeiro XAML usa uma sintaxe ObjectAnimationUsingKeyFrames e o segundo usa uma sintaxe Setter.The first XAML uses ObjectAnimationUsingKeyFrames syntax and the second uses Setter syntax.

    <!-- Set an attached property using ObjectAnimationUsingKeyFrames. -->
    <ObjectAnimationUsingKeyFrames
        Storyboard.TargetProperty="(RelativePanel.AlignHorizontalCenterWithPanel)"
        Storyboard.TargetName="myTextBox">
        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
    </ObjectAnimationUsingKeyFrames>
    
    <!-- Set an attached property using Setter. -->
    <Setter Target="myTextBox.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>
    

    Gatilhos de estado personalizadosCustom state triggers

    Você pode estender a classe StateTrigger para criar gatilhos personalizados para uma ampla variedade de cenários.You can extend the StateTrigger class to create custom triggers for a wide range of scenarios. Por exemplo, você pode criar um StateTrigger para disparar estados diferentes com base no tipo de entrada e, em seguida, aumentar as margens em torno de um controle quando o tipo de entrada é toque.For example, you can create a StateTrigger to trigger different states based on input type, then increase the margins around a control when the input type is touch. Ou crie um StateTrigger para aplicar estados diferentes com base na família de dispositivos em que o aplicativo está em execução.Or create a StateTrigger to apply different states based on the device family the app is run on. Para obter exemplos de como compilar gatilhos personalizados e usá-los para criar experiências de interface do usuário otimizadas dentro de um único modo de exibição XAML, consulte a Amostra de gatilhos de estado.For examples of how to build custom triggers and use them to create optimized UI experiences from within a single XAML view, see the State triggers sample.

    Estilos e estados visuaisVisual states and styles

    Você pode usar recursos Style em estados visuais para aplicar um conjunto de alterações de propriedade a vários controles.You can use Style resources in visual states to apply a set of property changes to multiple controls. Para obter mais informações sobre como usar estilos, consulte Definindo o estilo de controles.For more info about using styles, see Styling controls.

    Neste XAML simplificado da Amostra de gatilhos de estado, um recurso Style é aplicado a um Button para ajustar o tamanho e as margens da entrada por mouse ou toque.In this simplified XAML from the State triggers sample, a Style resource is applied to a Button to adjust the size and margins for mouse or touch input. Para obter o código completo e a definição do gatilho de estado personalizado, consulte Amostra de gatilhos de estado.For the complete code and the definition of the custom state trigger, see the State triggers sample.

    <Page ... >
        <Page.Resources>
            <!-- Styles to be used for mouse vs. touch/pen hit targets -->
            <Style x:Key="MouseStyle" TargetType="Rectangle">
                <Setter Property="Margin" Value="5" />
                <Setter Property="Height" Value="20" />
                <Setter Property="Width" Value="20" />
            </Style>
            <Style x:Key="TouchPenStyle" TargetType="Rectangle">
                <Setter Property="Margin" Value="15" />
                <Setter Property="Height" Value="40" />
                <Setter Property="Width" Value="40" />
            </Style>
        </Page.Resources>
    
        <RelativePanel>
            <!-- ... -->
            <Button Content="Color Palette Button" x:Name="MenuButton">
                <Button.Flyout>
                    <Flyout Placement="Bottom">
                        <RelativePanel>
                            <Rectangle Name="BlueRect" Fill="Blue"/>
                            <Rectangle Name="GreenRect" Fill="Green" RelativePanel.RightOf="BlueRect" />
                            <!-- ... -->
                        </RelativePanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <!-- ... -->
        </RelativePanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="InputTypeStates">
                <!-- Second set of VisualStates for building responsive UI optimized for input type.
                     Take a look at InputTypeTrigger.cs class in CustomTriggers folder to see how this is implemented. -->
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- This trigger indicates that this VisualState is to be applied when MenuButton is invoked using a mouse. -->
                        <triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Mouse" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BlueRect.Style" Value="{StaticResource MouseStyle}" />
                        <Setter Target="GreenRect.Style" Value="{StaticResource MouseStyle}" />
                        <!-- ... -->
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- Multiple trigger statements can be declared in the following way to imply OR usage.
                             For example, the following statements indicate that this VisualState is to be applied when MenuButton is invoked using Touch OR Pen.-->
                        <triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Touch" />
                        <triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Pen" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BlueRect.Style" Value="{StaticResource TouchPenStyle}" />
                        <Setter Target="GreenRect.Style" Value="{StaticResource TouchPenStyle}" />
                        <!-- ... -->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Page>