实际上在MahApps Metro中使用瓷砖控件?

10

我已经与MahApps Metro UI一起工作了几天,我真的很喜欢它。在查看他们的文档时,我想使用Tile控件并创建类似于这样的内容:

enter image description here

他们的文档位于此页面:http://mahapps.com/controls/tile.html ,只告诉我这个:

以下XAML将初始化一个Tile控件,其中Title设置为“Hello!”,Count设置为1。

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

当我将此输入我的简单应用程序中时,我只得到了一个小矩形。我该如何使用该控件来模拟具有平铺的 Windows 8 开始屏幕?

1个回答

14

我目前正在使用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>

虽然使用样式和模板可以使其更加简洁和可重用,但这只是演示Tiles控件的快速方法。


你如何将单词改为小写?每次我尝试像这样的例子时,所有字母都是大写的。例如,如果我尝试将按钮的内容设置为“Hello”,则按钮会显示“HELLO”。我在MahApps.Metro中的基本上每个UI元素都有同样的经历,我真的不喜欢它。 - Anthony
@Anthony 实际上,按钮文本的 API 中有大写转换器;您可能需要下载源代码并自定义行为。 - ender

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接