DescriptionViewer Styles and Templates
Microsoft Silverlight will reach end of support after October 2021. Learn more.
This topic describes the styles and templates for the DescriptionViewer control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.
DescriptionViewer States
The following table lists the visual states for the DescriptionViewer control.
VisualState Name |
VisualStateGroup Name |
Description |
---|---|---|
Normal |
CommonStates |
The default state. |
Disabled |
CommonStates |
The control is disabled. |
HasDescription |
DescriptionStates |
Description has a value. |
NoDescription |
DescriptionStates |
Description does not have a value. |
InvalidFocused |
ValidationStates |
|
InvalidUnfocused |
ValidationStates |
|
ValidFocused |
ValidationStates |
|
ValidUnfocused |
ValidationStates |
DescriptionViewer Style Properties
The following table lists the Style properties of the DescriptionViewer control. You must set the TargetType property when you create a Style.
Property Name |
Target Type |
Description |
---|---|---|
The style applied to the tooltip that displays the description. |
Default Style and Template
The following shows the XML namespace mappings that you have to specify when you work with styles and templates.
<!-- XML Namespace mappings. -->
xmlns:ctl="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
Important Note: |
---|
The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries. |
Note: |
---|
The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping. |
The following XAML shows the default style and template for the DescriptionViewer control.
<!-- XML Name Space definitions. -->
xmlns:ctl="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<Style TargetType="ctl:DescriptionViewer">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="GlyphTemplate">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="15" Height="15">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Icon" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Icon" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid x:Name="Icon" Opacity="0.6" Width="13" Height="13" HorizontalAlignment="Center" VerticalAlignment="Center">
<Ellipse>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.298,0.3" StartPoint="0.505,0.65">
<GradientStop Color="#FF485E6F"/>
<GradientStop Color="#4C485E6F" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCED4D9" Offset="1"/>
<GradientStop Color="#FFFDFDFD" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<StackPanel Height="Auto" Width="3" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Height="9" HorizontalAlignment="Center" Margin="0,0,0,1" VerticalAlignment="Top" Width="3" Data="M0.5,0.60000002 C0.5,0.54477155 0.54477155,0.5 0.60000002,0.5 L2.4000001,0.5 C2.4552286,0.5 2.5,0.54477155 2.5,0.60000002 L2.5,1.6215254 C2.5,1.6767539 2.4552286,1.7215254 2.4000001,1.7215254 L0.60000002,1.7215254 C0.54477155,1.7215254 0.5,1.6767539 0.5,1.6215254 z M0.50000548,3.3151906 C0.50000548,3.2599623 0.54477704,3.2151906 0.60000551,3.2151906 L2.4000056,3.2151906 C2.4552341,3.2151906 2.5000055,3.2599623 2.5000055,3.3151906 L2.5000055,8.4000092 C2.5000055,8.4552374 2.4552341,8.5000095 2.4000056,8.5000095 L0.60000551,8.5000095 C0.54477704,8.5000095 0.50000548,8.4552374 0.50000548,8.4000092 z" Stretch="Fill" Stroke="#00000000">
<Path.Fill>
<LinearGradientBrush EndPoint="0.39,0.297" StartPoint="0.413,0.653">
<GradientStop Color="#FF485E6F"/>
<GradientStop Color="#4C485E6F" Offset="0.781"/>
<GradientStop Color="#FF485E6F" Offset="0.982"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTipStyle">
<Setter.Value>
<Style TargetType="ToolTip">
<Setter Property="Placement" Value="Right"/>
<Setter Property="IsHitTestVisible" Value="True"/>
<Setter Property="MaxWidth" Value="250"/>
<Setter Property="Margin" Value="5,-3,5,0"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctl:DescriptionViewer">
<StackPanel Orientation="Horizontal">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="DescriptionStates">
<vsm:VisualState x:Name="NoDescription"/>
<vsm:VisualState x:Name="HasDescription">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DescriptionContent" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<Button x:Name="DescriptionContent" Visibility="Collapsed" IsTabStop="False" Template="{TemplateBinding GlyphTemplate}" Background="#00000000" BorderBrush="#FFFFFFFF" BorderThickness="1" Padding="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ToolTipService.ToolTip>
<ToolTip Style="{TemplateBinding ToolTipStyle}" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Content="{TemplateBinding Description}"/>
</ToolTipService.ToolTip>
</Button>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
See Also