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

问题描述

好的，所以我对 WPF 还很陌生，我给自己安排了一个非常艰巨的挑战。我正在尝试为我工作的公司制作一个程序。我已经设计了登录窗口，现在我想设计仪表板。

这是登录窗口的屏幕截图，下面是 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"/>
                    <!--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">
                    <!--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"/>
                    <!--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"
                           FontWeight="Light"
                           FontFamily="Helvetica"
                           FontSize="8"
                           Foreground="white"
                           HorizontalAlignment="Center"/>
                
                <StackPanel Orientation="Horizontal" Margin="0,30,0">

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

在 LoginWindow 之后，出现一个 MainWindow： MainWindow

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

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

对于仪表板，我想使用名为 Material Design In XAML 的 nuget 包。现在，当我添加 Nuget 包并将 ressource 词典添加到我的 ResourceDictionary.MergedDictionaries 时，我的登录窗口的按钮样式更改为 Material design 包提供的样式。如何保留我在 ModernButton.XAML 中定义的按钮的样式

另外，我不太确定右侧视图部分中发生变化的窗口。如果这是行不通的，你有没有其他解决方案给我。

抱歉，帖子太长了，如果您需要更多我的源代码或者我的解释不清楚，请告诉我，英语不是我的母语。

编辑： 这是 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>

解决方法

至于按钮样式，您只是忘记指定您在 ModernButton.xaml 中定义的样式。这就是该样式被 Material design 包中包含的另一种样式覆盖的原因。

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

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

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