User Tools

Site Tools


notes:uwp:visualstate

VisualStates in XAML

  • Use the VisualState.Setters syntax to define property changes in VisualStateManager.
  • Use the VisualState.StateTriggers, to conditionally set properties based on window height/width or based on a custom adaptive trigger.

When you use state triggers, you don't need to define an empty DefaultState. The default settings are reapplied automatically when the conditions of the state trigger are no longer met.

In the following examples, the VisualStateManager.VisualStateGroups attached property is set on the Grid element. 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. (Here, Grid is the first child of the root Page element.)

Designing your layour for a few key widths (called breakpoints): 320, 720, and 1024.

If you want to use adaptive triggers in a DataTemplate, wrap all content of the DataTemplate (inluding adaptive triggers) into a UserControl element.

For examples of using VisualState to define behaviour of a control, refer to ControlTemplate.

Example:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <!-- VisualState to be triggered when the window width is >=720 effective pixels -->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
 
                <VisualState.Setters>
                    <Setter Target="Panel1.Orientation" Value="Horizontal" />
                    <Setter Target="Panel1.Width" Value="700" />
                    <Setter Target="TextBlock1.Foreground" Value="Red" />
                    <Setter Target="TextBlock2.Foreground" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
 
    <StackPanel x:Name="Panel1" 
                Orientation="Vertical"
                Background="AliceBlue"
                Width="320">
        <TextBlock x:Name="TextBlock1" Margin="20" 
                   Text="AAA BBB CCC DDD EEE"
                   Style="{ThemeResource BodyTextBlockStyle}"/>
        <TextBlock x:Name="TextBlock2" Margin="20" 
                   Text="111 222 333 444 555"
                   Style="{ThemeResource BodyTextBlockStyle}"/>
    </StackPanel>
</Grid>

Example:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <!-- VisualState to be triggered when the window width is >=720 effective pixels -->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
 
                <VisualState.Setters>
                    <Setter Target="SplitView1.DisplayMode" Value="Inline"/>
                    <Setter Target="SplitView1.IsPaneOpen" Value="True"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
 
    <SplitView x:Name="SplitView1" DisplayMode="CompactInline"
               IsPaneOpen="False" CompactPaneLength="20">
        <SplitView.Pane>
            <StackPanel>
                <TextBlock Text="AAA" />
                <TextBlock Text="BBB" />
                <TextBlock Text="CCC" />
            </StackPanel>
        </SplitView.Pane>
    </SplitView>
</Grid>

When you set an attached property in a VisualState, use parentheses around the attached property name:

<Setter Target="TextBox1.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>
notes/uwp/visualstate.txt · Last modified: 2017/02/28 by admin