基于 WPFDevelopers 库实现主题切换功能

基于 WPFDevelopers 库实现主题切换功能

控件名：Theme

作 者：WPFDevelopersOrg - 驚鏵

原文链接^[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers

码云链接^[2]：https://gitee.com/WPFDevelopersOrg/WPFDevelopers

• 框架支持.NET4 至 .NET8；
• Visual Studio 2022;

1. 新增 Theme.cs

• Theme 继承 ListBox，用于显示和颜色主题切换。
• 预定义了六种颜色（可自行添加其他色），来源于 WD早期的主题色。

privatereadonly List themes = new List
{
 new SolidColorBrush(Color.FromRgb(64, 158, 255)), // #409EFF
 new SolidColorBrush(Color.FromRgb(255, 3, 62)), // #FF033E
 new SolidColorBrush(Color.FromRgb(162, 27, 252)), // #A21BFC
 new SolidColorBrush(Color.FromRgb(254, 148, 38)), // #FE9426
 new SolidColorBrush(Color.FromRgb(0, 176, 80)), // #00B050
 new SolidColorBrush(Color.FromRgb(255, 0, 127)) // #FF007F
};

• Orientation 列表方向水平或垂直。
• 监听 OnSelectionChanged 选择主题色时触发 ThemeManager。

protectedoverridevoidOnSelectionChanged(SelectionChangedEventArgs e)
{
 base.OnSelectionChanged(e);
 if (SelectedItem == ) return;

 var item = SelectedItem as ThemeItem;
 if (item == ) return;

 if (item.Background is SolidColorBrush solidColorBrush)
 ThemeManager.Instance.SetColor(solidColorBrush.Color);
}

2. 新增 Theme.xaml

• controls:ThemeItem主题色项。
• wd:PathIcon 作为一个选中图标，当 IsSelected=True 则显示，反之则不显示。
• Orientation 绑定 controls:Theme 控件的 Orientation 属性，支持水平或垂直。

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers">

 <Style
 x:Key="WD.ThemeItem"
 BasedOn="{StaticResource WD.ControlBasicStyle}"
 TargetType="{x:Type controls:ThemeItem}">
 <SetterProperty="Width"Value="40" /> <SetterProperty="Height"Value="40" /> <SetterProperty="VerticalAlignment"Value="Center" /> <SetterProperty="HorizontalAlignment"Value="Stretch" /> <SetterProperty="VerticalContentAlignment"Value="Bottom" /> <SetterProperty="HorizontalContentAlignment"Value="Right" /> <SetterProperty="Padding"Value="0,0,4,4" /> <SetterProperty="Template"> <Setter.Value> <ControlTemplateTargetType="{x:Type controls:ThemeItem}"> <Border
 x:Name="PART_Border"
 Padding="2"
 Background="Transparent"
 BorderBrush="{TemplateBinding Background}"
 BorderThickness="0"
 CornerRadius="{Binding Path=(wd:ElementHelper.CornerRadius), RelativeSource={RelativeSource AncestorType=controls:Theme}}"> <wd:SmallPanel> <Border
 x:Name="PART_BorderBackground"
 Background="{TemplateBinding Background}"
 CornerRadius="{Binding Path=(wd:ElementHelper.CornerRadius), RelativeSource={RelativeSource AncestorType=controls:Theme}}" /> <wd:PathIcon
 Width="12"
 Height="10"
 Margin="{TemplateBinding Padding}"
 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 Data="{StaticResource WD.CheckMarkGeometry}"
 Foreground="{DynamicResource WD.BackgroundBrush}"
 Kind="CheckMark"
 Visibility="{TemplateBinding IsSelected,
 Converter={StaticResource WD.Bool2VisibilityConverter}}" /> </wd:SmallPanel> </Border> <ControlTemplate.Triggers> <TriggerProperty="IsMouseOver"Value="True"> <SetterTargetName="PART_BorderBackground"Property="Opacity"Value=".8" /> <SetterTargetName="PART_Border"Property="BorderThickness"Value="1" /> </Trigger> <TriggerProperty="IsSelected"Value="True"> <SetterTargetName="PART_Border"Property="BorderThickness"Value="1" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter>
 </Style>

 <Style
 x:Key="WD.Theme"
 BasedOn="{StaticResource WD.ControlBasicStyle}"
 TargetType="{x:Type controls:Theme}">
 <SetterProperty="VerticalAlignment"Value="Center" /> <SetterProperty="HorizontalAlignment"Value="Left" /> <SetterProperty="Foreground"Value="{DynamicResource WD.PrimaryTextBrush}" /> <SetterProperty="ItemContainerStyle"Value="{StaticResource WD.ThemeItem}" /> <SetterProperty="Padding"Value="{StaticResource WD.Padding}" /> <SetterProperty="Template"> <Setter.Value> <ControlTemplateTargetType="{x:Type controls:Theme}"> <wd:WDBorder
 Background="{TemplateBinding Background}"
 BorderBrush="{TemplateBinding BorderBrush}"
 BorderThickness="{TemplateBinding BorderThickness}"
 CornerRadius="{Binding Path=(wd:ElementHelper.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}"> <ItemsPresenter
 Margin="{TemplateBinding Padding}"
 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 Clip="{Binding RelativeSource={RelativeSource AncestorType=wd:WDBorder}, Path=ContentClip}" /> </wd:WDBorder> </ControlTemplate> </Setter.Value> </Setter> <SetterProperty="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <StackPanelwd:PanelHelper.Spacing="4"Orientation="{Binding Path=Orientation, RelativeSource={RelativeSource AncestorType=controls:Theme}}" /> </ItemsPanelTemplate> </Setter.Value> </Setter>
 </Style>

 <StyleBasedOn="{StaticResource WD.Theme}"TargetType="{x:Type controls:Theme}" />
</ResourceDictionary>

XAML 示例

• 示例引入 WPFDevelopers 1.1.0.3-preview3 的 Nuget 正式包
• 引入命名空间 xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"

<controls:ThemeMargin="0,10" />

GitHub 源码地址^[3]

Gitee 源码地址^[4]