WPF换肤设计原理浅析
更新时间:2020年6月25日 11:22 点击:1794
WPF换肤的设计原理,利用资源字典为每种皮肤资源添加不同的样式,在后台切换皮肤资源文件。
截图
上图中,第一张图采用规则样式,第二张图采用不规则样式,截图的时候略有瑕疵。
资源字典
规则样式资源Skin.RegularStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--Window样式--> <Style x:Key="WindowStyle" TargetType="Window"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Window"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Green" Offset="0"></GradientStop> <GradientStop Color="LightGreen" Offset="0.4"></GradientStop> <GradientStop Color="White" Offset="1"></GradientStop> </LinearGradientBrush> </Border.Background> <ContentPresenter></ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--Button样式--> <Style TargetType="Button"> <Setter Property="Width" Value="70"></Setter> <Setter Property="Height" Value="23"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Name="bdr" Cursor="Arrow" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0"></GradientStop> <GradientStop Color="LightGreen" Offset="0.3"></GradientStop> <GradientStop Color="Green" Offset="1"></GradientStop> </LinearGradientBrush> </Border.Background> <TextBlock Name="tbk" Background="Transparent" Foreground="DarkGreen" TextAlignment="Center" Text="{TemplateBinding Content}"></TextBlock> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="bdr" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="LightGreen" Offset="0"></GradientStop> <GradientStop Color="Green" Offset="1"></GradientStop> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="tbk" Property="Foreground" Value="White"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--TextBox样式--> <Style TargetType="TextBox"> <Setter Property="FontFamily" Value="SketchFlow Print"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TextBox"> <Border BorderBrush="DarkGreen" BorderThickness="0.5"> <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"></ScrollViewer> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--ContextMenu样式--> <Style TargetType="ContextMenu"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ContextMenu"> <Border BorderBrush="Green" BorderThickness="1"> <ItemsPresenter/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--MenuItem样式--> <Style TargetType="MenuItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="MenuItem"> <Border Name="border" Background="LightGreen" BorderThickness="0"> <TextBlock Name="tbk" Background="Transparent" Padding="5,5" Text="{TemplateBinding Header}"></TextBlock> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="Background" Value="Green"></Setter> <Setter TargetName="tbk" Property="Foreground" Value="White"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--TextBlock样式--> <Style TargetType="TextBlock"> <Setter Property="FontFamily" Value="SketchFlow Print"/> <Setter Property="FontSize" Value="14"/> </Style> </ResourceDictionary> 不规则样式资源Skin.RoundedCornerStyle.xaml <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--Window样式--> <Style x:Key="WindowStyle" TargetType="Window"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Window"> <Grid Margin="10"> <Rectangle Fill="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" RadiusX="5" RadiusY="5"> <Rectangle.Effect> <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.8" RenderingBias="Performance" ShadowDepth="0"/> </Rectangle.Effect> </Rectangle> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" CornerRadius="5"> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Blue" Offset="0"></GradientStop> <GradientStop Color="LightBlue" Offset="0.4"></GradientStop> <GradientStop Color="White" Offset="1"></GradientStop> </LinearGradientBrush> </Border.Background> <ContentPresenter></ContentPresenter> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--Button样式--> <Style TargetType="Button"> <Setter Property="Width" Value="70"></Setter> <Setter Property="Height" Value="23"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Name="bdr" CornerRadius="5" Cursor="Hand" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <TextBlock Name="tbk" Background="Transparent" Foreground="Yellow" TextAlignment="Center" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Content}"></TextBlock> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0"></GradientStop> <GradientStop Color="LightBlue" Offset="0.3"></GradientStop> <GradientStop Color="Blue" Offset="1"></GradientStop> </LinearGradientBrush> </Border.Background> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="bdr" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="LightBlue" Offset="0"></GradientStop> <GradientStop Color="Blue" Offset="1"></GradientStop> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="tbk" Property="Foreground" Value="LightYellow"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--TextBox样式--> <Style TargetType="TextBox"> <Setter Property="FontFamily" Value="Times New Roman"></Setter> <Setter Property="FontSize" Value="14"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TextBox"> <Border BorderBrush="Blue" BorderThickness="0.5" CornerRadius="5"> <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"></ScrollViewer> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--ContextMenu样式--> <Style TargetType="ContextMenu"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ContextMenu"> <Border CornerRadius="5" BorderBrush="Blue" BorderThickness="1"> <ItemsPresenter/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--MenuItem样式--> <Style TargetType="MenuItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="MenuItem"> <Border Name="border" Background="LightSkyBlue" BorderThickness="0" CornerRadius="5"> <TextBlock Name="tbk" Background="Transparent" Padding="5,5" Text="{TemplateBinding Header}"></TextBlock> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="Background" Value="BlueViolet"></Setter> <Setter TargetName="tbk" Property="Foreground" Value="White"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--TextBlock样式--> <Style TargetType="TextBlock"> <Setter Property="FontFamily" Value="Times New Roman"/> <Setter Property="FontSize" Value="14"/> </Style> </ResourceDictionary>
仔细观察上面定义的样式,你会发现在定义Window样式的时候指定了Key,其他的Control样式却没有指定Key。大家都知道,如果没有给Style指定Key,那么这个Style会应用到所有目标类型(TargetType)为指定类型的Control。请看下面一段文字:
因为在换肤的过程中,需要动态加载Window的样式,所以用DynamicResource作绑定Style="{DynamicResource WindowStyle}"。
App.xaml
程序运行的时候,默认加载规则样式的皮肤。
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Dictionary\Skin.RegularStyle.xaml"></ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
后台代码
/// <summary> /// MenuItem的执行方法 /// </summary> /// <param name="parameter"></param> private void RelayMenuItemEvent(object parameter) { if (parameter.ToString() == RegularStyle) { ChangeSkinResource(Skins[0]); } else if (parameter.ToString() == RoundedCornerStyle) { ChangeSkinResource(Skins[1]); } } /// <summary> /// 更换皮肤资源 /// </summary> /// <param name="skin"></param> private void ChangeSkinResource(ResourceDictionary skin) { if (Application.Current.Resources.MergedDictionaries[0].Source.IsAbsoluteUri) { if (Application.Current.Resources.MergedDictionaries[0].Source.OriginalString != skin.Source.OriginalString) { Application.Current.Resources.MergedDictionaries[0] = skin; } } else { if (Application.Current.Resources.MergedDictionaries[0].Source.OriginalString.ToString('\\') != skin.Source.OriginalString.ToString('/')) { Application.Current.Resources.MergedDictionaries[0] = skin; } } }
运行的时候在MainWindow上右键选择皮肤样式,就可以换肤了。
源码下载:http://xiazai.jb51.net/201610/yuanma/WPFSkin(jb51.net).rar
链接:stackoverflow
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: C# 6.0 新特性汇总
相关文章
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下...2016-01-02
- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了微信小程序换肤功能实现代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-26
- 这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要给大家介绍了关于WPF基础教程之形状画刷与变换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。...2020-06-25
- 下面小编就为大家分享一篇WPF水珠效果按钮组的实现教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22
- 本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍,需要的朋友参考下...2021-09-22
- 这篇文章主要为大家详细介绍了WPF实现转圈进度条效果,如何设计自定义的绕圈进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 如果注册快捷键,RegisterHotKey中的fsModifiers参数为0,即None选项,一些安全软件会警报,可能因为这样就可以全局监听键盘而造成安全问题,感兴趣的你可以参考下本文...2020-06-25
- 这篇文章主要为大家详细介绍了WPF中自定义GridLengthAnimation的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了WPF/Silverlight实现图片局部放大的方法,结合实例形式分析了WPF/Silverlight针对图片属性操作相关实现技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF MVVM发送短信小按钮的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了JavaScript实现换肤效果,即换背景功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-30