以下で、画像とテキストの入ったボタンが出来る。
<!- 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などで書いたオブジェクトをボタンとして扱いたい時に有効。