Xaml-quick-guide
XAML-概要
XAMLはExtensible Application Markup Languageの略です。 XMLに基づいたシンプルで宣言型の言語です。
- XAMLでは、階層関係を持つオブジェクトのプロパティの作成、初期化、および設定が非常に簡単です。
- 主にGUIの設計に使用されます。
- Workflow Foundationでワークフローを宣言するなど、他の目的にも使用できます。
XAMLは、WPF（Windows Presentation Foundation）、Silverlight、モバイル開発、Windowsストアアプリなどのさまざまなプラットフォームで使用できます。 異なる.NetフレームワークおよびCLR（共通言語ランタイム）バージョンで使用できます。
XAMLの仕組み
XAMLは、実行したい WHAT および HOW を定義するという意味で、宣言*言語です。 XAMLプロセッサは、 *HOW 部分を見つける責任があります。 次のスキーマを見てみましょう。 それは物事のXAML側を要約します-
図は、次のアクションを示しています-
- XAMLファイルは、プラットフォーム固有のXAMLプロセッサによって解釈されます。
- XAMLプロセッサは、XAMLをUI要素を記述する内部コードに変換します。
- 内部コードとC＃コードは部分クラス定義を介してリンクされ、.NETコンパイラーがアプリをビルドします。
XAMLの利点
私たち全員がGUIデザインで直面している長年の問題の1つは、XAMLを使用して解決できます。 Windows FormsアプリケーションでUI要素を設計するために使用できます。
以前のGUIフレームワークでは、アプリケーションの外観と動作の間に実際の分離はありませんでした。 GUIとその動作は両方とも同じ言語で作成されました。 C＃またはVB.net。UIとそれに関連する動作の両方を実装するには、開発者のより多くの努力が必要です。
XAMLを使用すると、動作をデザイナーコードから簡単に分離できます。 したがって、XAMLプログラマーとデザイナーは並行して作業できます。 XAMLコードは非常に読みやすく、理解しやすいです。
XAML-環境設定
Microsoftは、XAMLに2つの重要なツールを提供しています-
- ビジュアルスタジオ
- 発現ブレンド
現在、両方のツールでXAMLを作成できますが、事実、Visual Studioは開発者により多く使用され、Expression Blendは依然としてデザイナーにより多く使用されています。
Microsoftは、https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspxからダウンロードできるVisual Studioの無料バージョンを提供しています
注-このチュートリアルでは、主にWPFプロジェクトとWindowsストアアプリを使用します。 ただし、Visual Studioの無料版はWindowsストアアプリをサポートしていません。 そのためには、Visual Studioのライセンスバージョンが必要になります。
インストール
以下の手順に従って、システムにVisual Studioをインストールします-
- ファイルをダウンロードした後、インストーラーを実行します。 次のダイアログボックスが表示されます。
- [インストール]ボタンをクリックすると、インストールプロセスが開始されます。
- インストールプロセスが正常に完了すると、次の画面が表示されます。
- このダイアログボックスを閉じて、必要に応じてコンピューターを再起動します。
- [スタート]メニューからVisual Studioを開き、次のダイアログボックスを表示します。 準備のためだけに、初めて時間がかかります。
Visual Studioの[スタートメニュー]
すべてが完了すると、Visual Studioのメインウィンドウが表示されます。
実装に向けた最初のステップ
簡単な実装から始めましょう。 以下の手順に従ってください-
- [ファイル]→[新規]→[プロジェクト]メニューオプションをクリックします。
- 次のダイアログボックスが表示されます-
- [テンプレート]で、[Visual C＃]を選択し、[WPFアプリケーション]を選択します。 プロジェクトに名前を付けて、[OK]ボタンをクリックします。
- mainwindow.xamlファイルでは、デフォルトで次のXAMLタグが書き込まれます。 これらのタグはすべて、このチュートリアルの後半で理解します。
<Window x:Class = "FirstStepDemo.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:FirstStepDemo"
mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
<Grid>
</Grid>
</Window>デフォルトでは、グリッドはページの後の最初の要素として設定されます。
Grid要素の下にボタンとテキストブロックを追加しましょう。 これは object element syntax と呼ばれ、左山括弧の後にインスタンス化する名前（たとえばボタン）が続き、コンテンツプロパティを定義します。 コンテンツに割り当てられた文字列がボタンに表示されます。 次に、ボタンの高さと幅をそれぞれ30と50に設定します。 同様に、Textブロックのプロパティを初期化します。
次に、設計ウィンドウを見てください。 ボタンが表示されます。 次に、F5キーを押してこのXAMLコードを実行します。
<Window x:Class = "FirstStepDemo.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:FirstStepDemo"
mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
<Grid>
<Button Content = "First Button" Height = "30" Width = "80"/>
<TextBlock Text = "Congratulations you have successfully build your first app"
Height = "30" Margin = "162,180,122,109"/>
</Grid>
</Window>上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。
おめでとうございます！ 最初のボタンを設計しました。
MAC OSでのXAMLアプリケーションの作成
XAMLアプリケーションはMacでも開発できます。 Macでは、XAMLはiOSおよびAndroidアプリケーションとして使用できます。 Macで環境をセットアップするには、https://www.xamarin.com [www.xamarin.com]にアクセスします。 [製品]をクリックし、Xamarinプラットフォームを選択します。 Xamarin Studioをダウンロードしてインストールします。 これにより、さまざまなプラットフォーム用のアプリケーションを開発できます。
XAML – C＃構文
この章では、XAMLアプリケーションを作成するための基本的なXAML構文/ルールを学習します。 簡単なXAMLファイルを見てみましょう。
<Window x:Class = "Resources.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "525">
<Grid>
</Grid>
</Window>上記のXAMLファイルでわかるように、さまざまな種類のタグと要素があります。 次の表は、すべての要素を簡単に説明しています。
| Sr.No | Elements & Description |
|---|---|
| 1 |
<Window ルートの開始オブジェクト要素またはコンテナです。 |
| 2 |
x:Class="Resources.MainWindow" マークアップを、その中で定義された部分クラスコードビハインドに接続するのは、部分クラス宣言です。 |
| 3 |
xmlns WPFクライアント/フレームワークのデフォルトのXAML名前空間をマップします |
| 4 |
xmlns:x x：プレフィックスにマップするXAML言語のXAML名前空間 |
| 5 |
> ルートのオブジェクト要素の終わり。 |
| 6 |
<Grid>
空のグリッドオブジェクトの開始タグと終了タグ。 |
| 7 |
</Window> オブジェクト要素を閉じる |
オブジェクト要素の構文規則
XAMLの構文規則は、XMLとほぼ同様です。 XAMLドキュメントを見ると、実際には有効なXMLファイルであることがわかります。 ただし、XMLファイルを有効なXAMLファイルにすることはできません。 これは、XMLでは属性の値が文字列である必要がありますが、XAMLでは、プロパティ要素構文として知られる別のオブジェクトである可能性があるためです。
- Object要素の構文は、左山括弧（<）で始まり、その後にオブジェクトの名前が続きます。 ボタン。
- そのオブジェクト要素のいくつかのプロパティと属性を定義します。
- Object要素は、スラッシュ（/）に続いてすぐに右山括弧（>）が続く必要があります。
子要素のない単純なオブジェクトの例-
<Button/>いくつかの属性を持つオブジェクト要素の例-
<Button Content = "Click Me" Height = "30" Width = "60"/>プロパティを定義する代替構文の例（プロパティ要素の構文）-
<Button>
<Button.Content>Click Me</Button.Content>
<Button.Height>30</Button.Height>
<Button.Width>60</Button.Width>
</Button>子要素を持つオブジェクトの例-StackPanelには子要素としてTextblockが含まれます
<StackPanel Orientation = "Horizontal">
<TextBlock Text = "Hello"/>
</StackPanel>XAML Vs C＃コード
XAMLを使用して、オブジェクトのプロパティを作成、初期化、および設定できます。 プログラミングコードを使用して同じアクティビティを実行することもできます。
XAMLは、UI要素を設計するためのもう1つのシンプルで簡単な方法です。 XAMLでは、XAMLでオブジェクトを宣言するか、コードを使用してオブジェクトを宣言するかを決定するのはユーザー次第です。
XAMLでの記述方法を示す簡単な例を見てみましょう-
<Window x:Class = "XAMLVsCode.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "525">
<StackPanel>
<TextBlock Text = "Welcome to XAML Tutorial" Height = "20" Width = "200" Margin = "5"/>
<Button Content = "Ok" Height = "20" Width = "60" Margin = "5"/>
</StackPanel>
</Window>この例では、ボタンとテキストブロックを含むスタックパネルを作成し、ボタンとテキストブロックのプロパティ（高さ、幅、マージンなど）を定義しました。 上記のコードをコンパイルして実行すると、次の出力が生成されます-
次に、C＃で記述された同じコードを見てください。
using System;
using System.Text;
using System.Windows;
using System.Windows.Controls;
namespace XAMLVsCode {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
//Create the StackPanel
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;
//Create the TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Text = "Welcome to XAML Tutorial";
textBlock.Height = 20;
textBlock.Width = 200;
textBlock.Margin = new Thickness(5);
stackPanel.Children.Add(textBlock);
//Create the Button
Button button = new Button();
button.Content = "OK";
button.Height = 20;
button.Width = 50;
button.Margin = new Thickness(20);
stackPanel.Children.Add(button);
}
}
}上記のコードをコンパイルして実行すると、次の出力が生成されます。 XAMLコードの出力とまったく同じであることに注意してください。
これで、XAMLの使用と理解がどれほど簡単であるかがわかります。
XAMLVs。 VB.NET
この章では、VB.Netに精通している人もXAMLの利点を理解できるように、VB.Netで同じ例を作成します。
XAMLで書かれた同じ例をもう一度見てみましょう-
<Window x:Class = "XAMLVsCode.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">
<StackPanel>
<TextBlock Text = "Welcome to XAML Tutorial with VB.net" Height = "20" Width = "220" Margin = "5"/>
<Button Content = "Ok" Height = "20" Width = "60" Margin = "5"/>
</StackPanel>
</Window>この例では、ボタンとテキストブロックを含むスタックパネルを作成し、ボタン、および高さ、幅、マージンなどのテキストブロックのプロパティの一部を定義しました。 上記のコードをコンパイルして実行すると、次の出力が生成されます-
今VB.Netで書かれている同じコードを見てください-
Public Class MainWindow
Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
Dim panel As New StackPanel()
panel.Orientation = Orientation.Vertical
Me.Content = panel
Dim txtInput As New TextBlock
txtInput.Text = "Welcome to XAML Tutorial with VB.net"
txtInput.Width = 220
txtInput.Height = 20
txtInput.Margin = New Thickness(5)
panel.Children.Add(txtInput)
Dim btn As New Button()
btn.Content = "Ok"
btn.Width = 60
btn.Height = 20
btn.Margin = New Thickness(5)
panel.Children.Add(btn)
End Sub
End Class上記のコードをコンパイルして実行すると、出力はXAMLコードの出力とまったく同じになります。
VB.Netと比較して、XAMLを使用することがいかに簡単かを視覚化できます。
上記の例では、XAMLで実行できることは、C＃やVB.Netなどの他の手続き言語でも実行できることがわかりました。
XAMLとVB.Netの両方を使用する別の例を見てみましょう。 XAMLでGUIを設計し、VB.Netで動作を実装します。
この例では、ボタンがメインウィンドウに追加されます。 ユーザーがこのボタンをクリックすると、メッセージボックスにメッセージが表示されます。 以下は、ボタンオブジェクトがいくつかのプロパティで宣言されているXAMLのコードです。
<Window x:Class="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">
<Grid>
<Button Name = "btn" HorizontalAlignment = "Center" Width = "60" Height = "30" Content = "Click Me"/>
</Grid>
</Window>VB.Netでは、ボタンクリックイベント（動作）が実装されています。 このイベントは、メッセージボックスにメッセージを表示します。
Public Class MainWindow
Private Sub btn_Click(sender As Object, e As RoutedEventArgs) Handles btn.Click
MessageBox.Show("Button is Clicked")
End Sub
End Class上記のコードをコンパイルして実行すると、次の画面が表示されます-
次に、「Click Me」という上記のボタンをクリックします。 次のメッセージが表示されます-
XAML-ビルディングブロック
この章では、XAMLアプリケーションの基本的かつ重要なビルディングブロックのいくつかについて説明します。 どのように説明します
- オブジェクトを作成および初期化するには、
- オブジェクトは、リソース、スタイル、テンプレートを使用して簡単に変更できます。
- 変換とアニメーションを使用してオブジェクトをインタラクティブにする。
オブジェクト
XAMLは、通常、オブジェクトを作成およびインスタンス化できる宣言型言語です。 XMLに基づいてオブジェクトを記述する別の方法です。つまり、どのオブジェクトを作成する必要があり、プログラムの実行前に初期化する方法です。 オブジェクトは
- コンテナ（スタックパネル、ドックパネル）
- UI要素/コントロール（ボタン、テキストボックスなど）
- リソース辞書
リソース
リソースは通常、複数回使用することが予想されるオブジェクトに関連付けられた定義です。 コントロールまたは現在のウィンドウのデータをローカルに保存する機能、またはアプリケーション全体のデータをグローバルに保存する機能です。
スタイル
XAMLフレームワークは、アプリケーションの外観をパーソナライズおよびカスタマイズするためのいくつかの戦略を提供します。 スタイルを使用すると、オブジェクトの一部のプロパティを柔軟に設定し、これらの特定の設定を複数のオブジェクトで再利用して一貫した外観にすることができます。
- スタイルでは、高さ、幅、フォントサイズなど、オブジェクトの既存のプロパティのみを設定できます。
- コントロールのデフォルトの動作のみを指定できます。
- 複数のプロパティをスタイルに追加できます。
最初の図では、3つのボタンすべてに同じ高さと幅のプロパティが個別に設定されていることがわかります。しかし、2番目の図では、すべてのボタンで同じ高さと幅がスタイルに追加され、このスタイルがすべてのボタンに関連付けられていることがわかります。
画像：/xaml/images/styles.jpg [スタイル]画像：/xaml/images/styles1.jpg [スタイル1]
テンプレート
テンプレートは、コントロールの全体的な外観と外観を記述します。 各コントロールには、そのコントロールに外観を与えるデフォルトのテンプレートが関連付けられています。 XAMLでは、コントロールの視覚的な動作と視覚的な外観をカスタマイズするときに、独自のテンプレートを簡単に作成できます。
次のスクリーンショットには、2つのボタンがあります。1つはテンプレート用で、もう1つはデフォルトボタンです。
マウスをボタンの上に置くと、下に示すように色も変わります。
テンプレートを使用すると、スタイルよりもコントロールの多くの部分にアクセスできます。 コントロールの既存の動作と新しい動作の両方を指定できます。
アニメーションと変換
Windowsランタイム内のアニメーションと変換は、双方向性と動きを構築することにより、XAMLアプリケーションを改善できます。 Windowsランタイムアニメーションライブラリのアニメーションを使用して、XAMLアプリケーションにインタラクティブなルックアンドフィールを簡単に統合できます。 アニメーションが使用されます
- ユーザーインターフェイスを強化したり、より魅力的にしたりします。
- 変化にユーザーの注意を引き付けるため。
次のスクリーンショットでは、正方形を見ることができます-
この正方形の上にマウスを移動すると、下に示すようにすべての方向にマウスが移動します。
XAML-コントロール
XAMLユーザーインターフェイスフレームワークは、WindowsのUI開発をサポートするコントロールの広範なライブラリを提供します。 それらの一部には、Button、Textbox、TextBlockなどの視覚的な表現があります。一方、他のコントロールは、画像などの他のコントロールまたはコンテンツのコンテナとして使用されます。 すべてのXAMLコントロールは System.Windows.Controls.Control から継承されます。
コントロールの完全な継承階層は次のとおりです-
以下に、この章で1つずつ説明するコントロールのリストを示します。
| Sr.No. | Controls & Description |
|---|---|
| 1 |
ユーザー入力に応答するコントロール。 |
| 2 |
ユーザーが視覚的なカレンダー表示を使用して日付を選択できるようにするコントロールを表します。 |
| 3 |
ユーザーが選択またはクリアできるコントロール。 |
| 4 |
ユーザーが選択できるアイテムのドロップダウンリスト。 |
| 5 |
この要素内からユーザーインターフェイス（UI）を介してコンテキストメニューが要求されるたびに表示されるコンテキストメニュー要素を取得または設定します。 |
| 6 |
カスタマイズ可能なグリッドにデータを表示するコントロールを表します。 |
| 7 |
ユーザーが日付を選択できるようにするコントロール。 |
| 8 |
アプリケーションは、重要な情報を収集または表示するために、ユーザーに追加のウィンドウを表示することもあります。 |
| 9 |
水平方向にスクロールできる行と列のアイテムのコレクションを表示するコントロール。 |
| 10 |
画像を表示するコントロール。 |
| 11 |
ユーザーが選択できるアイテムのインラインリストを表示するコントロール。 |
| 12 |
コマンドおよびイベントハンドラーに関連付けられた要素を階層的に整理できるWindowsメニューコントロールを表します。 |
| 13 |
パスワードを入力するためのコントロール。 |
| 14 |
アプリケーションウィンドウの境界内で、既存のコンテンツの上にコンテンツを表示します。 |
| 15 |
バーを表示して進行状況を示すコントロール。 |
| 16 |
リングを表示して不確定な進行状況を示すコントロール。 |
| 17 |
ユーザーがオプションのグループから単一のオプションを選択できるようにするコントロール。 |
| 18 |
フォーマットされたテキスト、ハイパーリンク、画像などのコンテンツを含むリッチテキストドキュメントをユーザーが編集できるようにするコントロール。 |
| 19 |
ユーザーがコンテンツをパンおよびズームできるようにするコンテナーコントロール。 |
| 20 |
ユーザーが検索クエリを入力できるようにするコントロール。 |
| 21 |
Thumbコントロールをトラックに沿って移動することにより、ユーザーが値の範囲から選択できるようにするコントロール。 |
| 22 |
テキストを表示するコントロール。 |
| 23 |
ユーザーが時間値を設定できるコントロール。 |
| 24 |
2つの状態を切り替えることができるボタン。 |
| 25 |
要素の情報を表示するポップアップウィンドウ。 |
| 26 |
最小化/最大化オプション、タイトルバー、境界線、および閉じるボタンを提供するルートウィンドウ。 |
この章では、これらのすべてのコントロールを実装とともに説明します。
XAML-レイアウト
コントロールのレイアウトは、アプリケーションのユーザビリティにとって非常に重要かつ重要です。 アプリケーションでGUI要素のグループを配置する必要があります。 レイアウトパネルを選択する際に考慮すべき重要な点がいくつかあります。
- 子要素の位置。
- 子要素のサイズ。
- 重なり合っている子要素を互いの上に重ねます。
アプリケーションが異なる画面解像度で使用されている場合、コントロールの固定ピクセル配置が機能しません。 XAMLは、GUI要素を適切な方法で配置するための豊富な組み込みレイアウトパネルセットを提供します。 最も一般的に使用され、人気のあるレイアウトパネルのいくつかは次のとおりです-
| Sr.No | Panels & Description |
|---|---|
| 1 |
スタックパネルは、XAMLのシンプルで便利なレイアウトパネルです。 スタックパネルでは、orientationプロパティに基づいて、子要素を水平または垂直に1行に配置できます。 |
| 2 |
WrapPanelでは、子要素は、orientationプロパティに基づいて左から右へ、または上から下へ順番に配置されます。 |
| 3 |
DockPanelは、子要素を互いに対して水平方向または垂直方向に配置する領域を定義します。 DockPanelを使用すると、Dockプロパティを使用して、子要素を上、下、右、左、および中央に簡単にドッキングできます。 |
| 4 |
キャンバスパネルは、左、右、上、下など、キャンバスを基準にした座標を使用して子要素を明示的に配置できる基本レイアウトパネルです。 |
| 5 |
グリッドパネルは、行と列で構成される柔軟な領域を提供します。 グリッドでは、子要素を表形式で配置できます。 |
XAML-イベント処理
XAMLのイベントの一般的な概念は、.NETやC ++などの他の一般的なプログラミング言語のイベントに似ています。 XAMLでは、すべてのコントロールが特定の目的でサブスクライブできるようにいくつかのイベントを公開します。
イベントが発生するたびに、アプリケーションに通知され、プログラムはそれらに反応できます。たとえば、ダイアログを閉じるために閉じるボタンが使用されます。
そのアプリケーションの要件に基づいてアプリケーションのさまざまな動作をサブスクライブできるイベントには多くの種類がありますが、最も一般的に使用されるイベントは、マウスやキーボードに関連するイベントです。
- クリック
- MouseDown
- MouseEnter
- MouseLeave
- MouseUp
- キーダウン
- キーアップ
この章では、特定のコントロールのイベントが、特定のイベントが発生したときにユーザーが何をしたいのかに応じて実装されるコードビハインドにどのようにリンクできるかを理解するために、いくつかの基本的で最も一般的に使用されるイベントを使用します発生します。
ボタンクリックイベントの簡単な例を見てみましょう。 以下に、いくつかのプロパティとClickイベント（Click = "OnClick"）で作成および初期化されるButtonコントロールのXAML実装を示します。
<Window x:Class = "XAMLEventHandling.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">
<Grid>
<Button x:Name = "button1" Content = "Click" Click = "OnClick"
Width = "150" Height = "30" HorizontalAlignment = "Center"/>
</Grid>
</Window>このボタンがクリックされるたびに、 OnClick イベントが発生し、クリックへの応答として任意のタイプの動作を追加できます。 このボタンがクリックされたときにメッセージを表示するOnClickイベントの実装を見てみましょう。
using System;
using System.Windows;
using System.Windows.Controls;
namespace XAMLEventHandling {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
private void OnClick(object sender, RoutedEventArgs e) {
MessageBox.Show("Button is clicked!");
}
}
}上記のコードをコンパイルして実行すると、次の出力が生成されます-
ボタンをクリックすると、クリック（OnClick）イベントが発生し、次のメッセージが表示されます。
次に、複数のイベントが処理される少し複雑な例を見てみましょう。
例
次の例には、テキストボックス内のテキストを操作するContextMenuを持つテキストボックスが含まれています。
次のXAMLコードは、Checked、Unchecked、Clickなどのいくつかのプロパティとイベントを持つTextBox、ContextMenu、およびMenuItemsを作成します。
<Window x:Class = "XAMLContextMenu.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">
<Grid>
<TextBox Name = "textBox1" TextWrapping = "Wrap" Margin = "10" Grid.Row = "7">
Hi, this is XAML tutorial.
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header = "_Bold" IsCheckable = "True"
Checked = "Bold_Checked" Unchecked = "Bold_Unchecked"/>
<MenuItem Header = "_Italic" IsCheckable = "True"
Checked = "Italic_Checked" Unchecked = "Italic_Unchecked"/>
<Separator/>
<MenuItem Header = "Increase Font Size" Click = "IncreaseFont_Click"/>
<MenuItem Header = "_Decrease Font Size" Click = "DecreaseFont_Click"/>
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>以下は、メニュー項目がチェック、チェック解除、またはクリックされるたびに起動されるさまざまなイベントのC＃での実装です。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace XAMLContextMenu {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
private void Bold_Checked(object sender, RoutedEventArgs e) {
textBox1.FontWeight = FontWeights.Bold;
}
private void Bold_Unchecked(object sender, RoutedEventArgs e) {
textBox1.FontWeight = FontWeights.Normal;
}
private void Italic_Checked(object sender, RoutedEventArgs e) {
textBox1.FontStyle = FontStyles.Italic;
}
private void Italic_Unchecked(object sender, RoutedEventArgs e) {
textBox1.FontStyle = FontStyles.Normal;
}
private void IncreaseFont_Click(object sender, RoutedEventArgs e) {
if (textBox1.FontSize < 18) {
textBox1.FontSize += 2;
}
}
private void DecreaseFont_Click(object sender, RoutedEventArgs e) {
if (textBox1.FontSize > 10) {
textBox1.FontSize -= 2;
}
}
}
}上記のコードをコンパイルして実行すると、次の出力が生成されます-
上記のサンプルコードを実行し、他のイベントで実験することをお勧めします。
イベント
以下は、さまざまなコントロールで一般的に使用されるイベントです。
| Sr.No. | Controls & Description |
|---|---|
| 1 |
Checked ToggleButtonがチェックされたときに発生します。 （ToggleButtonから継承） |
| 2 |
Click ボタンコントロールがクリックされたときに発生します。 （ButtonBaseから継承） |
| 3 |
ContextMenuClosing 要素のコンテキストメニューが閉じられる直前に発生します。 （FrameworkElementから継承されます。） |
| 4 |
ContextMenuOpening 要素のコンテキストメニューが開かれたときに発生します。 （FrameworkElementから継承されます。） |
| 5 |
DataContextChanged FrameworkElement.DataContextプロパティの値が変更されたときに発生します。 （FrameworkElementから継承されます） |
| 6 |
DragEnter 入力システムが、この要素をターゲットとして基になるドラッグイベントを報告したときに発生します。 （UIElementから継承されます）。 |
| 7 |
DragLeave 入力システムが、この要素を起点として基本的なドラッグイベントを報告したときに発生します。 （UIElementから継承） |
| 8 |
DragOver 入力システムが潜在的なドロップターゲットとしてこの要素を持つ基本的なドラッグイベントを報告するときに発生します。 （UIElementから継承） |
| 9 |
DragStarting ドラッグ操作が開始されたときに発生します。 （UIElementから継承） |
| 10 |
DropCompleted ドラッグアンドドロップ操作が終了したときに発生します。 （UIElementから継承） |
| 11 |
DropDownClosed ComboBoxのドロップダウン部分が閉じたときに発生します。 |
| 12 |
DropDownOpened ComboBoxのドロップダウン部分が開いたときに発生します。 |
| 13 |
GotFocus UIElementがフォーカスを受け取ったときに発生します。 （UIElementから継承） |
| 14 |
Holding この要素のヒットテスト領域上で未処理のホールド操作が発生すると発生します。 （UIElementから継承） |
| 15 |
Intermediate ToggleButtonの状態が不確定状態に切り替えられたときに発生します。 （ToggleButtonから継承） |
| 16 |
IsEnabledChanged IsEnabledプロパティが変更されたときに発生します。 （Controlから継承） |
| 17 |
KeyDown UIElementにフォーカスがあるときにキーボードキーが押されると発生します。 （UIElementから継承） |
| 18 |
KeyUp UIElementにフォーカスがあるときにキーボードキーが離されると発生します。 （UIElementから継承） |
| 19 |
LostFocus UIElementがフォーカスを失ったときに発生します。 （UIElementから継承） |
| 20 |
ManipulationCompleted UIElementの操作が完了したときに発生します。 （UIElementから継承） |
| 21 |
ManipulationDelta 入力デバイスが操作中に位置を変更すると発生します。 （UIElementから継承） |
| 22 |
ManipulationInertiaStarting 入力デバイスが操作中にUIElementオブジェクトとの接触を失い、慣性が始まると発生します。 （UIElementから継承） |
| 23 |
ManipulationStarted 入力デバイスがUIElementで操作を開始すると発生します。 （UIElementから継承） |
| 24 |
ManipulationStarting 操作プロセッサが最初に作成されたときに発生します。 （UIElementから継承） |
| 25 |
SelectionChanged テキストの選択が変更されたときに発生します。 |
| 26 |
SizeChanged ActualHeightまたはActualWidthプロパティがFrameworkElementの値を変更したときに発生します。 （FrameworkElementから継承されます） |
| 27 |
Unchecked ToggleButtonのチェックが解除されたときに発生します。 （ToggleButtonから継承） |
| 28 |
ValueChanged 範囲の値が変更されたときに発生します。 （RangeBaseから継承） |
XAML-データバインディング
データバインディングは、部分クラスを使用してデータを表示および操作するWindowsランタイムアプリにシンプルで簡単な方法を提供するXAMLアプリケーションのメカニズムです。 データの管理は、このメカニズムでのデータの表示方法から完全に分離されています。
データバインディングにより、ユーザーインターフェイス上のUI要素とデータオブジェクト間のデータフローが可能になります。 バインディングが確立され、データまたはビジネスモデルが変更されると、更新がUI要素に自動的に反映され、その逆も同様です。 標準のデータソースではなく、ページ上の別の要素にバインドすることもできます。 データバインディングには2つのタイプがあります-
- 一方向のデータバインディング
- 双方向のデータバインディング
一方向データバインディング
一方向バインディングでは、データはソース（データを保持するオブジェクト）からターゲット（データを表示するオブジェクト）にバインドされます。
一方向のデータバインディングの簡単な例を見てみましょう。 次のXAMLコードは、いくつかのプロパティを持つ4つのテキストブロックを作成します。
<Window x:Class = "DataBindingOneWay.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">
<Grid>
<StackPanel Name = "Display">
<StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
<TextBlock Text = "Name: " Margin = "10" Width = "100"/>
<TextBlock Margin = "10" Width = "100" Text = "{Binding Name}"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
<TextBlock Text = "Title: " Margin = "10" Width = "100"/>
<TextBlock Margin = "10" Width = "100" Text = "{Binding Title}"/>
</StackPanel>
</StackPanel>
</Grid>
</Window>2つのテキストブロックのテキストプロパティは「名前」と「タイトル」に静的に設定され、他の2つのテキストブロックのテキストプロパティは、以下に示すEmployeeクラスのクラス変数である「名前」と「タイトル」にバインドされます。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DataBindingOneWay {
public class Employee {
public string Name { get; set; }
public string Title { get; set; }
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Ali Ahmed", Title = "Developer"
};
return emp;
}
}
}このクラスには、 Name と Title の2つの変数と、従業員オブジェクトを返すEmployeeオブジェクトが初期化される静的メソッドが1つあります。 したがって、プロパティ、名前、およびタイトルにバインドしていますが、そのプロパティが属するオブジェクトを選択していません。 最も簡単な方法は、次のC＃コードでバインドしているプロパティを持つDataContextにオブジェクトを割り当てることです-
using System;
using System.Windows;
using System.Windows.Controls;
namespace DataBindingOneWay {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
DataContext = Employee.GetEmployee();
}
}
}このアプリケーションを実行してみましょう。MainWindowで、EmployeeオブジェクトのNameとTitleに正常にバインドされていることがすぐにわかります。
双方向のデータバインディング
双方向バインディングでは、ユーザーはユーザーインターフェイスを介してデータを変更し、そのデータをソースで更新できます。 ユーザーがビューを見ているときにソースが変更された場合は、ビューを更新する必要があります。
例
3つのコンボボックスアイテムを持つ1つのコンボボックスといくつかのプロパティを持つ1つのテキストボックスが作成される次の例を見てみましょう。 この例では、標準のデータソースはありませんが、UI要素は他のUI要素にバインドされています。
<Window x:Class = "XAMLTestBinding.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">
<StackPanel>
<ComboBox Name = "comboBox" Margin = "50" Width = "100">
<ComboBoxItem Content = "Green"/>
<ComboBoxItem Content = "Yellow" IsSelected = "True"/>
<ComboBoxItem Content = "Orange"/>
</ComboBox>
<TextBox Name = "textBox" Margin = "50"
Width = "100" Height = "23" VerticalAlignment = "Top"
Text = "{Binding ElementName = comboBox, Path = SelectedItem.Content,
Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}"
Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}">
</TextBox>
</StackPanel>
</Window>上記のコードをコンパイルして実行すると、次の出力が生成されます。 ユーザーがコンボボックスからアイテムを選択すると、それに応じてテキストボックスのテキストと背景色が更新されます。
同様に、ユーザーがテキストボックスに有効な色の名前を入力すると、コンボボックスとテキストボックスの背景色も更新されます。
XAML-マークアップ拡張機能
XAMLアプリケーションでは、マークアップ拡張機能は、特定のXAMLオブジェクトでもプリミティブ型でもない値を取得する方法/手法です。 マークアップ拡張機能は、中かっこを開いて閉じることで定義でき、その中かっこ内にマークアップ拡張機能のスコープが定義されます。
データバインディングと静的リソースはマークアップ拡張機能です。 System.xaml には、使用できる事前定義済みのXAMLマークアップ拡張機能がいくつかあります。
事前定義済みのXAMLマークアップ拡張機能である StaticResources マークアップ拡張機能が使用されている簡単な例を見てみましょう。
次のXAMLコードは、いくつかのプロパティを持つ2つのテキストブロックを作成し、それらの前景は Window.Resources で定義されます。
<Window x:Class = "XAMLStaticResourcesMarkupExtension.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "525">
<Window.Resources>
<SolidColorBrush Color = "Blue" x:Key = "myBrush"></SolidColorBrush>
</Window.Resources>
<Grid>
<StackPanel Orientation = "Vertical">
<TextBlock Foreground = "{StaticResource myBrush}" Text = "First Name"
Width = "100" Margin = "10"/>
<TextBlock Foreground = "{StaticResource myBrush}" Text = "Last Name"
Width = "100" Margin = "10"/>
</StackPanel>
</Grid>
</Window>*Window.Resources* では、XAML定義の辞書で作成および参照される要素を一意に識別し、リソースディクショナリのリソースを識別する *x：Key* が使用されていることがわかります。上記のコードをコンパイルして実行すると、次のMainWindowが生成されます。 青い前景色の2つのテキストブロックを確認できます。
XAMLでは、MarkupExtensionクラスを継承し、MarkupExtensionクラスの抽象メソッドであるProvideValueメソッドをオーバーライドすることにより、カスタムマークアップ拡張機能を定義することもできます。
カスタムマークアップ拡張機能の簡単な例を見てみましょう。
<Window x:Class = "XAMLMarkupExtension.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my = "clr-namespace:XAMLMarkupExtension"
Title = "MainWindow" Height = "350" Width = "525">
<Grid>
<Button Content = "{my:MyMarkupExtension FirstStr = Markup, SecondStr = Extension}"
Width = "200" Height = "20"/>
</Grid>
</Window>上記のXAMLコードでは、いくつかのプロパティでボタンが作成され、コンテンツ値には、カスタムマークアップ拡張機能*（my：MyMarkupExtension）*が使用され、2つの値「Markup」および「Extension」がFirstStrおよびSecondStrに割り当てられますそれぞれ。
実際、 `+ MyMarkupExtension `は、C＃実装で以下に示すように ` MarkupExtension +`から派生したクラスです。 このクラスには、2つの文字列変数FirstStrとSecondStrが含まれています。これらは連結され、その文字列をProvideValueメソッドからボタンのコンテンツに返します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace XAMLMarkupExtension {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
}
public class MyMarkupExtension : MarkupExtension {
public MyMarkupExtension() { }
public String FirstStr { get; set; }
public String SecondStr { get; set; }
public override object ProvideValue(IServiceProvider serviceProvider) {
return FirstStr + " " + SecondStr;
}
}
}このアプリケーションを実行してみましょう。すぐにメインウィンドウで「マークアップ拡張機能」がボタンのコンテンツとして正常に使用されたことを確認できます。
XAML-依存関係プロパティ
依存関係プロパティは、Windowsランタイムアプリの一部でもある鋭いプロパティシステムが値に続く特定のタイプのプロパティです。 依存関係プロパティを定義するクラスは、DependencyObjectクラスから継承する必要があります。
XAMLで使用されるUIコントロールクラスの多くは、DependencyObjectクラスから派生し、依存関係プロパティをサポートしています。 次のXAMLコードは、いくつかのプロパティを持つボタンを作成します。
<Window x:Class = "XAMLDependencyProperty.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "clr-namespace:XAMLDependencyProperty"
Title = "MainWindow" Height = "350" Width = "604">
<Grid>
<Button Height = "40" Width = "175" Margin = "10" Content = "Dependency Property">
<Button.Style>
<Style TargetType = "{x:Type Button}">
<Style.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter Property = "Foreground" Value = "Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Window>XAMLのx：Typeマークアップ拡張機能には、C＃のtypeof（）などの同様の機能があります。 <Style TargetType = "\ {x：Type Button}">などのオブジェクトのタイプをとる属性が指定されている場合に使用されます
上記のコードをコンパイルして実行すると、次のMainWindowが生成されます。 マウスがボタンの上にあるとき、ボタンの前景色を変更します。 マウスがボタンを離れると、元の色に戻ります。
依存関係プロパティと他のCLRプロパティの主な違いは-
- CLRプロパティは、 getter および setter を使用して、クラスのプライベートメンバーから直接読み書きできます。 依存関係プロパティの場合、ローカルオブジェクトには保存されません。
- 依存関係プロパティは、DependencyObjectクラスによって提供されるキー/値ペアの辞書に保存されます。
- また、変更時にプロパティを保存するため、多くのメモリを節約します。
- XAMLでもバインドできます。
- 依存関係プロパティを宣言し、システムコールレジスタで登録します。
- プロパティのセッターとゲッターを提供します。
- グローバルに発生する変更を処理する静的ハンドラーを定義します。
- インスタンスハンドラを定義して、その特定のインスタンスに発生する変更を処理します。
以下に、ユーザーコントロールのSetTextプロパティを設定するように定義された依存関係プロパティのC＃のコードを示します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication3 {
///<summary>
///Interaction logic for UserControl1.xaml
///</summary>
public partial class UserControl1 : UserControl {
public UserControl1() {
InitializeComponent();
}
public static readonly DependencyProperty
SetTextProperty = DependencyProperty.Register("SetText", typeof(string),
typeof(UserControl1), new PropertyMetadata("",
new PropertyChangedCallback(OnSetTextChanged)));
public string SetText {
get {return(string) GetValue(SetTextProperty); }
set {SetValue(SetTextProperty, value);}
}
private static void OnSetTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
UserControl1 UserControl1Control = d as UserControl1;
UserControl1Control.OnSetTextChanged(e);
}
private void OnSetTextChanged(DependencyPropertyChangedEventArgs e) {
tbTest.Text = e.NewValue.ToString();
}
}
}TextBlockがユーザーコントロールとして定義され、SetText依存関係プロパティによってTextプロパティが割り当てられるXAMLファイルを次に示します。
次のXAMLコードは、SetText依存プロパティと他のいくつかのプロパティを初期化するユーザーコントロールを作成します。
<Window x:Class = "WpfApplication3.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views = "clr-namespace:WpfApplication3"
Title = "MainWindow" Height = "350" Width = "604">
<Grid>
<views:UserControl1 SetText = "Hellow World"/>
</Grid>
</Window>このアプリケーションを実行してみましょう。MainWindowで、ユーザーコントロールの依存関係プロパティがテキストとして正常に使用されていることがすぐにわかります。
XAML-リソース
リソースは通常、複数回使用することが予想されるオブジェクトに関連付けられた定義です。 コントロールや現在のウィンドウのデータをローカルに保存したり、アプリケーション全体にグローバルに保存したりできます。
オブジェクトをリソースとして定義すると、別の場所からアクセスできます。 したがって、再利用可能になります。 リソースはリソースディクショナリで定義され、任意のオブジェクトをリソースとして定義して、共有可能なアセットにすることができます。 一意のキーがXAMLリソースに指定され、そのキーを使用して、StaticResourceマークアップ拡張機能を使用して参照できます。
いくつかのプロパティを使用して2つのテキストブロックを作成し、それらの前景色を Window.Resources で定義する簡単な例をもう一度見てみましょう。
<Window x:Class = "XAMLResources.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>
<SolidColorBrush Color = "Blue" x:Key = "myBrush"></SolidColorBrush>
</Window.Resources>
<StackPanel Orientation = "Vertical">
<TextBlock Foreground = "{StaticResource myBrush}"
Text = "First Name" Width = "100" Margin = "10"/>
<TextBlock Foreground = "{StaticResource myBrush}"
Text = "Last Name" Width = "100" Margin = "10"/>
</StackPanel>
</Window>上記のコードをコンパイルして実行すると、次のMainWindowが生成されます。 青い前景色の2つのテキストブロックを見ることができます。 リソースの利点は、複数のテキストブロックがあり、それらの背景色を変更する場合、リソースディクショナリで変更するだけでよいことです。
リソース範囲
リソースはリソースディクショナリで定義されますが、リソースディクショナリを定義できる場所は数多くあります。 上記の例では、リソースディクショナリはウィンドウ/ページレベルで定義されています。 リソースが定義されているディクショナリでは、そのリソースの範囲がすぐに制限されます。 スコープ、つまり リソースを使用できる場所は、定義した場所によって異なります。
- グリッドのリソースディクショナリでリソースを定義すると、そのグリッドとその子要素のみからアクセスできます。
- ウィンドウ/ページで定義すると、そのウィンドウ/ページのすべての要素からアクセスできます。
- AppルートはApp.xamlリソースディクショナリにあります。 これがアプリケーションのルートであるため、ここで定義されるリソースはアプリケーション全体にスコープされます。
リソースの範囲に関する限り、ほとんどの場合、アプリケーションレベル、ページレベル、およびグリッド、StackPanelなどの特定の要素レベルです。
リソース辞書
XAMLアプリのリソースディクショナリは、別のファイルのリソースディクショナリを意味します。 これは、ほぼすべてのXAMLアプリで採用されています。 別のファイルでリソースを定義すると、次の利点があります-
- リソースディクショナリでのリソースの定義とUI関連のコードの分離。
- App.xamlなどの個別のファイルですべてのリソースを定義すると、それらのリソースはアプリ全体で利用可能になります。
では、別のファイルのリソースディクショナリでリソースを定義するにはどうすればよいでしょうか？ まあ、それは非常に簡単です、次の手順でVisual Studioを介して新しいリソース辞書を追加するだけです-
- ソリューションで、新しいフォルダーを追加し、 ResourceDictionaries という名前を付けます。
- このフォルダーを右クリックし、[サブメニュー項目の追加]から[リソースディクショナリ]を選択して、 DictionaryWithBrush.xaml という名前を付けます。
同じアプリケーションを見てみましょう。リソースディクショナリのみがアプリレベルで定義されるようになりました。
MainWindow.xamlのXAMLコードを次に示します。
<Window x:Class = "XAMLResources.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">
<StackPanel Orientation = "Vertical">
<TextBlock Foreground = "{StaticResource myBrush}" Text = "First Name"
Width = "100" Margin = "10"/>
<TextBlock Foreground = "{StaticResource myBrush}" Text = "Last Name"
Width = "100" Margin = "10"/>
</StackPanel>
</Window>これはDictionaryWithBrush.xamlの実装です-
<ResourceDictionary
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush Color = "Blue" x:Key = "myBrush"></SolidColorBrush>
</ResourceDictionary>これはapp.xamlの実装です-
<Application x:Class = "XAMLResources.App"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri = "MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source = " XAMLResources\ResourceDictionaries\DictionaryWithBrush.xaml"/>
</Application.Resources>
</Application>上記のコードをコンパイルして実行すると、次の出力が生成されます-
上記のコードを実行し、背景色などのリソースを試してみることをお勧めします。
XAML-テンプレート
テンプレートは、コントロールの全体的な外観と外観を記述します。 各コントロールには、そのコントロールに外観を与えるデフォルトのテンプレートが関連付けられています。
XAMLでは、コントロールの視覚的な動作と視覚的な外観をカスタマイズするときに、独自のテンプレートを簡単に作成できます。 ロジックとテンプレート間の接続は、データバインディングによって実現できます。
スタイルとテンプレートの主な違いは次のとおりです-
- スタイルは、そのコントロールのデフォルトプロパティを持つコントロールの外観のみを変更できます。
- テンプレートを使用すると、スタイルよりもコントロールの多くの部分にアクセスできます。 コントロールの既存の動作と新しい動作の両方を指定することもできます。
最も一般的に使用されるテンプレートには2つのタイプがあります。
- 制御テンプレート
- データテンプレート
制御テンプレート
コントロールテンプレートは、コントロールの視覚的な外観と構造を定義または指定します。 UI要素はすべて、何らかの外観と動作を持っています。たとえば、Buttonには外観と動作があります。 クリックイベントまたはマウスホバーイベントは、クリックアンドホバーに応答して発生する動作であり、コントロールテンプレートによって変更できるボタンのデフォルトの外観もあります。
いくつかのプロパティを持つ2つのボタンが作成される簡単な例をもう一度見てみましょう。 1つは template を使用し、もう1つは default ボタンを使用します。
<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>上記のコードがコンパイルおよび実行されると、次のMainWindowが生成されます-
あなたがカスタムテンプレートを使用してボタンの上にマウスを置くと、次に示すように色も変わります-
データテンプレート
データテンプレートは、データコレクションの外観と構造を定義および指定します。 任意のUI要素でデータのプレゼンテーションをフォーマットおよび定義する柔軟性を提供します。 主に、ComboBox、ListBoxなどのデータ関連のItemコントロールで使用されます。
データテンプレートの簡単な例を見てみましょう。 次のXAMLコードは、データテンプレートとテキストブロックを含むコンボボックスを作成します。
<Window x:Class = "XAMLDataTemplate.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">
<Grid VerticalAlignment = "Top">
<ComboBox Name = "Presidents" ItemsSource = "{Binding}" Height = "30" Width = "400">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal" Margin = "2">
<TextBlock Text = "Name: " Width = "95" Background = "Aqua" Margin = "2"/>
<TextBlock Text = "{Binding Name}" Width = "95" Background = "AliceBlue" Margin = "2"/>
<TextBlock Text = "Title: " Width = "95" Background = "Aqua" Margin = "10,2,0,2"/>
<TextBlock Text = "{Binding Title}" Width = "95" Background = "AliceBlue" Margin = "2"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
</Window>これは、従業員オブジェクトがDataContextに割り当てられているC＃の実装です-
using System;
using System.Windows;
using System.Windows.Controls;
namespace XAMLDataTemplate {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
DataContext = Employee.GetEmployees();
}
}
}これは、EmployeeクラスのC＃での実装です-
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
namespace XAMLDataTemplate {
public class Employee : INotifyPropertyChanged {
private string name; public string Name {
get { return name; }
set { name = value; RaiseProperChanged(); }
}
private string title; public string Title {
get { return title; }
set { title = value; RaiseProperChanged(); }
}
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Waqas", Title = "Software Engineer" };
return emp;
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaiseProperChanged( [CallerMemberName] string caller = ""){
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(caller));
}
}
public static ObservableCollection<Employee> GetEmployees() {
var employees = new ObservableCollection<Employee>();
employees.Add(new Employee() { Name = "Ali", Title = "Developer" });
employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" });
employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" });
employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" });
employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" });
employees.Add(new Employee() { Name = "Waqar", Title = "Manager" });
return employees;
}
}
}上記のコードをコンパイルして実行すると、次の出力が生成されます。 コンボボックスが含まれており、コンボボックスをクリックすると、Employeeクラスで作成されたデータのコレクションがコンボボックスアイテムとしてリストされていることがわかります。
上記のコードを実行して試してみることをお勧めします。
XAML-スタイル
XAMLフレームワークは、アプリケーションの外観をパーソナライズおよびカスタマイズするためのいくつかの戦略を提供します。 スタイルを使用すると、オブジェクトの一部のプロパティを柔軟に設定し、これらの特定の設定を複数のオブジェクトで再利用して一貫した外観にすることができます。
- スタイルでは、オブジェクトの既存のプロパティ（高さ、幅、フォントサイズなど）のみを設定できます。
- コントロールのデフォルトの動作のみを指定できます。
- 複数のプロパティを単一のスタイルに追加できます。
スタイルは、一連のコントロールに統一された外観を与えるために使用されます。 暗黙的なスタイルは、特定のタイプのすべてのコントロールに外観を適用し、アプリケーションを簡素化するために使用されます。
3つのボタンがあり、それらはすべて同じように見えなければならないことを想像してください-同じ幅と高さ、同じフォントサイズ、同じ前景色。 これらのすべてのプロパティをボタン要素自体に設定できますが、次の図に示すように、すべてのボタンにそれでも問題はありません。
しかし、実際のアプリでは、まったく同じように見える必要があるこれらの多くが通常あります。 もちろん、ボタンだけでなく、通常はテキストブロック、テキストボックス、コンボボックスなどをアプリ全体で同じように表示する必要があります。 確かにこれを達成するためのより良い方法がなければなりません-それは*スタイリング*として知られています。 スタイルは、次の図に示すように、プロパティ値のセットを複数の要素に適用する便利な方法と考えることができます。
XAMLでいくつかのプロパティを使用して作成された3つのボタンを含む例を見てみましょう。
<Window x:Class = "XAMLStyle.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:XAMLStyle" mc:Ignorable = "d"
Title = "MainWindow" Height = "350" Width = "604">
<StackPanel>
<Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue"
FontSize = "12" Margin = "10"/>
<Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue"
FontSize = "12" Margin = "10"/>
<Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue"
FontSize = "12" Margin = "10"/>
</StackPanel>
</Window>上記のコードを見ると、すべてのボタンについて、高さ、幅、前景色、フォントサイズ、およびマージンプロパティが同じままであることがわかります。 上記のコードをコンパイルして実行すると、次の出力が表示されます-
次に同じ例を見てみましょうが、今回は style を使用します。
<Window x:Class = "XAMLStyle.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:XAMLStyle" mc:Ignorable = "d"
Title = "MainWindow" Height = "350" Width = "604">
<Window.Resources>
<Style x:Key = "myButtonStyle" TargetType = "Button">
<Setter Property = "Height" Value = "30"/>
<Setter Property = "Width" Value = "80"/>
<Setter Property = "Foreground" Value = "Blue"/>
<Setter Property = "FontSize" Value = "12"/>
<Setter Property = "Margin" Value = "10"/>
</Style>
</Window.Resources>
<StackPanel>
<Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
<Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
<Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
</StackPanel>
</Window>スタイルはリソースディクショナリで定義され、各スタイルには一意のキー識別子とターゲットタイプがあります。 <style>内では、スタイルに含まれる各プロパティに対して複数のセッタータグが定義されていることがわかります。
上記の例では、各ボタンのすべての共通プロパティがスタイルで定義され、StaticResourceマークアップ拡張を介してスタイルプロパティを設定することにより、スタイルが一意のキーで各ボタンに割り当てられます。
上記のコードをコンパイルして実行すると、同じ出力である次のウィンドウが生成されます。
このようにすることの利点はすぐに明らかになります。 そのスタイルは、スコープ内のどこでも再利用できます。変更する必要がある場合は、各要素ではなくスタイル定義で一度変更するだけです。
スタイルがどのレベルで定義されているかは、そのスタイルの範囲を即座に制限します。 スコープ、つまり スタイルを使用できる場所は、定義した場所によって異なります。 スタイルは、次のレベルで定義することができます-
| Sr.No | Levels & Description |
|---|---|
| 1 |
コントロールレベルでのスタイルの定義は、その特定のコントロールにのみ適用できます。 |
| 2 |
レイアウトレベルでスタイルを定義できるのは、そのレイアウトとその子要素のみです。 |
| 3 |
ウィンドウレベルでスタイルを定義するには、そのウィンドウのすべての要素からアクセスできます。 |
| 4 |
アプリレベルでスタイルを定義すると、アプリケーション全体でアクセス可能になります。 |
XAML-トリガー
基本的に、トリガーを使用すると、プロパティ値を変更したり、プロパティの値に基づいてアクションを実行したりできます。 したがって、新しいコントロールを作成することなく、コントロールの外観や動作を動的に変更できます。
トリガーは、特定の条件が満たされたときに、特定のプロパティの値を変更するために使用されます。 トリガーは通常、特定のコントロールに適用されるスタイルまたはドキュメントのルートで定義されます。 トリガーには3つのタイプがあります-
- プロパティトリガー
- データトリガー
- イベントトリガー
プロパティトリガー
プロパティトリガーでは、あるプロパティで変更が発生すると、別のプロパティで即時またはアニメーションの変更が行われます。 たとえば、マウスがボタン上にあるときにボタンの外観を変更する場合は、プロパティトリガーを使用できます。
例
次の例は、マウスが領域に入ったときにボタンの前景色を変更する方法を示しています。
<Window x:Class = "XAMLPropertyTriggers.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>
<Style x:Key = "TriggerStyle" TargetType = "Button">
<Setter Property = "Foreground" Value = "Blue"/>
<Style.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter Property = "Foreground" Value = "Green"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}"
Content = "Trigger"/>
</Grid>
</Window>上記のコードをコンパイルして実行すると、次の出力が生成されます-
マウスがボタンの領域に入ると、前景色が緑色に変わります。
データトリガー
データトリガーは、バインドされたデータが条件を満たしたときに何らかのアクションを実行します。 チェックボックスとテキストブロックがいくつかのプロパティとともに作成される次のXAMLコードを見てみましょう。 チェックボックスがチェックされると、前景色が赤に変わります。
<Window x:Class = "XAMLDataTrigger.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Data Trigger" Height = "350" Width = "604">
<StackPanel HorizontalAlignment = "Center">
<CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>
<TextBlock Name = "txtblock" VerticalAlignment = "Center"
Text = "Event Trigger" FontSize = "24" Margin = "20">
<TextBlock.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}"
Value = "true">
<Setter Property = "TextBlock.Foreground" Value = "Red"/>
<Setter Property = "TextBlock.Cursor" Value = "Hand"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Window>上記のコードをコンパイルして実行すると、次の出力が生成されます-
チェックボックスをオンにすると、テキストブロックの前景色が赤に変わります。
イベントトリガー
イベントトリガーは、特定のイベントが発生したときに何らかのアクションを実行します。 通常、DoubleAnimation、ColorAnimationなどのアニメーションを実行するために使用されます。 次のコードブロックは、単純なボタンを作成します。 クリックイベントが発生すると、ボタンの幅と高さが拡張されます。
<Window x:Class = "XAMLEventTrigger.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">
<Grid>
<Button Content = "Click Me" Width = "60" Height = "30">
<Button.Triggers>
<EventTrigger RoutedEvent = "Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
<LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
<LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
<LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
<LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
<LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
<LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
<LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
<LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Window>上記のコードをコンパイルして実行すると、次の出力が生成されます-
ここで、ボタンをクリックすると、両方の次元で拡張が開始されることがわかります。
XAML-デバッグ
手続き型言語（C＃、C/C ++など）でのデバッグに精通しており、 break の使用方法を知っていて、XAMLで同じ種類のデバッグを期待している場合は、そのことを知って驚くでしょう他の手続き言語コードをデバッグするために使用した方法のように、XAMLコードをデバッグすることはまだできません。 XAMLアプリのデバッグとは、エラーを見つけようとすることです。
- データバインディングでは、データは画面に表示されず、理由もわかりません
- または、問題は複雑なレイアウトに関連しています。
- または、位置合わせの問題または余白の色、オーバーレイなどの問題 ListBoxやコンボボックスなどの広範なテンプレートを使用します。
XAMLでのデバッグは、通常、バインディングが機能するかどうかを確認し、機能していない場合は何が間違っているかを確認するために行います。 残念ながら、XAMLバインディングにブレークポイントを設定することはSilverlight以外ではできませんが、出力ウィンドウを使用してデータバインディングエラーをチェックすることはできます。 次のXAMLコードを見て、データバインディングのエラーを見つけましょう。
<Window x:Class = "DataBindingOneWay.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">
<Grid>
<StackPanel Name = "Display">
<StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
<TextBlock Text = "Name: " Margin = "10" Width = "100"/>
<TextBlock Margin = "10" Width = "100" Text = "{Binding FirstName}"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
<TextBlock Text = "Title: " Margin = "10" Width = "100"/>
<TextBlock Margin = "10" Width="100" Text = "{Binding Title}"/>
</StackPanel>
</StackPanel>
</Grid>
</Window>2つのテキストブロックのテキストプロパティは「名前」と「タイトル」に静的に設定され、他の2つのテキストブロックのテキストプロパティは「名」と「タイトル」にバインドされます。 しかし、クラス変数は、誤った変数名であるEmployeeクラスのNameおよびTitleとして意図的に使用されます。 目的の出力が表示されない場合に、このタイプの間違いがどこにあるかを理解してみましょう。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DataBindingOneWay {
public class Employee {
public string Name { get; set; }
public string Title { get; set; }
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Ali Ahmed",
Title = "Developer"
};
return emp;
}
}
}C＃コードでのMainWindowクラスの実装は次のとおりです-
using System;
using System.Windows;
using System.Windows.Controls;
namespace DataBindingOneWay {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
DataContext = Employee.GetEmployee();
}
}
}このアプリケーションを実行してみましょう。MainWindowで、EmployeeオブジェクトのTitleに正常にバインドされたが、名前がバインドされていないことがすぐにわかります。
名前で何が起こったのかを確認するために、大量のログが生成される出力ウィンドウを見てみましょう。
エラーを見つける最も簡単な方法は、エラーを検索することです。次の_「BindingExpression path error： 'FirstName'_ property not found on _'object' Employe _
System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName'
property not found on 'object' ''Employee' (HashCode = 11611730)'.
BindingExpression:Path = FirstName;
DataItem = 'Employee' (HashCode = 11611730); target element is 'TextBlock' (Name = '');
target property is 'Text' (type 'String')FirstNameはEmployeeクラスのメンバーではないことを明確に示しているため、アプリケーションでこの種の問題を解決するのに役立ちます。
*FirstName* を *Name* に再度変更すると、目的の出力が表示されます。XAMLのUIデバッグツール
XAMLのUIデバッグツールはVisual Studio 2015で導入され、実行時にXAMLコードを検査します。 これらのツールを使用すると、XAMLコードは実行中のWPFアプリケーションの視覚的なツリーの形式で表示され、ツリー内のさまざまなUI要素のプロパティも表示されます。 このツールを有効にするには、以下の手順に従ってください。
- *ステップ1 *-[ツール]メニューに移動し、[ツール]メニューから[オプション]を選択します。
- *ステップ2 *-次のダイアログボックスが表示されます。
- *ステップ3 *-左側の[デバッグ]項目の下の[全般オプション]に移動します。
- *ステップ4 *-ハイライトされたオプション、つまり「XAMLのUIデバッグツールを有効にする」をチェックします
- *ステップ5 *-[OK]ボタンを押します。
XAMLアプリケーションを実行するか、次のXAMLコードを使用します-
<Window x:Class = "XAMLTestBinding.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">
<StackPanel>
<ComboBox Name = "comboBox" Margin = "50" Width = "100">
<ComboBoxItem Content = "Green"/>
<ComboBoxItem Content = "Yellow" IsSelected = "True"/>
<ComboBoxItem Content = "Orange"/>
</ComboBox>
<TextBox Name = "textBox" Margin = "50" Width = "100"
Height = "23" VerticalAlignment = "Top" Text = "{
Binding ElementName = comboBox, Path = SelectedItem.Content,
Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}"
Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}">
</TextBox>
</StackPanel>
</Window>アプリケーションを実行すると、すべての要素がツリーで表示されるライブビジュアルツリーが表示されます。
このライブビジュアルツリーは、UI要素が配置されている場所を理解するための完全なレイアウト構造を示しています。 ただし、このオプションはVisual Studio 2015でのみ使用可能です。 Visual Studioの古いバージョンを使用している場合、このツールは使用できません。ただし、XAML Spy for Visual Studioなど、Visual Studioと統合できる別のツールがあります。 [[1]] 古いバージョンのVisual Studioを使用している場合は、このツールをダウンロードすることをお勧めします。
XAML-カスタムコントロール
XAMLには、カスタムコントロールを作成するために提供される最も強力な機能の1つがあり、機能豊富でカスタマイズ可能なコントロールを非常に簡単に作成できます。 カスタムコントロールは、Microsoftが提供するすべてのビルトインコントロールが基準を満たしていない場合、またはサードパーティのコントロールの支払いを希望しない場合に使用されます。
この章では、カスタムコントロールを作成する方法を学習します。 カスタムコントロールを確認する前に、まずユーザーコントロールを簡単に確認します。
ユーザー管理
ユーザーコントロールは、さまざまな組み込みコントロールを収集して組み合わせ、再利用可能なXAMLにパッケージ化する手法を提供します。 ユーザーコントロールは、次のシナリオで使用されます-
- コントロールが既存のコントロールで構成されている場合、つまり、複数の既存のコントロールの単一のコントロールを作成できます。
- コントロールがテーマのサポートを必要としない場合。 ユーザーコントロールは、複雑なカスタマイズ、コントロールテンプレートをサポートせず、スタイル設定も困難です。
- 開発者が、イベントハンドラーの背後にビューと直接コードが記述される分離コードモデルを使用してコントロールを記述することを好む場合。
- アプリケーション間でコントロールを共有することはありません。
ユーザーコントロールの例を見て、以下の手順に従ってください-
- *ステップ1 *-新しいWPFプロジェクトを作成し、ソリューションを右クリックして、[追加]> [新しいアイテム…]を選択します。
- ステップ2 *-次のダイアログが開き、*ユーザーコントロール（WPF）*を選択して、 *MyUserControl という名前を付けます。
- *ステップ3 *-[追加]ボタンをクリックすると、2つの新しいファイル（MyUserControl.xamlおよびMyUserControl.cs）がソリューションに追加されます。
以下に示すのは、MyUserControl.xamlファイルのいくつかのプロパティでボタンとテキストボックスが作成されるXAMLコードです。
<UserControl x:Class = "XAMLUserControl.MyUserControl"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">
<Grid>
<TextBox Height = "23" HorizontalAlignment = "Left"
Margin = "80,49,0,0" Name = "txtBox" VerticalAlignment = "Top" Width = "200"/>
<Button Content = "Click Me" Height = "23"
HorizontalAlignment = "Left" Margin = "96,88,0,0" Name = "button"
VerticalAlignment = "Top" Width = "75" Click = "button_Click"/>
</Grid>
</UserControl>以下は、テキストボックスを更新するMyUserControl.csファイルのボタンクリックイベントのC＃コードです。
using System;
using System.Windows;
using System.Windows.Controls;
namespace XAMLUserControl {
///<summary>
///Interaction logic for MyUserControl.xaml
///</summary>
public partial class MyUserControl : UserControl {
public MyUserControl() {
InitializeComponent();
}
private void button_Click(object sender, RoutedEventArgs e) {
txtBox.Text = "You have just clicked the button";
}
}
}次に、ユーザーコントロールを追加するMainWindow.xamlの実装を示します。
<Window x:Class = "XAMLUserControl.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control = "clr-namespace:XAMLUserControl"
Title = "MainWindow" Height = "350" Width = "525">
<Grid>
<control:MyUserControl/>
</Grid>
</Window>上記のコードをコンパイルして実行すると、次の出力が生成されます-
[Click Me]ボタンをクリックすると、テキストボックスのテキストが更新されていることがわかります。
カスタムコントロール
カスタムコントロールは、 generic.xaml で通常定義される独自のスタイルとテンプレートを提供するクラスです。 カスタムコントロールは、次のシナリオで使用されます。
- コントロールが存在せず、ゼロから作成する必要がある場合。
- 特定のシナリオに合わせてプロパティまたは機能を追加して、既存のコントロールに機能を拡張または追加する場合。
- コントロールがテーマとスタイリングをサポートする必要がある場合。
- アプリケーション間で制御を共有したい場合。
カスタムコントロールの例を見て、以下の手順に従ってください。
- *ステップ1 *-新しいWPFプロジェクトを作成し、ソリューションを右クリックして、[追加]> [新しいアイテム…]を選択します。
- ステップ2 *-次のダイアログボックスが開きます。 ここで、 Custom Control（WPF）を選択し、 *MyCustomControl という名前を付けます。
- *ステップ3 *-[追加]ボタンをクリックすると、2つの新しいファイル（Themes/Generic.xamlおよびMyCustomControl.cs）がソリューションに追加されます。
Generic.xamlファイルのカスタムコントロールにスタイルが設定されているXAMLコードを以下に示します。
<ResourceDictionary
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "clr-namespace:XAMLCustomControls">
<Style TargetType = "{x:Type local:MyCustomControl}"
BasedOn = "{StaticResource {x:Type Button}}">
<Setter Property = "Background" Value = "LightSalmon"/>
<Setter Property = "Foreground" Value = "Blue"/>
</Style>
</ResourceDictionary>以下に示すのは、ボタンクラスから継承されるMyCustomControlクラスのC＃コードであり、コンストラクターでメタデータをオーバーライドします。
using System;
using System.Windows;
using System.Windows.Controls;
namespace XAMLCustomControls {
public class MyCustomControl : Button {
static MyCustomControl() {
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl),
new FrameworkPropertyMetadata(typeof(MyCustomControl)));
}
}
}以下は、テキストブロックのテキストを更新するC＃のカスタムコントロールクリックイベントの実装です。
using System;
using System.Windows;
using System.Windows.Controls;
namespace XAMLCustomControls {
///<summary>
///Interaction logic for MainWindow.xaml
///</summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
private void customControl_Click(object sender, RoutedEventArgs e) {
txtBlock.Text = "You have just click your custom control";
}
}
}次に、カスタムコントロールとTextBlockを追加するMainWindow.xamlの実装を示します。
<Window x:Class = "XAMLCustomControls.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control = "clr-namespace:XAMLCustomControls" Title = "MainWindow"
Height = "350" Width = "604">
<StackPanel>
<control:MyCustomControl x:Name = "customControl"
Content = "Click Me" Width = "70" Margin = "10" Click = "customControl_Click"/>
<TextBlock Name = "txtBlock" Width = "250" Height = "30"/>
</StackPanel>
</Window>上記のコードをコンパイルして実行すると、次の出力が生成されます。 出力に、カスタマイズされたボタンであるカスタムコントロールが含まれていることを確認します。
次に、カスタマイズされたボタンをクリックします。 テキストブロックテキストが更新されていることがわかります。
