如何在 ResourceDictionary.MergedDictionaries 中拥有多种样式的按钮

How to have multiple styles of buttons in ResourceDictionary.MergedDictionaries

好吧,我是 WPF 的新手,我给自己布置了一个非常艰巨的挑战。我正在尝试为我工作的公司制作一个程序。我已经设计了登录 Window,现在我想设计仪表板。

这是登录 Window 的屏幕截图,下面是 XAML: Login window

<Window x:Class="Programme_de_gestion.LoginWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Programme_de_gestion"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="380"
        AllowsTransparency="True" Background="Transparent"
        WindowStyle="None" ResizeMode="NoResize"
        MouseDown="Window_MouseDown">
      
    <Grid>
     
        <Grid>

            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>


            <Border CornerRadius="10" Grid.RowSpan="2">
                <!--Création du style de la fenêtre-->
                <Border.Background>
                    <!--Les gradientstop servent à sélectionner 
                    les couleurs du background de la fenêtre.
                    Je me suis servis du site: 
                    https://htmlcolorcodes.com/fr/-->
                    <LinearGradientBrush>
                        <GradientStop Color="#918886 " Offset="0.0"/>
                        <GradientStop Color="#EBE7E6 " Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <StackPanel VerticalAlignment="Center">
                <!--Image logo à insérer en début de fenêtre.
                J'ai pris le logo de JPG ICI:
                https://secureservercdn.net/45.40.148.147/vzq.777.myftpupload.com/wp-content/themes/swoo/images/logo1.png-->
                <Image Source="Images\logoJPG.png" Width="200"/>
                <!--À décider si on garde le texteblock sous le logo ou non-->
                <TextBlock Text="Connection" 
                           
                           FontWeight="Light"
                           FontFamily="Helvetica"
                           FontSize="22"
                           Foreground="white"
                           HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- StackPanel contenant toute la section du bas-->
            <StackPanel Grid.Row="1">
                <!--StackPanel pour la section du nom d'utilisateur et Icone-->
                <StackPanel  Orientation="Horizontal">
                    <!--Zone de texte pour le login-->
                    <TextBox FontFamily="Helvetica"
                         FontWeight="Light"
                         Text="Username"
                         FontSize=" 20 "
                         HorizontalAlignment="Center"
                         Foreground ="White"
                         Background="Transparent"
                         BorderThickness="0"
                         Width="235"
                         HorizontalContentAlignment="Left"
                         Opacity="0.5"
                         Height="25"
                         Margin="63,0,0,0"/>
                    <!--Icone de compte-->
                    <iconPacks:PackIconMaterial Kind="Account"
                                            Foreground="White"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"/>
                </StackPanel>
                <!--Border pour faire plus chic-->
                <Border Width="250"
                    Height="2"
                    Opacity="0.5"
                    Background="white"/>
                <!--StackPanel pour la section password-->
                <StackPanel  Orientation="Horizontal"
                             Margin="0,20,0,0">
                    <!--Champ d'entrée du mot de passe-->
                    <PasswordBox FontFamily="Helvetica"
                         FontWeight="Light"
                         Password="Password"
                         FontSize=" 20 "
                         HorizontalAlignment="Center"
                         Foreground ="White"
                         Background="Transparent"
                         BorderThickness="0"
                         Width="235"
                         HorizontalContentAlignment="Left"
                         Opacity="0.5"
                         Height="25"
                         Margin="63,0,0,0"/>
                    <!--Icone pour le mot de passe-->
                    <iconPacks:PackIconMaterial Kind="Lock"
                                            Foreground="White"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"/>
                    
                </StackPanel>
                <!--Bordure pour faire plus chic-->
                <Border Width="250"
                    Height="2"
                    Opacity="0.5"
                    Background="white"/>
                
                <TextBlock Text="MOT DE PASSE OUBLIÉ?" 
                           Margin="0,5,0,0"
                           FontWeight="Light"
                           FontFamily="Helvetica"
                           FontSize="8"
                           Foreground="white"
                           HorizontalAlignment="Center"/>
                
                <StackPanel Orientation="Horizontal" Margin="0,30,0,0">

                    <Button Width="100" Height="40" Content="LOGIN" 
                            HorizontalAlignment="Center"
                            Margin="60,0,0,0"
                            Name="btnLogin"
                            Click="btnLogin_Click" Cursor="Hand"/>
                    
                    <Button Width="100" Height="40" Content="FERMER" 
                            HorizontalAlignment="Center"
                            Margin="60,0,0,0"
                            Name="btnFermer"
                            Click="btnFermer_Click"/>
                    
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</Window> 

登录Window后,出现MainWindow: MainWindow

右边的部分是一个视图,我打算在其中放置我的仪表板 Window。当在左侧选择不同的元素时,视图中显示的 window 将发生变化。

我遇到的第一个问题是按钮。我为登录 Window 中的按钮制作了一个自定义控件,它位于 ModernButton.xaml.

对于仪表板,我想使用一个名为 Material Design In XAML 的 nuget 包。现在,当我添加 Nuget 包并将资源字典添加到我的 ResourceDictionary.MergedDictionaries 时,我的登录按钮样式 window 更改为 Material 设计包提供的样式。如何保留我在 ModernButton.XAML

中定义的按钮的样式

此外,我不太确定 window 右侧视图部分的变化。如果它不起作用,你有没有其他解决方案。

抱歉这么久 post,如果您需要更多我的源代码或者如果我的解释不清楚,请告诉我,英语不是我的母语。

编辑: 这是 ModernButton.XAML:

中的代码
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="ModernButton">
        <Setter Property="Foreground" Value="white"/>
        <Setter Property="FontFamily" Value="Helvetica"/>
        <Setter Property="FontWeight" Value="Light"/>
        <Setter Property="Background" Value="Transparent"/>

        <Setter Property="Template">

            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background ="{TemplateBinding Background}" CornerRadius="20"
                                                                       BorderThickness="2"
                                                                       BorderBrush="White">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Opacity" Value="0.4"/>
                <Setter Property="Foreground" Value="DeepSkyBlue"/>
            </Trigger>
            
        </Style.Triggers>
    </Style>

</ResourceDictionary>

这里是 App.XAML 中的代码:

<Application x:Class="Programme_de_gestion.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Programme_de_gestion"
             StartupUri="LoginWindow.xaml">
    
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ModernButton.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
       
    </Application.Resources>
</Application>

至于Button样式,您只是忘记指定您在ModernButton.xaml中定义的样式。这就是为什么该样式被 Material 设计包中包含的另一种样式覆盖的原因。

要解决此问题,请设置按钮的 Style 属性。

<Button Width="100" Height="40" Content="LOGIN"
        HorizontalAlignment="Center"
        Margin="60,0,0,0"
        Name="btnLogin"
        Cursor="Hand"
        Style="{StaticResource ModernButton}"/>

关于应用程序结构,我认为这是典型的主从模式的问题,您可以找到各种示例。