WPF ControlTemplate控件模板

WPF包含数据模板控件模板,这里讨论一下ControlTemplate。 其实WPF的每一个控件都有一个默认的模板,该模板描述了控件的外观以及外观对外界刺激所做出的反应。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。 

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

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

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

 

代码:

<Window x:Class="高级动画和模板.模板._01ControlTemplate_控件模板_"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:高级动画和模板.模板"

        mc:Ignorable="d"

        WindowStartupLocation="CenterScreen"

        Title="_01ControlTemplate_控件模板_" Height="600" Width="1000" >

<Window.Resources>

<!--声明ControlTemplate对象-->

        <!-- TargetType指定标签 设置 Key值-->

        <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">

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

            <Grid>

                <!--Ellipse 椭圆标签 Fill 填充-->

                <Ellipse Name="faceEllipse" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Control.Height}"  Fill="{TemplateBinding Button.Background}"/>

                <!--VerticalAlignment 水平 Center居中 HorizontalAlignment  Center 居中 -->

                <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center"  HorizontalAlignment="Center"  Text="{TemplateBinding Button.Content}" />

            </Grid>

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

            <!--定义动画资源-->

            <ControlTemplate.Resources>

                <Storyboard x:Key="MouseClickButtonStoryboard">

                    <!--BeginTime 动画开始执行时间-->

                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="faceEllipse" Storyboard.TargetProperty="Width" BeginTime="00:00:00">

                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="50"/>

                        <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="100"/>

                    </DoubleAnimationUsingKeyFrames>

                </Storyboard>

            </ControlTemplate.Resources>

            <!--定义动画资源_end-->

 

            <!--定义触发器-->

            <ControlTemplate.Triggers>

                <!--IsMouseOver 鼠标移入事件 移入为True 则触发-->

                <Trigger  Property="Button.IsMouseOver"  Value="True">

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

                </Trigger>

                <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="faceEllipse">

                    <EventTrigger.Actions>

                        <BeginStoryboard Storyboard="{StaticResource MouseClickButtonStoryboard}"/>

                    </EventTrigger.Actions>

                </EventTrigger>

                <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="txtBlock">

                    <EventTrigger.Actions>

                        <BeginStoryboard Storyboard="{StaticResource MouseClickButtonStoryboard}"/>

                    </EventTrigger.Actions>

                </EventTrigger>

            </ControlTemplate.Triggers>

            <!--定义触发器_End-->

        </ControlTemplate>

    </Window.Resources>

 

 

    <Grid ShowGridLines="True">

       

        <!--ColumnDefinition 列 比例是 2:4:2-->

        <!--3行-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="0.2*"/>

            <ColumnDefinition Width="0.4*"/>

            <ColumnDefinition Width="0.2*"/>

        </Grid.ColumnDefinitions>

        <!--RowDefinitions 比例是 3:3:4-->

        <Grid.RowDefinitions>

            <!--3列-->

            <RowDefinition Height="0.3*"/>

            <RowDefinition Height="0.3*"/>

            <RowDefinition Height="0.4*"/>

        </Grid.RowDefinitions>

        <!--Template 模板 StaticResource 静态资源 -->

        <!--Grid.Column="0" 第一列 Grid.Row="0" 第一行 Grid.RowSpan 占的列数 Grid.ColumnSpan 占的行数-->

        <Button Content="test btn1" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="1"  Background="Red"  />

        <Button Content="test btn2" Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1"  Template="{StaticResource ButtonTemplate}" Background="Yellow" />

        <Button Content="test btn2" Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1"  Template="{StaticResource ButtonTemplate}" Background="Blue"  />

    </Grid>

</Window>

 

效果:

说明:

TemplateBinding :XAML 页面中对象模板绑定调用

这里使用了一个Ellipse(椭圆)和一个TextBlock(文本块)来定义控件的外观。 

TemplateBinding 将控件的属性与新外观中的元素的属性关联起来Width=" {TemplateBinding Button.Width}" ,这样我们就使得椭圆的宽度与按钮的宽度绑定在一起而保持一致。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值