WPF コントロール - 版の履歴

2020年2月16日 (日) 04:34にPirotoによる

2020-02-16T04:34:49Z

2020年2月15日 (土) 08:40にPirotoによる

2020-02-15T08:40:27Z

2020年2月15日 (土) 08:07にPirotoによる

2020-02-15T08:07:16Z

Piroto: ページの作成:「==WPF コントロール== [WPF][Silverlight][.Net][Universal Windows Platform] {{amazon|4798114200}} ==コンテンツモデル== *WPFでは、ほとんどのコ…」

2020-02-15T07:37:10Z

ページの作成:「==WPF コントロール== [WPF][Silverlight][.Net][Universal Windows Platform] {{amazon|4798114200}} ==コンテンツモデル== *WPFでは、ほとんどのコ…」

新規ページ

==WPF コントロール==
[WPF][Silverlight][.Net][Universal Windows Platform]
{{amazon|4798114200}}

==コンテンツモデル==
*WPFでは、ほとんどのコントロールを3つのカテゴリに分類

{|class="wikitable"
!カテゴリ
!内容
!例
|-
|コンテンツコントロール
|実際の作業を行う他の要素で構成
|ListBoxやButtonなど
|-
|レイアウトコントロール
|他のコントロールを配置
|StackPanel
|-
|レンダコントロール
|画面にピクセルを表示する
|Rectangle、Ellipse
|-
|}

===ContentPresenter===
*ContentPresenter は Content プロパティに渡されたものを何でも受け取り、それを表示するために対応する視覚ツリーを作成する。
*例えば、ContentPresenterを使用して、数値、日時、ボタンを表示出来る
StackPanel panel = new StackPanel();

ContentPresenter intPresenter = new ContentPresenter();
intPresenter.Content = 5;
panel.Children.Add(intPresenter);

ContentPresenter datePresenter = new ContentPresenter();
datePresenter.Content = DateTime.Now;
panel.Children.Add(datePresenter);

ContentPresenter elementPresenter = new ContentPresenter();
elementPresenter.Content = new Button();
panel.Children.Add(elementPresenter);
[[File:1445_wpf_content_presenter.jpg]]
====ContentPresenterがコンテンツを変換して表示するロジック====
#ContentがUIElement型の場合は、表示ツリーに追加
#ContentTemplateが設定されている場合、それを使用してUIElementインスタンスを生成し表示ツリーに追加
#ContentTemplateSelectorが設定されている場合、それを使用してテンプレートを検索し、そのテンプレートを使用してUIElementインスタンスを生成し表示ツリーに追加
#Contentのデータ型にデータテンプレートが関連づけられている場合、それを使用してUIElementインスタンスを作成
#Contentのデータ型にUIElement型に変換可能なTypeConverterインスタンスが関連づけられている場合、Contentを変換し表示ツリーに追加
#Contentのデータ型に文字列変換可能なTypeConverterインスタンスが関連づけられている場合、ContentをTextBlockで包含し表示ツリーに追加
#最後にContentのToStringを呼び出し、TextBlockで包含し表示ツリーに追加
===Items===
*項目のリストに対しても、ContentPresenterを使用できる
*Itemsプロパティを使用する
ListBox l = new ListBox();
l.Items.Add("Hello");
l.Items.Add("There");
l.Items.Add("World");
[[File:1446_wpf_imtes.jpg]]
===ChildrenおよびChild===
*UIElementの子のみをサポート

==テンプレート==
*WPFコントロールは、プロパティを使用することによる視覚表示の大幅な制御を可能にする
*任意のコントロールの外観を完全にカスタマイズすることも可能。
*カスタマイズの範疇全体を宣言型にし一貫したプログラミングモデルを提供する、テンプレートシステム
*コンテンツコントロール、レイアウトコントロール、レンダコントロールはすべて
テンプレートをサポート
*コンテンツコントロールはControlから派生し、Templateという共通プロパティを継承
*コンテンツに影響を与えずに、外観を変更したい場合新しいテンプレートを定義出来る
<Button>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Rectangle Fill="Red" Width="75" Height="23"/>
</ControlTemplate>
</Button.Template>
MyButton
</Button>
[[File:1447_wpf_template.jpg]]

