WPF (1) WPF の基本的なコントロールとレイアウト

WPF (Windows Presentation Foundation) は、Microsoft によって開始された Windows ベースのユーザー インターフェイス フレームワークであり、中国語では「Windows Presentation Foundation」と訳され、.NET Framework 3.0 の一部です。WPF は WinForm 技術フレームワークに似ていますが、WinForm と比較して、WPF はほとんどの基本機能をより強力に拡張し、開発者とデザイナーのフロントエンドとバックエンドの分離を真に実現する XAML マークアップ言語を導入しています。 MVVM 開発フレームワークのセット。いくつかの参考文献は次のとおりです。

• 「詳細な WPF」 ---- 初心者向けの詳細な入門チュートリアル
• WPF チュートリアル---- WPF クイック スタートと入門
• Microsoft 公式ドキュメント- WPF クラス ライブラリ クエリ エンサイクロペディア
• .NET を使用して新しい WPF アプリケーションを作成する----WPF Microsoft 公式エントリー ケース
• dependencyProperty.cs (microsoft.com) ---- WPF ソース コード ビューア
• WPF コンバーター - Trace g - Blog Garden (cnblogs.com) ---- Big Brother ブログ ノート

1. 基本操作の紹介

1. WPF UI要素の継承関係

2. 基本操作

2.1 テキストブロック

簡単に言えば、TextBlock はテキスト コンテンツを表示するために使用されるテキスト ブロックです。TextBlock には、Text プロパティまたはインライン フロー コンテンツ要素をインライン形式 (HTML 言語と同様) で含めることができます。これらの小さなコントロールのような構造は Inline クラスから継承され、太字 Bold 、斜体 Italicなどのテキストの一部としてインラインでレンダリングできます。、下線下線など）。

- Foreground : 获取或设置要应用到 TextBlock 的文本内容的 Brush（文本颜色刷）。
- Background : 获取或设置要用于填充内容区域背景的 Brush（文本块背景颜色刷）。
- TextTrimming : 获取或设置在内容超出内容区域时要采用的文本剪裁行为(CharacterEllipsis字符边界裁剪、None不裁剪、WordEllipsis单词边界裁剪)。
- TextWrapping : 获取或设置 TextBlock 对文本进行换行的方式(Wrap自动换行、NoWrap不换行)。
- Text : 获取或设置 TextBlock 的文本内容，等效于标签中间放置文字。
- Inlines ： 获取包含顶级 Inline 元素的 InlineCollection，前者构成 TextBlock 的内容。

<!--TextBlock Inlines的XML格式-->
<TextBlock Margin="5" TextWrapping="Wrap" TextAlignment="Center">
     This is a <Bold>TextBlock</Bold>,we are text the <Italic Foreground="Blue">inline elements</Italic>
     <Span TextDecorations="Underline" Background="Silver">Look me,Hahahaha</Span>
</TextBlock>

//TextBlock Inlines的代码格式
TextBlock textBlock1 = new TextBlock();

textBlock1.TextWrapping = TextWrapping.Wrap;
textBlock1.TextAlignment = TextAlignment.Center;

textBlock1.Inlines.Add("This is a");
textBlock1.Inlines.Add(new Blob(new Run("TextBlock")));
textBlock1.Inlines.Add(",we are text the");
textBlock1.Inlines.Add(new Italic(new Run("inline elements")){
    
     Foreground = Brushes.Blue });
...

2.2 ラベル

Label は、TextBlock と同様に、コントロールのテキスト ラベルを表します。ただし、Label は Text プロパティではなく Content プロパティを使用します。これは、テキストだけでなく、あらゆる種類のコントロールを Label 内に配置できるためです。もちろん、コンテンツを文字列にすることもできます。

- 访问键/助记符：用于启用对控件的快速键盘访问，即通过访问键可以快速聚焦到相关的控件上。Label支持助记符绑定。
- Label助记符配置：在应为访问密钥的字符之前添加下划线，然后按住[Alt]键快速定位。 如果内容包含多个下划线字符，则只有第一个字符转换为访问键，其他下划线显示为普通文本。第一个下划线使用两个连续下划线表示普通的下划线文本内容。
- Foreground : 前景色背景
- Content : 设置Label内容，类型为Object
- Target : 获取或设置当用户按下标签的访问键时获得焦点的元素。

