×

Dynamic Layout Sample

Dynamic Layout Sample is an example application demonstrating how to implement dynamic layouts using styles. The application presents a number of items on the main page. Layout and size of the items depend on a style applied to the items, the style depending on the screen size of the device. A default style is always loaded and as its name suggests, it defines a universal style suitable for presenting items in all supported resolutions. In devices with a large display an additional style is loaded at runtime. This additional style overrides some details of the default style, optimising the layout for large displays.

This sample was created as a companion to the Optimising for large screen smartphones and in particular to the Optimising layout for big screens articles, but the demonstrated solution of using styles dynamically can be used to address also various other needs to control the app UI at runtime.

Getting started

Compatibility

The Dynamic Layout Sample can be run on Windows Phone 8 devices and has been tested on Nokia Lumia 925 and Nokia Lumia 1520 devices.

Using the prebuilt installation package

Download the XAP file from GitHub and install it on your device using the Application Deployment tool that comes with the Windows Phone SDK.

Building the application

Clone the application solution from GitHub and open the DynamicLayoutSample.sln file in the Microsoft Visual Studio Express for Windows Phone 8. Start building and running the application by hitting F5 or selecting Start Debugging from the Debug menu.

Design

In most cases the existing application UI can be tweaked to support different resolutions and screen sizes by simply overriding the styles used in the application. Dynamic Layout Sample is a lean, single page example application, displaying items with an image and text. The layout of the page depends on the screen size of the device, as shown in the images below:

Figure 1. Small screen displays items in two columns, big screen in three columns.

Code extracts

The following extracts from the source code explain in detail how different styles for an application have been implemented in Dynamic Layout Sample to adapt to different screen sizes.

The layout of a list item is defined in SampleDataItemTemplate.xaml:

    ...

    <DataTemplate x:Key="SampleDataItemTemplate">
        <Grid Margin="12,6,12,6" Style="{StaticResource GridItem}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Image Grid.Row="0" Source="{Binding DataImage}" Style="{StaticResource GridImage}" />

            <TextBlock Grid.Row="1"
                       Margin="0"
                       Style="{StaticResource LargeBoldText}"
                       Text="{Binding DataTitle}" />
        </Grid>
    </DataTemplate>

    ...

Each element's default look and feel is determined by a style defined in SampleDataItemStyleDefault.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--  Text  -->
    <Style x:Key="NormalText"
           BasedOn="{StaticResource PhoneTextNormalStyle}"
           TargetType="TextBlock" />

    <Style x:Key="LargeBoldText" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe WP Semibold" />
        <Setter Property="FontSize" Value="32" />
    </Style>

    <!--  Layout  -->
    <Style x:Key="GridImage" TargetType="Image">
        <Setter Property="Width" Value="204" />
        <Setter Property="Height" Value="204" />
    </Style>

    <Style x:Key="GridItem" TargetType="Grid">
        <Setter Property="Width" Value="204" />
    </Style>

</ResourceDictionary>  

To create a separate style for big screen devices, it is enough for an application to override relevant styles by merging one new resource dictionary, which contains a big screen optimised versions of default styles. In Dynamic Layout Sample, the big screen styles are defined in SampleDataItemStyle1080p.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--  Large Screen Overrides  -->

    <!--  Text  -->
    <Style x:Key="LargeBoldText" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe WP Semibold" />
        <Setter Property="FontSize" Value="22" />
    </Style>

    <!--  Layout  -->
    <Style x:Key="GridImage" TargetType="Image">
        <Setter Property="Width" Value="128" />
        <Setter Property="Height" Value="128" />
    </Style>

    <Style x:Key="GridItem" TargetType="Grid">
        <Setter Property="Width" Value="128" />
    </Style>

</ResourceDictionary>

The inclusion of big screen optimised styles is determined by StyleSelector class:

    ...

    class StyleSelector
    {
        static public void SetStyle()
        {
            if(ScreenSizeHelper.IsBigScreen)
            {
                var appTheme = new ResourceDictionary {
                    Source = new Uri("/DynamicLayoutSample;component/Themes/SampleDataItemStyle1080p.xaml", UriKind.Relative)
                };

                Application.Current.Resources.MergedDictionaries.Add(appTheme);
            }
        }
    }

    ...  

StyleSelector's SetStyle method is called from App's constructor:

    ...

    public partial class App : Application
    {
        ...

        public App()
        {
            // Global handler for uncaught exceptions.
            UnhandledException += Application_UnhandledException;

            // Standard XAML initialization
            InitializeComponent();

            // Load 1080p style if needed
            StyleSelector.SetStyle();

            ...
        }

        ...
    }  

Once loaded, the new resource will be added to the end of the resource dictionary list and thus will be the first in the searching order of style definition. The styles defined in this new dictionary will override previous definitions and thus the desired layout can be applied. If new styles are not loaded, the app continues to render the UI using the layout based on the styles defined in SampleDataItemStyleDefault.xaml.

For enabling the layout change in UI designer or Blend, the layout override can be added to App.xaml's resource dictionary:

    ...

    <!-- Application Resources -->
    <Application.Resources>
        <ResourceDictionary>
            <local:LocalizedStrings  x:Key="LocalizedStrings"/>
            <local:SampleModel x:Key="SampleModel" />

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="SampleDataTemplate.xaml" />
                <ResourceDictionary Source="Themes/SampleDataItemStyleDefault.xaml" />

                <!-- Enable the line below to see the 1080p layout overrides in designer -->
                <!-- Comment it out for final build as the 1080p style overrides are to -->
                <!-- be activated on device by StyleSelector -->
                <!-- <ResourceDictionary Source="Themes/SampleDataItemStyle1080p.xaml" /> -->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

    ...  

This example application is hosted in GitHub, where you can check the latest activities, report issues, browse source and ask questions.


Last updated 6 November 2013

Back to top

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×