MahApps.Metro demo

1.  开始
2.  RightWindowCommand
3.  Flyout

1. 开始

app.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

MainWindow.xaml

<Controls:MetroWindow x:Class="Demo.MainWindow"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                      Title="MainWindow"
                      Height="350"
                      Width="525">
    <Grid>

    </Grid>
</Controls:MetroWindow>

2. RightWindowCommand

a. 安装 package MahApps.Metro.IconPacks.Modern 用于显示Setting图标

b. 修改MainWindow.xaml

<Controls:MetroWindow x:Class="Demo.MainWindow"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
                      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                      Title="MainWindow"
                      Height="350"
                      Width="525">
    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <Button>
                <iconPacks:PackIconModern Kind="Settings"/>
            </Button>
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>
</Controls:MetroWindow>

 3. Flyout

xaml中添加

<Controls:MetroWindow.Flyouts>
        <Controls:FlyoutsControl>
            <Controls:Flyout Header="Test"
                             Position="Left"
                             Theme="Accent">
                <Grid Width="400" Margin="10">
                        <TextBlock>Hello World</TextBlock>
                </Grid>
            </Controls:Flyout>
        </Controls:FlyoutsControl>

click事件

private void BtnSettings_Click(object sender, RoutedEventArgs e)
        {
            this.ToggleFlyout(0);
        }

        private void ToggleFlyout(int index)
        {
            var flyout = this.Flyouts1.Items[index] as Flyout;
            if (flyout == null)
            {
                return;
            }

            flyout.IsOpen = !flyout.IsOpen;
        }

 放在里面

xaml

   <Grid>
        <Controls:FlyoutsControl Name="Flyouts1">
            <Controls:Flyout Header="设置"
                             Position="Left"
                             Theme="Accent">
                <Grid Width="400" Margin="10">
                    <TextBlock>hello world</TextBlock>
                </Grid>
            </Controls:Flyout>
        </Controls:FlyoutsControl>
    </Grid>

代码修改

var flyout = this.Flyouts1.Items[index] as Flyout;