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。如下图所示。
图1. TreeView
图2. ListView
图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式的边框去掉。