实际上在MahApps Metro中使用平铺控制？

Question

我已经与MahApps Metro UI合作了几天，我真的很喜欢它。当希望通过他们的文档，我想用瓦片控制，并沿此线的东西：

他们的文档，位于此页上：http://mahapps.com/controls/tile.html，只是告诉我：

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> 

当我进入我的简单应用程序时，我得到一个小矩形。我真的应该如何使用控件来模仿Windows 8启动屏幕？

Answer 1

我目前正在使用MahApps Metro图书馆构建一个大型应用程序，它很棒！在让应用程序看起来像Windows 8的开始屏幕方面，继承人快速示例我鞭打。

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> 

有很多方法可以做到这使它更清洁，更可重复使用的使用样式和模板，但是这只是一个快捷方式来表明使用瓷砖控制。