Create a Modern UI with UI for WPF

It's 2015 and with the release of Windows 8.1 and upcoming release of Windows 10, touch is becoming the norm for PC users. PC manufactures are releasing touch-screens for everything, including laptops. This doesn't mean that you have to abandon your skill set and write Windows Store Apps to utilize this functionality. With Telerik UI for WPF, you can make any app touch-friendly with just a couple of lines of code.

In this article, I'll talk about a control included in Telerik UI for WPF called RadTileList. Simply put, if you want to achieve the Modern UI Style for your XAML applications, similar to the modern mode of Windows 8.1, then RadTileList has you covered. It displays tiles in a mosaic manner and allows the end-user the ability to smoothly scroll left or right with a gesture, or they can be reordered by using drag and drop just like in Windows 8.1 and 10. You can use RadTileList with a touch screen monitor as well as a mouse without forcing your users to upgrade to a new OS.

Note: For more in-depth information on how to make your app touch-friendly, then check out my session at TelerikNext. More details are included at the end of this article.

Getting Started

Make sure you have downloaded and installed UI for WPF before proceeding. Once that is complete, open Visual Studio and navigate to the Telerik template and select Windows -> Telerik C# WPF Application. Provide a name and place a checkmark in Telerik.Windows.Controls.Data and it will automatically select the other dependent references. Finally, press Next then Finish and our WPF app is ready to begin coding.

We'll begin by adding a Background color to our WPF app and creating three tiles that resemble the experience you might have in Windows 8.1. We will just use a color for now.

<Window x:Class="ModernAppWithWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="MainWindow" Height="350" Width="525" Background="DodgerBlue" >
    <Grid>
        <telerik:RadTileList x:Name="TileList1">
            <telerik:Tile Background="BlueViolet" />
            <telerik:Tile Background="Purple" />
            <telerik:Tile Background="Green"/>
        </telerik:RadTileList>
    </Grid>
</Window>

This will generate the following (I'm using a touch-screen):

Note: That without adding any additional code, we were able to handle right and left swipe events and select an item. It also automatically re-sized the Tiles as the Window expanded.

Adding Meaningful Text

Now that we have the look and feel of a Modern App, let's add some meaningful text to our Tiles. We will begin by adding a TextBlock Style to our Grid.Resources that matches the look and feel of Windows 8.1 and then we will apply the style to our Tiles. Your Grid should look like the following now:

<Grid>
    <Grid.Resources>
        <Style TargetType="TextBlock" x:Key="TileLabelStyle">
            <Setter Property="FontSize" Value="14" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="VerticalAlignment" Value="Bottom"/>
        </Style>
    </Grid.Resources>
<telerik:RadTileList x:Name="TileList1">
    <telerik:Tile Background="BlueViolet" >
        <TextBlock Text="Photo" Style="{StaticResource TileLabelStyle}"/>
    </telerik:Tile>
    <telerik:Tile Background="Purple">
        <TextBlock Text="Maps" Style="{StaticResource TileLabelStyle}"/>
    </telerik:Tile>
    <telerik:Tile Background="Green">
        <TextBlock Text="Mail" Style="{StaticResource TileLabelStyle}"/>
    </telerik:Tile>
</telerik:RadTileList>
</Grid>

If we run the application, then we will see the following:

Adding UI Elements to the Tiles

We could easily use Path Data if we wanted to for our "Mail" tile with the following code :

<telerik:Tile x:Name="Mail" Background="Green">
    <Grid >
        <Path Data="M12.343673,26.303528 L12.343673,48.725266 L53.020504,48.725266 L53.020504,26.303528 L34.296661,40.339897 C33.984161,40.635036 33.693367,40.808647 33.424271,40.860729 C33.155174,40.912811 32.864376,40.938854 32.55188,40.938854 C32.256741,40.938854 31.961605,40.912811 31.66647,40.860729 C31.37133,40.808647 31.067513,40.635036 30.755016,40.339897 z M12.864503,20.756687 L32.55188,35.938885 L52.239258,20.756687 z M9.5832739,15.652554 L55.181946,15.652554 C55.633331,15.652554 56.036976,15.717659 56.392876,15.847866 C56.748775,15.978073 57.056931,16.151684 57.317348,16.368694 C57.577766,16.585709 57.773079,16.828762 57.903286,17.097858 C58.033493,17.366955 58.098595,17.640388 58.098595,17.918163 L58.098595,50.964832 C58.098595,51.815521 57.833839,52.501282 57.304329,53.02211 C56.774818,53.542942 56.067356,53.803356 55.181946,53.803356 L9.5832739,53.803356 C9.2881355,53.803356 9.0016794,53.733913 8.7239037,53.595024 C8.4461269,53.456139 8.2030735,53.260826 7.9947419,53.00909 C7.7864099,52.757355 7.6127996,52.457878 7.4739113,52.110661 C7.3350234,51.763439 7.2655792,51.381496 7.2655797,50.964832 L7.2655797,17.918163 C7.2655792,17.640388 7.3350234,17.366955 7.4739113,17.097858 C7.6127996,16.828762 7.7864099,16.585709 7.9947419,16.368694 C8.2030735,16.151684 8.4461269,15.978073 8.7239037,15.847866 C9.0016794,15.717659 9.2881355,15.652554 9.5832739,15.652554 z"
        Fill="White"
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        </Path>
        <TextBlock Text="Mail" Style="{StaticResource TileLabelStyle}"/>
    </Grid>
</telerik:Tile>

Which would produce the following Tile:

We'll do the same thing for Map since Path data is easy to use and requires no additional assets added to our project.

But you're probably wondering where you would find the Path Data to input in that field. One great resource for path data that you may use freely in your enterprise apps comes from XAMLALOT. In this case, you can search the database for existing clipart such as the Mail icon, and select “Download XAML Canvas as Text”. You will want to remove everything inside the code snippet except for the Path data as the code snippet is formatted to be used in with a canvas. Another free option is called, Open Clip Art. Search for the clipart that you want, and then convert it from SVG format to XAML using Inkscape. If you prefer to create your own path data, then there are a number of ways to do so. I prefer Microsoft Expression Design 4 and use the "Copy XAML" option that is available. There are other tools that do the trick, so search and find what is best for you.

For more complicated backgrounds, you would probably use an image. Here, we have added a photo.png to our project.

<telerik:Tile>
  <Grid>
    <Image Source="photo.png" Stretch="Fill" />
    <TextBlock Text="Photo" Style="{StaticResource TileLabelStyle}"/>
  </Grid>
</telerik:Tile>

Our app currently looks like the following :

Different Sizes of Tiles

It is worth mentioning now that there are three different Tile Types found in Windows 8.1.

• Single Tile Template – Otherwise known as the Standard Tile Template.
• Double Tile Template – Otherwise known as the Wide Tile Template.
• Quadruple – Two Wide Tile Templates stacked on top of one another.

A simple example of this would be setting the TileType as shown below :

<telerik:Tile Background="Purple" TileType="Single">
    <TextBlock Text="Maps" Style="{StaticResource TileLabelStyle}"/>
</telerik:Tile>

Since the Maps Tile is something that our user may not use as often, let's change that tile type to a "Single" tile and the "Mail" tile to a Quadruple.

Determining Which Item was Clicked

We can easily determine which tile added was clicked by adding a SelectionChanged event to the declaration of RadTileList and writing a couple of lines of code as shown below.

The declaration in XAML:

<telerik:RadTileList x:Name="TileList1" SelectionChanged="TileList1_SelectionChanged_1">

The code in our MainPage.xaml.cs:

private void TileList1_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
    var selectedItem = TileList1.SelectedItem as Tile;
    MessageBox.Show(selectedItem.Name);
}

