2016/12/07

    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をセットする。

    カテゴリ： C#, C#WPF