第17章控件模版(8)——動態換膚

2019-11-14 11:34:38

字體：大中小

來源：轉載

供稿：網友

基本原理：在程序運行時加載新的資源字典，并使用新加載的資源字典代替當前的資源字典(不需要替換所有資源，只需要替換哪些用于皮膚的資源)。

有兩種方式實現動態換膚：

①檢索ResourceDictionary對象，并通過后臺代碼替換資源實現動態換膚。

②通過編寫代碼加載資源字典，然后通過后臺代碼替換資源實現動態換膚。

實例演示動態換膚：

假設有已創建用于定義同一個按鈕控件模板的兩個資源。一個保存在GradientButton.xaml文件中，另外一個保存在GradientButtonVariant.xaml文件中。為了更好的組織資源，將這兩個文件都放在了Resources文件夾下。

GradientButton.xaml代碼：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/PResentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ControlTemplates.GradientButton"    >    <!-- Resources used by the template. -->    <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3"     x:Key="HighlightBackground">      <GradientStop Color="White" Offset="0" />      <GradientStop Color="Blue" Offset=".4" />    </RadialGradientBrush>    <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3"     x:Key="PressedBackground">      <GradientStop Color="White" Offset="0" />      <GradientStop Color="Blue" Offset="1" />    </RadialGradientBrush>    <SolidColorBrush Color="Blue" x:Key="DefaultBackground"></SolidColorBrush>    <SolidColorBrush Color="Gray" x:Key="DisabledBackground"></SolidColorBrush>    <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3"     x:Key="Border">      <GradientStop Color="White" Offset="0" />      <GradientStop Color="Blue" Offset="1" />    </RadialGradientBrush>    <!-- The button control template. -->    <ControlTemplate x:Key="GradientButtonTemplate" TargetType="{x:Type Button}">      <Border Name="Border" BorderBrush="{StaticResource Border}" BorderThickness="2"       CornerRadius="2" Background="{StaticResource DefaultBackground}"       TextBlock.Foreground="White">        <Grid>          <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black"           StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True">          </Rectangle>          <ContentPresenter Margin="{TemplateBinding Padding}"           RecognizesaccessKey="True"></ContentPresenter>        </Grid>      </Border>      <ControlTemplate.Triggers>        <Trigger Property="IsMouSEOver" Value="True">          <Setter TargetName="Border" Property="Background"           Value="{StaticResource HighlightBackground}" />        </Trigger>        <Trigger Property="IsPressed" Value="True">          <Setter TargetName="Border" Property="Background"           Value="{StaticResource PressedBackground}" />        </Trigger>        <Trigger Property="IsKeyboardFocused" Value="True">          <Setter TargetName="FocusCue" Property="Visibility"            Value="Visible"></Setter>        </Trigger>        <Trigger Property="IsEnabled" Value="False">          <Setter TargetName="Border" Property="Background"           Value="{StaticResource DisabledBackground}"></Setter>        </Trigger>      </ControlTemplate.Triggers>    </ControlTemplate>    <!-- The style that applies the button control template. -->    <Style TargetType="{x:Type Button}">      <Setter Property="Control.Template"       Value="{StaticResource GradientButtonTemplate}"></Setter>    </Style>  </ResourceDictionary>GradientButtonVariant.xaml代碼：<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ControlTemplates.GradientButtonVariant"    >       <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3" x:Key="HighlightBackground">      <GradientStop Color="White" Offset="0" />      <GradientStop Color="Green" Offset=".4" />    </RadialGradientBrush>  <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3" x:Key="PressedBackground">    <GradientStop Color="White" Offset="0" />    <GradientStop Color="Green" Offset="1" />  </RadialGradientBrush>    <SolidColorBrush Color="DarkGreen" x:Key="DefaultBackground"></SolidColorBrush>  <SolidColorBrush Color="Gray" x:Key="DisabledBackground"></SolidColorBrush>    <RadialGradientBrush RadiusX="1" RadiusY="5" GradientOrigin="0.5,0.3" x:Key="Border">    <GradientStop Color="White" Offset="0" />    <GradientStop Color="Green" Offset="1" />  </RadialGradientBrush>  <ControlTemplate x:Key="GradientButtonTemplate" TargetType="{x:Type Button}">    <Border Name="Border" BorderBrush="{StaticResource Border}" BorderThickness="2" CornerRadius="2"            Background="{StaticResource DefaultBackground}" TextBlock.Foreground="White">      <Grid>        <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True" ></Rectangle>        <ContentPresenter Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"></ContentPresenter>      </Grid>    </Border>    <ControlTemplate.Triggers>      <Trigger Property="IsMouseOver" Value="True">        <Setter TargetName="Border" Property="Background" Value="{StaticResource HighlightBackground}" />      </Trigger>      <Trigger Property="IsPressed" Value="True">        <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBackground}" />              </Trigger>      <Trigger Property="IsKeyboardFocused" Value="True">        <Setter TargetName="FocusCue" Property="Visibility" Value="Visible"></Setter>      </Trigger>      <Trigger Property="IsEnabled" Value="False">                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackground}"></Setter>      </Trigger>    </ControlTemplate.Triggers>  </ControlTemplate>    <Style  TargetType="{x:Type Button}">        <Setter Property="Control.Template" Value="{StaticResource GradientButtonTemplate}"></Setter>    </Style></ResourceDictionary>方法一：
①項目目錄結構
②MainWindow.xaml代碼
<Window x:Class="AutoChangeTemplate.MainWindow"        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:AutoChangeTemplate"        mc:Ignorable="d"        Title="MainWindow" Height="350" Width="525">    <Window.Resources>        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="Resources/GradientButton.xaml"></ResourceDictionary>            </ResourceDictionary.MergedDictionaries>        </ResourceDictionary>    </Window.Resources>    <StackPanel>        <Button HorizontalAlignment="Center" Padding="5" Margin="0 30 0 0">GradientButton</Button>        <Button HorizontalAlignment="Center" Padding="5" Margin="5" Click="Button_Click">第一種方式動態換膚</Button>    </StackPanel></Window>③MainWindow.xaml.cs代碼using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace AutoChangeTemplate{    /// <summary>    /// MainWindow.xaml 的交互邏輯    /// </summary>    public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();        }        private void Button_Click(object sender, RoutedEventArgs e)        {            ResourceDictionary newDictionary = new ResourceDictionary();            newDictionary.Source = new Uri("Resources/GradientButtonVariant.xaml",UriKind.Relative);            this.Resources.MergedDictionaries[0] = newDictionary;        }    }}④效果演示當如果為整個應用程序改變皮膚，代碼如下：
application.Current.Resources.MergedDictionaries[0] = newDictionary;通過pack URI語法加載在另外一個程序集中定義的資源字典：ResourceDictionary newDictionary = new ResourceDictionary();newDictionary.Source = new Uri("ControlTemplateLibrary;component/Resources/GradientButtonVariant.xaml",UriKind.Relative);this.Resources.MergedDictionaries[0] = newDictionary;注意：上面的的例子兩個資源文件都是通過類型樣式自動改變的按鈕。但如果是手動設置了Template或Style屬性來選用新模板。必須用Dynamic Resource引用，而不能使用StaticResource。若用StaticResource，當切換皮膚時不會自動更新按鈕模板。方法二：
①為資源字典創建代碼隱藏類
先將GradientButtonVariant.xaml文件從Resources文件夾下移到項目根目錄，如下圖：
然后再創建個GradientButtonVariant.xaml.cs類文件，此時的類文件會自動放到GradientButtonVariant.xaml下。
②將定義的類鏈接到GradientButtonVariant.xaml資源字典，即在資源字典的根元素添加Class特性，代碼如下：
x:Class="AutoChangeTemplate.GradientButtonVariant"③改造GradientButtonVariant.xaml.cs代碼：將這個類文件改為部分類，并在構造函數中調用InitializeComponent()方法。
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;namespace AutoChangeTemplate{    public partial class GradientButtonVariant : ResourceDictionary    {        public GradientButtonVariant()        {            InitializeComponent();        }    }}④將GradientButtonVariant.xaml移回Resources文件夾下，此時GradientButtonVariant.xaml.cs會自動移過去。
⑤使用定義的類換膚，創建資源實例的時候直接new GradientButtonVariant即可，代碼如下：
ResourceDictionary newDictionary = new GradientButtonVariant();this.Resources.MergedDictionaries[0] = newDictionary;⑤效果如上面的GIF動畫。