Sergii Baidachnyi

If you visit what’s new for developers in Windows 10 page you can see the following sentence there:

“XAML provides new support for defining tailored views (.xaml files) that share the same code file.”

Of course this feature can be very useful because in some cases it’s not easy to create really universal pages. For example, you can adopt all controls but you need to remember that phone users usually use just one hand to work with applications. So, you need to adopt not just layout but user experience as well.

That’s why I tried to investigate what this sentence means. Looks like this feature is still in development and you will not find any docs about it but you already can test existing implementation.

In current version of UWP you already can create separate XAML for desktop and mobile pages. In order to do it you need to add a new XAML View to your project.

You can see that XAML Veiw template will create XAML page only without code behind file. Of course, it’s not enough and in order to associate a new view with page by default you need to select one of the two approaches:

· You can place the view to the same folder with the initial page and you need to call the view using the name of the initial page and add a prefix. I discovered two prefixes right now – DeviceFamily-Mobile and DeviceFamily-Desktop. I didn’t have a chance to test Xbox and I found that DeviceFamaly-IoT doesn’t work;

· You can use the same name for the view which has the page by default but you need to place the view to the special folder – DeviceFamily-Mobile or DeviceFamily-Desktop;

That’s all. If you run our application on the phone and you will have a view under DeviceFamily-Mobile rule then the view will be applied but if you didn’t implement a new view around DeviceFamily-Mobile then XAML by default will be applied. The same things work for desktop.

Pay special attention that it’s in preview now and even no docs have been published.

Another control which allows to create adaptive interfaces is SplitView. Usually you will use this control to create menus but in fact SplitView allows to declare two panels, Pane and Content, with any content inside. Particularly the Pane panel allows to add some adaptive capabilities by supporting different display modes. The main syntax of SplitView is

<SplitView IsPaneOpen="False" 
           DisplayMode="CompactInline"  
           PaneBackground="Beige" 
           OpenPaneLength="200" 
           CompactPaneLength="30">
    <SplitView.Pane>
        
    </SplitView.Pane>
    <SplitView.Content>

    </SplitView.Content>
</SplitView>

Where the DisplayMode property can be set in one of the following values:

· CompactInline – Pane panel supports compact mode. When it is expanded all content will be moved in order to provide enough space for expanded panel;

· CompactOverlay – the same as the previous mode but when panel is expanded it doesn’t affect all other content because the panel will be placed above the content;

· Inline – supported in expanded mode only. If it is displayed then all other content will be moved to have enough space for the panel;

· Overlay – supported in expanded mode only. It doesn’t affect all other content because the panel will be placed above the content;

With the help of the IsPaneOpen you can define if the panel is displayed in standard mode or if the panel is expanded (or compact) in compact mode. So, if you set IsPaneOpen to false and display mode is compact then the panel will be displayed in compact mode. If you change IsPaneOpen to true then the panel will be displayed in expanded mode.

So, you can see that SplitView doesn’t have anything related to menus but you can easily place something like ListView inside and declare menu items there. Design the menu items in the way that users can see only icons in the compact mode and all of the content in expanded mode, and implement VisualStateManager which changes DisplayMode and IsPaneOpen properties in runtime.

I would would advise to follow these recommendations in order to design your own menu:

· Implement three states for your menu: Expanded, Compact and UltraCompact for different screen sizes. If you have enough space you can show the Pane in expanded mode without any problems but if you have less space you can show just icons in compact mode. Finally if you don’t have room at all (phone in portrait orientation) you should activate UltraCompact state and hide your Pane completely;

· In Compact and UltraCompact states add a bullet button above the menu which opens the Pane using Overlay modes. So, you will be able to open the menu even in UltraCompact mode when menu is hidden;

· Use ListView control for menu;

So your VisualStateManager can look like this (CompactInline as default and IsPaneOpen is True):

<VisualState x:Name="Expanded">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="900"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Compact">
    <VisualState.Setters>
        <Setter Value="False" Target="splitView.IsPaneOpen"></Setter>
        <Setter Value="CompactOverlay" 
           Target="splitView.DisplayMode"></Setter>
    </VisualState.Setters>
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="500"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="UltraCompact">
    <VisualState.Setters>
        <Setter Value="False" Target="splitView.IsPaneOpen"></Setter>
        <Setter Value="Overlay" Target="splitView.DisplayMode"></Setter>
    </VisualState.Setters>
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>

If you implement a bullet button you need to add logic which allows to expand menu as well. You can implement all logic inside code behind or you can try to create two more states and your own triggers there.