<Window x:Class="WpfTutorialSamples.Basic_controls.LabelControlAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LabelControlAdvancedSample" Height="180" Width="250">
    
	<StackPanel Margin="10">
		<Label Target="{Binding ElementName=txtName}">
            <!--Label内部Content包含堆叠对象-->
			<StackPanel Orientation="Horizontal">
				<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_green.png" />
                <!--AccessText控件用下划线来指定用作访问键的字符并呈现-->
				<AccessText Text="__Na_me:" />
			</StackPanel>
		</Label>
		<TextBox Name="txtName" />
		<Label Target="{Binding ElementName=txtMail}">
			<StackPanel Orientation="Horizontal">
				<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_blue.png" />
				<AccessText Text="_Mai_l:" />
			</StackPanel>
		</Label>
		<TextBox Name="txtMail" />
	</StackPanel>
    
</Window>

2.3 テキストボックス

TextBox コントロールは、WPF の最も基本的なテキスト入力コントロールです。エディターのように、書式設定されていないテキストを表示または編集できます。

- AcceptsReturn : 获取或设置一个值，该值指示在用户按 ENTER 键时文本编辑控件如何响应(如果按ENTER键可在当前光标位置处插入新行，则为true；否则将忽略ENTER键)
- TextWrapping : 获取或设置文本框中文本的换行方式
- Text : 获取或设置文本框的文本内容
- SpellCheck : 获取一个 SpellCheck 对象，来设置拼写检查错误
- Language ： 该属性指示拼写检查器使用的语言
- IsReadOnly : 文本框是否只读
- TextBox的选择参数属性:
	- SelectionStart : 获取或设置当前选择的起始位置的字符索引（当前光标位置或是否有选择）
	- SelectionLength : 获取或设置一个值，该值指示文本框中当前选择的字符数(当前选择的长度,否则为0)
	- SelectedText : 获取或设置文本框中当前选择的内容(当前选择的字符串，否则为空)
- SelectionChanged : 订阅SelectionChanged事件，在文本选择改变时发生

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBoxSelectionSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBoxSelectionSample" Height="150" Width="300">
	<DockPanel Margin="10">
		<TextBox SelectionChanged="TextBox_SelectionChanged" DockPanel.Dock="Top" />
		<TextBox Name="txtStatus" AcceptsReturn="True" TextWrapping="Wrap" IsReadOnly="True" />
	</DockPanel>
</Window>

namespace WpfTutorialSamples.Basic_controls
{
    
    
	public partial class TextBoxSelectionSample : Window
	{
    
    
		public TextBoxSelectionSample()
		{
    
    
			InitializeComponent();
		}

		private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
		{
    
    
			TextBox textBox = sender as TextBox;
			txtStatus.Text = "Selection starts at character #" + textBox.SelectionStart + Environment.NewLine;
			txtStatus.Text += "Selection is " + textBox.SelectionLength + " character(s) long" + Environment.NewLine;
			txtStatus.Text += "Selected text: '" + textBox.SelectedText + "'";
		}
	}
}

2.4 ボタン

Button は、Click イベントに応答できる Windows ボタン コントロールを表します。同じプロパティ設定を複数の Button コントロールに適用するには、Style プロパティを使用します。デフォルトの ControlTemplate を変更して、コントロールに独自の外観を与えることもできます。

- Content : 设置Button内容，类型为Object。可以包括字符串或一些复杂类型
- Foreground, Background, FontWeight : 设置Button控件文字的样式
- Padding : 获取或设置控件内部的填充边距
- 事件
	- Click : 在单击 Button 时发生事件
	- ClickMode : 获取或设置 Click 事件何时发生。

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

2.5 リスト収集制御

リスト コレクション コントロールは、一連の項目/データを表示するために使用できるコントロールを表します。WPF のリスト コレクション コントロールは ItemsControl クラスから派生し、ListBox や ComboBox などの ItemsControl ファミリの要素に属します。ここでは、コントロール分析の例として ItemsControl と ListBox を取り上げます。

（1）アイテム管理

ItemsControl は最も単純なデータ リスト プレゼンテーション コントロールであり、他の項目選択を提供せずに、ほぼ単純にリスト データを走査して表示します (ListBox は項目選択を実行できます)。ItemsControl は Control クラスから継承するため、そのリスト コレクション データは基本的にコントロールに含まれるコンテンツの一部にすぎません。ItemsControl は、ItemsControl ファミリの最上位要素であることに加えて、カスタム リスト コントロール (定義テンプレート) としてもよく使用されます。

