通过ControlTemplate自定义控件的外观和行为

原创 2007年10月06日 00:50:00

    在WPF中,每个可视化控件都有一个默认的模板,通过替换这个默认的模板,可以实现自定义的控件外观和行为。例如:ButtonTemplate 是自定义模板,经过button1.Template = ButtonTemplate以后button1的外观就是自定义外观,button1的行为也由ButtonTemplate决定。一个自定义模板由3个部分组成:控件外

我们通过一个例子来学习自定义控件。做成以后的图片:
以下代码就是一个自定义模板的基本框架,虽然什么也不能做,但是可以编译通过了。
<Window.Resources>
        <!-- Button模板 -->
        <ControlTemplatex:Key="ButtonTemplate"TargetType="Button">
                <!---->
                <ControlTemplate.Resources>
                </ControlTemplate.Resources>
                <!--控件外-->
                <!---->
                <ControlTemplate.Triggers>
                </ControlTemplate.Triggers>
                </ControlTemplate>
</Window.Resources>
<ButtonName="buttonDemo"Template="{StaticResource ButtonTemplate}"></Button>
我们来增加一点点东西。 
<Button Name="buttonDemo"
      Template="{StaticResource ButtonTemplate}"
      Margin="12,12,12,12"
      Content ="Hello World"
      Width="180"
      Height ="72"
      Foreground ="Black"
      FontSize="24"
      FontStyle="Italic"
      FontWeight="Bold"
      HorizontalContentAlignment ="Center"
      VerticalContentAlignment ="Center">  
 </Button>
然后开始修改自定义模板:
<Window.Resources>
  <!-- Button模板 -->
  <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
   <!-- 资源 -->
   <ControlTemplate.Resources>
    <!-- Button表面的渐变 -->
    <LinearGradientBrush x:Key="ButtonShapeGradientBrush" StartPoint ="0,0" EndPoint ="0,1">
     <GradientStop Color="#FF555555" Offset="0.0" />
     <GradientStop Color="#FF999999" Offset="0.2" />
     <GradientStop Color="#FFEEEEEE" Offset="0.5" />
     <GradientStop Color="#FF999999" Offset="0.8" />
     <GradientStop Color="#FF555555" Offset="1.0" />
    </LinearGradientBrush>
    <!-- 鼠标单击的动画 -->
    <Storyboard x:Key="MouseClickStoryboard">
     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="buttonShape" Storyboard.TargetProperty="RadiusX" BeginTime="00:00:00">
      <SplineDoubleKeyFrame KeyTime ="00:00:00" Value="40" />
      <SplineDoubleKeyFrame KeyTime ="00:00:00.50" Value="64" />
      <SplineDoubleKeyFrame KeyTime ="00:00:01" Value="40" />      
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="buttonShape" Storyboard.TargetProperty="RadiusY" BeginTime="00:00:00">
      <SplineDoubleKeyFrame KeyTime ="00:00:00" Value="40" />
      <SplineDoubleKeyFrame KeyTime ="00:00:00.50" Value="64" />
      <SplineDoubleKeyFrame KeyTime ="00:00:01" Value="40" />
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
   </ControlTemplate.Resources>
   <!-- 控件外观 -->
   <Grid>
    <Rectangle Name="buttonShape"
               Width="{TemplateBinding Button.Width}"
               Height="{TemplateBinding Button.Height}"
               RadiusX ="40"
               RadiusY ="40"
               Stroke="Black"
               StrokeThickness="2"
               Fill="{StaticResource ButtonShapeGradientBrush}">
    </Rectangle>
    <ContentPresenter Name="content"
                      Content="{TemplateBinding Content}"
                      ContentTemplate="{TemplateBinding ContentTemplate}"
                      Margin="{TemplateBinding Padding}"
                      TextElement.Foreground ="{TemplateBinding Foreground}"
                      TextElement.FontSize="{TemplateBinding FontSize}"
                      TextElement.FontStyle="{TemplateBinding FontStyle}"
                      TextElement.FontWeight ="{TemplateBinding FontWeight}"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    </ContentPresenter>
   </Grid>   
   <!-- 触发器 -->
   <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="true">
     <Setter TargetName="content" Property="TextElement.Foreground" Value="#FFFF0000" />
     <Setter TargetName="buttonShape" Property="Stroke" Value="#FFFF0000" />
    </Trigger>
    <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="buttonShape">
     <EventTrigger.Actions>
      <BeginStoryboard Storyboard="{StaticResource MouseClickStoryboard}" />
     </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="content">
     <EventTrigger.Actions>
      <BeginStoryboard Storyboard="{StaticResource MouseClickStoryboard}" />
     </EventTrigger.Actions>
    </EventTrigger>    
   </ControlTemplate.Triggers>
  </ControlTemplate>
 </Window.Resources>
 <Button Name="buttonDemo"
      Template="{StaticResource ButtonTemplate}"
      Margin="12,12,12,12"
      Content ="Hello World"
      Width="180"
      Height ="72"
      Foreground ="Black"
      FontSize="24"
      FontStyle="Italic"
      FontWeight="Bold"
      HorizontalContentAlignment ="Center"
      VerticalContentAlignment ="Center">  
 </Button>
代码简单,没什么好说的啊!
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

浅析ControlTemplate类

Specifies the visual structure and behavioral aspects of a Control that can be shared across mul...

MVVM中轻松实现Command绑定(三)任意事件的Command

WPF中不是所有的控件都有Command属性的,如果窗体我需要在ViewModel中处理Loaded事件命令,或者其他事件的命令时,很难都过绑定Command完成,必须要注册依赖属性或事件等,太麻烦了...

WPF触发器(Trigger、DataTrigger、EventTrigger)

WPF中有种叫做触发器的东西(记住不是数据库的trigger哦)。它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作。 WPFtrigger的主要类型有:Trigger...

WPF中的ControlTemplate(控件模板)

转自:http://www.cnblogs.com/zhouyinhui/archive/2007/03/28/690993.html WPF中的ControlTemplate(控件模板) ...

通过创建 ControlTemplate 自定义现有控件的外观

原文:http://msdn.microsoft.com/zh-cn/library/vstudio/ee230084(v=vs.100).aspx

ControlTemplate中的控件如何Binding后台自定义依赖属性

随着项目界面的美观话,一般的window窗体样式已经满足不了现在的需求,所以需要我们自己定义window的样式。但是之前的窗口标题(WindowTitle)这个属性仍需体现。下面在保证自定义窗体样式的...

iOS6下自定义UI控件外观效果

尽管iOS原生的UI控件就已经有很不错的显示效果,但是App开发者仍然希望自己的产品与众不同,所以自定义UI外观成了每个App产品开发必做之事。今天就来做一个在iOS6下实现自定义UI的demo,内容...

控制 WebBrowser 控件的外观和行为

控制 WebBrowser 控件的外观和行为2011-03-23 09:33在 CSDN 上经常看到以下两个问题:1、在 MFC 应用程序中,如果创建了一个 WebBrowser 控件(包括 CHtm...

WPF中的ControlTemplate(控件模板)

WPF包含数据模板和控件模板,其中控件模板又包括ControlTemplate和ItemsPanelTemplate,这里讨论一下ControlTemplate。其实WPF的每一个控件都有一个默认的模...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)