XAML-スタイル

XAMLフレームワークは、アプリケーションの外観をパーソナライズおよびカスタマイズするためのいくつかの戦略を提供します。スタイルを使用すると、オブジェクトの一部のプロパティを柔軟に設定し、これらの特定の設定を複数のオブジェクトで再利用して一貫した外観にすることができます。

スタイルでは、オブジェクトの既存のプロパティ（高さ、幅、フォントサイズなど）のみを設定できます。
コントロールのデフォルトの動作のみを指定できます。
複数のプロパティを単一のスタイルに追加できます。

スタイルは、一連のコントロールに統一された外観を与えるために使用されます。暗黙的なスタイルは、特定のタイプのすべてのコントロールに外観を適用し、アプリケーションを簡素化するために使用されます。

3つのボタンがあり、それらはすべて同じように見えなければならないことを想像してください-同じ幅と高さ、同じフォントサイズ、同じ前景色。これらのすべてのプロパティをボタン要素自体に設定できますが、次の図に示すように、すべてのボタンにそれでも問題はありません。

XAMLスタイル

しかし、実際のアプリでは、まったく同じように見える必要があるこれらの多くが通常あります。もちろん、ボタンだけでなく、通常はテキストブロック、テキストボックス、コンボボックスなどをアプリ全体で同じように表示する必要があります。確かにこれを達成するためのより良い方法がなければなりません-それは*スタイリング*として知られています。スタイルは、次の図に示すように、プロパティ値のセットを複数の要素に適用する便利な方法と考えることができます。

スタイリング

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	Control Level コントロールレベルでのスタイルの定義は、その特定のコントロールにのみ適用できます。
2	Layout Level レイアウトレベルでスタイルを定義できるのは、そのレイアウトとその子要素のみです。
3	Window Level ウィンドウレベルでスタイルを定義するには、そのウィンドウのすべての要素からアクセスできます。
4	Application Level アプリレベルでスタイルを定義すると、アプリケーション全体でアクセス可能になります。

Xaml-styles

XAML-スタイル