• ItemsControl ファミリの自動ラッピング

- ItemsControl ファミリの最も特徴的な機能は、アイテム コンテナー (Item Container) を自動的に使用して、そのリスト コレクションの各データ コンテンツをラップすることです。各 ItemsControl タイプには、対応する項目コンテナ タイプがあります。たとえば、ListBox の項目コンテナは ListBoxItem コントロール、ComboBox の項目コンテナは ComboBoxItem コントロールです。

- アイテム コンテナは本質的にコントロール要素であり、そのほとんどは ContentControl クラス (ListBoxItem など) を継承します。これは、任意のタイプの単一のオブジェクト (文字列、画像、パネルなど) を含めることができることも意味します。

- コレクション データをコンテンツとして ItemsControl に送信すると、ItemsControl はこのコレクションを直接使用しませんが、まず対応するアイテム コンテナ コントロールを使用して、コレクション内のデータの各アイテムを 1 つずつパッケージ化し、次にパッケージ化されたアイテム コンテナをパックします。リストは、ItemsControl のコンテンツ全体として表示されます。この利点は、ItemsControl の外観を定義できるだけでなく、データの各項目の外観も簡単に定義できることです。ItemsControl のコレクション データ型はさまざまです。

- ItemsControl内のデータ項目ごとに項目コンテナーを明示的に作成できますが、これは必須ではありません。アイテム コンテナーのアイテム コンテナーが明示的に作成されていない場合、ItemsControl はデータアイテムのコンテンツごとにアイテム コンテナーを自動的にラップするためです。

 <ListBox>
	<ListBoxItem>ListBox Item 1</ListBoxItem>
	<ListBoxItem>ListBox Item 2</ListBoxItem>
	<ListBoxItem>ListBox Item 3</ListBoxItem>
	<ListBoxItem>ListBox Item 4</ListBoxItem>
</ListBox>

<!--              等价于            -->

<ListBox>
	<system:String>ListBox Item 1</system:String>
	<system:String>ListBox Item 2</system:String>
	<system:String>ListBox Item 3</system:String>
	<system:String>ListBox Item 4</system:String>
</ListBox>

• ItemsControl クラスのプロパティ

public class ItemsControl : Control,IContainItemStorage,IAddChild
- 属性：
	- DataContext: 获取或设置元素参与数据绑定时的数据上下文。
	- DisplayMemberPath: 获取或设置源对象上的值的路径，以用作对象的可视表示形式。（只能显示简单的字符串数据）
	- HasItems: 获取一个值，该值指示 ItemsControl 是否包含项。
	- ItemContainerStyle: 获取或设置应用于为每个项生成的容器元素的 Style(设置其Item Container的Style)。
	- Items: 获取用于生成 ItemsControl 的内容的集合。
	- ItemsPanel: 获取或设置模板，该模板定义对项的布局进行控制的面板(默认值是一个纵向排列的指定StackPanel)
	- ItemsSource: 获取或设置用于生成 ItemsControl 的内容的集合(常用于数据绑定，ItemsSource设置属性后，集合Items是只读且固定大小)
	- ItemStringFormat： 获取或设置一个复合/格式化字符串，如果 ItemsControl 中的项显示为字符串，则用于指定如何格式化这些项。（仅用于string数据项）
	- ItemTemplate： 获取或设置用来显示[每个项]的 DataTemplate。
	- Template: 获取或设置控件模板。（整个ItemsControl的样式模板，非数据项）

（2）リストボックス

ListBox コントロールは、ItemsControl の下の Selector から継承します。ListBox では、データ要素のセットをリストに表示するだけでなく、ユーザーがその子要素から [項目を選択] することもできます。

public class ListBox : Selector
- 属性：
	- 继承 ItemsControl 的大部分属性
	- SelectedIndex: 获取或设置当前选择中第一项的索引，如果选择为空，则返回负一(-1)。
	- SelectedItem: 获取或设置当前选择中的第一项(Object)，或者，如果选择为空，则返回 null。
	- SelectedItems: 获取当前选定的所有项集合(IList)。
	- SelectedValue: 获取或设置通过使用 SelectedValuePath 而获取的 SelectedItem 的路径值。当调用SelectedValue时，ListBox先找到选中的Item所对应的数据对象，然后把SelectedValuePath的值当作数据对象的属性名称并把这个属性值取出来。
	- SelectedValuePath: 获取或设置用于从 SelectedItem 中获取 SelectedValue 的路径/属性名(string)。
	- SelectionMode: 获取或设置 ListBox 的选择行为。默认值为 Single 选择。
		- Extended: 用户可以按下 Shift 键来选择多个连续项。
		- Multiple: 用户可以选择多个项而无需按下修改键。
		- Single: 用户一次只能选择一项。
