一个较好的style与ControlTemplate结合的示例(以Button为例)

<!--按钮背景画刷-->
    <LinearGradientBrush x:Key="buttonBackgroundBrush">
        <GradientStop Offset="0" Color="Beige"/>
        <GradientStop Offset="1" Color="White"/>
    </LinearGradientBrush>    
    <Sys:String x:Key="bgImg">"..\images\bgImg.png"</Sys:String>

<Color x:Key="bgColorBlack">Black</Color>

<!--按钮模板定义,说明:控件模板不但可以通过拆解控件,并修改可视化元素树来完成;也可以“根据自我想象”,任意地自定义,只要达到需求的效果就好,但这样,程序员可能要写大量的触发器、样式等等,这些效果可以参照“拆解控件”时生成的xaml代码-->
    <ControlTemplate x:Key="TestButtonTemplate" TargetType="{x:Type Button}">
        <Border x:Name="border" BorderThickness="1" BorderBrush="Black"
                      Background="{StaticResource buttonBackgroundBrush}"
                      CornerRadius="10">
            <Grid>
                <Image x:Name="image" Source="a.png"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Stretch="Fill" Height="50" Width="50"/>
                <Label Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>  <!--由于该自定义模板破坏掉button控件原有的很多效果和功能(如:Button控件的Content属性值的外在显示),所以这里使用<Label Content来展示<Button Content的属性值,我们在外部依然是给button按钮的content属性赋值,而这个值在Lable的Content属性值中展示出来,故需要通过“Binding RelativeSource”来获得我们在控件外部输入的Button Content属性值。
            </Grid>
        </Border>
       
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true"><!--针对Button的-->
                <Setter TargetName="image" Property="Source" Value="b.png"/><!--但它针对Button的组成元素之一:“images”,而不针对其它的组成元素-->
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate> <!--数据模板是描述“数据项”风格的一种模板,数据集合中所有数据记录的风格都是一致的;控件模板是针对控件的外在显示,而与数据是无关的;数据模板是针对数据项的、控件模板是针对控件的;数据模板是渲染控件中的数据的、控件模板是渲染控件自身的,不包括数据-->
    
    <!--按钮样式定义,实际只需要在Button的Style中引用这个就好-->
    <Style x:Key="TestButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="FontWeight" Value="bold"/>
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="Template" Value="{StaticResource TestButtonTemplate}"/><!--good-->
    </Style>

说明:上例中的Style、ControlTemplate、LinearGradientBrush等元素,都属于“资源”(而不是控件),所以通常放在资源区域 或 资源字典 中。可以把用户控件和window整体分为“资源区域”和“布局区域”,资源区域存放各种资源(如:style,controltemplate、datatemplate、string、brush等,并且资源的标识是x:key);布局区域存放各种控件(如:grid,button,textbox等等,并且控件的标识是x:name),需要注意的是,许多控件自身也有resouce。

WPF重要知识回顾:

Style、ControlTemplate、DataTemplate三者可以并列,另外,后两者也可以嵌入到Style当中。

依赖属性(通常被控件拥有,它可以Binding到ViewModel的属性上),路由事件(可导致对应的“事件触发器”被触发)

触发器:属性,数据,事件(路由事件的激发 会 导致 事件触发器 被激发,事件触发器中,通常使用动画处理),使用触发器的意义:主要是为了产生“界面效果”

动画:经常使用Storybord来实现动画效果

综上所述:以上这些知识都是为了产生界面效果的,所以WPF的核心就是为了渲染界面效果的。

时间: 2024-10-06 12:12:41

一个较好的style与ControlTemplate结合的示例(以Button为例)的相关文章

java 加入一个线程、创建有响应的用户界面 。 示例代码

javajava 加入一个线程.创建有响应的用户界面 . 示例代码 来自thinking in java 4 21章  部分代码  目录21.2.11 thinking in java 4免费下载:http://download.csdn.net/detail/liangrui1988/7580155 package org.rui.thread.concurrent; /** * 加入一个线程 * 一个线程可以在其他线程之上调用join()方法,其效果是等待一段时间直到第二个线程结束才继续执行

