Export (0) Print
Expand All

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.

The DescriptionViewer control does not have any named parts.

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.

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.

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

NoteNote:

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>


Community Additions

ADD
Show:
© 2014 Microsoft