在WPF中添加自定义控件模板

时间:2012-08-15 19:04:15

标签: .net wpf xaml styles

简单来说,如何将控件模板添加到我的WPF应用程序中?我正在使用Visual Studio 2010和.net 4。

以下是几个问题。

1)根据我的理解,自定义模板用于重新定义控件的已定义默认设置。我是对的吗?

2)如果我希望每当我从工具箱中拖放时按钮都带有图像,那么我应该在某处覆盖按钮的XAML代码。

例如,我在下面有一个控制模板代码,重新定义了进度条应该如何

[1。堆栈溢出的一个简单示例] WPF progressbar style

<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>

另外,我尝试创建自定义控件。 Projects-&gt; New-&gt;自定义控件和VS-2010生成两个文件Customcontrol.cs和customcontroldesigner.cs。之后我该怎么办? (假设我需要一个带图像的按钮,因此总是如此)。

感谢。

1 个答案:

答案 0 :(得分:1)

(1)控制模板

来自MSDN(source):

  

“ControlTemplate允许您指定a的视觉结构   控制。控件作者可以定义默认的ControlTemplate和   应用程序作者可以重写ControlTemplate以进行重构   控制的视觉结构。“

您可以自己在xaml中创建控件模板,也可以使用Expression Blend创建一个副本来编辑和覆盖现有模板。

(2)按钮模板

按钮的默认控件模板如下:

<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>

要更改它以显示不同的内容,您可以在边框/演示者标记附近添加/更改项目。图片不支持直接内容,因此您无法撰写:

            <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>

(3)使用其中包含图像的按钮创建控件

要执行此操作,您可以创建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>

这将创建一个控件,其中包含可从工具箱拖动的图像。显然,图像源是静态值,但您可以在代码中更改它,将类传递给路径参数,或者创建一个属性来访问它。