XAML Changes to Support Universal Windows Platform in Windows 10

Introduction

XAML is the native UI platform for Windows 10. A native app on Windows 10 will be built using XAML. XAML powers the Universal Windows Platform that is key to Windows 10.

Powering the Universal Windows Platform means that controls have to work in similar ways across different devices. This means that certain controls that seem to be universal in nature in the pre-Windows 10 era needed to be changed to ensure there is a consistent behavior that is ensured by Universal Windows Platform.

One key benefit is that users do not need to have different logic for different device form factors in a Windows 10 world. This will help developers focus on the core logic of their:

New Universal Controls

Pivot: This is great for a one-handed experience on mobiles, and works like tabs on desktop.

ContentDialog: This control was previously on Windows Phone 8.1, but was not present on Windows. On Windows 8, there was a MessageDialog that does not support XAML Content. The refreshed ContentDialog control on Windows 10 works on all devices.

AutoSuggestBox: This is to be used for auto-complete scenarios. This supports IME and glyphs. On Windows Phone, there was a search box, but it was restrictive and it is on the path of deprecation.

Maps: There is a new universal Maps control that replaces Bing Maps. They offer Offline support, 3D, and street-side panoramas.

Impact of Universal Windows Runtime to XAML Developers

There is more to than just one set of universal controls to build applications. The XAML controls have common branding, behavior, scaling, and support diverse inputs.

Note that although views are reusable across devices and displays, they might need tailoring via responsive pages or multiple views.

SplitView controls is an example of how writing XAML code has been simplified. As you can see from the following example, the navigation content is cleanly separated from main content.

For example:

<SplitView DisplayMode="Inline|Overlay|
      CompactInline|CompactOverlay">
   <SplitView.Pane>
   <!-- Navigation Content Here -->
   </SplitView.Pane>
   <!-- Main Content Here -->
</SplitView>

Triggers and Setters

To simplify responsive view development, there is support for media queries in XAML. You can think of triggers as events in response to which setters are activated. Let us look at an example:

<VisualState.Setters>
   <Setter Target="splitView.DisplayMode"
      Value="Inline" />
</VisualState.Setters>

<VisualState.StateTriggers>
   <AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>

<VisualState.Setters>
   <Setter Target="splitView.DisplayMode"
      Value="Overlay" />
</VisualState.Setters>

<VisualState.StateTriggers>
   <AdaptiveTrigger MinWindowWidth= "0" />
</VisualState.StateTriggers>

In the preceding example, when the WindowWidth is more than or equal to 720, the display mode for the SplitView changes to Inline mode and is Overlay mode when it is less than 720.

Binding Changes

There is a new way to bind controls to data sources, via the Bind keyword. The most notable improvement is the behavior to resolve at compile time that can provide compiler errors. This avoids the issues that were observed with Binding. Note that Bind supports only 11 associations at the time of writing the article. Here is an example that shows “binding” in action.

<ListView>
   <ListView.ItemTemplate>
      <DataTemplate
            x:DataType="local:FreeBookCategory">
         <StackPanel>
            <SymbolIcon Symbol="{x:Bind Symbol}"/>
            <TextBlock Text="{x:Bind Name}"/>
            <Button Click="{x:Bind Click}"/>
         </StackPanel>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

Drag and Drop

Drag and Drop support is extended for windowed applications. There is a new attribute for Grid, called AllowDrop, and has support for event handlers for drag and drop.

<!-- XAML -->
<Grid AllowDrop="True" DragOver="Do_DragOver"
      Drop="Do_Drop" ...>
   ...
</Grid>

Summary

In the preceding article, we learned about the XAML changes coming in Windows 10. I hope you have found this information useful.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.