Wpf-templates

提供：Dev Guides
移動先:案内、検索

WPF-テンプレート

テンプレートは、コントロールの全体的な外観と外観を記述します。 各コントロールには、コントロールに外観を与えるデフォルトのテンプレートが関連付けられています。 WPFアプリケーションでは、コントロールの視覚的な動作と視覚的な外観をカスタマイズするときに、独自のテンプレートを簡単に作成できます。

ロジックとテンプレート間の接続は、データバインディングによって実現できます。 *スタイル*と*テンプレート*の主な違いは以下のとおりです-

  • スタイルは、そのコントロールのデフォルトプロパティを持つコントロールの外観のみを変更できます。
  • テンプレートを使用すると、スタイルよりもコントロールの多くの部分にアクセスできます。 コントロールの既存の動作と新しい動作の両方を指定することもできます。

最も一般的に使用されるテンプレートの2種類があります-

  • 制御テンプレート
  • データテンプレート

制御テンプレート

コントロールテンプレートは、コントロールの視覚的な外観を定義します。 UI要素はすべて、何らかの外観と動作を持っています。たとえば、Buttonには外観と動作があります。 クリックイベントまたはマウスホバーイベントは、クリックアンドホバーに応答して発生する動作であり、コントロールテンプレートによって変更できるボタンのデフォルトの外観もあります。

例

簡単な例を見てみましょう。 2つのボタンを作成し（1つはテンプレート用、もう1つはデフォルトボタン）、それらをいくつかのプロパティで初期化します。 

<Window x:Class = "TemplateDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <Window.Resources>
      <ControlTemplate x:Key = "ButtonTemplate" TargetType = "Button">

         <Grid>
            <Ellipse x:Name = "ButtonEllipse" Height = "100" Width = "150" >
               <Ellipse.Fill>
                  <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">
                     <GradientStop Offset = "0" Color = "Red"/>
                     <GradientStop Offset = "1" Color = "Orange"/>
                  </LinearGradientBrush>
               </Ellipse.Fill>
            </Ellipse>

            <ContentPresenter Content = "{TemplateBinding Content}"
               HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
         </Grid>

         <ControlTemplate.Triggers>

            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter TargetName = "ButtonEllipse" Property = "Fill" >
                  <Setter.Value>
                     <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">
                        <GradientStop Offset = "0" Color = "YellowGreen"/>
                        <GradientStop Offset = "1" Color = "Gold"/>
                     </LinearGradientBrush>
                  </Setter.Value>
               </Setter>
            </Trigger>

            <Trigger Property = "IsPressed" Value = "True">
               <Setter Property = "RenderTransform">
                  <Setter.Value>
                     <ScaleTransform ScaleX = "0.8" ScaleY = "0.8"
                        CenterX = "0" CenterY = "0" />
                  </Setter.Value>
               </Setter>
               <Setter Property = "RenderTransformOrigin" Value = "0.5,0.5"/>
            </Trigger>

         </ControlTemplate.Triggers>

      </ControlTemplate>
   </Window.Resources>

   <StackPanel>
      <Button Content = "Round Button!"
         Template = "{StaticResource ButtonTemplate}"
         Width = "150" Margin = "50"/>
      <Button Content = "Default Button!" Height = "40"
         Width = "150" Margin = "5"/>
   </StackPanel>

</Window>

上記のコードをコンパイルして実行すると、次のメインウィンドウが表示されます。

コントロールテンプレート

カスタムテンプレートを使用してボタンの上にマウスを移動すると、下図のように色が変わります。

コントロールテンプレートでマウスオーバー

データテンプレート

データテンプレートは、データコレクションの外観と構造を定義および指定します。 任意のUI要素でデータのプレゼンテーションをフォーマットおよび定義する柔軟性を提供します。 主に、ComboBox、ListBoxなどのデータ関連のItemコントロールで使用されます。

例

 *データテンプレートの概念を理解するために簡単な例を見てみましょう。* WPFDataTemplates *という名前で新しいWPFプロジェクトを作成します。
* 次のXAMLコードでは、ラベルとテキストボックスを保持するリソースとしてデータテンプレートを作成します。 データを表示するボタンとリストボックスもあります。
<Window x:Class = "WPFDataTemplates.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:WPFDataTemplates"
   xmlns:loc = "clr-namespace:WPFDataTemplates"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "525">

   <Window.Resources>
      <DataTemplate DataType = "{x:Type loc:Person}">

         <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height = "Auto"/>
               <RowDefinition Height = "Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
               <ColumnDefinition Width = "Auto"/>
               <ColumnDefinition Width = "200"/>
            </Grid.ColumnDefinitions>

            <Label Name = "nameLabel" Margin = "10"/>
            <TextBox Name = "nameText" Grid.Column = "1" Margin = "10"
               Text = "{Binding Name}"/>
            <Label Name = "ageLabel" Margin = "10" Grid.Row = "1"/>
            <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10"
               Text = "{Binding Age}"/>
         </Grid>

      </DataTemplate>
   </Window.Resources>

   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

      <ListBox ItemsSource = "{Binding}"/>
      <StackPanel Grid.Row = "1" >
         <Button Content = "_Show..." Click = "Button_Click" Width = "80" HorizontalAlignment = "Left" Margin = "10"/>
      </StackPanel>

   </Grid>

</Window>

以下は、C＃での実装で、PersonオブジェクトのリストがDataContextに割り当てられ、Personクラスの実装とボタンクリックイベントです。 

using System.Collections.Generic;
using System.Windows;

namespace WPFDataTemplates {

   public partial class MainWindow : Window {

      Person src = new Person { Name = "Ali", Age = 27 };
      List<Person> people = new List<Person>();

      public MainWindow() {
         InitializeComponent();
         people.Add(src);
         people.Add(new Person { Name = "Mike", Age = 62 });
         people.Add(new Person { Name = "Brian", Age = 12 });
         this.DataContext = people;
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = src.Name + " is " + src.Age;
         MessageBox.Show(message);
      }
   }

   public class Person {
      private string nameValue;

      public string Name {
         get { return nameValue; }
         set { nameValue = value; }
      }

      private double ageValue;

      public double Age {
         get { return ageValue; }
         set {
            if (value != ageValue) {
            ageValue = value;
            }
         }
      }
   }

}

上記のコードをコンパイルして実行すると、次のウィンドウが生成されます。 リストには1つのリストが含まれ、リストボックス内の各リストボックス項目には、ラベルボックスとテキストボックスに表示されるPersonクラスオブジェクトデータが含まれます。

データテンプレート

「https://www.finddevguides.com/index.php?title=Wpf-templates&oldid=26554」から取得
Powered by MediaWiki