- 事件：
	- SelectionChanged：当 Selector 的选择更改时发生。

namespace WPF_Demo
{
    
    
    public partial class MainWindow : Window
    {
    
    
        public MainWindow()
        {
    
    
            InitializeComponent();

            List<Employee> empList = new List<Employee>()
            {
    
    
                new Employee(){
    
    Id=1,Name="Tim",Age=30},
                new Employee(){
    
    Id=2,Name="Tom",Age=26},
                new Employee(){
    
    Id=3,Name="Kitty",Age=28},
                new Employee(){
    
    Id=4,Name="Lisa",Age=30},
                new Employee(){
    
    Id=5,Name="Krito",Age=36}
            };

            this.listBoxEmplyee.DisplayMemberPath = "Name";
            this.listBoxEmplyee.SelectedValuePath = "Id";
            this.listBoxEmplyee.ItemsSource = empList;
        }

        private void listBoxEmplyee_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
    
    
            ListBox lst = sender as ListBox;
            if (lst != null)
            {
    
    
                int id = (int)lst.SelectedValue;
                int index = lst.SelectedIndex;
                MessageBox.Show("Id=" + id + ",Index=" + index);
            }
        }
    }


    public class Employee
    {
    
    
        public int Id {
    
     get; set; }
        public string Name {
    
     get; set; }
        public int Age {
    
     get; set; }
    }

}

3. WPF の共通コントロールの共通プロパティ

3.1 ツールチッププロンプトオブジェクト

FrameworkElementクラスには、ほぼすべての WPF コントロールが継承するToolTipプロパティがあります。このプロパティは、単純なプロンプト文字列や複雑なプロンプト レイアウトなど、ユーザー インターフェイスのこの要素に表示されるツールチップオブジェクト(UI、オブジェクト) を取得または設定するために使用されます。さらに、ToolTipService クラスと組み合わせると、ツールヒントの時間を延長するShowDurationプロパティなど、ツールヒントに影響を与える一連の興味深い動作を実装できます。

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsAdvancedSample" Height="200" Width="400" UseLayoutRounding="True">
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
        	<!--简单字符串提示-->
            <Button ToolTip="Create a new file">
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
                </Button.Content>
            </Button>
            <Button>
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
                </Button.Content>
                <!--复杂提示对象，布局Panel-->
                <Button.ToolTip>
                    <StackPanel>
                        <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
                        <TextBlock>
                        Search your computer or local network
                        <LineBreak />
                        for a file and open it for editing.
                        </TextBlock>
                        <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
                        <WrapPanel>
                            <Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
                            <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
                        </WrapPanel>
                    </StackPanel>
                </Button.ToolTip>
            </Button>
        </ToolBar>

        <TextBox>
            Editor area...
        </TextBox>
    </DockPanel>
</Window>

3.2 テキストのレンダリング

Microsoft は、.NET Framework 4.0 の WPF テキスト レンダリング エンジンに対して多くの最適化を行い、TextOptionsクラスと関連プロパティを導入しました。

- TextOptions.TextFormattingMode : 选择用 Ideal（默认值）或 Display（更清晰）
- TextOptions.TextRenderingMode : 控制显示文本所用的抗锯齿算法

<Label TextOptions.TextFormattingMode="Display" FontSize="9">TextFormattingMode.Ideal, small text</Label>
<Label TextOptions.TextRenderingMode="Auto" FontSize="9">TextRenderingMode.Auto, small text</Label>

2. リソースとコンバーター

1.WPFリソース

1.1 リソースの定義

リソースは、アプリケーション内のさまざまな場所で再利用できるオブジェクト データのコレクションです。すべてのデータ、コントロール、文字列などをリソースとして保存できるため、データを 1 か所に保存してどこでも使用できるため、非常に実用的です。WPF のインターフェイス要素はすべて ResourceDictionary 型の Resources 属性を持ち、データ リソースを「キーと値」のペアの形式で格納できます。リソース ディクショナリ内の各リソースには一意のキーが必要です。マークアップでリソースを定義するときに、x:Key ディレクティブを介して一意のキーを割り当てることができます。通常、このキーは文字列です。

