.NET开发者

大家都使用过QQ的皮肤功能吧，今天，我们来讲一下如何使用WPF实现换肤效果。

如何实现换肤呢，对于复杂的换肤操作，如，更换按钮样式、窗口样式等，我们需要写多个资源字典来表示不同的皮肤，通过动态加载不同的资源字典来实现换肤的效果；对于简单的换肤操作，如更改背景颜色、设置窗体透明度，这种换肤操作，我们就不能使用上面的方法了，这个时候，我们只要在一个全局对象中添加几个属性，如背景颜色、前景颜色、窗体透明度等，然后，再绑定这几个属性就能达到我们想要的效果。

本文，会介绍第一种换肤方式，即使用资源字典换肤，首先，看我们实现的效果：

效果是不是很酷吖？看代码：

MainWindow.xaml

<Window x:Class="WpfSkin1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="233" Width="457">
    <Grid>
        <Button Content="打开新窗口" Height="23" HorizontalAlignment="Left" Margin="347,157,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click">
            <Button.ContextMenu>
                <ContextMenu>
                    <MenuItem x:Name="menuAero" Header="Aero" Click="menuAero_Click"/>
                    <MenuItem x:Name="menuRoyale" Header="Royale" Click="menuRoyale_Click"/>
                    <MenuItem x:Name="menuLuna" Header="Luna" Click="menuLuna_Click"/>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="148,12,0,0" Name="button2" VerticalAlignment="Top" Width="75" />
        <ListBox Height="100" HorizontalAlignment="Left" Margin="12,41,0,0" Name="listBox1" VerticalAlignment="Top" Width="120">
            <ListBoxItem Content="123" />
            <ListBoxItem Content="123" />
            <ListBoxItem Content="123" />
        </ListBox>
        <ComboBox Height="22" HorizontalAlignment="Left" Margin="148,41,0,0" Name="comboBox1" VerticalAlignment="Top" Width="183">
            <ComboBoxItem Content="123" />
            <ComboBoxItem Content="123" />
            <ComboBoxItem Content="123" />
        </ComboBox>
        <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="241,15,0,0" Name="checkBox1" VerticalAlignment="Top" />
        <RadioButton Content="RadioButton" Height="16" HorizontalAlignment="Left" Margin="310,15,0,0" Name="radioButton1" VerticalAlignment="Top" />
        <ProgressBar Height="12" HorizontalAlignment="Left" Margin="148,90,0,0" Name="progressBar1" VerticalAlignment="Top" Width="183" />
        <Slider Height="21" HorizontalAlignment="Left" Margin="148,120,0,0" Name="slider1" VerticalAlignment="Top" Width="183" />
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        MainWindow win = new MainWindow();
        win.Show();
    }

    private void menuAero_Click(object sender, RoutedEventArgs e)
    {
        Application.Current.Resources.MergedDictionaries.Clear();   //清除现有资源

        //获取要应用的资源字典
        ResourceDictionary resource =
            (ResourceDictionary)Application.LoadComponent(
                new Uri("/PresentationFramework.Aero, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35;component/themes/aero.normalcolor.xaml", UriKind.Relative));
        //将资源字典合并到当前资源中
        Application.Current.Resources.MergedDictionaries.Add(resource);
    }

    private void menuRoyale_Click(object sender, RoutedEventArgs e)
    {
        Application.Current.Resources.MergedDictionaries.Clear();

        ResourceDictionary resource =
            (ResourceDictionary)Application.LoadComponent(
                new Uri("/PresentationFramework.Royale, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35;component/themes/royale.normalcolor.xaml", UriKind.Relative));
        Application.Current.Resources.MergedDictionaries.Add(resource);
    }

    private void menuLuna_Click(object sender, RoutedEventArgs e)
    {
        Application.Current.Resources.MergedDictionaries.Clear();

        ResourceDictionary resource =
            (ResourceDictionary)Application.LoadComponent(
                new Uri("/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35;component/themes/luna.normalcolor.xaml", UriKind.Relative));
        Application.Current.Resources.MergedDictionaries.Add(resource);
    }
}

代码很简单，清除现有资源，获取要应用的资源字典即写好的样式文件，将当前的资源字典加入到当前的资源下，WPF会自动应用，界面就变成我们想要的了。后面，我会介绍第二种换肤方式，动态绑定的方式，第二种方式，主要用于，皮肤的颜色、透明度由用户自定义，这种灵活多变的换肤效果。

注：这里我使用的是微软给我们提供的几个内嵌资源，由于我的系统是2003，如果是win7或者vista会有更炫的效果。如果是您自己写的资源字典，只要将uri路径改成您自己的资源文件即可。

代码下载

Related posts:

1. 将win7玻璃效果扩展到窗体内部
2. WPF实现JumpList效果（跳转列表）
3. WPF中的Converter
4. WPF使用代码进行绑定
5. MVVM（Model-View-ViewModel）实例讲解