How to Create XAML WinRT Components for Windows 8 Metro Applications

[Infragistics] Mihail Mateev / Friday, March 23, 2012

Metro applications have an innovative new interface and a component-based architecture.

Many developers created components for XAML-related technologies like Silverlight / WPF and developers of jQuery components they would like to create WinRT controls for Windows Metro applications.One of the new challenges for developers is to work on Windows 8 Metro applications. This article is about how to start creating XAML WinRT components.You will

You will learn how to create a simple XAML control, using C# and how to use it in a demo Metro application.

Developers will be excited from the significant improvements in Windows 8 Consumer Preview and Visual Studio 11 Beta, related to Metro applications development.

In September 2011 Microsoft announced Windows 8 Developer Preview and Visual Studio 2011 Developer Preview. There was some missing features in the Developer Preview:

Visual Studio Developer Preview 11 had no templates for custom controls
ObservableCollection<T> didn’t support INotifyCollectionChanged (developers must create custom collections, that implement IObservableVector<T>
XAML Dependency Properties had a different syntax from the Silverlight / WPF implementation
In Visual Studio 11 Developer Preview developers should set Generic.xaml build type as Content (in Silverlight it is Page)
XAML Metro components had some issues in design mode and often it was not possible programmers to see the UI at design time.

Dependency Property definition

// Using a DependencyProperty as the backing store for Value.  

//This enables animation, styling, binding, etc...

public static readonly DependencyProperty ValueProperty =

    DependencyProperty.Register("Value", "Object", typeof(SimpleSlider).FullName, 

new PropertyMetadata(0.0, OnValueChanged));

In Visual Studio Beta 11 there is a significant improvement for the component developers. They now have all of the above missing features and can quickly begin development of Metro components.

In this article you will learn how to create step by step a simple Metro component (simple slider). The blog could help component developers to ensure that they could reuse almost everything from WPF/Silverlight controls. Users without an experience in component development also could understand that is pretty easy to create XAML components for Metro applications.

How to start:

We will create a simple Metro application, that display information about mobile phones . In the project will be added a Templated Control item, used to implement slider functionalities.

Prerequisites:

Application

In Visual Studio 11 Beta create a new application: Visual C# –> Windows Metro Style –> Blank Application. Set the name of the application to “SimpleSliderDemo”.

Visual Studio will create the application structure using the amazing new metro interface.

Sample application will show a list with mobile phones. When you select a specified phone you could see the hone properties in the frame, located in the right side of the layout. In this application will be implemented custom slider control, that customer could use to change the number of phones in stock.

SimpleSlider Control Implementation

Add new item-> Templated Control and name it “SimpleSlider”.

Generated Generic.xaml is in the Themes folder as you expect.

Create a folder, named controls and move in this folder SimpleSlider.cs file.

SimpleSlider.cs has the well known structure if you have experience with Silverlight/WPF components. There are only different namespaces for UI elements.

using System;

using System.Collections.Generic;

using System.Linq;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Documents;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

  

// The Templated Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234235

  

namespace SimpleSliderDemo

{

    public sealed class SimpleSlider : Control

    {

        public SimpleSlider()

        {

            this.DefaultStyleKey = typeof(SimpleSlider);

        }

    }

}

Visual Studio generates also a basic template in Generic.xaml

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:SimpleSliderDemo">

  

    <Style TargetType="local:SimpleSlider">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="local:SimpleSlider">

                    <Border

                        Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}">

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

Update the SimpleSlider control template adding a thumb and a rectangle for the slider track:

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:ctrl="using:SimpleSliderDemo.Controls">

  

    <Style TargetType="ctrl:SimpleSlider">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ctrl:SimpleSlider">

                    <Border

                        Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}">

                        <Grid>

                            <Border Height="8"

                                VerticalAlignment="Stretch"

                                Background="LightGray" />

                            <Canvas Margin="0"

                                MinHeight="8">

                                <Rectangle x:Name="PART_Track"

                                       Height="8"

                                       Fill="Yellow" />

                                <Thumb x:Name="PART_Thumb" Background="Blue"

                                   Width="8"

                                   Height="8" />

                            </Canvas>

                        </Grid>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

