WPF Tiles | Windows like View

In this tutorial we discussed a interesting topic about Tile in WPF. Before we starting the tutorial let just summaries what is tile Window. The Tile is a rectangular control whose sole purpose is to mimic a tile from Window

You must have seen the tiles from Windows-8 onward in the OS. The below image are of Windows-8

This image pick from Google..

We gonna see how to create Tile in WPF using Mahapps metro. In this article we see that how to get this type of tile in WPF, So Let's get Started..

We create the Tile using Mahapps Metro, If you are new to Mahapps please follow the below link Mhapps in WPF.

Step-1: Open VS 2017 >> File New Project >> Windows Desktop >> WPF application

Step-2: Open Nuget Package Manager and search & install the Mahapps Package

Step-3: Add the Mahapps Resources File in "App.xaml" to access the Mahapps Metro Design

<Application.Resources>  
     <ResourceDictionary>  
       <ResourceDictionary.MergedDictionaries>  
         <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->  
         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />  
         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />  
         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />  
         <!-- Accent and AppTheme setting -->  
         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />  
         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />  
       </ResourceDictionary.MergedDictionaries>  
     </ResourceDictionary>  
   </Application.Resources>  

Step-4: Open the "MainWindow.xaml.cs" and implement the MetroWindow like below.

using MahApps.Metro.Controls;  
 namespace WPFTile  
 {  
   /// <summary>  
   /// Interaction logic for MainWindow.xaml  
   /// </summary>  
   public partial class MainWindow : MetroWindow  
   {  
     public MainWindow()  
     {  
       InitializeComponent();  
     }  
   }  
 }  

Step-5: Now we make the design of Tile as above, So open "MainWindow.xaml" and add the <Controls:MetroWindow> instead of <window> because the Mahapps Metro Window offers several controls feature than enable us to make the design smoothly. Mahapps Tile one of them.

<Controls:Tile Title="Address Box"  Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"
               Height="130" Grid.Row="0" Grid.Column="0" Background="#0093a6">
                <fa:ImageAwesome Icon="AddressCard" VerticalAlignment="Center" HorizontalAlignment="Center" 
                         Foreground="White" Width="80" Height="80" />
            </Controls:Tile>

<Controls:Tile> is a Mahapps Control that amaze to tile window.

<Controls:MetroWindow x:Class="WPFTile.MainWindow"  
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
       xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"   
       Title="MahApps.Metro.Window" Width="800" Height="530"   
       GlowBrush="{DynamicResource AccentColorBrush}"   
       WindowStartupLocation="CenterScreen" Background="Black"   
       WindowStyle="None" ShowTitleBar="False" ResizeMode="NoResize">  
   <Grid>  
   </Grid>  
 </Controls:MetroWindow>

On above window we make the WindowStyle="None" means there is no require of "max/min" buttons and ResizeMode="NoResize" means the window not be resized.
As we see above we need to design 4*4 columns and rows, so we take Grid Definition as below.

<Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition  Width="auto"></ColumnDefinition>
            <ColumnDefinition  Width="*"></ColumnDefinition>
            <ColumnDefinition  Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition  Height="auto"></RowDefinition>
            <RowDefinition  Height="2*"></RowDefinition>
            <RowDefinition  Height="auto"></RowDefinition>
        </Grid.RowDefinitions>

Step-6: Now we add the Tiles into 4 *4 structure.

<Controls:Tile Title="Address Box" Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"  
         Height="130" Grid.Row="0" Grid.Column="0" Background="#0093a6">  
       </Controls:Tile>  
     <Controls:Tile Title="Calendar" Width="260" Grid.Row="0" Grid.Column="1" Background="#613cbc"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
     </Controls:Tile>  
     <Controls:Tile Title="IE" Width="130" Grid.Row="0" Grid.Column="2" Background="#2b84ee"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
     </Controls:Tile>  
     <Controls:Tile Title="Youtube" Width="130" Grid.Row="0" Grid.Column="3" Background="#008e00"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
     </Controls:Tile>  
      <!--Row-2-->  
     <Controls:Tile Title="Users" Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"  
         Height="130" Grid.Row="1" Grid.Column="0" Background="#da532c">  
     </Controls:Tile>  
     <Controls:Tile Title="Gallery" Width="260" Grid.Row="1" Grid.Column="1"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#0090a4">  
     </Controls:Tile>  
     <Controls:Tile Title="Windows" Width="130" Grid.Row="1" Grid.Column="2"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#9e00a5">  
     </Controls:Tile>  
     <Controls:Tile Title="Skype" Width="130" Grid.Row="1" Grid.Column="3" Background="#0a55be"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
     </Controls:Tile>  
     <!--Row-3-->  
     <Controls:Tile Title="Wechat" Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"  
         Height="130" Grid.Row="2" Grid.Column="0" Background="#9f00a7">  
     </Controls:Tile>  
     <Controls:Tile Title="Hello" Width="260" Grid.Row="2" Grid.Column="1" Background="#00a100"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
     </Controls:Tile>  
     <Controls:Tile Title="HandSpock" Width="260" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#5938b4">  
     </Controls:Tile>  
     <!--Row-4-->  
     <Controls:Tile Title="Desktop" Width="260" VerticalAlignment="Top" HorizontalAlignment="Center"  
         Height="130" Grid.Row="3" Grid.Column="0" Background="#3183d9">  
     </Controls:Tile>  
     <Controls:Tile Title="Whatsapp" Width="260" Grid.Row="3" Grid.Column="1" Background="#2e8bef"  
         Height="130" VerticalAlignment="Top" HorizontalAlignment="Center">  
     </Controls:Tile>  
     <Controls:Tile Title="Thank you" Width="260" Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"  
         Height="130" VerticalAlignment="Top" HorizontalAlignment="Center" Background="#ae193e">  
     </Controls:Tile>  

