Windows 10: Top 3 XAML/UI changes from 8.1 (State Triggers)

Last but not least, Number 3! (or number 1 since this is a count, down…)

Adaptive Layout

As I explained in the first post of this mini series, the Universal Windows Platform (UWP) allows for one build to run immediately on phone and desktop! But by doing this developers have to consider adaptive UI that can change for different views/devices (phones, Xbox, desktops, tablets, HoloLens). State Triggers and Adaptive Triggers are the two ways to accomplish this adaptive layout.

Continuing with the example from post two this example will show state triggers and how to adjust layouts as the view width decreases.

State Triggers

First we need to add a Visual State Manager to the bottom of our code, but within the tag.

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">

                </VisualState>

                <VisualState x:Name="NarrowLayout">

                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Next we need to define what our States are and what happens to the layout as a result of changing states.

    <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MySplitView.DisplayMode" Value="Inline" />
                        <Setter Target="MySplitView.IsPaneOpen" Value="True" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Target="MySplitView.DisplayMode" Value="Overlay" />
                         <Setter Target="MySplitView.IsPaneOpen" Value="False" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>

In my Visual State Set Trigger I targeted the SplitView Pane, and adjusted it’s display mode so it doesn’t push our content to the right. Because we are setting the Split View’s Display mode in the State Triggers we need to remove it from the inline statement of the to avoid confusion.

Run it on the Local Machine and watch as you narrow the window how the menu automatically changes!

WIDTH > 600:

SplitView1

 

 

WIDTH < 600:

SplitView2

 

WIDTH < 600 and OVERLAY:

SplitView2-1

 

And there you have it. The 3 most notable/important changes (in my opinion) to the XAML UI from 8.1 to 10!

Hope you learned something. Let me know what your top three are, in the comments below!

Happy Coding

-TheNappingKat


Leave a Reply

Your email address will not be published. Required fields are marked *