Emotion Wave Tech Blog

福岡にあるエモーションウェーブ株式会社のエンジニアが書いています。

XamlでStyle適用させる方法

最近xmalコーディングばかりなので、xamlでのスタイルの適用について書きます。

まずは、x:Keyを使用してのスタイルの適用。 x:Keyでスタイルを定義し、StaticResourceでスタイルを適用されます。

<Window.Resources>
      <style>
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="25" />
            <Setter Property="Background" Value="Red" />
      </style>
</Window.Resources>

<StackPanel>
      <button>Button1</button>
      <button>Button2</button>
</StackPanel>

f:id:devew:20190320171507p:plain  

x:Key属性を取るとすべてのButtonにスタイル適用する事もできます。

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="25" />
        <Setter Property="Background" Value="Red" />
    </Style>

</Window.Resources>
<StackPanel>
    <Button>Button1</Button>
    <Button>Button2</Button>
</StackPanel>

f:id:devew:20190320171525p:plain

 

BasedOn属性を使用してスタイルを継承し、追加することもできます。

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="25" />
        <Setter Property="Background" Value="Red" />
    </Style>
    <Style TargetType="Button" x:Key="button_style" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Foreground" Value="White" />
    </Style>
</Window.Resources>
<StackPanel>
    <Button Style="{StaticResource button_style}">Button1</Button>
    <Button>Button2</Button>
</StackPanel>

f:id:devew:20190320171540p:plain

 

x:TypeでTargetTypeを継承しましたが、x:Key定義を継承する事もできます。

<Window.Resources>
    <Style TargetType="Button" x:Key="base_style">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="25" />
        <Setter Property="Background" Value="Red" />
    </Style>
    <Style TargetType="Button" x:Key="button_style" BasedOn="{StaticResource base_style}">
        <Setter Property="Foreground" Value="White" />
    </Style>
</Window.Resources>
<StackPanel>
    <Button Style="{StaticResource button_style}">Button1</Button>
    <Button>Button2</Button>
</StackPanel>

f:id:devew:20190320171555p:plain

簡単ですが今日はここまでとします。 次回はTriggerについて書きます。