На самом деле используете управление плиткой в ​​MahApps Metro?

Я работаю с пользовательским интерфейсом MahApps Metro уже пару дней, и мне это очень понравилось. Когда я просматривал их документацию, я хотел использовать элемент управления плиткой и сделать что-то вроде этого:

введите здесь описание изображения

Их документация находится на этой странице: 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 с плитками?


c# wpf microsoft-metro mahapps.metro
person Hunter Mitchell    schedule 14.05.2014    source источник

Ответы (1)


arrow_upward
14
arrow_downward

В настоящее время я создаю большое приложение, используя библиотеку 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.

person Justin Shep    schedule 15.05.2014
comment
Как сделать слова строчными? Каждый раз, когда я пробую подобный пример, все мои буквы только в верхнем регистре. Например, если я попытаюсь установить содержимое кнопки на Hello, кнопка покажет HELLO. У меня такой же опыт практически с каждым элементом пользовательского интерфейса в MahApps.Metro, и мне это действительно не нравится. - person Anthony; 06.08.2014
comment
@Anthony На самом деле в API есть преобразователи верхнего регистра для текстов кнопок; вам может потребоваться загрузить исходные коды и настроить поведение. - person ender; 15.08.2014