WPF通过DynamicResource实现给界面动态更换皮肤

在我们的程序中有时候需要去实现动态更换皮肤的效果，从而完成一些个性化的设置，那么我们究竟怎样去实现动态换皮肤的效果呢？那么我们经常用到的就是设置不同的Style,并且在主程序的xaml文件中通过DynamicResource引用这些Style，当我们点击更换皮肤时我们就动态去改变这些Style，从而实现动态去更换皮肤的操作。我们知道当我们使用Style="{DynamicResource styleBanner}"这种类型的代码时，我们的编译器首先会到App.xaml下面去寻找当前x:key为styleBanner的Style，如果能够找到，那么我们就可以将当前的Style设置为查找到的值，如果找不到会去MainWindow中查找相关的资源，并将查找到的资源赋值给该Style，如果还是找不到的话，会沿着MainWindow的子元素一级级去查找相关资源，直到最后找到相关的类型资源，如果找不到那么Style值为null;

在我们的程序中我们通过右键菜单来完成背景的切换，首先看一下我们的ContextMenu的代码：

 <Grid.ContextMenu>
      <ContextMenu MenuItem.Click="OnMenuItemClick">
        <MenuItem Tag=".\Resources\Skins\BlackSkin.xaml" IsChecked="True">
          <MenuItem.Header>
            <Rectangle Width="120" Height="40" Fill="Black" />
          </MenuItem.Header>
        </MenuItem>
        <MenuItem Tag=".\Resources\Skins\GreenSkin.xaml">
          <MenuItem.Header>
            <Rectangle Width="120" Height="40" Fill="Green" />
          </MenuItem.Header>
        </MenuItem>
        <MenuItem Tag=".\Resources\Skins\BlueSkin.xaml">
          <MenuItem.Header>
            <Rectangle Width="120" Height="40" Fill="Blue" />
          </MenuItem.Header>
        </MenuItem>
      </ContextMenu>
    </Grid.ContextMenu>

　　我们把每一个资源文件的相对路径作为一个Tag附加到每一个MenuItem上，这样当我们点击其中的某一个MenuItem的时候，我们就能够查找到相关的资源，从而加载该资源，另外这里有一个小技巧，当我们需要为每一个MenuItem执行相同的Click事件的时候，我们不必进行重复去写，我们可以在MenuItem的上一级ContextMenu 中添加附加属性MenuItem.Click="OnMenuItemClick"，这样就可以不用重复去定义Click事件了。下面就是关键的OnMenuItemClick事件的代码了。

void OnMenuItemClick(object sender, RoutedEventArgs e)
		{
			MenuItem item = e.OriginalSource as MenuItem;

			// Update the checked state of the menu items.
			Grid mainGrid = this.Content as Grid;
			foreach (MenuItem mi in mainGrid.ContextMenu.Items)
				mi.IsChecked = mi == item;

			// Load the selected skin.
			this.ApplySkinFromMenuItem(item);
		}

　　这里通过e.OriginalSource来查找触发的事件源，这里每选择其中的一项时会将其他的项的IsChecked属性设置为false,这段代码里调用了一个核心的函数叫做ApplySkinFromMenuItem，那么我们来看看具体是怎么实现的。

void ApplySkinFromMenuItem(MenuItem item)
		{
			// Get a relative path to the ResourceDictionary which
			// contains the selected skin.
			string skinDictPath = item.Tag as string;
			Uri skinDictUri = new Uri(skinDictPath, UriKind.Relative);

			// Tell the Application to load the skin resources.
			DemoApp app = Application.Current as DemoApp;
			app.ApplySkin(skinDictUri);
		}

　　我们把每个Tag中定义的不同皮肤的Xaml文件的路径传入DemoApp下面的ApplySkin函数中，记住使用Application.Current能够获取当前应用程序中唯一的APP，我们来看看我们的DemoAPP中定义的这个方法。

