Thực tế sử dụng Kiểm soát Ngói trong MahApps Metro?

Question

Tôi đã làm việc với MahApps Metro UI trong vài ngày và tôi thực sự rất thích nó. Khi nhìn qua tài liệu của họ, tôi muốn sử dụng điều khiển ngói và làm một cái gì đó dọc theo dòng này:

tài liệu của họ, nằm trên trang này: http://mahapps.com/controls/tile.html, chỉ nói với tôi điều này:

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> 

Khi tôi nhập mã này vào ứng dụng đơn giản, tôi nhận được một hình chữ nhật nhỏ. Làm thế nào tôi thực sự phải sử dụng điều khiển để bắt chước màn hình bắt đầu Windows 8 với gạch?

Answer 1

Tôi hiện đang xây dựng một ứng dụng lớn bằng thư viện MahApps Metro và thật tuyệt vời! Xét về việc nhận được một ứng dụng trông giống như màn hình bắt đầu của Windows 8, ví dụ nhanh của cô ấy đã đánh mất.

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> 

Có rất nhiều cách để làm điều này để làm cho nó sạch và tái sử dụng hơn khi sử dụng kiểu dáng và mẫu, nhưng điều này chỉ là một cách nhanh chóng để hiển thị việc sử dụng gạch kiểm soát.