MahApps Metro의 타일 컨트롤을 실제로 사용 하시겠습니까?

Question

저는 MahApps Metro UI를 며칠 동안 사용해 왔습니다. 정말 즐겁습니다.

그들의 문서,이 페이지에 있습니다 : : 자신의 문서를 통해보고 때, 나는 타일 컨트롤을 사용하고 이것의 라인을 따라 뭔가 만들고 싶었다

: http://mahapps.com/controls/tile.html를 만 나에게이 문제를 알려줍니다

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

난 내 간단한 응용 프로그램에이 입력 The following XAML will initialize a Tile control with its Title set to "Hello!" and its Count set to 1., 나는 하나 개의 작은 사각형을 얻는다. 어떻게 실제로 컨트롤을 사용하여 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> 

는 스타일과 템플릿을 사용하여이 깨끗하고 재사용하기 위해이 작업을 수행하는 많은 방법이있다, 그러나 이것은 타일 컨트롤을 사용하는 방법을 보여줍니다 그냥 빠른 방법이었다.