[英]Adding a custom control template in WPF
In simple words, how to add a control template to my WPF Application? 简而言之,如何向WPF应用程序中添加控件模板? I am using Visual studio 2010 with .net 4.
我正在将Visual Studio 2010与.net 4一起使用。
Below are a few questions. 以下是一些问题。
1) According to my understanding, a custom template is something that is used for re-defining an already defined default settings of a control. 1)根据我的理解,自定义模板是用于重新定义控件的已定义默认设置的模板。 Am I right In this case ?
我这样说对吗?
2) If we want the button to be with an image whenever I drag and drop from tool-box, then I should have over-ridden the XAML code for the button somewhere. 2)如果每次我从工具箱拖放按钮时都希望按钮与图像一起显示,那么我应该在某个地方重写按钮的XAML代码。
For example, I have got a control template code below that re-defines how the progress bar should be 例如,下面有一个控制模板代码,它重新定义了进度条的显示方式
[1. [1。 A simple example from stack overflow] WPF progressbar style
来自堆栈溢出的简单示例] WPF progressbar样式
<ControlTemplate x:Key="CustomProgressBar" TargetType="ProgressBar" >
<Grid Name="TemplateRoot" SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
<Border CornerRadius="0,0,0,0" Margin="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
</Border>
<Border BorderThickness="0,0,0,0" BorderBrush="Transparent" Margin="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
</Border>
<Rectangle Name="PART_Track" Margin="1,1,1,1" />
<Decorator Name="PART_Indicator" Margin="1,1,1,1" HorizontalAlignment="Left">
<Grid Name="Foreground">
<Rectangle Fill="Transparent" Name="Indicator" />
<Grid Name="Animation" ClipToBounds="True">
<Border Name="PART_GlowRect" Width="100" Margin="0,0,0,0" HorizontalAlignment="Left" Background="LightBlue"/>
</Grid>
<Grid Name="Overlay">
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="0" CornerRadius="0,0,0,0" BorderBrush="Transparent" />
</Grid>
</ControlTemplate>
Also , I tried creating a custom control. 另外,我尝试创建一个自定义控件。 Projects->New->Custom control and the VS-2010 produces two files Customcontrol.cs and customcontroldesigner.cs.
项目->新建->自定义控件,VS-2010生成两个文件Customcontrol.cs和customcontroldesigner.cs。 What should I do afterwards ?
之后我该怎么办? (Say I need a button with an image hence always).
(假设我总是需要一个带有图像的按钮)。
Thanks. 谢谢。
From the MSDN ( source ): 从MSDN( 来源 ):
"The ControlTemplate allows you to specify the visual structure of a control. The control author can define the default ControlTemplate and the application author can override the ControlTemplate to reconstruct the visual structure of the control."
“ ControlTemplate允许您指定控件的视觉结构。控件作者可以定义默认的ControlTemplate,而应用程序作者可以重写ControlTemplate来重建控件的视觉结构。”
You can create a control template in xaml yourself or you can use Expression Blend to create a copy to edit and overwrite the existing template with. 您可以自己在xaml中创建控件模板,也可以使用Expression Blend创建副本以编辑和覆盖现有模板。
The default control template for a button is as follows: 按钮的默认控件模板如下:
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonPressedBorder}"/>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonPressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
To alter it to show different content you would add/change items near the border/ presenter tags. 要更改它以显示不同的内容,您可以在border / presenter标签附近添加/更改项目。 Image does not support direct content so you wont be able to write:
图片不支持直接内容,因此您将无法编写:
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<Image Source="/project;component/Images/image.png">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Image>
</Border>
To do this you can create a UserControl
and add a button like below with an image: 为此,您可以创建一个
UserControl
并添加一个带有图像的如下所示的按钮:
<UserControl x:Class="ImageButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button >
<Image Source="/project;component/Images/image.png"></Image>
</Button>
</Grid>
</UserControl>
This will create a control with an Image in it that is drag-able from the toolbox. 这将创建一个控件,其中包含可从工具箱拖动的图像。 Obviously the image source is a static value but you can change it in code, pass the class a path parameter, or create a property to access it.
显然,图像源是一个静态值,但是您可以在代码中对其进行更改,为该类传递路径参数或创建属性以对其进行访问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.