(1) コントロールのスコープ:コントロールによって定義されたリソース ディクショナリは、現在のコントロール <StackPanel.Resources>…</StackPanel.Resources> 内でのみ使用できます。

(2) ウィンドウ/ページのスコープ: <Window.Resources> ...</Window.Resources> は現在のウィンドウ/ページでのみ使用できます

(3) グローバル アプリケーション:グローバルに利用可能な <Application.Resources>…</Application.Resources>

1.2 リソースの使用量

WPF は、指定されたリソースを現在の領域制御項目 (制御範囲) からウィンドウ、App.xaml まで UI ツリーに沿って下から上に自動的に検索し、見つかった時点で停止しますが、下方向への検索は行いません。リソースとリソース ディクショナリでは、要素のスタイルを定義できるだけでなく、リソース テンプレート、ストーリーボード、トリガーなども定義できます。これにより、多くの同じコントロールのスタイルを定義するときに、コードの冗長性と同じスタイルの繰り返し定義が容易になります。

• 静的リソース: コンパイル時に検索します。 StaticResource マークアップ拡張機能を使用して参照を作成します (マークアップ拡張機能を使用して属性文字列を処理し、オブジェクトを XAML ローダーに返し、それによってオブジェクト参照/バインディング参照オブジェクトを指定します)。静的リソース参照は、プログラム 実行時に 1 回ロードされます。

• 動的リソース: 実行時に検索し、DynamicResource マークアップ拡張機能を使用して参照を作成します。最初のコンパイル中に一時的な式を作成します。これにより、オブジェクトを構築するために要求されたリソース値が実際に必要になるまで、リソースの検索が延期されます。このリソースの検索は実行時検索と同様に動作するため、パフォーマンスに影響します。アプリケーションでは可能な限り静的リソースを使用し、必要な場合にのみ動的リソースを使用します。

(1) XAML 宣言:<子元素 (对应)属性名=”{StaticResource 资源标记名}” /> XAML<子元素 (对应)属性名=”{DynamicResource 资源标记名}” />は自動的にデータ型を照合します。強制的に変換する必要はありません。型が一致しない場合は例外がスローされます。

(2) コードリファレンス:

• string text = (string)this.FindResource("str");リソース ディクショナリの値は Object であるため、強制的に変換する必要があります。FindResource メソッドは、UI ツリーの下から上に向かって検索します。

• string text1 = (string)this.Resources["str"]; リソース ディクショナリの値は Object であるため、強制的に変換する必要があります。Resources メソッドは、このコントロールのリソース ディクショナリのみを検索します。

1.3 リソースのマージ

(1) リソースディクショナリの定義

上記のコントロール/ウィンドウ内でローカル リソース ディクショナリを定義することに加えて、異なるアプリケーション/異なるプロジェクト間で使用するためにリソース ディクショナリを個別に定義することもできます。ResourceDictionary クラスは、WPF アプリケーションのコンポーネントおよびその他の要素によって使用される WPF リソースを含むハッシュテーブル/ディクショナリ実装 (キーと値のペアのマップ) を提供します。VS2019では、リソースdictionary.xamlファイルを追加するための作成項目が用意されています。リソース ディクショナリはリソースと同じ方法で記述され、ファイル内でリソースを直接定義するだけです。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPF_Demo">

    <Style TargetType="TextBox">
        <Setter Property="FontFamily" Value="楷体"></Setter>
        <Setter Property="FontSize" Value="50"></Setter>
        <Setter Property="Foreground" Value="Red"></Setter>
    </Style>
</ResourceDictionary>

(2) リソースのマージ

新しく定義された独立したリソース ディクショナリは、WPF でまだ認識できないため、直接使用できません。ディクショナリをマージして、対応するコントロール/ウィンドウ/APP 範囲に追加する必要があります。使用されるマージ プロパティは MergedDictionariesです。MergedDictionaries は、ResourceDictionary コレクション型である ResourceDictionary クラスのプロパティです。

通常、MergedDictionariesコレクション内の各ResourceDictionaryはSourceプロパティを指定します。Sourceの値は、マージされるリソース ファイルの場所に解決される URI (Uniform Resource Identifier) である必要があります。この URI のターゲットは、ルート要素としてResourceDictionaryを持つ別の XAML ファイルである必要があります。

