WPF换肤设计原理浅析

更新时间：2016年10月12日 10:40:30 作者：sunny906

这篇文章主要为大家详细介绍了WPF换肤设计原理,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

WPF
换肤

C#Process的OutputDataReceived事件不触发问题及解决
这篇文章主要介绍了C#Process的OutputDataReceived事件不触发问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
C#实现简易计算器功能(附源码)
这篇文章主要为大家详细介绍了C#实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
C#实现的Excel文件操作类实例
这篇文章主要介绍了C#实现的Excel文件操作类,结合具体实例形式分析了C#数据库及Excel文件相关操作技巧,需要的朋友可以参考下
2017-06-06
C#使用MSTest进行单元测试的示例代码
MSTest是微软官方提供的.NET平台下的单元测试框架,这篇文章主要为大家详细介绍了C#如何使用MSTest进行单元测试,感兴趣的小伙伴可以参考一下
2023-12-12
C#中常见的系统内置委托用法详解
这篇文章主要介绍了C#中常见的系统内置委托用法,主要包括了Action类的委托、Func类的委托、Predicate<T>委托、Comparison<T>委托等,需要的朋友可以参考下
2014-09-09
C#类的创建与初始化实例解析
这篇文章主要介绍了C#类的创建与初始化实例解析,有助于初学者较为直观的理解C#的类,需要的朋友可以参考下
2014-07-07
C#实现在应用程序间发送消息的方法示例
这篇文章主要介绍了C#实现在应用程序间发送消息的方法,结合具体实例形式分析了C#实现项目之间信息发送、接收等交互操作相关技巧,需要的朋友可以参考下
2017-06-06
C#与PHP的md5计算结果不同的解决方法
今天在用C#接入我的登录api发现了一个问题，登陆的时候无论如何都会出现用户名和密码错误的问题，后来通过查找排除找的了问题的原因是因为C#与PHP的md5计算结果不同导致的，下面就来看看如何解决这个问题吧。
2016-12-12
WPF实现背景灯光随鼠标闪动效果
这篇文章主要为大家详细介绍了WPF实现背景灯光随鼠标闪动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
Dynamic和Var的区别及dynamic使用详解
C#中的很多关键词用法比较容易混淆，var和dynamic就是其中一组，他们都可以申明动态类型的变量，但是本质上他们还是有不少区别的，下面通过本文给大家介绍Dynamic和Var的区别及如何正确使用dynamic，需要的朋友参考下
2016-01-01