ValidationSummary Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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

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