When we run the application you can see the output like below.

Almost we have done the same tile as like the Windows-8, Only we need to add Icons of them. There is a Grid property "<Grid ShowGridLines="True">" that enable the column and row lines.

You can see that the lines are showing. The tile name "Thnak you" have two columns we merge into one.

PM> Install-Package FontAwesome.WPF

@ Please follow the tutorial How to use [Font-awesome] icon in WPF

Step-7: Now add the "fa" icons in the tiles and the final "Mainwindow.xaml" code be.

 <Controls:MetroWindow x:Class="WPFTile.MainWindow"  
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
       xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"   
       xmlns:fa="clr-namespace:FontAwesome.WPF;assembly=FontAwesome.WPF"  
       Title="MahApps.Metro.Window" Width="800" Height="530"   
       GlowBrush="{DynamicResource AccentColorBrush}"   
       WindowStartupLocation="CenterScreen" Background="Black"   
       WindowStyle="None" ShowTitleBar="False" ResizeMode="NoResize">  
   <Grid ShowGridLines="False">  
     <Grid.ColumnDefinitions>  
       <ColumnDefinition Width="auto"></ColumnDefinition>  
       <ColumnDefinition Width="auto"></ColumnDefinition>  
       <ColumnDefinition Width="*"></ColumnDefinition>  
       <ColumnDefinition Width="auto"></ColumnDefinition>  
     </Grid.ColumnDefinitions>  
     <Grid.RowDefinitions>  
       <RowDefinition Height="auto"></RowDefinition>  
       <RowDefinition Height="auto"></RowDefinition>  
       <RowDefinition Height="2*"></RowDefinition>  
       <RowDefinition Height="auto"></RowDefinition>  
     </Grid.RowDefinitions>  
       <Controls:Tile Title="Address Box" Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"  
         Height="130" Grid.Row="0" Grid.Column="0" Background="#0093a6">  
         <fa:ImageAwesome Icon="AddressCard" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
       </Controls:Tile>  
     <Controls:Tile Title="Calendar" Width="260" Grid.Row="0" Grid.Column="1" Background="#613cbc"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
        <fa:ImageAwesome Icon="Calendar" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="IE" Width="130" Grid.Row="0" Grid.Column="2" Background="#2b84ee"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
       <fa:ImageAwesome Icon="InternetExplorer" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="60" Height="60" />  
     </Controls:Tile>  
     <Controls:Tile Title="Youtube" Width="130" Grid.Row="0" Grid.Column="3" Background="#008e00"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
       <fa:ImageAwesome Icon="YoutubePlay" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
      <!--Row-2-->  
     <Controls:Tile Title="Users" Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"  
         Height="130" Grid.Row="1" Grid.Column="0" Background="#da532c">  
       <fa:ImageAwesome Icon="Users" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="Gallery" Width="260" Grid.Row="1" Grid.Column="1"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#0090a4">  
       <fa:ImageAwesome Icon="Image" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="Windows" Width="130" Grid.Row="1" Grid.Column="2"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#9e00a5">  
       <fa:ImageAwesome Icon="Windows" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="Skype" Width="130" Grid.Row="1" Grid.Column="3" Background="#0a55be"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
       <fa:ImageAwesome Icon="Skype" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <!--Row-3-->  
     <Controls:Tile Title="Wechat" Width="260" VerticalAlignment="Center" HorizontalAlignment="Center"  
         Height="130" Grid.Row="2" Grid.Column="0" Background="#9f00a7">  
       <fa:ImageAwesome Icon="Wechat" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="Hello" Width="260" Grid.Row="2" Grid.Column="1" Background="#00a100"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center">  
       <fa:ImageAwesome Icon="BarChart" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="HandSpock" Width="260" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"  
         Height="130" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#5938b4">  
       <fa:ImageAwesome Icon="HandSpockOutline" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <!--Row-4-->  
     <Controls:Tile Title="Desktop" Width="260" VerticalAlignment="Top" HorizontalAlignment="Center"  
         Height="130" Grid.Row="3" Grid.Column="0" Background="#3183d9">  
       <fa:ImageAwesome Icon="Desktop" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="Whatsapp" Width="260" Grid.Row="3" Grid.Column="1" Background="#2e8bef"  
         Height="130" VerticalAlignment="Top" HorizontalAlignment="Center">  
       <fa:ImageAwesome Icon="Whatsapp" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
     <Controls:Tile Title="Thank you" Width="260" Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"  
         Height="130" VerticalAlignment="Top" HorizontalAlignment="Center" Background="#ae193e">  
       <fa:ImageAwesome Icon="ThumbsUp" VerticalAlignment="Center" HorizontalAlignment="Center"   
              Foreground="White" Width="80" Height="80" />  
     </Controls:Tile>  
   </Grid>  
 </Controls:MetroWindow>

Step-8: All set now we run our application and see the result as expected.

Boom ! That's the Window What we look for. Our own Tile window

Please find the Source code in Github

  Summary

    In this tutorial we discussed how to create WPF tiles. If have any question related to this topic then give your feedback.