一个非常标准的Java连接Oracle数据库的示例代码

最基本的Oracle数据库连接代码(只针对Oracle11g): 1.右键项目->构建路径->配置构建路径,选择第三项"库",然后点击"添加外部Jar",选择"D:\Oracle\app\oracle\product\11.2.0\server \jdbc\lib\ojdbc6_g.jar"(注:D:\Oracle为数据库的安装路径). 2.以下代码为非常标准的Oracle数据库连接代码示例: /** * 一个非常标准的连接Oracl

如何获取一个元素没有在style和样式表中设置的样式的值?

场景:需要判断一个元素是否是固定定位,但是它的position属性没有设置在该元素的标签style中,如何去判断它的position值为fixed? 措施:通过 window.getComputedStyle(element, [pseudoElt])(pseudoElt可选,表示指定节点的伪元素(:before.:after.:first-line.:first-letter等))的style来判断. 原文地址:https://www.cnblogs.com/juicy-initial/p/1

网页开发一个div相对于另外一个div的精确定位的问题(以象棋的布局为例)

在网页开发的过程中,我们在布局上基本上都会采用div+css的形式,虽然css里面的百分号可以满足我们的div会相对于浏览器的大小发生变化,但是如果我要让一个多个div相对于一个div进行精确的定位,那么这个方法就有些吃力了,我最近再写一个网络象棋对战平台,就遇到了这个问题,就是如何让我的棋子(图片)精确地位于棋盘(图片)的相应的额精确位置呢?一开始,我也是想到了css的百分号定义,然后发现这个实现太难了,于是我最后采用的是javascript脚本,ok,先看一下我们的基本素材,这里有一个我自己

当你输入一个网址/点击一个链接,发生了什么?(以www.baidu.com为例)

>>>点击网址后,应用层的DNS协议会将网址解析为IP地址: DNS查找过程: 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束. 如果用户的浏览器缓存中没有,浏览器会查找操作系统缓存(hosts文件)中是否有这个域名对应的DNS解析结果. 若还没有,此时会发送一个数据包给DNS服务器,DNS服务器找到后将解析所得IP地址返回给用户. >>>在应用层,浏览器会给web服务器发送一个HTTP请求: 请求头为:GET http://

【转】一个非常标准的Java连接Oracle数据库的示例代码

原文地址: http://www.cnblogs.com/liuxianan/archive/2012/08/05/2624300.html 最基本的Oracle数据库连接代码(只针对Oracle11g): 1.右键项目->构建路径->配置构建路径,选择第三项“库”,然后点击“添加外部Jar”,选择“D:\Oracle\app\oracle\product\11.2.0\server \jdbc\lib\ojdbc6_g.jar”(注:D:\Oracle为数据库的安装路径). 2.以下代码为非

第一个在Python 环境中开发的Spark应用示例

# -*- coding:utf-8 -*- ''' 1, 从网站上下载spark 2, py4j和pyspark这两个库放到Python环境中, ''' import os os.environ['SPARK_HOME'] = r'E:\Dev\spark-1.4.0-bin-hadoop2.6' from pyspark import SparkContext, SparkConf appName ="jhl_spark_1" #你的应用程序名称 #Master URLs, 参见h

delegate事件委托

下面举个例子 我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li> </ul> </body> 普通写法 $(function(){ $('li').on('click',fun

Solr vs. Elasticsearch谁是开源搜索引擎王者

当前是云计算和数据快速增长的时代,今天的应用程序正以PB级和ZB级的速度生产数据,但人们依然在不停的追求更高更快的性能需求.随着数据的堆积,如何快速有效的搜索这些数据,成为对后端服务的挑战.本文,我们将比较业界两个最流行的开源搜索引擎,Solr和ElasticSearch.两者都建立在Apache Lucene开源平台之上,它们的主要功能非常相似,但是在部署的易用性,可扩展性和其他功能方面也存在巨大差异. 关于Apache Solr Apache Solr基于业界大名鼎鼎的java开源搜索引擎L