C#のWPFでTemplateをコードで作る

コントロールのデザインは通常XAMLで行うが、コードで作り込む事も出来る。

Templateの中身をコードで作成する場合、各コントロールクラスではなくFrameworkElementFactoryクラスを使ってコントロールを作り込んでいく。

XAMLで作った場合

以下はXAMLでTemplateを使っている例

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="250">
    <Canvas Margin="10" Background="AliceBlue">
        <Thumb x:Name="test" Width="50" Height="50"
               Canvas.Left="0"
               Canvas.Top="0">
            <Thumb.Template>
                <ControlTemplate>
                    <Border BorderBrush="Red" BorderThickness="1">
                        <Image Source="testimage.jpg"/>
                    </Border>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>
</Window>

コードで作った場合

上記の例のTemplateの部分をWindowのLoadedイベント内でコードから作成する。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="250">
    <Canvas Margin="10" Background="AliceBlue">
        <Thumb x:Name="test" Width="50" Height="50"
               Canvas.Left="0"
               Canvas.Top="0">
        </Thumb>
    </Canvas>
</Window>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var image = new FrameworkElementFactory(typeof(Image));
            image.SetValue(Image.SourceProperty, new BitmapImage(new Uri("c:\\testimage.jpg", UriKind.Absolute)));

            var border = new FrameworkElementFactory(typeof(Border));
            border.SetValue(Border.BorderBrushProperty, new SolidColorBrush(Colors.Red));
            border.SetValue(Border.BorderThicknessProperty, new Thickness(1));
            border.AppendChild(image);

            var template = new ControlTemplate(typeof(Thumb));
            template.VisualTree = border;
            test.Template = template;
        }
    }

Imageコントロールを作成　(10～11行目) 

FrameworkElementFactoryをImage型で作成。

SetValueメソッドでSourceプロパティにBitmapImageをセットする。

Borderコントロールを作成　(13～16行目) 

FrameworkElementFactoryをBorder型で作成。

SetValueメソッドでそれぞれのプロパティに値をセットする。

AppendChildメソッドで、作成したImageコントロールを子要素として登録する。

ControlTemplateを作成　(18～19行目) 

ControlTemplateを作成。

VisualTreeプロパティへ作成したBorderコントロールをセットする。

Templateへセット　(18～19行目) 

ThumbコントロールのTemplateへ作成したControlTemplateをセットする。