• 単一プロジェクトにマージする

<ResourceDictionary>
     <ResourceDictionary.MergedDictionaries>
       　　<!--<ResourceDictionary Source="资源字典路径"/>-->
           <ResourceDictionary Source="/Dictionarys/ColorDictionary.xaml"/>
           <ResourceDictionary Source="..."/>
     </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

• 複数のプロジェクトをマージする

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
       <!--<ResourceDictionary Source="/项目名;component/资源字典路径"/>-->
       <ResourceDictionary Source="/CommonModel;component/Dictionarys/PathDictionary.xaml"/>
       <ResourceDictionary Source="..."/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

2. 型コンバータ

参考文献:

• IValueConverter を使用した値の変換 - 完全な WPF チュートリアル (wpf-tutorial.com)
• 方法: バインドされたデータを変換する - WPF .NET Framework | Microsoft Docs

2.1 コンバータの概念

値コンバーターは、さまざまなタイプ間でデータをカスタム変換し、バインドされた UI に表示するために、データ バインディングと組み合わせて使用​​されることがよくあります。WPF データ コンバーターは、IValueConverter インターフェイスまたは IMultiValueConverter インターフェイス (マルチウェイ バインディング) を実装する必要があります。実装する必要があるメソッドは 2 つだけです。Convert() と ConvertBack() は、値をターゲット形式に変換し、再度元の形式に変換するために使用されます。

namespace System.Windows.Data
{
    
    
    public interface IValueConverter
    {
    
    
        // 摘要: 数据绑定引擎在将值从绑定源传播到绑定目标时会调用此方法，即源属性传给目标属性时
        // 参数:
        //   value: 绑定源生成的值。
        //   targetType: 绑定目标属性的类型。
        //   parameter: 要使用的转换器参数。
        //   culture: 要用在转换器中的区域化/国际化信息。
        // 返回结果:
        //     转换后的值。 如果该方法返回 null，则使用有效的 null 值。
        object Convert(object value, Type targetType, object parameter, CultureInfo culture);

        // 摘要: 数据绑定引擎在将值从绑定目标传播到绑定源时调用此方法，此方法的实现必须是Convert方法的反向实现。
        // 参数:
        //   value: 绑定源生成的值。
        //   targetType: 绑定目标属性的类型。
        //   parameter: 要使用的转换器参数。
        //   culture: 要用在转换器中的区域化/国际化信息。
        // 返回结果:
        //     转换后的值。 如果该方法返回 null，则使用有效的 null 值。
        object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
    }
}

2.2 コンバータの実装例

背景: 文字列をバインドし、対応する色を自動的に変換して UI に表示します。具体的な実装は次のとおりです。

(1) コンバータの実装

namespace WPF_Demo.Convert
{
    
    
    [ValueConversion(typeof(string), typeof(SolidColorBrush))]
    class DemoConvert : IValueConverter
    {
    
    
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
    
    
            string str = value.ToString().ToLower();
            if (str.Equals("x-red"))
            {
    
    
                return new SolidColorBrush(Color.FromRgb(222, 32,37));
            }else if (str.Equals("x-blue"))
            {
    
    
                return new SolidColorBrush(Color.FromRgb(19, 21, 190));
            }
            return new SolidColorBrush(Color.FromRgb(0, 0, 0));
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
    
    
            throw new NotImplementedException();
        }
    }
}

(2) XAMLインターフェースの利用

• Convert 名前空間を導入します: xmlns:cv="clr-namespace:WPF_Demo.Converts"
• ウィンドウ リソースを追加します: <cv:StringToColorConvert x:Key="bgCV"/>
• バインディング データ変換: Background="{Binding} ElementName=txt,Path=Text,Converter={StaticResource bgCV}}"

<Window x:Class="WPF_Demo.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:WPF_Demo"
        xmlns:cv="clr-namespace:WPF_Demo.Converts"  
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="400">
    <Window.Resources>
        <cv:StringToColorConvert x:Key="bgCV"/>
    </Window.Resources>
    
    <StackPanel Margin="10">
        <TextBox x:Name="txt" Margin="10" Text="x-blue"/>
        <TextBlock Height="50" Margin="10" Background="{Binding ElementName=txt,Path=Text,Converter={StaticResource bgCV}}"/>
    </StackPanel>
</Window>

3. 基本レイアウトの紹介

レイアウト子要素の一般的なレイアウト追加属性:

