自定义控件与模板

  • 样式

在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而不必分别设置每个按钮的风格。Style是作为一种资源被保存下来的. 看下面的例子: 

<Style x:Key="style1" TargetType="{x:Type Button}">

<Setter Property="Background" Value="Skyblue" />

<Setter Property="FontSize" Value="18" />

<Setter Property="FontFamily" Value="Verdena" />

<Setter Property="FontWeight" Value="Bold" />

</Style>

如果我们希望是动态样式,可以添加trigger

<Style.Triggers>

<Trigger Property="IsPressed" Value="True">

<Setter Property="Foreground" Value="Red"/>

</Trigger>

</Style.Triggers>

  • 模板

ControlTemplate 指定控件的可视结构和可视行为。可以通过为控件指定新 ControlTemplate 自定义该控件的外观。创建 ControlTemplate 后,可以在不更改现有控件的功能的情况下更改其外观。例如,您可以将应用程序中的按钮设置为圆形,而不是默认的方形,但该按钮仍将引发 Click 事件。 注意: 在重定义模板前,你应该充分了解该空间的模板类型

定义模板的方法有三种:

  1. 内联定义
  2. 定义为资源
  3. 通过Style定义

WPF中的ControlTemplate

WPF包含数据模板和控件模板,其中控件模板又包括ControlTemplate和

ItemsPanelTemplate,这里讨论一下ControlTemplate。

其实WPF的每一个控件都有一个默认的模板,该模板描述了控件的外观(视觉树)以及

外观对外界刺激所做出的反应(触发器)。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。

与Style不同,Style只能改变控件的已有属性值(比如颜色字体)来定制控件,但控件模

板可以改变控件的内部结构(VisualTree,视觉树)来完成更为复杂的定制,比如我们可以定制这样的按钮:在它的左办部分显示一个小图标而它的右半部分显示文本。 要替换控件的模板,我们只需要声明一个ControlTemplate对象,并对该ControlTemplate对象做相应的配置,然后将该ControlTemplate对象赋值给控件的Template属性就可以了。

ControlTemplate包含两个重要的属性:

1、VisualTree,该模板的视觉树,其实我们就是使用这个属性来描述控件的外观的

2、Triggers,触发器列表,里面包含一些触发器Trigger,我们可以定制这个触发器列表来使控件对外界的刺激发生反应,比如鼠标经过时文本变成粗体等。

参考以下代码:

<Button>

<Button.Template>

<ControlTemplate>

<!--定义视觉树-->

<Grid>

<Ellipse Name="faceEllipse" Width="{TemplateBinding

Button.Width}" Height="{TemplateBinding Control.Height}" Fill="

{TemplateBinding Button.Background}"/>

<TextBlock Name="txtBlock" Margin="{TemplateBinding

Button.Padding}" VerticalAlignment="Center"

HorizontalAlignment="Center" Text="{TemplateBinding Button.Content}"

/>

</Grid>

<!--定义视觉树_end--> 

</ControlTemplate>

</Button.Template>

</Button>

在上面的代码中,我们修改了Button的Template属性,我们定义了一个

ControlTemplate,在<ControlTemplate> ... </ControlTemplate>之间包含的是模板的视觉树,也就是如何显示控件的外观,我们这里使用了一个Ellipse(椭圆)和一个TextBlock(文本块)来定义控件的外观。

很容易联想到一个问题:控件(Button)的一些属性,比如高度、宽度、文本等如何在

新定义的外观中表现出来呢?

我们使用TemplateBinding 将控件的属性与新外观中的元素的属性关联起来Width="

{TemplateBinding Button.Width}" ,这样我们就使得椭圆的宽度与按钮的宽度绑定在一起

而保持一致,同理我们使用Text="{TemplateBinding Button.Content}"将TextBlock的文本与按钮的Content属性绑定在一起。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值