コントロールのスタイルを設定する

コントロール1つ1つのプロパティをリソースにして共通化させていてはかなり苦労が必要になります。

同一のコントロールはこの色、幅にしたいなど、複数のプロパティを一括でリソース化する必要があります。

XAMLではそのような複数のプロパティを一括でリソースとして宣言するために、Styleという型があります。

StyleはこのようにResource内で定義し、TargetTypeで適用するコントロールを指定します。

さらにSetterを用いてプロパティの値を指定します。

使うときはコントロールのStyleプロパティにStaticResourceでリンクさせることで複数のコントロールの外観を一括で変更できます。

<Page>
...省略...
    <Page.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Content" Value="Touch Me" />
            <Setter Property="Margin" Value="5,5,5,5" />
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="SkyBlue" />
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <StackPanel>
        <Button x:Name="button1" Style="{StaticResource buttonStyle}" />
        <Button x:Name="button2" Style="{StaticResource buttonStyle}" />
    </StackPanel>


</Page>

また、Styleプロパティは優先度が低く、他のプロパティに同一の値が設定された場合、プロパティを直接指定したほうが優先されます。

ですのでこのように共通化しない部分だけプロパティで指定してやることで同じような外観で必要な部分だけ変更できます。

<Button x:Name="button1" Style="{StaticResource buttonStyle}" Content="Click Me" />
<Button x:Name="button2" Style="{StaticResource buttonStyle}" />

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.