Silverlight-templates

提供:Dev Guides
移動先:案内検索

Silverlight-テンプレート

  • テンプレート*は、コントロールの全体的な外観と外観を記述します。 各コントロールには、関連付けられたデフォルトのテンプレートがあり、そのコントロールに外観を与えます。

WPFアプリケーションでは、コントロールの視覚的な動作と視覚的な外観をカスタマイズするときに、独自のテンプレートを簡単に作成できます。

いくつかの重要な機能は-

 *すべてのUI要素には、ある種の外観と動作があります。* ボタン*には外観と動作があります。
* *Click* イベントまたは *mouse hover* イベントは、クリックおよびホバーに応答して起動される動作であり、 *Control* テンプレートで変更できるボタンのデフォルトの外観があります。

テンプレートでボタンが定義されている簡単な例をもう一度見てみましょう。

<UserControl x:Class = "ButtonTemplate.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">

   <Grid x:Name = "LayoutRoot" HorizontalAlignment = "Center"
      VerticalAlignment = "Center">

      <Button Height = "100" Width = "100" Content = "Click!"
         HorizontalContentAlignment = "Left" Click = "button_Click">

         <Button.Template>
            <ControlTemplate TargetType = "Button">

               <Grid>

                  <Ellipse Fill = "Gray" Stroke = "Black"
                     StrokeThickness = "3" Margin = "-64,0,0,0"/>

                  <ContentPresenter HorizontalAlignment = "{TemplateBinding
                     HorizontalContentAlignment}" VerticalAlignment = "Center"
                     Content = "{TemplateBinding Content}"/>
               </Grid>

            </ControlTemplate>

         </Button.Template>

      </Button>

   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

ボタンをクリック

テンプレートの接続

テンプレート化するコントロール機能はすべて、テンプレートバインディングを使用しています。 一部の側面はもう少し複雑です。 たとえば、フォームのコンテンツモデルがある場合は常に、テンプレートバインディングだけではボタンに表示されるものでは不十分です。 上記の例に示すように、コンテンツプレゼンターも使用する必要があります。