namespace SkinnableApp
{
	public partial class DemoApp : Application
	{
		public void ApplySkin(Uri skinDictionaryUri)
		{
			// Load the ResourceDictionary into memory.
			ResourceDictionary skinDict = Application.LoadComponent(skinDictionaryUri) as ResourceDictionary;

			Collection<ResourceDictionary> mergedDicts = base.Resources.MergedDictionaries;

			// Remove the existing skin dictionary, if one exists.
			// NOTE: In a real application, this logic might need
			// to be more complex, because there might be dictionaries
			// which should not be removed.
			if (mergedDicts.Count > 0)
				mergedDicts.Clear();

			// Apply the selected skin so that all elements in the
			// application will honor the new look and feel.
			mergedDicts.Add(skinDict);
		}
	}
}

　　ResourceDictionary skinDict = Application.LoadComponent(skinDictionaryUri) as ResourceDictionary这行代码是用于加载位于指定统一资源标识符 (URI) 处的 XAML 文件，并将其转换为由该 XAML 文件的根元素指定的对象的实例，也就是将每一个MenuItem的Tag中标识的路径下的XAML文件的根元素指定的对象的实例获取到。我们获取到了该ResourceDictionary 接下来我们就需要将该ResourceDictionary 加载到Appliciton的MergedDictionaries(获取 System.Windows.ResourceDictionary 字典的集合，这些字典构成了合并的字典中的各种资源字典。)下面,通过Collection<ResourceDictionary> mergedDicts = base.Resources.MergedDictionaries;我们能够获取到当前Application级别下所有的资源字典，这里需要注意的就是在我们将新的ResourceDictionary 添加到mergedDicts 下面之前，我们需要先清除掉原来里面的内容，这是因为我们的

每一个xaml文件中使用的key都是相同的，为了避免混淆，所以首先清除掉原来的内容，其实每一次加载的时候即使有相同的key值编译器也只会默认加载最后面的一个，但是我们的操作会不断重复操作，所以mergedDicts 里面的内容会越加越多，所以这在程序中是一种不合理的方式。

在清除完毕之后，将我们的新的xaml文件作为ResourceDictionary 添加到里面去。这样我们的MainWindow.xaml就会查找到这些相关的内容。下面贴出相关的代码以及换肤后的图片内容。

MainWindow.xaml文件：

<Window
  x:Class="SkinnableApp.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
  xmlns:local="clr-namespace:SkinnableApp"
  SizeToContent="Height"
  ResizeMode="NoResize"
  Title="Skinnable App"
  Width="680"
  WindowStartupLocation="CenterScreen"
  WindowStyle="ToolWindow">
  <Grid x:Name="Root" Style="{DynamicResource styleBackground}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="50" />
        </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2.5*" />
    </Grid.ColumnDefinitions>
    <!-- CONTEXT MENU -->
    <Grid.ContextMenu>
      <ContextMenu MenuItem.Click="OnMenuItemClick">
        <MenuItem Tag=".\Resources\Skins\BlackSkin.xaml" IsChecked="True">
          <MenuItem.Header>
            <Rectangle Width="120" Height="40" Fill="Black" />
          </MenuItem.Header>
        </MenuItem>
        <MenuItem Tag=".\Resources\Skins\GreenSkin.xaml">
          <MenuItem.Header>
            <Rectangle Width="120" Height="40" Fill="Green" />
          </MenuItem.Header>
        </MenuItem>
        <MenuItem Tag=".\Resources\Skins\BlueSkin.xaml">
          <MenuItem.Header>
            <Rectangle Width="120" Height="40" Fill="Blue" />
          </MenuItem.Header>
        </MenuItem>
      </ContextMenu>
    </Grid.ContextMenu>

    <!-- AGENTS DATA SOURCE -->
    <Grid.DataContext>
      <CollectionViewSource>
        <CollectionViewSource.Source>
          <XmlDataProvider Source=".\Resources\Data\agents.xml" XPath="Agents/Agent" />
        </CollectionViewSource.Source>
        <CollectionViewSource.SortDescriptions>
          <scm:SortDescription PropertyName="Name/Last" />
          <scm:SortDescription PropertyName="Name/First" />
        </CollectionViewSource.SortDescriptions>
      </CollectionViewSource>
    </Grid.DataContext>

    <!-- BANNER -->
    <Grid Grid.ColumnSpan="2" Height="70" Style="{DynamicResource styleBanner}" >
      <TextBlock FontSize="26" Padding="10,0,10,0" Text="Insurance Agent Management System" VerticalAlignment="Center"/>
    </Grid>

    <!-- AGENT SELECTOR -->
    <local:AgentSelectorControl  Grid.Row="1" Grid.Column="0"/>
    <!-- AGENT DETAILS -->
    <local:AgentDetailsControl   Grid.Row="1" Grid.Column="1"/>
        <StackPanel Height="40"  Orientation="Horizontal" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="移动到第一项" Click="MoveToFirstItem"></Button>
            <Button Content="移动到上一项" Click="MoveToForwardItem" Margin="10,0,10,0"></Button>
            <Button Content="移动到下一项" Click="MoveToNextItem" Margin="10,0,10,0"></Button>
            <Button Content="移动到最后一项" Click="MoveToLastItem" Margin="10,0,10,0"></Button>
        </StackPanel>
    </Grid>