• verticalAlignment: このプロパティは、この要素を親要素 (パネルまたは項目コントロールなど) に結合するときに適用される垂直方向の配置特性を取得または設定するために使用されます。
• horizo​​ntalAlignment: このプロパティは、この要素を親要素 (Panel または項目コントロールなど) に結合するときに適用される水平方向の配置特性を取得または設定するために使用されます。

1 StackPanel スタック レイアウト

(1) 概念: StackPanel は、子要素を水平または垂直の行に配置するスタック レイアウトです。StackPanel には、Children プロパティにある UIElement オブジェクトのコレクション (子要素のコレクション) が含まれています。

- Orientation : 获取或设置一个值，该值指示子元素的堆叠维度(方向)，其中 Horizontal水平，Vertical垂直
- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- CanVerticallyScroll : 获取或设置一个值，该值指示内容能否垂直滚动。
- CanHorizontallyScroll : 获取或设置一个值，该值指示 StackPanel 能否水平滚动。

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel Orientation="Horizontal">
		<Button VerticalAlignment="Top">Button 1</Button>
		<Button VerticalAlignment="Center">Button 2</Button>
		<Button VerticalAlignment="Bottom">Button 3</Button>
		<Button VerticalAlignment="Bottom">Button 4</Button>
		<Button VerticalAlignment="Center">Button 5</Button>
		<Button VerticalAlignment="Top">Button 6</Button>
	</StackPanel>
</Window>

(2) スクロール: StackPanel は、デフォルトではコンテンツの物理スクロールを提供しません。論理スクロールの代わりに物理スクロールが必要な場合は、StackPanel 要素を ScrollViewer コントロールでラップし、その CanContentScroll プロパティを に設定してくださいfalse。

2 グリッドグリッドレイアウト

(1) 概念: グリッドは、列と行で構成される柔軟なグリッド領域を定義するために使用されるグリッド レイアウトです。Grid には、Children プロパティにある UIElement オブジェクトのコレクション (子要素のコレクション) が含まれています。グリッドの子要素は、マークアップまたはコードに示されている順序で描画されます。, そのため、要素が同じ座標を共有する場合、階層的な表示順序 (Z オーダーとも呼ばれます) を実現できます。

- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- ColumnDefinitions : 获取在 Grid 的实例上定义的 ColumnDefinitionCollection 列的定义信息集合
	- ColumnDefinition : 定义将应用于 Grid 元素的特定于列的属性，每个 ColumnDefinition 都成为表示最终网格布局中的列的占位符。
		- Width : 获取或设置 ColumnDefinition 定义的列的宽度值， GridLength 对象
			- 单位（Star） * : 占用剩余的空间按比例划分，宽度2*是1*的两倍
			- 单位（Auto） Auto : 该大小由内容对象元素的大小属性确定
			- 单位（Pixel） 像素绝对值 : 该值表示为一个绝对的像素值
- RowDefinitions : 获取在 Grid 的实例上定义的 RowDefinitionCollection 行的定义信息集合，
	- RowDefinition : 定义将应用于 Grid 元素的特定于行的属性， 每个 RowDefinition 都成为表示最终网格布局中的行的占位符。
		- Height : 获取或设置 RowDefinition 定义的行的高度值， GridLength 对象
			- 单位（Star） * : 占用剩余的空间按比例划分，宽度2*是1*的两倍
			- 单位（Auto） Auto : 该大小由内容对象元素的大小属性确定
			- 单位（Pixel） 像素绝对值 : 该值表示为一个绝对的像素值
- ShowGridLines : 获取或设置一个值，该值指示网格线在此 Grid 中是否可见

(2) 付属属性 (Attached): 付属属性は、属性が定義されていないクラスに対する特殊な依存属性です。たとえば、グリッド パネルの RowDefinition、ColumnDefinition、Canvas パネルの左右などです。

- Column : 获取或设置一个值，该值表示 Grid 中的子内容所在的列，从0开始下同
- ColumnSpan : 获取或设置一个值，该值指示 Grid 中的子内容所跨越的总列数。默认1
- Row : 获取或设置一个值，该值表示 Grid 中的子内容所在的行
- RowSpan : 获取或设置一个值，该值表示在一个 Grid 中子内容所跨越的总行数。默认1

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpan" Height="110" Width="300">
	<Grid>
		<Grid.ColumnDefinitions>			
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="1*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
		<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>
	</Grid>
</Window>

