Silverlight实用窍门系列:71.Silverlight的Style

简介:

此文章实例基于Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary,如有数据源疑问请参考该文章。

  在Silverlight中的Style相当于Html中的Css,是其一个重要的组成部分。它可以声明于UserControl.Resources也就是本页面资源内或者控件资源内,也可以声明于App.Xaml内或者ResourceDictionary字典资源内。

  Style分为内联样式(控件本身样式)、页内级别样式(本身UserControl.Resources内样式)、应用程序域级别样式(App.Xaml内样式)、ResourceDictionary字典资源

  Style的作用顺序是就近原则,比如一个控件先使用自身样式,然后在本页面内的资源寻找具有指定Key的样式,如果找到就使用此样式,没有就找App.Xaml内样式,再没有就取ResourceDictionary字典资源内寻找。

  A.其声明为 <Style TargetType="ListBox" x:Key="listBox" BasedOn="{StaticResource fontColor}"></Style>

    TargetType:针对什么控件

    x:Key:此样式的样式名称Key,对于不需要x:Key指定的隐式样式,我们将会在下节讲述。

    BasedOn:继承于什么样式,注意继承的样式需要以BasedOn="{StaticResource fontColor}"指定上级Style的Key

 

  B.样式内部项以<Setter></Setter>标签声明,如<Setter Property="FontSize" Value="15"></Setter>

    Property:作用于什么属性

    Value:设置的值是什么?

    同样其也可以用以下方式申明Setter值,在这里把整个DataTemplate模板作为一个Setter的Value,然后设置针对属性值为ListBox的ItemTemplate属性。

复制代码
 <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>
复制代码

  最后贴出针对ListBox设置的样式继承于某fontColor样式,代码如下:

复制代码
    <Application.Resources>
        <Style TargetType="ListBox" x:Key="fontColor">
            <Setter Property="Foreground" Value="Red"></Setter>
        </Style>
        <Style TargetType="ListBox" x:Key="listBox" BasedOn="{StaticResource fontColor}">
            <Setter Property="FontSize" Value="15"></Setter>
            <Setter Property="FontFamily" Value="Georgia"></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>
    </Application.Resources>
复制代码

  在看实例中使用样式如下代码:

复制代码
    <UserControl.Resources>
        <local:ArtList x:Key="SourceList"></local:ArtList>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White"  DataContext="{StaticResource SourceList}">
        <ListBox x:Name="lbRes" ItemsSource="{Binding ArticleList}"  Style="{StaticResource listBox}"
                 Margin="0 50 0 0 "
                 HorizontalAlignment="Left" VerticalAlignment="Top"
                  Height="400"  >
        </ListBox>
    </Grid>
复制代码

  实现效果如下图,可以看到该ListBox实现了Style中的模板样式和字体大小等,另外还继承了fontColor样式中的字体颜色,如需源码请点击 SLStyle.zip 下载。


本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2012/07/02/2558112.html,如需转载请自行联系原作者


相关文章
|
2月前
|
存储 缓存 Java
我们来说一说 JVM 的内存模型
我是小假 期待与你的下一次相遇 ~
219 4
|
2月前
|
供应链 搜索推荐 API
从0到1掌握1688API:图片搜索获取技巧与避坑指南
1688图片搜索API基于图像识别技术,支持上传JPG/PNG格式图片(Base64或URL),实现同款或相似商品搜索。适用于电商选品、供应链管理等场景,提供价格、销量等多维度筛选,返回商品ID、标题、价格、销量及供应商信息。
|
编解码 监控 算法
图像和视频处理中DSP算法的研究与发展
图像和视频处理中DSP算法的研究与发展
341 2
|
11月前
|
前端开发 Java 数据库连接
【潜意识Java】深度解读JavaWeb开发在Java学习中的重要性
深度解读JavaWeb开发在Java学习中的重要性
200 4
|
12月前
|
Linux API 开发工具
魔搭llamafile集成:让大模型开箱即用
Llamafile是一个将大模型和其所需运行环境,全封装在一个可执行文件中的开源创新项目。为了方便广大开发者能以更低的门槛使用大模型,魔搭社区上提供了大量优秀模型的llamafile格式。
364 5
|
存储 监控 数据可视化
性能测试:主流性能剖析工具介绍
**性能剖析**是识别应用性能瓶颈的关键,涉及指标收集、热点分析、优化建议及可视化报告。常用工具有:**JConsole**监控JVM,**VisualVM**多合一分析,**JStack**分析线程,**FlameGraph**展示CPU耗时,**SkyWalking**分布式跟踪,**Zipkin**追踪服务延迟。这些工具助力开发人员提升系统响应速度和资源效率。
|
存储 安全 搜索推荐
深入理解 Session-Expire 头字段的作用
【8月更文挑战第24天】
303 0
|
SQL 监控 安全
【阿里云云原生专栏】云原生安全体系构建:阿里云云防火墙与WAF的应用
【5月更文挑战第27天】阿里云云防火墙和WAF是构建云原生安全体系的关键产品,提供网络、主机和Web应用多维度防护。云防火墙采用分布式架构抵御网络攻击,确保应用安全稳定;WAF专注Web应用安全,防止SQL注入、XSS和DDoS等威胁。简单部署配置,结合使用可实现全面安全防护,提升企业云上应用安全性,保障业务安全运行。未来,阿里云将持续强化云原生安全建设。
654 1
|
算法 关系型数据库 MySQL
MySQL锁之较量:悲观锁与乐观锁的对决
【4月更文挑战第20天】
846 2
|
JavaScript 容器
vue element plus Space 间距
vue element plus Space 间距
402 0