This topic has not yet been rated - Rate this topic

DescriptionViewer Styles and Templates

Silverlight

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 Parts

The DescriptionViewer control does not have any named parts.

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	IsValid is false and IsFocused is true.
InvalidUnfocused	ValidationStates	IsValid is false and IsFocused is false.
ValidFocused	ValidationStates	IsValid is true and IsFocused is true.
ValidUnfocused	ValidationStates	IsValid is true and IsFocused is false.

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
ToolTipStyle	ToolTip	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.

XAML


<!-- 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">

XAML


	<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>

Concepts

Control Customization

Customizing the Appearance of an Existing Control by Using a ControlTemplate

Other Resources

Control Styles and Templates

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Additions

ADD