WPF中使用DynamicResource实现换肤

这篇将介绍使用DynamicResource实现动态的界面切换功能。熟悉WPF的园友应该已经猜到了实现方式,简而言之就是动态替换DataTemplate,ControlTemplate,Style等等UI相关的属性。

那么使用DynamicResource能让UI动态到什么程度呢?可以说,心有多大,就可以做多大,只要你想得到,就可以做出来。

下面以展示层次数据结构为例,实现了运行时切换数据显示界面结构的功能。先来看一下要显示的数据,是一个XML文件。

<earth>
  <country name="US">
    <family name="Bill's">
      <member name="Bill"/>
      <member name="Mark"/>
    </family>
    <family name="Hugo's">
      <member name="Hugo"/>
      <member name="Sherry"/>
    </family>
    <family name="Li's">
      <member name="Li"/>
      <member name="Jay"/>
    </family>
  </country>
  <country name="China">
    <family name="陆家">
      <member name="嘴"/>
      <member name="脸"/>
    </family>
    <family name="徐家">
      <member name="汇"/>
      <member name="仁"/>
    </family>
    <family name="黄浦">
      <member name="江"/>
      <member name="边"/>
    </family>
  </country>
</earth>

我们要用三种方式来展示这个数据,一种是最常见的TreeView,还可以用一组并列的ListBox,还有不太常见的嵌套式ItemsControl。如下图所示。

WPF中使用DynamicResource实现换肤

图1. TreeView

WPF中使用DynamicResource实现换肤

图2. ListView

WPF中使用DynamicResource实现换肤

图3. GroupView

要实现这些效果,可以使用DataTemplate。把界面中会变的部分独立出来,有人说这个界面除了上面的菜单不变,整个都在变啊。没错,那就把整个主体部分独立出来,放到DataTemplate里。而Window里就只有一个菜单和一个占位符了。如下所示。

<Window x:Class="Skinning.DemoWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="View Demo" Height="300" Width="300">
    <DockPanel DataContext="{Binding Source={StaticResource XMLDataDataSource}}">
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="List View" Click="OnListViewClick"/>
            <MenuItem Header="Group View" Click="OnGroupViewClick"/>
            <MenuItem Header="Tree View" Click="OnTreeViewClick"/>
        </Menu>
        <ContentPresenter Content="{Binding}" ContentTemplate="{DynamicResource EarthDataTemplate}"/>
    </DockPanel>
</Window>

然后就是定义上面引用到的EarthDataTemplate。以ListView的DataTemplate为例,如下所示。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DataTemplate x:Key="NameTemplate">
        <TextBlock Text="{Binding XPath=@name}"/>
    </DataTemplate>
    <DataTemplate x:Key="EarthDataTemplate">
        <UniformGrid Rows="1" DataContext="{Binding XPath=earth/country}">
            <ListBox ItemsSource="{Binding Mode=Default}" x:Name="countryList" ItemTemplate="{StaticResource NameTemplate}"/>
            <ListBox DataContext="{Binding SelectedItem, ElementName=countryList}"
                     ItemsSource="{Binding Mode=OneWay, XPath=family}"
                     x:Name="familyList" ItemTemplate="{StaticResource NameTemplate}"/>
            <ListBox DataContext="{Binding SelectedItem, ElementName=familyList}"
                     ItemsSource="{Binding Mode=OneWay, XPath=member}"
                     ItemTemplate="{StaticResource NameTemplate}"/>
        </UniformGrid>
    </DataTemplate>
</ResourceDictionary>

其它的DataTemplate就不一一例出了,完整的程序可以从这里下载。

虽然这个例子中只是展示了界面结构上的变化,只使用了DataTemplate,其它的小Case的形式的界面也完全不在话下。比如配色、控件样式、控件位置,乃至所谓的换肤,可以分解为这些技巧的组合。当你把DynamicResource、Style、TemplateSelector、Converter、MarkupExtension等各种WPF技术都用上的时候就会发现WPF可以提供很强大的界面生成功能。

再来介绍一下这种方式的缺点。

为什么微软的文档和WPF的相关书籍中都没有介绍这种方法呢?就像上一篇关于语言支持里列举的现有方案一样,都是要Build进DLL中呢? 我想其中一个原因就是安全上的考虑。把XAML文件这样赤祼 祼地放在外面,对于了解WPF的人来说,完全可以利用这个文件“执行任意代码”。这个很眼熟吧,常常出现在微软的各个安全补丁的描述中。而且一般会是严重的漏洞。

这个问题虽然严重,但也是基本可以解决的。像Web中各种Editor一样,可以对XAML里的内容,过滤一下,替换一下,限制一下等等。如果还不放心,可以把自己定义XML格式来定义界面,然后在内部用XSLT转成XAML再加载。对自定义的XML加限制会更容易些。

这篇内容比较简单,不过是为了下篇主要内容打个基础。下篇将要展示一个自定义的Window的Style,把WPF的WinForm式的边框去掉。

上一篇:浏览器 Proxy SwitchyOmega 插件设置代理访问内网服务器


下一篇:Comparable与Comparator的区别