码迷,mamicode.com
首页 > Windows程序 > 详细

Introduction to WPF Templates(WPF模板简介)

时间:2015-08-29 21:43:24      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:templates   wpf   

Introduction(简介)
Windows Presentation Foundation allows the developer to completely change the look and feel of the controls. This is accomplished by using Control Templates. It means you can render your Button as an Ellipse which when hovered will change its color. Actually, that is exactly what we are going to do in this article.
(WPF使开发人员可以彻底改变控件的外观和感觉。这是通过使用控制模板完成。这意味着你可以使你的按钮为椭圆形,当鼠标悬浮上的时候改变其颜色。其实,这正是我们要做的这篇文章。)

Why Control Templates and Why Not Styles?
(为什么是模板而不是样式呢?)
In one of the previous articles, we talked about Styles in WPF. You can check out the article: Introduction to Styling in Windows Presentation Foundation.
(在前面的文章中,我们谈到了在WPF样式。您可以检查出这篇文章:WPF中样式简介。)

One question you might ask is why not use styles to change the look of the controls. Styles can change the appearance of your control but they will be dependent on the properties provided by the control itself. It means you will not be able to render your Button as a Polygon. Control Templates allow changing the look of the control by providing a template which will be used by the control.
(你可能会问的一个问题是,为什么不使用样式来更改控件的外观。样式可以改变你的控件的外观,但他们将取决于由控制本身所提供的特性。这意味着你将无法使多边形作为你的按钮。控制模板允许通过提供将被用于由控制模板改变控制的外观。

Creating a Round Button(创造一个圆形按钮)
In this article, we are going to create a round button by using control templates. The first task is to create a simple button control. Here is the code for that:
(在这篇文章中,我们将使用控件模板来创建一个圆形按钮。第一个任务是创建一个简单的按钮控件。这里是该代码:)

<Button Content="Push Me!" >

This will create a very simple button control on the WPF form. Let’s create a template for this button. We will place the template in the App.xaml file so that we can use it throughout the application.
(这将创建WPF窗体上的一个非常简单的按钮控件。让我们来创建此按钮的模板。我们将在App.xaml文件的模板,这样我们就可以在整个应用程序中使用它。)

<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">      
        <Grid>
           <Ellipse Name="el1" Fill="Orange" Width="100" Height="100">            
           </Ellipse>                                     
        </Grid> 
</ControlTemplate> 

The control template defined above is really simple! First a unique key “buttonTemplate” is assigned to the control template. Also, the TargetType of the template is set to “Button” which means this template can only be applied to a Button control. Next, we define an Ellipse inside the Grid control. It is a simple Ellipse filled with orange color.
(上面定义的控件模板是非常简单的!第一唯一密钥“buttonTemplate”被分配给控制模板。另外,该模板的TargetType设定为“按钮”,这意味着该模板仅可应用到一个按钮控件。接下来,我们定义网格控件中的椭圆。这是一个简单的椭圆填充橙色。)

技术分享
Now, let’s apply the template to the Button control:
(现在,让我们把模板应用于按钮控件:)

<Button Content="Push Me!" Template="{StaticResource buttonTemplate}" 
    Click="Button_Clicked"></Button>

As soon as you apply the control template, the Button will change its display and will be rendered as an Ellipse as shown below:
(只要你应用了控制模板,该按钮将更改其显示和如下图所示将呈现为一个椭圆:)

There is one problem with the above rendering; the content of the Button control which is “Push Me!” is not displayed. Let’s make it appear inside the Ellipse. The ContentPresenter control can be used to display the content of a WPF control.
(对于上述的渲染有一个问题;按钮中的内容没有被显示。让我们把它出现在椭圆内。该ContentPresenter控件可以用来显示一个WPF控件的内容。)

<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" 
    Content="{TemplateBinding Button.Content}" />

And here is the result:
(这就是结果:)
技术分享
We are not done yet! Let’s also add a trigger to the Button control so that it changes the color of the Ellipse once the mouse is over it.
(我们还没有完成!我们还为按钮控件添加了一个触发事件,一旦鼠标移动到它,椭圆的颜色就会改变。)

<ControlTemplate.Triggers>
          <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter TargetName="el1" Property="Fill" Value="Yellow"/>
          </Trigger>
        </ControlTemplate.Triggers>

The trigger is fired on the Button.IsMouseOver event. The Setter is used to change the Fill property of the Ellipse to “Yellow”. Now, when you hover over the Ellipse, it will change from orange to yellow.
(在Button.IsMouseOver事件中触发器被触发。设置器用来改变椭圆到“黄色”的填充属性。现在,当你在椭圆悬停,它会改变从橙黄色。)

Conclusion(总结)
WPF Control Template is a very important feature of the WPF Framework. It allows you to change the look and feel of the WPF controls and render them in completely different way from their default format.
(WPF控件模板是WPF框架的一个非常重要的特点。它可以让你改变它的外表和感觉,使它们与默认格式完全的不同。)

Introduction to WPF Templates(WPF模板简介)

标签:templates   wpf   

原文地址:http://blog.csdn.net/wangshubo1989/article/details/48091771

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!