===クリックでテンプレートを変更してみる===
private void Button_Click(object sender, RoutedEventArgs e)
{
var template = new ControlTemplate(typeof(Button));

// 表示ツリーを定義
// テンプレートは複数のコントロールに適用できるが、
// コントロールは表示ツリーで1回しか使用できない
// ボタンを楕円形で表示させるようにする
template.VisualTree = new FrameworkElementFactory(typeof(Ellipse));

// 楕円形が作成されるときに設定されるプロパティリストを作成
template.VisualTree.SetValue(Ellipse.FillProperty, Brushes.Blue);
template.VisualTree.SetValue(Ellipse.WidthProperty, 75.0);
template.VisualTree.SetValue(Ellipse.HeightProperty, 23.0);

((Button)sender).Template = template;
}
[[File:1448_wpf_template02.jpg]]
===ボタンらしい外観にしてみる===
*コンテンツプレゼンタを含めることでボタンらしい外観のボタンを作成できる
*コンテンツプレゼンタは規定ではテンプレートが適用されるコントロールのContentプロパティの値を表示する
<StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" >
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border CornerRadius="6" BorderThickness="4">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Green"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Green"/>
<GradientStop Offset="1" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</StackPanel.Resources>
<Button Template="{StaticResource ButtonTemplate}" Padding="10" Margin="10">
My Button
</Button>
</StackPanel>

[[File:1449_wpf_template03.jpg]]
===テンプレートバインディング===
*例えばボタンの色を変更するためだけにテンプレートを定義する必要があるとしたら、シンプルなプログラミングモデルとは言えない。
*理想的なのはテンプレートにパラメータを追加できるか、テンプレートコントロールのプロパティをお使用して、テンプレートをカスタマイズできること。
<blockquote>以下の例は、BorderのBorderThicknessプロパティ、BorderBrushプロパティ、およびBackgroundプロパティをテンプレートが適用されるButtonの同じプロパティにバインドします。Buttonのプロパティを設定するだけで、下図のようなボタンを作成出来ます。</blockquote>
<StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" >
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border CornerRadius="6"
BorderThickness="{TemplateBinding Property=BorderThickness}"
BorderBrush="{TemplateBinding Property=BorderBrush}"
Background="{TemplateBinding Property=Background}">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</StackPanel.Resources>
<Button Template="{StaticResource ButtonTemplate}"
Padding="10"
Margin="10"
BorderThickness="6"
BorderBrush="Blue">
My Button
</Button>
</StackPanel>
[[File:1450_wpf_template04.jpg]]

@@ 1行目: / 1行目: @@
 ==WPF コントロール==
-[[WPF][Silverlight][.Net][Universal Windows Platform]]
+[[WPF]] | [[Silverlight]] | [[.Net]] | [[Universal Windows Platform]] |
 {{amazon|4798114200}}

@@ 1行目: / 1行目: @@
-==WPF コントロール==
+==[[WPF コントロール]]==
 [[WPF]] | [[Silverlight]] | [[.Net]] | [[Universal Windows Platform]] |
 {{amazon|4798114200}}
 ==コンテンツモデル==
-*WPFでは、ほとんどのコントロールを3つのカテゴリに分類
+*WPFでは、ほとんどのコントロールを3つの[[カテゴリ]]に分類
 {|class="wikitable"
-!カテゴリ
+![[カテゴリ]]
 !内容
 !例
@@ 21行目: / 21行目: @@
 |レンダコントロール
 |画面にピクセルを表示する
-|Rectangle、Ellipse
+|[[R]]ectangle、Ellipse
 |-
 |}
@@ 42行目: / 42行目: @@
   panel.Children.Add(elementPresenter);
 [[File:1445_wpf_content_presenter.jpg]]
