1. 技术文章
  2. How To Create A Custom Accent In MahApps.Metro?

How To Create A Custom Accent In MahApps.Metro?

由 旧巷老猫 提交于 2019-12-01 13:31:43

What about this:

<Controls:MetroWindow x:Class="MahApps.Metro.Application5.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" Loaded="MetroWindow_Loaded">
<Controls:MetroWindow.Resources>
    <Style x:Key="FlyoutStyle1" TargetType="{x:Type Controls:Flyout}">
        <Setter Property="Theme" Value="Accent"></Setter>
    </Style>
</Controls:MetroWindow.Resources>
<Controls:MetroWindow.Flyouts>
    <Controls:FlyoutsControl>
        <Controls:Flyout Header="My Sample Flyout"
                         Position="Right"
                         Style="{DynamicResource FlyoutStyle1}">
            <TextBlock Text="This is a sample flyout."></TextBlock>
        </Controls:Flyout>
    </Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>
<Grid>
    <Button Click="Button_Click" RenderTransformOrigin="0.071,0.492" HorizontalAlignment="Left" VerticalAlignment="Center">Flyout Test</Button>
</Grid>

You could get the same result even without using a Style by doing:

 <Controls:Flyout Header="My Sample Flyout"
                         Position="Right"
                         Theme="Accent">

EDIT: Using BasedOn style:

<Controls:MetroWindow.Flyouts>
    <Controls:FlyoutsControl ItemContainerStyle="{DynamicResource FlyoutStyle2}">
        <Controls:Flyout Position="Right">
            <TextBlock Text="This is a sample flyout."/>
        </Controls:Flyout>
    </Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>

Dictionary:

<ResourceDictionary 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"
                xmlns:local="clr-namespace:MahApps.Metro.Application5">

<Style x:Key="FlyoutStyle1" TargetType="{x:Type Controls:Flyout}">
    <Setter Property="Theme" Value="Accent"></Setter>
</Style>
<Style x:Key="FlyoutStyle2" TargetType="{x:Type Controls:Flyout}" BasedOn="{StaticResource FlyoutStyle1}">
    <Setter Property="Header" Value="{Binding Header}" />
</Style>
</ResourceDictionary>

EDIT 2: posting full implementation details.

MainWindow.xaml:

<Controls:MetroWindow
                  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"
                  xmlns:local="clr-namespace:MahApps.Metro.Application5" 
                  x:Class="MahApps.Metro.Application5.MainWindow"
                  Title="MainWindow"
                  Height="350"
                  Width="525">
<Controls:MetroWindow.Flyouts>
    <Controls:FlyoutsControl ItemContainerStyle="{DynamicResource FlyoutStyle2}">
        <Controls:Flyout Position="Right">
            <TextBlock Text="This is a sample flyout."/>
        </Controls:Flyout>
    </Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>

<Controls:MetroWindow.DataContext>
    <local:MyViewModel/>
</Controls:MetroWindow.DataContext>

<Grid>
    <Button Click="Button_Click" RenderTransformOrigin="0.071,0.492" VerticalAlignment="Center" Content="Flyout Test" HorizontalAlignment="Left"/>
</Grid>

MainWindow.cs:

 public partial class MainWindow : MetroWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var flyout = this.Flyouts.Items[0] as Flyout;

        flyout.IsOpen = !flyout.IsOpen;
    }
}

App.xaml:

<Application x:Class="MahApps.Metro.Application5.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         StartupUri="MainWindow.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 Source="pack://application:,,,/Dictionary1.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Dictionary1.xaml:

<ResourceDictionary 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"
                xmlns:local="clr-namespace:MahApps.Metro.Application5">

<Style x:Key="FlyoutStyle1" TargetType="{x:Type Controls:Flyout}">
    <Setter Property="Theme" Value="Accent"></Setter>
</Style>
<Style x:Key="FlyoutStyle2" TargetType="{x:Type Controls:Flyout}" BasedOn="{StaticResource ResourceKey=FlyoutStyle1}">
    <Setter Property="Header" Value="{Binding Header}" />
</Style>

MyViewModel.cs:

public class MyViewModel
{
    public MyViewModel()
    {
        Header = "My Header";
    }
    public string Header { get; set; }
}

EDIT 3: Note on creating custom Accents:

If you look into ThemeManager.cs there is some hard-coding between existing colors and accents, so it may not be as straightforward to create new ones as one would wish. See code snippet below:

var colors = new[] {
   "Red", "Green", "Blue", "Purple", "Orange", "Lime", "Emerald", "Teal", "Cyan", "Cobalt",
   "Indigo", "Violet", "Pink", "Magenta", "Crimson", "Amber", "Yellow", "Brown", "Olive", "Steel", "Mauve", "Taupe", "Sienna"
  };

 foreach (var color in colors)
 {
   var resourceAddress = new Uri(string.Format("pack://application:,,,/MahApps.Metro;component/Styles/Accents/{0}.xaml", color));
   _accents.Add(new Accent(color, resourceAddress));
 }

EDIT 4: Adding a new Accent.

Add MyCustomAccent string to ThemeManager.cs:

var colors = new[] {
    "Red", "Green", "Blue", "Purple", "Orange", "Lime", "Emerald", "Teal", "Cyan", "Cobalt",
     "Indigo", "Violet", "Pink", "Magenta", "Crimson", "Amber", "Yellow", "Brown", "Olive", "Steel", "Mauve", "Taupe", "Sienna", "MyCustomAccent"
};

Using one of the existing files as a model, create MyCustomAccent.xaml under Styles/Accents folder together with the other existing files and define your accent colors as you please. For instance:

<!--ACCENT COLORS-->
<Color x:Key="HighlightColor">#FF9F00DA</Color>
<!-- changed -->
<Color x:Key="AccentColor">#FF9F00DA</Color>
<!-- changed -->
<Color x:Key="AccentColor2">#CC9F00DA</Color>
<!-- changed -->
<Color x:Key="AccentColor3">#999F00DA</Color>
<!-- changed -->
<Color x:Key="AccentColor4">#669F00DA</Color>
<!-- changed -->

Add and entry for MyCustomAccent.xaml in App.xaml resource dictionary:

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/MyCustomAccent.xaml" />

Add the following code to MainWindow.cs:

private void MetroWindow_Loaded(object sender, RoutedEventArgs e)
{
    var theme = ThemeManager.DetectAppStyle(Application.Current);
    var accent = ThemeManager.GetAccent("MyCustomAccent");
    ThemeManager.ChangeAppStyle(Application.Current, accent, theme.Item1);
}

Recompile both MahApps.Metro and your application. Flyout with your newly created custom Accent:

标签
c#
wpf
xaml
mahapps.metro
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!