</Window>

　　这里列举其中的一种皮肤的样式：BlueSkin.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source=".\BaseSkin.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <!-- Background Style -->
  <Style x:Key="styleBackground">
    <Setter Property="Control.Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" Opacity="0.5">
          <GradientStop Color="LightSkyBlue" Offset="0" />
          <GradientStop Color="WhiteSmoke" Offset="0.5" />
          <GradientStop Color="LightSkyBlue" Offset="1" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Banner Style -->
  <Style x:Key="styleBanner">
    <Setter Property="StackPanel.Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0.25" EndPoint="1,0.5">
          <GradientStop Color="#CC0088DD" Offset="0.3" />
          <GradientStop Color="#3300FFFF" Offset="0.85" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="TextBlock.Foreground" Value="Yellow" />
    <Setter Property="TextBlock.FontFamily" Value="Comic Sans MS" />
  </Style>

  <!-- Content Area Style -->
  <Style x:Key="styleContentArea" BasedOn="{StaticResource styleContentArea_Base}">
    <Setter Property="Border.Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="#FFFFFFFF" Offset="0.5" />
          <GradientStop Color="#CCFFFFDD" Offset="1" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="Border.BorderBrush" Value="Gray" />
    <Setter Property="TextBlock.FontFamily" Value="Comic Sans MS" />
  </Style>

  <!-- Content Area Header Brush -->
  <LinearGradientBrush x:Key="contentAreaHeaderBrush" StartPoint="0.5,0" EndPoint="1,0.5">
    <GradientStop Color="#CC0088DD" Offset="0.3" />
    <GradientStop Color="#CC00AADD" Offset="0.75" />
  </LinearGradientBrush>

  <!-- Content Area Header Style -->
  <Style x:Key="styleContentAreaHeader" BasedOn="{StaticResource styleContentAreaHeader_Base}">
    <Setter Property="Border.Background" Value="{StaticResource contentAreaHeaderBrush}" />
    <Setter Property="TextBlock.Foreground" Value="Yellow" />
    <Setter Property="FrameworkElement.BitmapEffect">
      <Setter.Value>
        <DropShadowBitmapEffect ShadowDepth="12" />
      </Setter.Value>
    </Setter>
    <Setter Property="FrameworkElement.LayoutTransform">
      <Setter.Value>
        <RotateTransform Angle="-2" />
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Agent Image Border Style -->
  <Style x:Key="styleAgentImageBorder" TargetType="Border" BasedOn="{StaticResource styleAgentImageBorder_Base}">
    <Setter Property="BitmapEffect">
      <Setter.Value>
        <DropShadowBitmapEffect />
      </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="1" />
  </Style>

</ResourceDictionary>

　　下面贴出几更换皮肤的图片。