Share via

UWP: How to design Adaptive Layout for Windows Desktop and Mobile

  • Article

**Description: **in this Article I’ll explain to design the adaptive layout which will target different size of windows.

In this article we’ll create a sample application to learn adaptive layout designing.

To design adaptive layout, we’ll use ViusalStateManager and adaptive trigger.

**VisualStateManager **supports most important UI feature - controlling the state of control and provide transitions between different state of a control. For more info. Go to MSDN 

**Adaptive Trigger **in simple words triggered a visual state when windows properties (e.g. Height or width) changed.

For eg.

 <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="400"/>

                 </VisualState.StateTriggers>

So this AdaptiveTrigger will be triggered when windows width will be less than or equal to >= 400 pixels. 

For more info. Go to MSDN 

Now we’ll look into final implementation in real-time, below are the steps to create a sample application.

Step 1: Create Universal Windows App 

Open Visual Studio 2015 > New Project > Windows > Universal > Blank App.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/uwp-how-to-design-adaptive-layout-for-windows-desktop-and-mobile/Images/Screenshot56.png

Step 2: Add a Model

Add a model folder in your project and inside this model folder we’ll create a class with name “MusicItem.cs”

 

Now we’ll define class with below properties

  public class MusicItem

    {

        public int Id { get; set; }

        public string Title { get; set; }

        public string Info { get; set; }

        public string DateLine { get; set; }

        public string Image { get; set; }

    }

Step 3: Add a Helper class

Now we add another class as “MusicItemManager” which will be used to load data for our model class with some dummy data.

    public class MusicItemManager

    {

        public static ObservableCollection<MusicItem> getNewsItems()

        {

            var items = new List<MusicItem>();

 

            items.Add(new MusicItem() { Id = 1, Title = "Lorem Ipsum", Info = "doro sit amet", DateLine = "Nunc tristique nec", Image = "Assets/image1.jpg" });

            items.Add(new MusicItem() { Id = 2, Title = "Etiam ac felis viverra", Info = "vulputate nisl ac, aliquet nisi", DateLine = "tortor porttitor, eu fermentum ante congue", Image = "Assets/image2.jpg" });

            items.Add(new MusicItem() { Id = 3, Title = "Integer sed turpis erat", Info = "Sed quis hendrerit lorem, quis interdum dolor", DateLine = "in viverra metus facilisis sed", Image = "Assets/image3.jpg" });

            items.Add(new MusicItem() { Id = 4, Title = "Proin sem neque", Info = "aliquet quis ipsum tincidunt", DateLine = "Integer eleifend", Image = "Assets/image4.jpg" });

            items.Add(new MusicItem() { Id = 5, Title = "Mauris bibendum non leo vitae tempor", Info = "In nisl tortor, eleifend sed ipsum eget", DateLine = "Curabitur dictum augue vitae elementum ultrices", Image = "Assets/image5.jpg" });

 

            return new ObservableCollection<MusicItem>(items);

        }

    }

Add 5 images in project’s assets folder for our data and name it as image1, image2 and so on. 

Step 4: Add a UserControl

Right click on project > Add > New Item > UserControl > Name it as - MusicItemTemplate.xaml > Click on add button.

This user control will be act as our DataTemplate in our application.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/uwp-how-to-design-adaptive-layout-for-windows-desktop-and-mobile/Images/Screenshot58.png

Add below code inside our UserControl

<StackPanel x:Name="stackPanel" Width="200" Height="275" Margin="10" HorizontalAlignment="Center">

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="VisualStateGroup">

                <VisualState x:Name="Wide">

                    <VisualState.Setters >

                        <Setter Target="txtHeadLine.FontSize" Value="26"/>

                        <Setter Target="txtHeadLine.Foreground" Value="Green"/>

                        <Setter Target="stackPanel.Width" Value="400"/>

                        <Setter Target="stackPanel.Height" Value="400"/>

                    </VisualState.Setters>

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="800"/>

                    </VisualState.StateTriggers>

                </VisualState>

                <VisualState x:Name="Narrow">

                    <VisualState.Setters >

                        <Setter Target="txtHeadLine.FontSize" Value="18"/>

                        <Setter Target="txtHeadLine.Foreground" Value="Coral"/>

                        <Setter Target="stackPanel.Width" Value="200"/>

                        <Setter Target="stackPanel.Height" Value="275"/>

                    </VisualState.Setters>

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="400"/>

                    </VisualState.StateTriggers>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Image x:Name="image" Source="{x:Bind Music.Image}" HorizontalAlignment="Stretch" />

        <TextBlock x:Name="txtHeadLine" Text="{x:Bind Music.Title}" FontSize="18" HorizontalAlignment="Center" TextWrapping="Wrap" MaxLines="2" />

        <TextBlock x:Name="txtSubHead" Text="{x:Bind Music.Info}" HorizontalAlignment="Center" Margin="0,10,0,0"/>

    </StackPanel>

Step 5: Code Behind of UserControl

Add below code in code behind file of our user control, this will be used for data binding with our data template.

    public MusicItem Music { get { return this.DataContext as MusicItem; } }

and add below line inside constructor of Codebehind file.

    this.DataContextChanged += (s, e) => Bindings.Update();

this will be used to update our databinding.

Our basic structure is ready with Model data and Data Template.

Now just one last thing remaining, We’ve to define data control to display all data and bind all together.

**
Step 6: Define DataControl(GridView)**

Now at our MainPage.Xaml, define GridView as below 

<GridView ItemsSource="{x:Bind MusicItems,Mode=OneWay}" Margin="10" Name="gridView" >

            <GridView.ItemTemplate>

                <DataTemplate x:DataType="data:MusicItem">

                    <local:MusicItemTemplate HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

                </DataTemplate>

            </GridView.ItemTemplate>

        </GridView>

Here we are using x:DataType in data template, it tells the control which kind of data will going to be used in our data control for data binding.

Read More about x:DataType at MSDN

We’ve to define this datatype at page as

    xmlns:data="using:UWPAdaptiveLayoutSample.Model"

Now come to our MainPage.xaml.cs

Define an Observable collection as below

    private ObservableCollection<MusicItem> MusicItems;

After defining Observable Collection we’ll fill our collection and bind it to our GridView as below

    MusicItems = MusicItemManager.getNewsItems();

            gridView.DataContext = MusicItems;

 http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/uwp-how-to-design-adaptive-layout-for-windows-desktop-and-mobile/Images/Screenshot63.png

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/uwp-how-to-design-adaptive-layout-for-windows-desktop-and-mobile/Images/Screenshot64.png

Summary: In this article we learnt about how to design adaptive layout, how to target it for multiple screens, VisualStateManager and AdaptiveTrigger. In similar fashion we can target different devices like Mobile, tablet or Desktop.

Now you can try to design a screen which will target for different size of windows.

Cheers!!! Have Fun!