User Tools

Site Tools


notes:uwp:visualstate

This is an old revision of the document!


VisualState in UWP

  • Use the VisualState.Setters syntax to define property changes in VisualStateManager.
  • Use the VisualState.StateTriggers feature, to conditionally set properties based on window height/width or based on a custom 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.)

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>

In a VisualState, when you set an attached property, use parentheses around the attached property name:

<Setter Target="TextBox1.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>
notes/uwp/visualstate.1476978976.txt.gz · Last modified: 2016/10/20 by admin