-====ContentPresenterがコンテンツを変換して表示するロジック====
+====ContentPresenterがコンテンツを変換して表示する[[ロジック]]====
-#ContentがUIElement型の場合は、表示ツリーに追加
+#ContentがU[[IE]]lement型の場合は、表示ツリーに追加
-#ContentTemplateが設定されている場合、それを使用してUIElementインスタンスを生成し表示ツリーに追加
+#ContentTemplateが設定されている場合、それを使用してU[[IE]]lementインスタンスを生成し表示ツリーに追加
-#ContentTemplateSelectorが設定されている場合、それを使用してテンプレートを検索し、そのテンプレートを使用してUIElementインスタンスを生成し表示ツリーに追加
+#ContentTemplateSelectorが設定されている場合、それを使用してテンプレートを検索し、そのテンプレートを使用してU[[IE]]lementインスタンスを生成し表示ツリーに追加
-#Contentのデータ型にデータテンプレートが関連づけられている場合、それを使用してUIElementインスタンスを作成
+#Contentのデータ型にデータテンプレートが関連づけられている場合、それを使用してU[[IE]]lementインスタンスを作成
-#Contentのデータ型にUIElement型に変換可能なTypeConverterインスタンスが関連づけられている場合、Contentを変換し表示ツリーに追加
+#Contentのデータ型にU[[IE]]lement型に変換可能なTypeConverterインスタンスが関連づけられている場合、Contentを変換し表示ツリーに追加
 #Contentのデータ型に文字列変換可能なTypeConverterインスタンスが関連づけられている場合、ContentをTextBlockで包含し表示ツリーに追加
 #最後にContentのToStringを呼び出し、TextBlockで包含し表示ツリーに追加
@@ 59行目: / 59行目: @@
 [[File:1446_wpf_imtes.jpg]]
 ===ChildrenおよびChild===
-*UIElementの子のみをサポート
+*U[[IE]]lementの子のみをサポート
 ==テンプレート==
-*WPFコントロールは、プロパティを使用することによる視覚表示の大幅な制御を可能にする
+*[[WPF]]コントロールは、プロパティを使用することによる視覚表示の大幅な制御を可能にする
 *任意のコントロールの外観を完全にカスタマイズすることも可能。
 *カスタマイズの範疇全体を宣言型にし一貫したプログラミングモデルを提供する、テンプレートシステム
@@ 72行目: / 72行目: @@
       &lt;Button.Template&gt;
           &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
-              &lt;Rectangle Fill="Red" Width="75" Height="23"/&gt;
+              &lt;[[R]]ectangle Fill="[[R]]ed" Width="75" Height="23"/&gt;
           &lt;/ControlTemplate&gt;
       &lt;/Button.Template&gt;
@@ 80行目: / 80行目: @@
 ===クリックでテンプレートを変更してみる===