Implement the slider functionalities in SimpleSlider.cs file:

Add dependency properties for Value, MinValue, MaxValue
Implement thumb dragging support.

You could see that the approach is like in other XAML technologies. In Visual Studio 11 Beta Microsoft offers to XAML developers the same structure for components that they know from the past. You could use the overrides like OnApplyTemplate() in the same way like in WPF/Silverlight

using System;

using System.Collections.Generic;

using System.Linq;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Shapes;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Documents;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

  

// The Templated Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234235

  

  

namespace SimpleSliderDemo.Controls

{

    [TemplatePart(Name = ThumbPartName, Type = typeof(Thumb))]

    [TemplatePart(Name = TrackPartName, Type = typeof(Rectangle))]

    public sealed class SimpleSlider : Control

    {

  

        #region Fields

  

        private const string ThumbPartName = "PART_Thumb";

        private const string TrackPartName = "PART_Track";

  

        private Thumb thumb;

        private Rectangle rectangle;

  

        #endregion //Fields

  

        #region Constructor

        public SimpleSlider()

        {

            this.DefaultStyleKey = typeof(SimpleSlider);

        }

        #endregion //Constructor

  

        #region Properties

  

        #region MinimumValue

  

        // Using a DependencyProperty as the backing store for MinimumValue.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty MinimumValueProperty =

            DependencyProperty.Register("MinimumValue", typeof(object), typeof(SimpleSlider), new PropertyMetadata(0.0));

  

        /// <summary>

        /// Gets or sets the minimum.

        /// </summary>

        public double MinimumValue

        {

            get { return (double)GetValue(MinimumValueProperty); }

            set { SetValue(MinimumValueProperty, value); }

        }

  

        #endregion //MinimumValue

  

        #region MaximumValue

  

        // Using a DependencyProperty as the backing store for MaximumValue.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty MaximumValueProperty =

            DependencyProperty.Register("MaximumValue", typeof(object), typeof(SimpleSlider), new PropertyMetadata(0.0));

  

        /// <summary>

        /// Gets or sets the maximum.

        /// </summary>

        public double MaximumValue

        {

            get { return (double)GetValue(MaximumValueProperty); }

            set { SetValue(MaximumValueProperty, value); }

        }

  

        #endregion //MaximumValue

  

        #region Value

  

        // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty ValueProperty =

            DependencyProperty.Register("Value", typeof(object), typeof(SimpleSlider), new PropertyMetadata(0.0, OnValueChanged));

  

        /// <summary>

        /// Gets or sets the value.

        /// </summary>

        public double Value

        {

            get { return (double)GetValue(ValueProperty); }

            set

            {

                SetValue(ValueProperty, value);

            }

        }

        #endregion //Value

  

        #endregion //Properties

  

        #region Methods

  

        #region OnApplyTemplate

        /// <summary>

        /// When overridden in a derived class, is invoked whenever application code or internal processes call <see cref="M:System.Windows.FrameworkElement.ApplyTemplate"/>.

        /// </summary>

        protected override void OnApplyTemplate() // OnApplyTemplateCore()

        {

            //base.OnApplyTemplateCore();

  

            base.OnApplyTemplate();

  

            this.thumb = this.GetTemplateChild(ThumbPartName) as Thumb;

            if (this.thumb != null)

            {

                this.thumb.DragDelta += this.Thumb_DragDelta;

            }

  

            this.rectangle = this.GetTemplateChild(TrackPartName) as Rectangle;

  

            this.SizeChanged += new SizeChangedEventHandler(SimpleSlider_SizeChanged);

        }

        #endregion //OnApplyTemplate

  

        #region SimpleSlider_SizeChanged

        /// <summary>

        /// Called when size changed.

