Silverlight では、コントロールの視覚的な構造や動作をカスタマイズするには、コントロール テンプレートを作成します。コントロールには、Background、Foreground、FontFamily など多数のプロパティが用意されており、コントロールの外観をさまざまに指定できます。ただし、プロパティの設定によって変更できることには限りがあります。ControlTemplate クラスを使用すれば、テンプレートを作成して詳細なカスタマイズを行うことができます。このクイックスタートでは、ControlTemplate を作成して CheckBox コントロールの外観をカスタマイズする方法について説明します。
このクイックスタートは、次のセクションで構成されています。
詳細については、MSDN の Silverlight ドキュメントの「ControlTemplate 作成による既存のコントロールの外観のカスタマイズ」を参照してください。
カスタム コントロール テンプレートの例
既定では、CheckBox コントロールは、Content (CheckBox の横の文字列またはオブジェクト) を選択ボックスの右側に配置します。これが CheckBox の視覚的な構造です。既定では、チェック マークは CheckBox がオンにされていることを示します。これが CheckBox の視覚的な動作です。これらの特性を変更するには、CheckBox 用の ControlTemplate を作成します。たとえば、チェック ボックスのコンテンツを選択ボックスの上に配置し、チェックボックスがオンであることを "X" で示すには、これらの特性を CheckBox の ControlTemplate に指定します。
次に既定の ControlTemplate を使用した CheckBox と、カスタムの ControlTemplate を使用した CheckBox の例を示します。チェック ボックスを複数回クリックしてください。チェック ボックスの状態が Checked、Unchecked、および Indeterminate に変化します。
コントロールの視覚的な構造の指定
ControlTemplate を作成するには、FrameworkElement オブジェクトを組み合わせて 1 つのコントロールを作成します。ControlTemplate は、ルート要素として FrameworkElement を 1 つだけ持つことができます。通常、ルート要素には他の FrameworkElement オブジェクトが含まれます。オブジェクトを組み合わせて、コントロールの視覚的な構造を構成します。
次の XAMLは、CheckBox の ControlTemplate を作成して、コントロールのコンテンツを選択ボックスの上に配置することを指定します。この例では、Path を指定して CheckBox がオンであることを示す "X" を作成し、また、不確定の状態を示す Ellipse を指定します。Path と Ellipse の Opacity は 0 に設定されているため、既定では両方とも表示されません。
XAML
<ControlTemplate TargetType="CheckBox"> <StackPanel x:Name="Root" HorizontalAlignment="Center" VerticalAlignment="Center"> <ContentPresenter/> <Border Width="30" Height="30" BorderBrush="Black" BorderThickness="1" CornerRadius="0" HorizontalAlignment="Left" Background="{TemplateBinding Background}" Padding="2" >
<Grid> <Path x:Name="Checkmark" Opacity="0" Stroke="#FF313030" Margin="-10.5,-6.8,-10.5,-6" RenderTransformOrigin="0.5,0.5" Fill="#FFE0E0E0" Stretch="Fill" Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z" >
<Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="0.5" ScaleY="0.5"/> </TransformGroup> </Path.RenderTransform> </Path> <Ellipse x:Name="IndeterminateEllipse" Opacity="0" Fill="#FFE0E0E0" Stroke="#FF313030" StrokeThickness="0.5" Margin="1.5,1.9,1.5,1.4"> </Ellipse> </Grid> </Border> </StackPanel> </ControlTemplate>
コントロールの視覚的な動作の指定
視覚的な動作とは、コントロールが特定の状態になったときの外観のことです。CheckBox コントロールには、Checked、Unchecked、および Indeterminate の 3 つの状態があります。CheckBox の状態は CheckBox.IsChecked プロパティの値によって決まり、その状態に応じてチェックボックスの外観が決まります。
次の表に、IsChecked に指定できる値、それに対応する CheckBox の状態、および CheckBox の外観を示します。
|
true
|
オン
|
X を表示
|
|
false
|
オフ
|
空
|
|
null
|
不確定
|
丸印を表示
|
VisualState オブジェクトを使用して、特定の状態にあるコントロールの外観を指定します。VisualState には、ControlTemplate 内の要素の外観を変更する Storyboard が含まれます。VisualState.Name プロパティで指定した状態にコントロールが移行すると、Storyboard が開始します。コントロールがその状態を終了すると、Storyboard は停止します。VisualState オブジェクトを VisualStateGroup オブジェクトに追加します。VisualStateGroup オブジェクトを VisualStateManager.VisualStateGroups 添付プロパティに追加し、この添付プロパティを ControlTemplate のルート FrameworkElement に設定します。
次の XAML は、Checked、Unchecked、および Indeterminate の状態の VisualState オブジェクトを示します。この例では、VisualStateManager.VisualStateGroups 添付プロパティを StackPanel に設定します。これは ControlTemplate のルート要素です。Checked VisualState は、Checkmark (前の例を参照) という名前の Path の Opacity に 1 を指定し、Indeterminate VisualState は、IndeterminateEllipse という名前の Ellipse の Opacity に 1 を指定します。Unchecked VisualState には Storyboard がないため、CheckBox は既定の外観に戻ります。
XAML
<ControlTemplate TargetType="CheckBox"> <StackPanel x:Name="Root" HorizontalAlignment="Center" VerticalAlignment="Center">
<vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CheckStates">
<vsm:VisualStateGroup.Transitions> <vsm:VisualTransition GeneratedDuration="0:0:.2" /> </vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Unchecked"/>
<vsm:VisualState x:Name="Checked"> <Storyboard> <DoubleAnimation Storyboard.TargetName="Checkmark" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/> </Storyboard> </vsm:VisualState>
<vsm:VisualState x:Name="Indeterminate"> <Storyboard> <DoubleAnimation Storyboard.TargetName= "IndeterminateEllipse" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/> </Storyboard> </vsm:VisualState>
</vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups>
... </StackPanel> </ControlTemplate>
VisualState オブジェクトの機能の理解を深めるには、CheckBox が Unchecked の状態から Indeterminate の状態、さらに Checked の状態へと移行し、その後 Unchecked の状態に戻る場合の動作を考えてみてください。次の表に、このような遷移について説明します。
|
Unchecked から Indeterminate
|
Indeterminate VisualState の Storyboard が開始。IndeterminateEllipse の Opacity は 1。
|
X が表示される。
|
|
Indeterminate から Checked
|
Checked VisualState の Storyboard が開始。Checkmark の Opacity は 1。
Indeterminate VisualState の Storyboard が終了。IndeterminateEllipse の Opacity は 0。
|
丸印が表示される。
|
|
Checked から Unchecked
|
Checked VisualState の Storyboard が終了。Checkmark の Opacity は 0。
|
何も表示されない。
|
参照
フィードバックを送信する