As long as a x:Name is set on each tile, then the MessageBox will display the TileName as shown below.

<telerik:Tile Background="Purple" TileType="Single" x:Name="Maps">
</telerik:Tile>

What Can We Do Better?

In most Modern Apps, they usually have some sort of background with the tiles layered on top of it. We can achieve that by removing the background color and adding the following code after we have declared the RadTileList in XAML :

<telerik:RadTileList.PanoramaBackground>
    <Image Source="largebackground.png" />
</telerik:RadTileList.PanoramaBackground>

Grouping Items

The app is starting to take shape, but another feature of modern apps is grouping. RadTileList can arrange tiles into separate sections depending on each user's requirements. Those groups can be modified through its GroupTemplate property.

First, we need to add the DataTemplate to our Grid.Resources as shown below:

<DataTemplate x:Key="GroupTemplate">
    <TextBlock Text="{Binding}"                                
            Foreground="Gray"
            FontWeight="Bold"
            FontSize="20"
            FontFamily="Segoe UI"/>   
</DataTemplate>

Then add the GroupTemplate property in the XAML Declaration.

<telerik:RadTileList x:Name="TileList1" SelectionChanged="TileList1_SelectionChanged_1" GroupTemplate="{StaticResource GroupTemplate}">

Finally, we'll use the built-in TileGroup to give each group a Header and an Index in which it will appear.

<telerik:TileGroup Header="Software Development" DisplayIndex="1">
    <telerik:TileGroup.Items>
        <telerik:Tile x:Name="VisualStudio" Background="Purple"   >
            <TextBlock Text="Visual Studio" Style="{StaticResource TileLabelStyle}"/>
        </telerik:Tile>

        <telerik:Tile x:Name="Blend" Background="DodgerBlue" >
            <TextBlock Text="Blend" Style="{StaticResource TileLabelStyle}"/>
        </telerik:Tile>

        <telerik:Tile x:Name="ILDASM" Background="Black"  >
            <TextBlock Text="ILDASM" Style="{StaticResource TileLabelStyle}"/>
        </telerik:Tile>
    </telerik:TileGroup.Items>
</telerik:TileGroup>

Let's check this out in action.

The source code for this article is available on my GitHub repo.

But Wait, there is MORE love for WPF happening at TelerikNext!

We took a look today at making a WPF app modern by using the TileList UI control. We have seen that it allows us to have a Modern UI similar to Windows 8.1 in our WPF applications. While many enterprises are investigating when or if they are going to upgrade to Windows 8.1 or 10, you can go ahead and provide your users a modern UI now.

But here is the punch line - we've barely scratched the surface of modern apps with UI with WPF!

We have a conference coming up called, "TelerikNext" and I have a session called, "Building Touch Apps with UI for WPF", that I'd love for you to attend. If you use the promo code CRUMP when you register, then you will receive $50 off the standard ticket price.

We'll talk about the release of Windows 8.1 and 10 and how touch is an important consideration in any app going forward. We will take a standard WPF app and turn it into an application that responds to various gestures including: swipes, pinch, tap, tap and move and tap and hold. We will also explore various touch-friendly controls and explore scenarios of when you should or shouldn't use this feature.

As a teaser, your app will go from this...

...to a touch-friendly version with just a couple of lines of code. Notice how the buttons and fonts are larger and designed to work with touch.

See you there!

Header image courtesy of Intel Free Press