Actually using Tile Control in MahApps Metro?

Question

I have been working with the MahApps Metro user interface for a couple of days, and I really liked it. When I looked at their documentation, I wanted to use a tile control and do something like that:

Their documentation, located on this page: http://mahapps.com/controls/tile.html , speaks only about this:

The following XAML will initialize a Tile control with its Title set to "Hello!" and its Count set to 1.

 <controls:Tile Title="Hello!" TiltFactor="2" Width="100" Height="100" Count="1"> </controls:Tile> 

When I introduced this into my simple application, I got one small rectangle. How should I actually use a control to mimic the Windows 8 home screen using tiles?

Answer 1

I am currently creating a large application using the Metro MahApps library, and it is awesome! In terms of getting an application similar to the Windows 8 startup screen, I would say a quick example that I whipped.

Xaml

  <Window x:Class="Win8StartScreen.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" Title="MainWindow" Height="513" Width="1138" WindowState="Maximized" WindowStyle="None" Background="#191970"> <Window.Resources> <Style x:Key="LargeTileStyle" TargetType="mah:Tile"> <Setter Property="Width" Value="300" /> <Setter Property="Height" Value="125" /> <Setter Property="TitleFontSize" Value="10" /> </Style> <Style x:Key="SmallTileStyle" TargetType="mah:Tile"> <Setter Property="Width" Value="147" /> <Setter Property="Height" Value="125" /> <Setter Property="TitleFontSize" Value="10" /> </Style> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="87*"/> <ColumnDefinition Width="430*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="83*"/> <RowDefinition Height="259*"/> </Grid.RowDefinitions> <TextBlock Grid.Column="1" VerticalAlignment="Center" Text="Start" FontWeight="Light" Foreground="White" FontSize="30" FontFamily="Segoe UI" /> <WrapPanel Grid.Row="1" Grid.Column="1" Width="940" Height="382" HorizontalAlignment="Left" VerticalAlignment="Top"> <mah:Tile Title="Mail" Style="{StaticResource LargeTileStyle}" Content="ImageHere" Background="Teal" Margin="3"/> <mah:Tile Title="Desktop" Style="{StaticResource LargeTileStyle}" Margin="3"> <mah:Tile.Background> <ImageBrush ImageSource="Images/windesktop.jpg" /> </mah:Tile.Background> </mah:Tile> <mah:Tile Title="Finance" Style="{StaticResource LargeTileStyle}" Background="Green" /> <mah:Tile Title="People" Style="{StaticResource LargeTileStyle}" Background="#D2691E" /> <mah:Tile Title="Weather" Style="{StaticResource LargeTileStyle}" Background="#1E90FF" /> <mah:Tile Title="Weather" Style="{StaticResource SmallTileStyle}" Background="#1E90FF" /> <mah:Tile Title="Store" Style="{StaticResource SmallTileStyle}" Background="Green" /> </WrapPanel> </Grid> </Window> 

There are many ways to do this to make it cleaner and more reusable using styles and templates, but it was just a quick way to show the use of the Tiles element.