如何在 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}"/>
关于应用程序结构,我认为这是典型的主从模式的问题,您可以找到各种示例。
好吧,我是 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}"/>
关于应用程序结构,我认为这是典型的主从模式的问题,您可以找到各种示例。