1 out of 1 rated this helpful - Rate this topic

ValidationSummary Styles and Templates

Silverlight

This topic describes the styles and templates for the ValidationSummary 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.

ValidationSummary Parts

The following table lists the named parts for the ValidationSummary class.

Part	Type	Description
SummaryListBox	ListBox	The ListBox that displays the list of errors.

ValidationSummary States

The following table lists the visual states for the ValidationSummary control.

VisualState Name	VisualStateGroup Name	Description
Normal	CommonStates	The default state.
Disabled	CommonStates	The control is disabled.
Empty	ValidationStates	The Errors collection is empty.
HasErrors	ValidationStates	The Errors collection is not empty.

ValidationSummary Style Properties

The following table lists the Style properties of the ValidationSummary control. You must set the TargetType property when you create a Style.

Property Name	Target Type	Description
SummaryListBoxStyle	ListBox	The style applied to the ListBox that displays the errors.
ErrorStyle	ListBoxItem	The style applied to individual errors in the error list.

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 ValidationSummary control.

XAML


	<Style TargetType="ctl:ValidationSummary">
		<Setter Property="IsTabStop" Value="False"/>
		<Setter Property="Background" Value="#FFEFEFEA"/>
		<Setter Property="BorderBrush" Value="#FFCECEC7"/>
		<Setter Property="BorderThickness" Value="1"/>
		<Setter Property="Padding" Value="0"/>
		<Setter Property="HeaderTemplate">
			<Setter.Value>
				<DataTemplate>
					<Border Background="#FFDC020D" CornerRadius="2" x:Name="Header" Margin="-1,-1,-1,0">
						<StackPanel Margin="6,2,6,4" Orientation="Horizontal" VerticalAlignment="Top">
							<Grid Height="13" Width="13">
								<Ellipse Margin="0" RenderTransformOrigin="0.5,0.5" >
									<Ellipse.Stroke>
										<LinearGradientBrush StartPoint="0.505,0.65" EndPoint="0.5,0.058">
											<GradientStop Color="#FFCA000C" Offset="0"/>
											<GradientStop Color="#FFFF9298" Offset="0.991"/>
										</LinearGradientBrush>
									</Ellipse.Stroke>
									<Ellipse.Fill>
										<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
											<GradientStop Color="#FFFFFFFF" Offset="0"/>
											<GradientStop Color="#FFFDC8C8" Offset="1"/>
										</LinearGradientBrush>
									</Ellipse.Fill>
								</Ellipse>
								<Path Fill="#DDD43940" Data="M5.5,2.5 L7.5,2.5 L7.5,8 L5.5,8 M5.5,9.5 L7.5,9.5 L7.5,10.5 L5.5,10.5"/>
							</Grid>
							<TextBlock Padding="4,1,0,0" Text="{Binding}" Foreground="#FFFFFFFF" FontWeight="Bold"/>
						</StackPanel>
					</Border>
				</DataTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="ErrorStyle">
			<Setter.Value>
				<Style TargetType="ListBoxItem">
					<Setter Property="Template">
						<Setter.Value>
							<ControlTemplate TargetType="ListBoxItem">
								<Grid Background="{TemplateBinding Background}">
									<vsm:VisualStateManager.VisualStateGroups>
										<vsm:VisualStateGroup x:Name="CommonStates">
											<vsm:VisualState x:Name="Normal"/>
											<vsm:VisualState x:Name="MouseOver">
												<Storyboard>
													<DoubleAnimation Storyboard.TargetName="FillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
												</Storyboard>
											</vsm:VisualState>
											<vsm:VisualState x:Name="Disabled">
												<Storyboard>
													<DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
												</Storyboard>
											</vsm:VisualState>
										</vsm:VisualStateGroup>
										<vsm:VisualStateGroup x:Name="SelectionStates">
											<vsm:VisualState x:Name="Unselected"/>
											<vsm:VisualState x:Name="Selected">
												<Storyboard>
													<DoubleAnimation Storyboard.TargetName="FillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
												</Storyboard>
											</vsm:VisualState>
										</vsm:VisualStateGroup>
										<vsm:VisualStateGroup x:Name="FocusStates">
											<vsm:VisualState x:Name="Focused">
												<Storyboard>
													<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
														<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
													</ObjectAnimationUsingKeyFrames>
												</Storyboard>
											</vsm:VisualState>
											<vsm:VisualState x:Name="Unfocused"/>
										</vsm:VisualStateGroup>
									</vsm:VisualStateManager.VisualStateGroups>
									<Rectangle x:Name="FillColor" Opacity="0" Fill="#59F7D8DB" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
									<Rectangle x:Name="FillColor2" Opacity="0" Fill="#FFF7D8DB" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
									<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}"/>
									<Rectangle x:Name="FocusVisualElement" Stroke="#FFF7D8DB" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
								</Grid>
							</ControlTemplate>
						</Setter.Value>
					</Setter>
				</Style>
			</Setter.Value>
		</Setter>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="ctl:ValidationSummary">
					<Grid x:Name="ValidationSummary">
						<vsm:VisualStateManager.VisualStateGroups>
							<vsm:VisualStateGroup x:Name="CommonStates">
								<vsm:VisualState x:Name="Normal"/>
								<vsm:VisualState x:Name="Disabled">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility" Duration="0">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</vsm:VisualState>
							</vsm:VisualStateGroup>
							<vsm:VisualStateGroup x:Name="ValidationStates">
								<vsm:VisualState x:Name="Empty">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Visibility" Duration="0">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</vsm:VisualState>
								<vsm:VisualState x:Name="HasErrors"/>
							</vsm:VisualStateGroup>
						</vsm:VisualStateManager.VisualStateGroups>
						<Border x:Name="Content" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0,0,2,2">
							<Grid>
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="*"/>
								</Grid.RowDefinitions>
								<ListBox x:Name="SummaryListBox" Grid.Row="1" Background="{x:Null}" BorderThickness="0" Height="Auto" ItemContainerStyle="{TemplateBinding ErrorStyle}" Style="{TemplateBinding SummaryListBoxStyle}" Padding="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}">
									<ListBox.ItemTemplate>
										<DataTemplate>
											<StackPanel Orientation="Horizontal">
												<TextBlock Text="{Binding MessageHeader}" FontWeight="Bold" Margin="4,0,0,0"/>
												<TextBlock Text="{Binding Message}" Margin="4,0,0,0"/>
											</StackPanel>
										</DataTemplate>
									</ListBox.ItemTemplate>
								</ListBox>
								<Border x:Name="DisabledVisual" Visibility="Collapsed" Background="#80FFFFFF" Grid.RowSpan="2" IsHitTestVisible="True"/>
								<ContentControl x:Name="HeaderContentControl" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" IsTabStop="False" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center"/>
							</Grid>
						</Border>
					</Grid>
				</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