        /// </summary>

        private void SimpleSlider_SizeChanged(object sender, SizeChangedEventArgs e)

        {

            if (e.NewSize.Width != e.PreviousSize.Width)

            {

                this.UpdateControlParts();

            }

        }

        #endregion //SimpleSlider_SizeChanged

  

        #region OnValueChanged

        /// <summary>

        /// Called when value changed.

        /// </summary>

        private static void OnValueChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)

        {

            var customSlider = (SimpleSlider)dependencyObject;

            customSlider.UpdateControlParts();

        }

        #endregion //OnValueChanged

  

        #region Thumb_DragDelta

        /// <summary>

        /// Handles the DragDelta event of the Thumb control.

        /// </summary>

        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)

        {

            var pixelDiff = e.HorizontalChange;

            var currentLeft = Canvas.GetLeft(this.thumb);

  

            // trying to drag too far left

            if ((currentLeft + pixelDiff) < 0)

            {

                this.Value = 0;

            }

            // trying to drag too far right

            else if ((currentLeft + pixelDiff + this.thumb.ActualWidth) > this.ActualWidth)

            {

                this.Value = this.MaximumValue;

            }

            else

            {

                var totalSize = this.ActualWidth;

                var ratioDiff = pixelDiff / totalSize;

                var rangeSize = this.MaximumValue - this.MinimumValue;

                var rangeDiff = rangeSize * ratioDiff;

                this.Value += rangeDiff;

            }

        }

        #endregion //Thumb_DragDelta

  

        #region UpdateControlParts

        /// <summary>

        /// Updates the control parts.

        /// </summary>

        private void UpdateControlParts()

        {

            double halfTheThumbWith = 0;

  

            if (this.thumb != null)

            {

                halfTheThumbWith = this.thumb.ActualWidth / 2;

            }

  

            double totalSize = this.ActualWidth - halfTheThumbWith * 2;

  

            double ratio = totalSize / (this.MaximumValue - this.MinimumValue);

  

            if (this.thumb != null)

            {

                Canvas.SetLeft(this.thumb, ratio * this.Value);

            }

  

            if (this.rectangle != null)

            {

                this.rectangle.Width = ratio * this.Value + halfTheThumbWith;

            }

        }

        #endregion //UpdateControlParts

  

        #endregion //Methods

    }

}

Data

This sample is focused mainly on Metro user interface and component development, but each application needs data.

Add two classes:

MobilePhone : to maintain phone data.
MobilePhoneData: to implement a collection with a sample mobile phone data

MobilePhone implementation

class MobilePhone : INotifyPropertyChanged

 {

     #region Events

  

     public event PropertyChangedEventHandler PropertyChanged;

  

     #endregion // Events

  

     #region Properties

  

     #region Id

  

     private long _id;

  

     public long Id

     {

         get

         {

             return _id;

         }

  

         set

         {

             if (value != _id)

             {

                 _id = value;

                 this.RaisePropertyChanged("Id");

             }

         }

     }

  

     #endregion // Id

  

     #region Brand

  

     private string _brand;

  

     public string Brand

     {

         get

         {

             return _brand;

         }

  

         set

         {

             if (value != _brand)

             {

                 _brand = value;

                 this.RaisePropertyChanged("Brand");

             }

         }

     }

  

     #endregion // Brand

  

     #region Model

  

     private string _model;

  

     public string Model

     {

         get

         {

             return _model;

         }

  

         set

         {

             if (value != _model)

             {

                 _model = value;

                 this.RaisePropertyChanged("Model");

             }

         }

     }

  

     #endregion // Model

  

     #region Price

  

     private string _price;

  

     public string Price

     {

         get

         {

             return _price;

         }

  

         set

         {

             if (value != _price)

             {

                 _price = value;

                 this.RaisePropertyChanged("Price");

             }

         }

     }

  

     #endregion // Price

  

     #region Quantity

  

     private int _quantity;

  

     public int Quantity

     {

         get

         {

             return _quantity;

         }

  

         set

         {

             if (value != _quantity)

             {

                 _quantity = value;

                 this.RaisePropertyChanged("Quantity");

             }

         }

     }

  

     #endregion // Quantity

  

     #endregion // Properties

  

     #region Methods

  

     #region RaisePropertyChanged

     private void RaisePropertyChanged(string propertyName)

     {

         if (this.PropertyChanged != null)

         {

             this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

         }

     }

     #endregion //RaisePropertyChanged

  

     #endregion // Methods

 }

