Implementing Adaptive Layout In UWP App

Introduction 

In this article I've tried to explain the use of <VisualStateManager> and <AdaptiveTrigger> to achieve Adaptive Layout for Universal Windows App. For that let's take an example where if the window width will be 700px or higher, we will divide the content in three columns, and if the window width will be less than 600px then we'll merge those columns and divide into three rows.

 

Here's how the UI will look in both cases:

Desktop UI: 

 

Mobile UI:

 

XAML Code to achieve this

To achieve this Adaptive Layout UI in UWP app we need to use <VisualStateMamager> and <AdaptiveTrigger> in XAML code.

The following is the XAML code for the UI shown in the image. 

<Page
    x:Class="Testing2.AdaptiveLayoutPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Testing2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>

                <VisualState x:Name="visualstateMobile">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="img.(Grid.Row)" Value="0" />
                        <Setter Target="img.(Grid.Column)" Value="0" />
                        <Setter Target="img.(Grid.RowSpan)" Value="1" />
                        <Setter Target="img.(Grid.ColumnSpan)" Value="3" />

                        <Setter Target="tbSecond.(Grid.Row)" Value="1" />
                        <Setter Target="tbSecond.(Grid.Column)" Value="0" />
                        <Setter Target="tbSecond.(Grid.RowSpan)" Value="1" />
                        <Setter Target="tbSecond.(Grid.ColumnSpan)" Value="3" />

                        <Setter Target="tbThird.(Grid.Row)" Value="2" />
                        <Setter Target="tbThird.(Grid.Column)" Value="0" />
                        <Setter Target="tbThird.(Grid.RowSpan)" Value="1" />
                        <Setter Target="tbThird.(Grid.ColumnSpan)" Value="3" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="visualstateDesktop">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="img.(Grid.Row)" Value="0" />
                        <Setter Target="img.(Grid.Column)" Value="0" />
                        <Setter Target="img.(Grid.RowSpan)" Value="2" />
                        <Setter Target="img.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="tbSecond.(Grid.Row)" Value="0" />
                        <Setter Target="tbSecond.(Grid.Column)" Value="1" />
                        <Setter Target="tbSecond.(Grid.RowSpan)" Value="3" />
                        <Setter Target="tbSecond.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="tbThird.(Grid.Row)" Value="0" />
                        <Setter Target="tbThird.(Grid.Column)" Value="2" />
                        <Setter Target="tbThird.(Grid.RowSpan)" Value="3" />
                        <Setter Target="tbThird.(Grid.ColumnSpan)" Value="1" />
                    </VisualState.Setters>
                </VisualState>

            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Image x:Name="img" Source="Assets/image.png" Grid.RowSpan="2" Margin="12" />

                <TextBlock x:Name="tbSecond" Grid.Column="1" Grid.RowSpan="3" TextWrapping="Wrap" Margin="12"
                   Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, lectus ac tempus viverra, odio lectus placerat sem, vestibulum molestie tellus velit et metus. Aliquam posuere magna at augue semper, ut egestas nisl varius. Curabitur venenatis elit lacus, quis aliquam nibh varius id. Nulla vehicula tortor risus, a facilisis diam scelerisque sed. Quisque eleifend orci eget nibh semper, ut feugiat mi auctor. Sed sit amet ultrices libero, non aliquet metus. Vivamus non neque purus. Sed sodales congue consectetur. Maecenas cursus sollicitudin lectus. Donec neque est, ullamcorper facilisis magna at, feugiat maximus nibh. Donec accumsan velit eget justo iaculis aliquam. Phasellus dui neque, interdum a congue eu, dapibus nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam at condimentum odio. Nunc vitae pretium leo. Ut finibus sodales ipsum a convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eros ligula, molestie sodales convallis non, ultrices sed risus. Sed eleifend lobortis dictum. Fusce finibus sapien nec mauris gravida, eu egestas leo sodales. Pellentesque neque turpis, consequat sed nisl eu, auctor condimentum erat. Curabitur sagittis urna at nulla tincidunt, eu cursus leo commodo. Nullam consectetur mi et congue semper. Nullam lacus arcu, rhoncus at justo fringilla, commodo vestibulum diam. Sed euismod quam quis lacus tristique hendrerit." />

                <TextBlock x:Name="tbThird" Grid.Column="2" Grid.RowSpan="3" TextWrapping="Wrap" Margin="12"
                   Text="Fusce sed metus justo. Quisque libero mauris, egestas quis velit id, volutpat cursus nunc. Aenean lacinia mauris sit amet viverra feugiat. Maecenas molestie pulvinar quam vel mollis. Donec nec congue turpis. Suspendisse luctus cursus nisl, vel bibendum diam sollicitudin quis. Ut semper dui quis justo cursus, quis dictum dui scelerisque. Nulla porttitor varius luctus. Proin egestas diam tempus elementum mollis. Nulla iaculis quam lacus, nec laoreet enim efficitur ultricies. In fringilla velit dui, sit amet viverra libero accumsan at. Pellentesque in laoreet lorem. Curabitur ut facilisis elit. Proin congue quam pretium, interdum ligula tempor, porttitor orci. Maecenas cursus sollicitudin lectus. Donec neque est, ullamcorper facilisis magna at, feugiat maximus nibh. Donec accumsan velit eget justo iaculis aliquam. Phasellus dui neque, interdum a congue eu, dapibus nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam at condimentum odio. Nunc vitae pretium leo. Ut finibus sodales ipsum a convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eros ligula, molestie sodales convallis non, ultrices sed risus. Sed eleifend lobortis dictum. Fusce finibus sapien nec mauris gravida, eu egestas leo sodales. Pellentesque neque turpis, consequat sed nisl eu, auctor condimentum erat. Curabitur sagittis urna at nulla tincidunt, eu cursus leo commodo. Nullam consectetur mi et congue semper. Nullam lacus arcu, rhoncus at justo fringilla, commodo vestibulum diam. Sed euismod quam quis lacus tristique hendrerit. Ut tempor enim non libero blandit, in venenatis urna eleifend. Nam malesuada tincidunt vestibulum. Vivamus iaculis consectetur fringilla. Phasellus luctus mi at massa tempus faucibus. Phasellus vitae laoreet ante. Sed et scelerisque tortor, fermentum tincidunt lorem. Suspendisse et orci et ante pretium blandit." />

            </Grid>
        </ScrollViewer>

    </Grid>
</Page>

We don't have to write any C# code to achieve this Responsive UI. Here the text we've used is Lorem Ipsum so don't worry about it.

 

Explanation:

The key point to note here is the way we can change the values of any specific property used in out XAML page's UI controls. In our example we have changed the values of (Grid.Row), (Grid.Column), Rowspan and Columnspan for Image and textblock used in the page. While having more width to show, we've divided the contents in three columns, and while having small width we've assigned ColumnSpan to 3 and divided into Rows. 

The scenario I've covered here is the most-used scenario while developing apps for multiple resolutions which have a lot of content/information to show.

 

Read more articles on Universal Windows App:

• How To Design A Calculator In UWP
• Capturing Video Using Camera And Saving Video In Windows 10 Universal App