Last-modified: Sun, 24 Mar 2013 10:44:36 JST
Counter:1334 Today:1 Yesterday:0 Online:1
このエントリーをはてなブックマークに追加

Sample3 / 可変デザイン

About

Sample2ではControlTemplateの共有について解説しました。ここでSample3の解説に入る前に、Sample2のXAMLを少しだけ書き換えて確認する点があります。書き換える対象は装飾対象となっているButtonのプロパティBackgroundです。Sample2では、ControlTemplate中に定義したBorderのプロパティBackgroundによって、装飾するボタンの背景色を決定しています、つまり青(Blue)です。

<Border Background="Blue"…

間違えないように、ControlTemplateの方ではなく、ButtonのBackgroundプロパティを変更してください。するとButtonの背景色は変化していないことが確認できると思います。これはControlTemplateで定義された背景色が優先され、ButtonのBackgroundプロパティから設定された値が上書きされたためです。

全ての同種のコントロール(ここではButton)を、同じ背景色で設定する場合には、このことは大きな問題になりません。しかしながら、Buttonの丸みやテキストなどの配置は共通で、背景色だけを変えたButtonが必要な場合はどうでしょうか。同じようなControlTemplateを定義して、一つのパラメータだけ変更し、異なる名前を付けて管理することは合理的ではありません。

そこでSample3では、ButtonのBackgroundプロパティを変更した場合に、その変更がButtonに適用されるようなControlTemplateを作ります。

HowTo

ContoleTemplateで変更された点は1か所だけです。ここではBackgroundプロパティを例にしていますので、ControlTemplateのBackgroundを確認してください。Background="{TemplateBinding Background}"と記述しています。これは、このControlTemplateを適用したコントロールのBackgroundプロパティの値を利用しなさい、という記述です。

同じようにWidthやHeightをControlTemplate内に定義していて、一部のButtonのWidthとHeightを変更したい場合には、Width="{TemplateBinding Width}"となります。

    <UserControl.Resources>
        <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
            <Border Background="{TemplateBinding Background}"
                    CornerRadius="10"
                    Padding="10">
                <TextBlock Text="Hello Template"
                           Foreground="White"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Left"/>
            </Border>
        </ControlTemplate>
    </UserControl.Resources>
    
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">       
        <Button Content="Button" Height="50" Width="200" 
                Background="Crimson"
                Template="{StaticResource ButtonTemplate}" />
    </StackPanel>

サンプルでは背景色をCrimsonに変更して、正しくButtonに反映されていることを確認しています。これでSample3は終わりです。