-  private void Button_Click(object sender, RoutedEventArgs e)
+  private void Button_Click(object sender, [[R]]outedEventArgs e)
+  {
       var template = new ControlTemplate(typeof(Button));
@@ 102行目: / 102行目: @@
 *コンテンツプレゼンタは規定ではテンプレートが適用されるコントロールのContentプロパティの値を表示する
   &lt;StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" &gt;
-      &lt;StackPanel.Resources&gt;
+      &lt;StackPanel.[[R]]esources&gt;
           &lt;ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"&gt;
-              &lt;Border CornerRadius="6" BorderThickness="4"&gt;
+              &lt;Border Corner[[R]]adius="6" BorderThickness="4"&gt;
                   &lt;Border.BorderBrush&gt;
                       &lt;LinearGradientBrush EndPoint="0,1"&gt;
@@ 126行目: / 126行目: @@
               &lt;/Border&gt;
           &lt;/ControlTemplate&gt;
-      &lt;/StackPanel.Resources&gt;
+      &lt;/StackPanel.[[R]]esources&gt;
-      &lt;Button Template="{StaticResource ButtonTemplate}" Padding="10" Margin="10"&gt;
+      &lt;Button Template="{Static[[R]]esource ButtonTemplate}" Padding="10" Margin="10"&gt;
           My Button
       &lt;/Button&gt;
@@ 138行目: / 138行目: @@
 &lt;blockquote&gt;以下の例は、BorderのBorderThicknessプロパティ、BorderBrushプロパティ、およびBackgroundプロパティをテンプレートが適用されるButtonの同じプロパティにバインドします。Buttonのプロパティを設定するだけで、下図のようなボタンを作成出来ます。&lt;/blockquote&gt;
   &lt;StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" &gt;
-      &lt;StackPanel.Resources&gt;
+      &lt;StackPanel.[[R]]esources&gt;
           &lt;ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"&gt;
-              &lt;Border CornerRadius="6"
+              &lt;Border Corner[[R]]adius="6"
                       BorderThickness="{TemplateBinding Property=BorderThickness}"
                       BorderBrush="{TemplateBinding Property=BorderBrush}"
@@ 149行目: / 149行目: @@
               &lt;/Border&gt;
           &lt;/ControlTemplate&gt;
-      &lt;/StackPanel.Resources&gt;
+      &lt;/StackPanel.[[R]]esources&gt;
-      &lt;Button Template="{StaticResource ButtonTemplate}"
+      &lt;Button Template="{Static[[R]]esource ButtonTemplate}"
               Padding="10"
               Margin="10"

@@ 1行目: / 1行目: @@
 ==WPF コントロール==
-[WPF][Silverlight][.Net][Universal Windows Platform]
+[[WPF][Silverlight][.Net][Universal Windows Platform]]
 {{amazon|4798114200}}
@@ 69行目: / 69行目: @@
 *コンテンツコントロールはControlから派生し、Templateという共通プロパティを継承
 *コンテンツに影響を与えずに、外観を変更したい場合新しいテンプレートを定義出来る
-  <Button>
+  &lt;Button&gt;
-      <Button.Template>
+      &lt;Button.Template&gt;
-          <ControlTemplate TargetType="{x:Type Button}">
+          &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
-              <Rectangle Fill="Red" Width="75" Height="23"/>
+              &lt;Rectangle Fill="Red" Width="75" Height="23"/&gt;
-          </ControlTemplate>
+          &lt;/ControlTemplate&gt;
-      </Button.Template>
+      &lt;/Button.Template&gt;
       MyButton
-  </Button>
+  &lt;/Button&gt;
 [[File:1447_wpf_template.jpg]]
@@ 101行目: / 101行目: @@
 *コンテンツプレゼンタを含めることでボタンらしい外観のボタンを作成できる
 *コンテンツプレゼンタは規定ではテンプレートが適用されるコントロールのContentプロパティの値を表示する
-  <StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" >
+  &lt;StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" &gt;
-      <StackPanel.Resources>
+      &lt;StackPanel.Resources&gt;
-          <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
+          &lt;ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"&gt;
-              <Border CornerRadius="6" BorderThickness="4">
+              &lt;Border CornerRadius="6" BorderThickness="4"&gt;
-                  <Border.BorderBrush>
+                  &lt;Border.BorderBrush&gt;
-                      <LinearGradientBrush EndPoint="0,1">
+                      &lt;LinearGradientBrush EndPoint="0,1"&gt;
-                          <LinearGradientBrush.GradientStops>
+                          &lt;LinearGradientBrush.GradientStops&gt;
-                              <GradientStop Offset="0" Color="White"/>
+                              &lt;GradientStop Offset="0" Color="White"/&gt;
-                              <GradientStop Offset="1" Color="Green"/>
+                              &lt;GradientStop Offset="1" Color="Green"/&gt;
-                          </LinearGradientBrush.GradientStops>
+                          &lt;/LinearGradientBrush.GradientStops&gt;
-                      </LinearGradientBrush>
+                      &lt;/LinearGradientBrush&gt;
-                  </Border.BorderBrush>
+                  &lt;/Border.BorderBrush&gt;
-                  <Border.Background>
+                  &lt;Border.Background&gt;
-                      <LinearGradientBrush EndPoint="0,1">
+                      &lt;LinearGradientBrush EndPoint="0,1"&gt;
-                          <LinearGradientBrush.GradientStops>
+                          &lt;LinearGradientBrush.GradientStops&gt;
-                              <GradientStop Offset="0" Color="Green"/>
+                              &lt;GradientStop Offset="0" Color="Green"/&gt;
-                              <GradientStop Offset="1" Color="White"/>
+                              &lt;GradientStop Offset="1" Color="White"/&gt;
-                          </LinearGradientBrush.GradientStops>
+                          &lt;/LinearGradientBrush.GradientStops&gt;
-                      </LinearGradientBrush>
+                      &lt;/LinearGradientBrush&gt;
-                  </Border.Background>
+                  &lt;/Border.Background&gt;
-                  <ContentPresenter
+                  &lt;ContentPresenter
                       HorizontalAlignment="Center"
-                      VerticalAlignment="Center"/>
+                      VerticalAlignment="Center"/&gt;
-              </Border>
+              &lt;/Border&gt;
-          </ControlTemplate>
+          &lt;/ControlTemplate&gt;
-      </StackPanel.Resources>
+      &lt;/StackPanel.Resources&gt;
-      <Button Template="{StaticResource ButtonTemplate}" Padding="10" Margin="10">
+      &lt;Button Template="{StaticResource ButtonTemplate}" Padding="10" Margin="10"&gt;
           My Button
-      </Button>
+      &lt;/Button&gt;
-  </StackPanel>
+  &lt;/StackPanel&gt;
 [[File:1449_wpf_template03.jpg]]
@@ 136行目: / 136行目: @@
 *例えばボタンの色を変更するためだけにテンプレートを定義する必要があるとしたら、シンプルなプログラミングモデルとは言えない。
 *理想的なのはテンプレートにパラメータを追加できるか、テンプレートコントロールのプロパティをお使用して、テンプレートをカスタマイズできること。
-<blockquote>以下の例は、BorderのBorderThicknessプロパティ、BorderBrushプロパティ、およびBackgroundプロパティをテンプレートが適用されるButtonの同じプロパティにバインドします。Buttonのプロパティを設定するだけで、下図のようなボタンを作成出来ます。</blockquote>
+&lt;blockquote&gt;以下の例は、BorderのBorderThicknessプロパティ、BorderBrushプロパティ、およびBackgroundプロパティをテンプレートが適用されるButtonの同じプロパティにバインドします。Buttonのプロパティを設定するだけで、下図のようなボタンを作成出来ます。&lt;/blockquote&gt;
-  <StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" >
+  &lt;StackPanel Name="MainPanel" Initialized="MainPanel_Initialized" &gt;
-      <StackPanel.Resources>
+      &lt;StackPanel.Resources&gt;
-          <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
+          &lt;ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"&gt;
-              <Border CornerRadius="6"
+              &lt;Border CornerRadius="6"
                       BorderThickness="{TemplateBinding Property=BorderThickness}"
                       BorderBrush="{TemplateBinding Property=BorderBrush}"
-                      Background="{TemplateBinding Property=Background}">
+                      Background="{TemplateBinding Property=Background}"&gt;
-                  <ContentPresenter
+                  &lt;ContentPresenter
                       HorizontalAlignment="Center"
-                      VerticalAlignment="Center"/>
+                      VerticalAlignment="Center"/&gt;
-              </Border>
+              &lt;/Border&gt;
-          </ControlTemplate>
+          &lt;/ControlTemplate&gt;
-      </StackPanel.Resources>
+      &lt;/StackPanel.Resources&gt;
-      <Button Template="{StaticResource ButtonTemplate}"
+      &lt;Button Template="{StaticResource ButtonTemplate}"
               Padding="10"
               Margin="10"
               BorderThickness="6"
-              BorderBrush="Blue">
+              BorderBrush="Blue"&gt;
           My Button
-      </Button>
+      &lt;/Button&gt;
-  </StackPanel>
+  &lt;/StackPanel&gt;
 [[File:1450_wpf_template04.jpg]]