atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

Silverlight2 Control - Style and Template -

以下で、画像とテキストの入ったボタンが出来る。

<!- Page.Xaml -->
<Button Canvas.Top="40" Canvas.Left="40" Height="100" Width="100">
     <Button.Content>
          <StackPanel Orientation="Vertical">
               <Image Source="icon.jpg" Height="60" Width="60"></Image>
	   <TextBlock Text="Click Me!“
		FontFamily="Comic Sans Ms" FontSize="20" Foreground="Blue">
	</TextBlock>
         </StackPanel>
     </Button.Content>
</Button>

テキストのプロパティ情報をスタイル化する。

<!- Page.Xaml -->
<Canvas.Resources>
     <Style TargetType="TextBlock" x:Key="ButtonTextStyle">
          <Setter Property="Text" Value="Click Me!“ />
          <Setter Property=“FontFamily” Value=“Comic Sans Ms” />
          <Setter Property="FontSize" Value="20” />
          <Setter Property="Foreground" Value="Blue” />
     </Style>    
</Canvas.Resources>

Applicatin.Reourceに記述すれば、そのアプリケーション全体でスタイルが利用できる。

<!- App.Xaml -->
<Application.Resources>
            <Style TargetType="TextBlock" x:Key="ButtonTextStyle">
                <Setter Property="Text" Value="Click Me!” />
                <Setter Property="FontFamily" Value="Comic Sans Ms“ />
                <Setter Property="FontSize" Value="20“ />
                <Setter Property="Foreground" Value="Blue” />
            </Style>
</Application.Resources>

リソースに記述したスタイルをオブジェクトに適応させる。

<!- Page.Xaml -->
<TextBlock Style=“{StaticResource ButtonTextStyle}” />

テンプレートの記述

<!- App.Xaml -->
<Style TargetType="Button" x:Key="ImageButton">
     <Setter Property="Template">
          <Setter.Value>
               <ControlTemplate TargetType="Button">
                    <Button>
                         <Button.Content>
                              <StackPanel Orientation="Vertical">
                                   <Image Source="icon.jpg" Width="60" Height="60“ />
                                   <TextBlock Style="{StaticResource ButtonTextStyle}” />
                              </StackPanel>
                         </Button.Content>
                    </Button>
               </ControlTemplate>
          </Setter.Value>
     </Setter>
</Style>

適応方法はスタイルと同じ。

<Button Canvas.Left="40" Canvas.Top="40“  Style="{StaticResource ImageButton}” />


テンプレート内には、扱うコントロールが存在しなくてもよい。

<!- App.Xaml -->
 <Style TargetType="Button" x:Key="ImageButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
		<StackPanel Orientation="Vertical">
                               <Image Source=“icon.jpg” 
			Width=“60” Height=“60” />
                               <TextBlock 
			Style="{StaticResource ButtonTextStyle}” />
                         </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
</Style>

まとめ:StyleとTemplateの違い
Style,Template共にResourceに記述する。
Canvas.Resourceは、そのキャンバスのみ
Application.Resourceはアプリケーション全体
Appの方がPage.Xamlがすっきりしていいんじゃないかなぁ?

Styleは1つのコントロールのプロパティを定義する。

Templateはコントロール全体を定義する。
扱うコントロールがTemplateに含まれなくてもよい。
つまり、Pathなどで書いたオブジェクトをボタンとして扱いたい時に有効。