Introduction to WPF 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框架的一个非常重要的特点。它可以让你改变它的外表和感觉,使它们与默认格式完全的不同。)

时间: 2024-08-06 11:40:02

Introduction to WPF Templates(WPF模板简介)的相关文章

WPF三大模板简介

WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了控件“长成什么样子”,因此控件模板由ControlTemplate类表示.控件模板实际在资源集合或资源字典中定义.例子详见:通过设计ControlTemplate,制作圆角文本框与圆角按钮(http://www.cnblogs.com/zhouhb/p/3284780.html). (2) 数据模板.在WPF中,决定数据外

WPF 详解模板

在WPF中有三大模板ControlTemplate,ItemsPanelTemplate,DataTemplate.其中ControlTemplate和ItemsPanelTemplate是控件模板,DataTemplate是数据模板,他们都派生自FrameworkTemplate抽象类. 1.ControlTemplate ControlTemplate:控件模板主要有两个重要属性:VisualTree内容属性和Triggers触发器.所谓VisualTree(视觉树),就是呈现我们所画的控件

WPF中的图像处理简介

原文:WPF中的图像处理简介 和Winform中的GDI+相比,WPF提供了一组新的API用于显示和编辑图像.新API特点如下: 适用于新的或专用图像格式的扩展性模型. 对包括位图 (BMP).联合图像专家组 (JPEG).可移植网络图形 (PNG).标记图像文件格式 (TIFF).Microsoft Windows Media 照片.图形交换格式 (GIF) 和图标 (.ico) 在内的本机图像格式增强了性能和安全性. 高位深图像数据的保留最多 32 位/通道. 非破坏性图像缩放.裁切和旋转.

c#字符串加载wpf控件模板代码 - 简书

原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properties.Resources", typeof(cn.ijiami.keyboard.Properties.Resources).Assembly); string astring = resManagerA.GetString("axml_test"); LogUtil.write

图像处理之基础---卷积模板简介

1.使用模板处理图像相关概念:       模板:矩阵方块,其数学含义是一种卷积运算. 卷积运算:可看作是加权求和的过程,使用到的图像区域中的每个像素分别与卷积核(权矩阵)的每个元素对应相乘,所有乘积之和作为区域中心像素的新值. 卷积核:卷积时使用到的权,用一个矩阵表示,该矩阵与使用的图像区域大小相同,其行.列都是奇数,是一个权矩阵. 卷积示例: 假设3 * 3的像素区域R与卷积核G分别为: 则卷积运算为: R5(中心像素)=R1G1 + R2G2 + R3G3 + R4G4 + R5G5 +

C++ 宏和模板简介

参考<21天学通C++>第14章节,对C++中的宏和模板进行了学习,总结起来其主要内容如下: (1) 预处理器简介 (2) 关键字#define与宏 (3) 模板简介 (4) 如何编写函数模板和模板类 (5) 宏和模板之间的区别 (6) 使用static_assert进行编译阶段检查 **********************************************************************************************************

Django的templates(模板)

目录 Django的templates(模板) 模板传值 模板过滤器 模板语法之标签 常用标签之for标签 常用标签之if标签 常用标签之with标签 自定义过滤器和标签 模板的继承和导入 模板的导入之include标签 模板的继承/派生之extends标签,block标签 Django的templates(模板) django的模板=HTML代码+模板语法 存放于templates目录下的html文件称之为模板文件 如果我们想要返回的html页面中的数据是动态的,那么必须在html页面中嵌入变

编写 WPF DataGrid 列模板,实现更好的用户体验

Julie Lerman 下载代码示例 最近我在为一个客户做一些 Windows Presentation Foundation (WPF) 方面的工作. 虽然我提倡使用第三方工具,但有时也会避免使用这些工具,这样做是为了体验那些坚持使用 Visual Studio 安装附带工具的开发人员会面临什么样的难题. 祝我好运吧!我们来研究一下 WPF DataGrid. 即便有 Web 搜索的帮助和来自在线论坛的建议,仍然有一些用户体验问题花了我几天时间才解决. 将 DataGrid 列分解为成对的互

WPF 控件模板

WPF中每个控件都被设计为无外观的,这意味着我们可以通过一定的方式,完全重定义其可视化外观,而WPF也提供了这种改变外观的方式之一,我们称为模板.wpf的模板有多种方式,可以分为控件模板(ControlTemplate),控件列表模板(ItemsPanelTemplate)和数据模板(DataTemplate).其中ControlTemplate和ItemsPanelTemplate都属于控件模板,但又有不同的表示. 1.控件模板(ControlTemplate) 理解控件模板,首先得理解两个概