Silverlight实用窍门系列:72.Silverlight的Implicit Style、自定义主题皮肤、系统主题皮肤
本文实例基于Silverlight实用窍门系列:71.Silverlight的Style基础之上。
一、Implicit Style(隐式样式):是不需要制定x:Key属性的Style,它的作用于是所有指定TagetType的控件,而不需要在具体的每个控件去指定其Style="{StaticResource KeyName}"。如以下代码的Style就没有指定x:Key属性,也不需要在任何ListBox控件上指定Style,会自动作用于其上:
<Style TargetType="ListBox"> <Setter Property="FontSize" Value="12"></Setter> <Setter Property="Foreground" Value="Blue"></Setter> <Setter Property="FontFamily" Value="Lucida Sans Unicode"></Setter> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Vertical" > <StackPanel Orientation="Horizontal" Margin="5" Width="380"> <TextBlock Text="{Binding ArtName}" Margin="5 10 0 0"></TextBlock> <TextBox Text="{Binding ArtContent}" Name="tbName" Margin="5"></TextBox> <TextBox Text="{Binding ArtAuthor}" Margin="5"></TextBox> <TextBlock Text="{Binding ArtUpdateTime}" Margin="5 10 0 0"></TextBlock> </StackPanel> <StackPanel Orientation="Horizontal" Visibility="Collapsed"> <TextBox Text="{Binding ArtContent}" Width="280"></TextBox> </StackPanel> </StackPanel> </DataTemplate> </Setter.Value> </Setter> </Style>
二、自定义主题皮肤
在此例中我们将以上样式放入三个不同的ResourceDictionary资源字典文件中,并且修改其定义的样式值,然后通过后台动态加载资源字典的方式动态更换主题皮肤。具体代码如下:
ResourceDictionary redDic = new ResourceDictionary(); redDic.Source = new Uri("/SLStyle;component" + Url, UriKind.RelativeOrAbsolute); Application.Current.Resources.MergedDictionaries.Clear(); Application.Current.Resources.MergedDictionaries.Add(redDic);
三、更换为系统皮肤
本例采用Silverlight Toolkit下面的皮肤,其路径如下:*\Silverlight\v4.0\Toolkit\Apr10\Themes\Xaml\,本文选则其中三种皮肤进行加载即可,需要引入以下一些DLL和Xaml文件,然后采用自定义主题皮肤的方式进行更换。
最后我们来看其具体Xaml和Xaml.cs文件代码如下:
<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource SourceList}"> <ListBox x:Name="lbRes" ItemsSource="{Binding ArticleList}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0 80 0 0 " Height="400" > </ListBox> <Button Content="红色主题" Height="23" HorizontalAlignment="Left" Margin="22,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" /> <Button Content="蓝色主题" Height="23" HorizontalAlignment="Left" Margin="157,12,0,0" Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" /> <Button Content="绿色主题" Height="23" HorizontalAlignment="Left" Margin="284,12,0,0" Name="button3" VerticalAlignment="Top" Width="75" Click="button3_Click" /> <Button Content="系统主题1" Height="23" HorizontalAlignment="Left" Margin="22,47,0,0" Name="button4" VerticalAlignment="Top" Width="75" Click="button4_Click" /> <Button Content="系统主题2" Height="23" HorizontalAlignment="Left" Margin="157,47,0,0" Name="button5" VerticalAlignment="Top" Width="75" Click="button5_Click" /> <Button Content="系统主题3" Height="23" HorizontalAlignment="Left" Margin="284,47,0,0" Name="button6" VerticalAlignment="Top" Width="75" Click="button6_Click" /> </Grid>
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); ChangeStyle("/Styles/RedDic.xaml"); } private void ChangeStyle(string Url) { ResourceDictionary redDic = new ResourceDictionary(); redDic.Source = new Uri("/SLStyle;component" + Url, UriKind.RelativeOrAbsolute); Application.Current.Resources.MergedDictionaries.Clear(); Application.Current.Resources.MergedDictionaries.Add(redDic); } private void button1_Click(object sender, RoutedEventArgs e) { ChangeStyle("/Styles/RedDic.xaml"); } private void button2_Click(object sender, RoutedEventArgs e) { ChangeStyle("/Styles/BlueDic.xaml"); } private void button3_Click(object sender, RoutedEventArgs e) { ChangeStyle("/Styles/GreenDic.xaml"); } private void button6_Click(object sender, RoutedEventArgs e) { ChangeStyle("/SysStyles/System.Windows.Controls.Theming.SystemColors.xaml"); } private void button4_Click(object sender, RoutedEventArgs e) { ChangeStyle("/SysStyles/System.Windows.Controls.Theming.TwilightBlue.xaml"); } private void button5_Click(object sender, RoutedEventArgs e) { ChangeStyle("/SysStyles/System.Windows.Controls.Theming.WhistlerBlue.xaml"); } }
效果图如下,注意在本例中没有设置主题样式的ListBox模板,大家可以自己显式设置ListBox的ItemsTemplate,如需源码请点击 SLThemeStyle.zip 下载。