c# - 如何在 MahApps.Metro 中创建自定义口音？

标签 c# wpf xaml mahapps.metro

我正在尝试覆盖浮出控件的默认样式。我试图在自己的 ResourceDictionary 中移动我所有的样式并使用 <Style x:Key="DefaultFlyout" TargetType="controls:Flyout" BasedOn="{StaticResource {x:Type controls:Flyout}}"> ，但它总是忽略我在 BasedOn 中输入的内容.直接使用{StaticResource Flyout}不起作用，因为它是一个未知标识符，并且 DynamicResource不支持 BasedOn .

我的资源词典Controls.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">

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

        ... <!-- other custom resourceDictionaries -->

        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
    </ResourceDictionary.MergedDictionaries>
    ...
    <Style x:Key="DefaultFlyout" TargetType="controls:Flyout" BasedOn="{StaticResource {x:Type controls:Flyout}}">
        <Setter Property="Theme" Value="Accent" />
    </Style>
</ResourceDictionary>
App.xaml包括:
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MyApplication;component/View/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.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:,,,/MyApplication;component/View/CustomAccent.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/baselight.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

以及我想使用弹出按钮的部分，在 MainWindow.xaml 中内<controls:FlyoutsControl>
<controls:FlyoutsControl.ItemContainerStyle>
    <Style BasedOn="{StaticResource DefaultFlyout}"
       TargetType="{x:Type controls:Flyout}">
        <Setter Property="Header"
            Value="{Binding Header}" />
        <Setter Property="IsOpen"
            Value="{Binding Visible}" />
        <Setter Property="Position"
            Value="{Binding Position, Converter={StaticResource FlyoutPositionConverter}}" />
        <Setter Property="IsModal"
            Value="{Binding IsModal}" />
    </Style>
</controls:FlyoutsControl.ItemContainerStyle>

这是结果:

enter image description here

它应该是蓝色弹出按钮，因为我使用了 <Setter Property="Theme" Value="Accent" />但它不起作用。

有谁知道为什么这不起作用？我真的不喜欢复制整个弹出样式只是为了进行更改的想法......

问题似乎是我的自定义口音，但我只是取了正常的口音并更改了一些颜色，这没有任何意义....
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    mc:Ignorable="options">

    <!--ACCENT COLORS-->
    <Color x:Key="HighlightColor">#FF009FDA</Color> <!-- changed -->
    <Color x:Key="AccentColor">#FF009FDA</Color> <!-- changed -->
    <Color x:Key="AccentColor2">#CC009FDA</Color> <!-- changed -->
    <Color x:Key="AccentColor3">#99009FDA</Color> <!-- changed -->
    <Color x:Key="AccentColor4">#66009FDA</Color> <!-- changed -->

    <!-- re-set brushes too -->
    <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource AccentColor2}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource AccentColor3}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource AccentColor4}" options:Freeze="True" />

    <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />

    <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5" options:Freeze="True">
        <GradientStop Color="{StaticResource HighlightColor}" Offset="0" />
        <GradientStop Color="{StaticResource AccentColor3}" Offset="1" />
    </LinearGradientBrush>

    <SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource AccentColor}" options:Freeze="True" />

    <Color x:Key="IdealForegroundColor">White</Color>
    <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{StaticResource IdealForegroundColor}" Opacity="0.4" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />

    <!-- DataGrid brushes -->
    <SolidColorBrush x:Key="MetroDataGrid.HighlightBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.HighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.MouseOverHighlightBrush" Color="{StaticResource AccentColor3}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.FocusBorderBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightBrush" Color="{StaticResource AccentColor2}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />

    <SolidColorBrush x:Key="OverlayBrush" Color="Black" Opacity="0.7"/>  <!-- added -->
</ResourceDictionary>

最佳答案

那这个呢:

<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>

enter image description here

即使不使用 Style，您也可以获得相同的结果通过做:
 <Controls:Flyout Header="My Sample Flyout"
                         Position="Right"
                         Theme="Accent">

编辑 : 使用 BasedOn风格:
<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>

字典:
<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>

编辑 2 :发布完整的实现细节。

主窗口.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>

主窗口.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;
    }
}

应用程序.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>

字典1.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; }
}

编辑 3 :关于创建自定义口音的注意事项:

如果您查看 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"
  };

 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));
 }

编辑 4 :添加新的口音。

添加 MyCustomAccent字符串到 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"
};

使用现有文件之一作为模型，创建 MyCustomAccent.xaml下 Styles/Accents文件夹与其他现有文件并根据需要定义您的强调色。例如:
<!--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 -->

为 MyCustomAccent.xaml 添加和条目在 App.xaml资源字典:
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/MyCustomAccent.xaml" />

将以下代码添加到 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);
}

重新编译 MahApps.Metro和你的申请。Flyout使用您新创建的自定义 Accent:

enter image description here

关于c# - 如何在 MahApps.Metro 中创建自定义口音？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36147698/

上一篇：python - 如何分析正在运行的 Django 应用程序？

下一篇：r - Shiny 的 fileInput 不保留文件名

相关文章：

c# - MVC4 中从 View 到 Controller 的 JSTree 调用

c# - 使用 Canvas 的用户控件的多个实例导致 Silverlight 中出现异常

wpf - 用户单击时关闭 WPF 弹出窗口

c# - 调用 View 并等到窗口关闭在 MVVM 中可行吗？

c# - 来自 C# 的 native 调用尝试读取无效内存

c# - 我可以请求 SQL Server 缓存某个结果集吗？

c# - .NET 应用程序根本无法在客户端计算机中启动

c# - 将一个对象复制到另一个对象

c# - 使用 TabControl 和 MVVM 在 WPF 中正确进行数据绑定(bind)

c# - 只有数字的文本框

©2024 IT工具网  联系我们