WPF - Creating Control Template Assembly

1. 新建一个WPF User Control Library project

删除 User Control1.xaml

2. Add New Item - Resource Dictionary

MyButtonTemplate.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
</ResourceDictionary>

在MyButtonTemplate.xaml中加入template定义。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
    <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="2"
            Background="Red" TextBlock.Foreground="White" Name="Border">
      <Grid>
        <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black"
                   StrokeThickness="1" StrokeDashArray="1 2"
                   SnapsToDevicePixels="True" ></Rectangle>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"
                          Margin="{TemplateBinding Padding}"></ContentPresenter>
      </Grid>
    </Border>
    <ControlTemplate.Triggers>
      <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="Border"
                            Storyboard.TargetProperty="Background.Color"
                            To="Blue" Duration="0:0:1" AutoReverse="True"
                            RepeatBehavior="Forever"></ColorAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="MouseLeave">
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="Border"
                            Storyboard.TargetProperty="Background.Color"
                            Duration="0:0:0.5"></ColorAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>
</ResourceDictionary>

保存然后build。

3. 新建一个WPF Application project来应用这个template

修改MainWindow.xaml，加入一个Button。

F5运行，目前界面是这样的

4. 加入MyButtonTemplate

加入MyControlTemplateLibrary引用。

修改MainWindow.xaml，加入ResourceDictionary。然后为Button设置MyButtonTemplate。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
  <Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/MyControlTemplateLibrary;component/MyButtonTemplate.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Window.Resources>
  <Grid>
    <Button Width="200" Height="100" FontSize="45" Template="{StaticResource ButtonTemplate}">Hello</Button>
  </Grid>
</Window>

F5 运行

Source code: Github

(end.)

• ← Previous Post
• Next Post →