XAML-スタイル

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

• スタイルでは、高さ、幅、フォントサイズなどのオブジェクトの既存のプロパティのみを設定できます。

• コントロールのデフォルトの動作のみを指定できます。

• 複数のプロパティを1つのスタイルに追加できます。

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

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

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

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マークアップ拡張機能を介してスタイルプロパティを設定することにより、スタイルが一意のキーで各ボタンに割り当てられます。

上記のコードをコンパイルして実行すると、同じ出力の次のウィンドウが生成されます。

このようにすることの利点はすぐに明らかです。そのスタイルはスコープ内のどこでも再利用できます。変更する必要がある場合は、各要素ではなく、スタイル定義で1回変更するだけです。

どのレベルでスタイルが定義されるかによって、そのスタイルの範囲が即座に制限されます。したがって、スコープ、つまりスタイルを使用できる場所は、定義した場所によって異なります。スタイルは次のレベルで定義できます-

シニア番号	レベルと説明
1	コントロールレベル コントロールレベルでのスタイルの定義は、その特定のコントロールにのみ適用できます。
2	レイアウトレベル 任意のレイアウトレベルでスタイルを定義するには、そのレイアウトとその子要素からのみアクセスできます。
3	ウィンドウレベル ウィンドウレベルでのスタイルの定義には、そのウィンドウのすべての要素からアクセスできます。
4	アプリケーションレベル アプリレベルでスタイルを定義すると、アプリケーション全体でスタイルにアクセスできるようになります。