3 キャンバス キャンバス

Canvas は Controls.Panel から継承し、 Canvas領域に対する相対座標を使用して子要素を明示的に配置できる領域を定義するために使用されます。Canvasの特徴は以下の通りです。

(1) Canvas の Height プロパティと width プロパティのデフォルト値は 0 です。これらの値を設定しない場合、子要素のサイズが自動的に変更されない限り、キャンバスは表示されません。
(2) Canvas 上の子要素は (フォームが変化しても) サイズ変更されることはなく、指定された座標に配置されるだけです。子コンテンツを自動的に調整して位置合わせしたい場合は、 Grid要素を使用するのが最適です。
(3) 子要素の垂直方向および水平方向の配置が機能しません。子要素は、Canvas Left、Top、Right、および Bottom プロパティによって設定された位置にのみ配置されます。
(4) 位置優先: Canvas の Left プロパティが設定されている場合、Right プロパティは無効になります。Canvas の Top プロパティが設定されている場合、Bottom プロパティは効果がありません。

- 属性：
	- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
	- Width： 获取或设置元素的宽度。(继承自 FrameworkElement)
	- Height： 获取或设置元素的建议高度。(继承自 FrameworkElement)
- 附加属性：
	- Bottom：获取或设置一个值，该值表示元素底部与其父 Canvas 底部之间的相对距离。（单位是像素）
	- Left：获取或设置一个值，该值表示元素左侧与其父 Canvas 左侧之间的距离。
	- Right：获取或设置一个值，该值表示元素右侧与其父 Canvas 右侧之间的距离。
	- Top：获取或设置一个值，该值表示元素顶部与其父 Canvas 顶部之间的距离。
	- Panel.ZIndex:获取或设置一个值，该值表示元素在 Z 平面中的显示顺序(上下深度顺序/层叠顺序）
		- ZIndex值越大显示优先级越高，允许负值，ZIndex的最大值为32766，默认值为0)。
		- 相同ZIndex则按照绘制/添加顺序，依次覆盖显示

<!--Canvas实例：XAML版本-->
<Window x:Class="WPF_Demo.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:WPF_Demo"
        xmlns:vm="clr-namespace:WPF_Demo.Status"
        xmlns:cm="clr-namespace:WPF_Demo.Commands"
        mc:Ignorable="d" 
        Title="MainWindow" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro"  Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Panel.ZIndex="1" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Panel.ZIndex="2" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

//Canvas实例：代码版本
namespace WPF_Demo
{
    
    
    public partial class MainWindow : Window
    {
    
    
        public MainWindow()
        {
    
    
            InitializeComponent();
            //1.添加Ellipse对象
            Ellipse ellipse = new Ellipse();
            ellipse.Fill = new SolidColorBrush(Colors.Gainsboro);
            ellipse.Width = 200;
            ellipse.Height = 200;
            //Set Canvas position  
            Canvas.SetLeft(ellipse, 25);
            Canvas.SetTop(ellipse, 25);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(ellipse);

            //2.添加Rectangle对象1
            Rectangle Red_rectangle = new Rectangle();
            Red_rectangle.Fill = new SolidColorBrush(Colors.Red);
            Red_rectangle.Width = 50;
            Red_rectangle.Height = 50;
            //Set Canvas position  
            Canvas.SetLeft(Red_rectangle, 25);
            Canvas.SetTop(Red_rectangle, 25);
            Panel.SetZIndex(Red_rectangle, 1);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(Red_rectangle);
            
            //3.添加Rectangle对象2
            Rectangle Green_rectangle = new Rectangle();
            Green_rectangle.Fill = new SolidColorBrush(Colors.Green);
            Green_rectangle.Width = 50;
            Green_rectangle.Height = 50;
            //Set Canvas position  
            Canvas.SetLeft(Green_rectangle, 50);
            Canvas.SetTop(Green_rectangle, 50);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(Green_rectangle);

            //4.添加Rectangle对象3
            Rectangle Yello_rectangle = new Rectangle();
            Yello_rectangle.Fill = new SolidColorBrush(Colors.Yellow);
            Yello_rectangle.Width = 50;
            Yello_rectangle.Height = 50;
            //Set Canvas position  
            Canvas.SetLeft(Yello_rectangle, 75);
            Canvas.SetTop(Yello_rectangle, 75);
            Panel.SetZIndex(Yello_rectangle, 2);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(Yello_rectangle);
        }
    }

}