Verwenden Sie tatsächlich die Tile Control in MahApps Metro?

Question

Ich arbeite seit einigen Tagen mit MahApps Metro UI und habe es wirklich genossen. Wenn sie durch ihre Dokumentation suchen, ich wollte die Kachel-Steuerelement verwenden und etwas entlang der Linien von dieser machen:

Die Dokumentation auf dieser Seite zu finden: http://mahapps.com/controls/tile.html, sagt mir nur dieses:

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> 

Wenn ich dies in meiner einfachen Anwendung eingegeben, erhalte ich ein kleines Rechteck. Wie soll ich eigentlich das Steuerelement verwenden, um den Windows 8-Startbildschirm mit Kacheln nachzuahmen?

Answer 1

Ich baue gerade eine große Anwendung mit der MahApps Metro-Bibliothek und es ist erstaunlich! Im Hinblick darauf, eine App so aussehen zu lassen, dass sie wie der Startbildschirm von Windows 8 aussieht, gibt es ein schnelles Beispiel, das ich aufgepeppt habe.

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> 

Es gibt viele Möglichkeiten, dies zu tun, um es sauberer zu machen und wieder verwendbare Designs und Vorlagen, aber dies war nur ein kurzer Weg, um die Nutzung der Fliesen Kontrolle zu zeigen.