MobilePhoneData implementation

class MobilePhonesData

 {

     #region Events

  

     public event PropertyChangedEventHandler PropertyChanged;

  

     #endregion // Events

  

     #region Properties

  

     #region Phones

  

     private ObservableCollection<MobilePhone> _phones;

  

     public ObservableCollection<MobilePhone> Phones

     {

         get

         {

             return _phones;

         }

  

         set

         {

             if (value != _phones)

             {

                 _phones = value;

                 RaisePropertyChanged("Phones");

             }

         }

     }

  

     #endregion // Phones

  

     #endregion // Properties

  

     #region Constructor

  

     public MobilePhonesData()

     {

         this.Phones = new ObservableCollection<MobilePhone>

                           {

                               new MobilePhone

                                   {

                                       Id = 0,

                                       Brand = "Motorola",

                                       Model = "GSM C139",

                                       Price = "42 $", 

                                       Quantity = 100

                                   },

                               new MobilePhone

                                   {

                                       Id = 1,

                                       Brand = "Motorola",

                                       Model = "GSM C123",

                                       Price = "46 $", 

                                       Quantity=120

                                   },

                               new MobilePhone

                                   {

                                       Id = 2,

                                       Brand = "LG",

                                       Model = "GSM KG275",

                                       Price = "48.99 $", 

                                       Quantity=79

                                   },

  

                               new MobilePhone

                                   {

                                       Id = 3,

                                       Brand = "Sony Ericsson",

                                       Model = "GSM J110i",

                                       Price = "52 $", 

                                       Quantity=35

                                   }

                           };

     }

  

     #endregion // Constructor

  

     #region Methods

  

     private void RaisePropertyChanged(string propertyName)

     {

         if (this.PropertyChanged != null)

         {

             this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

         }

     }

  

     #endregion // Methods

 }

Mobile Phone Details

Add a blank page for Mobile Phone Details. In this page application will display details about the selected mobile phone

<Page

    x:Class="SimpleSliderDemo.PhoneDetailsPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:SimpleSliderDemo"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

  

    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

        <StackPanel Orientation="Vertical">

            <TextBlock Text="Mobile Phone:" FontSize="36"/>

            <TextBlock Text="{Binding Brand}" FontSize="32"/>

            <TextBlock Text="{Binding Model}" FontSize="32"/>

            <StackPanel Orientation="Horizontal">

                <TextBlock Text="Price=" FontSize="32"/>

                <TextBlock Text="{Binding Price}" FontSize="32"/>

            </StackPanel>

  

            <StackPanel Orientation="Horizontal">

                <TextBlock Text="Quantity=" FontSize="32"/>

                <TextBlock Text="{Binding Quantity}" FontSize="32"/>

            </StackPanel>

        </StackPanel>

    </Grid>

</Page>

When navigate to this page you could set Parameter (selected mobile phone) as a DataContext for PhoneDetailsPage.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    this.DataContext = e.Parameter;

}

Application usage

Run the application. You could see the list with phones. When you select a phone details about the specified product appears in the frame where is loaded the phone details page. Slider thumb shows the number of items on stock (Quantity).

User could change the number of available phones when you drag the slider thumb

Finally you have a real XAML WinRT component for Metro applications. It is easy, very similar to other XAML platforms and could give an opportunity to be one of the first on this market.

Source code you could download here.

Follow news from Infragistics in http://infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.