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 下载。

 

 


本文转自程兴亮 51CTO博客,原文链接:http://blog.51cto.com/chengxingliang/932322


相关文章
|
6月前
|
前端开发
自定义elementUI皮肤、色系、主题、主色调
自定义elementUI皮肤、色系、主题、主色调
|
前端开发 CDN
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了,打包后也是ok的。
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
|
人工智能 搜索推荐 C#
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
550 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
|
C#
艾伟:WPF中的Style(风格,样式)
在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而不必分别设置每个按钮的风格。
678 0
|
前端开发 C#
silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
1242 0
|
C#
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 注释直接写在代码里了   不太理解意思的 可以先去看看我上一篇  WPF ScrollViewer(滚动条)  自定义样式表制作 图文并茂 滚动条因为要在触摸屏上用  所以我设计的很宽 宽度可以自己改  把宽度变量...
2114 0
|
C#
WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化   艾尼路 出的效果图 本人嵌套  WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) ...
1638 0