Share via


ComboBox Styles and Templates

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

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

ComboBox Parts

The following table lists the named parts for the ComboBox control.

Part

Type

Description

ContentPresenterBorder

FrameworkElement

A visual element that serves as a border to ContentPresenter.

ContentPresenter

ContentPresenter

The text of the ComboBox.

DropDownToggle

ToggleButton

A ToggleButton to select the items in the combo box.

Popup

Popup

The drop-down that contains the items in the combo box.

ScrollViewer

ScrollViewer

The scrolling area in the ComboBox.

ComboBox States

The following table lists the states for the ComboBox control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

Disabled

CommonStates

The control is disabled.

MouseOver

CommonStates

The mouse pointer is over the ComboBox control.

Focused

FocusStates

The control has focus.

Unfocused

FocusStates

The control does not have focus.

FocusedDropDown

FocusStates

The drop-down for the ComboBox has focus.

InvalidFocused

ValidationStates

The control is invalid, but has focus.

InvalidUnfocused

ValidationStates

The control is invalid and does not have focus.

Valid

ValidationStates

The control is valid.

ComboBoxItem Parts

The ComboBoxItem control does not have any named parts.

ComboBoxItem States

The following table lists the states for the ComboBoxItem control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is over the ComboBox control.

Focused

FocusStates

The control has focus.

Unfocused

FocusStates

The control does not have focus.

Selected

SelectionStates

The item is currently selected.

Unselected

SelectionStates

The item is not selected.

SelectedUnfocused

SelectionStates

The item is selected, but does not have focus.

Default Style and Template

The following properties of the ComboBox control are not used in its default template. However, you can modify the default template and use template binding to set these properties.

The following shows the XML namespace mapping that you have to specify when you work with styles and templates.

<!-- XML Namespace mapping. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
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 ComboBox control.

<Style TargetType="ComboBox">
      <Setter Property="Padding" Value="6,2,25,2" />
      <Setter Property="Background" Value="#FF1F3B53"/>
      <Setter Property="HorizontalContentAlignment" Value="Left"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="TabNavigation" Value="Once" />
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
      <Setter Property="BorderBrush">
          <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FFA3AEB9" Offset="0"/>
                  <GradientStop Color="#FF8399A9" Offset="0.375"/>
                  <GradientStop Color="#FF718597" Offset="0.375"/>
                  <GradientStop Color="#FF617584" Offset="1"/>
              </LinearGradientBrush>
          </Setter.Value>
      </Setter>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="ComboBox">
                  <Grid>
                      <Grid.Resources>
                          <Style x:Name="comboToggleStyle" TargetType="ToggleButton">
                              <Setter Property="Foreground" Value="#FF333333"/>
                              <Setter Property="Background" Value="#FF1F3B53"/>
                              <Setter Property="BorderBrush">
                                  <Setter.Value>
                                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                          <GradientStop Color="#FFA3AEB9" Offset="0"/>
                                          <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                          <GradientStop Color="#FF718597" Offset="0.375"/>
                                          <GradientStop Color="#FF617584" Offset="1"/>
                                      </LinearGradientBrush>
                                  </Setter.Value>
                              </Setter>
                              <vsm:Setter Property="BorderThickness" Value="1"/>
                              <Setter Property="Padding" Value="3"/>
                              <Setter Property="Template">
                                  <Setter.Value>
                                      <ControlTemplate TargetType="ToggleButton">
                                          <Grid>
                                              <vsm:VisualStateManager.VisualStateGroups>
                                                  <vsm:VisualStateGroup x:Name="CommonStates">
                                                      <vsm:VisualState x:Name="Normal"/>
                                                      <vsm:VisualState x:Name="MouseOver">
                                                          <Storyboard>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity" To="1"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                      <vsm:VisualState x:Name="Pressed">
                                                          <Storyboard>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundOverlay2" Storyboard.TargetProperty="Opacity" To="1"/>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#E5FFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#BCFFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#6BFFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#F2FFFFFF"/>
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                      <vsm:VisualState x:Name="Disabled" />
                                                  </vsm:VisualStateGroup>
                                                  <vsm:VisualStateGroup x:Name="CheckStates">
                                                      <vsm:VisualState x:Name="Checked">
                                                          <Storyboard>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundOverlay3" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#E5FFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#BCFFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#6BFFFFFF"/>
                                                              <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#F2FFFFFF"/>
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                      <vsm:VisualState x:Name="Unchecked"/>
                                                  </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">
                                                                      <DiscreteObjectKeyFrame.Value>
                                                                          <Visibility>Visible</Visibility>
                                                                      </DiscreteObjectKeyFrame.Value>
                                                                  </DiscreteObjectKeyFrame>
                                                              </ObjectAnimationUsingKeyFrames>
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                      <vsm:VisualState x:Name="Unfocused" />
                                                  </vsm:VisualStateGroup>                                                   
                                              </vsm:VisualStateManager.VisualStateGroups>
                                              <Rectangle x:Name="Background" RadiusX="3" RadiusY="3" Fill="{TemplateBinding Background}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}"/>
                                              <Rectangle x:Name="BackgroundOverlay" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FF448DCA" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="#00000000"/>
                                              <Rectangle x:Name="BackgroundOverlay2" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FF448DCA" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="#00000000"/>
                                              <Rectangle x:Name="BackgroundGradient" RadiusX="2" RadiusY="2" StrokeThickness="1" Margin="{TemplateBinding BorderThickness}" Stroke="#FFFFFFFF">
                                                  <Rectangle.Fill>
                                                      <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                          <GradientStop Color="#FFFFFFFF" Offset="0" />
                                                          <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                                          <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                                          <GradientStop Color="#C6FFFFFF" Offset="1" />
                                                      </LinearGradientBrush>
                                                  </Rectangle.Fill>
                                              </Rectangle>
                                              <Rectangle Opacity="0" x:Name="BackgroundOverlay3" RadiusX="3" RadiusY="3" Fill="#FF448DCA" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="#00000000"/>
                                              <Rectangle Opacity="0" x:Name="BackgroundGradient2" RadiusX="2" RadiusY="2" StrokeThickness="1" Margin="{TemplateBinding BorderThickness}" Stroke="#FFFFFFFF">
                                                  <Rectangle.Fill>
                                                      <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                          <GradientStop Color="#FFFFFFFF" Offset="0" />
                                                          <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                                          <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                                          <GradientStop Color="#C6FFFFFF" Offset="1" />
                                                      </LinearGradientBrush>
                                                  </Rectangle.Fill>
                                              </Rectangle>
                                              <Rectangle x:Name="Highlight" RadiusX="2" RadiusY="2" Opacity="0" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="{TemplateBinding BorderThickness}" />
                                              <ContentPresenter
                                                      x:Name="contentPresenter"
                                                      Content="{TemplateBinding Content}"
                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                      Margin="{TemplateBinding Padding}"/>
                                              <Rectangle x:Name="FocusVisualElement" RadiusX="3.5" Margin="1"  RadiusY="3.5" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" IsHitTestVisible="false" />                                                
                                          </Grid>
                                      </ControlTemplate>
                                  </Setter.Value>
                              </Setter>
                          </Style>
                      </Grid.Resources>
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="CommonStates">
                              <vsm:VisualState x:Name="Normal" />
                              <vsm:VisualState x:Name="MouseOver" />
                              <vsm:VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <DoubleAnimation Duration="00:00:00" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To=".55"/>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="FocusStates">
                              <vsm:VisualState x:Name="Focused">
                                  <Storyboard>
                                      <DoubleAnimation Duration="00:00:00" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Unfocused"/>
                              <vsm:VisualState x:Name="FocusedDropDown">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                          <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>                            
                          <vsm:VisualStateGroup x:Name="ValidationStates">
                              <vsm:VisualState x:Name="Valid"/>
                              <vsm:VisualState x:Name="InvalidUnfocused">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="InvalidFocused">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                              <DiscreteObjectKeyFrame.Value>
                                                  <sys:Boolean>True</sys:Boolean>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Border x:Name="ContentPresenterBorder">
                          <Grid>
                              <ToggleButton x:Name="DropDownToggle" Style="{StaticResource comboToggleStyle}"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Margin="0" HorizontalContentAlignment="Right" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                                  <Path x:Name="BtnArrow" Height="4" Width="8" Stretch="Uniform" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " Margin="0,0,6,0" HorizontalAlignment="Right">
                                      <Path.Fill>
                                          <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/>
                                      </Path.Fill>
                                  </Path>
                              </ToggleButton>
                              <ContentPresenter x:Name="ContentPresenter" 
                                                Margin="{TemplateBinding Padding}"  
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                  <TextBlock Text=" " />
                              </ContentPresenter>
                          </Grid>
                      </Border>
                      <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="White" Opacity="0" IsHitTestVisible="false" />
                      <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1"  Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                      <Border x:Name="ValidationErrorElement" BorderThickness="1" CornerRadius="1" BorderBrush="#FFDB000C" Visibility="Collapsed">
                          <ToolTipService.ToolTip>
                              <ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right" 
                                           PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
                                           DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                  <ToolTip.Triggers>
                                      <EventTrigger RoutedEvent="Canvas.Loaded">
                                          <EventTrigger.Actions>
                                              <BeginStoryboard>
                                                  <Storyboard>
                                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
                                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                                              <DiscreteObjectKeyFrame.Value>
                                                                  <sys:Boolean>true</sys:Boolean>
                                                              </DiscreteObjectKeyFrame.Value>
                                                          </DiscreteObjectKeyFrame>
                                                      </ObjectAnimationUsingKeyFrames>
                                                  </Storyboard>
                                              </BeginStoryboard>
                                          </EventTrigger.Actions>
                                      </EventTrigger>
                                  </ToolTip.Triggers>
                              </ToolTip>
                          </ToolTipService.ToolTip>
                          <Grid Width="12" Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                              <Path Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
                              <Path Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
                          </Grid>
                      </Border>
                      <Popup x:Name="Popup">
                          <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Height="Auto" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
                              <Border.Background>
                                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                      <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                      <GradientStop Color="#FFFEFEFE" Offset="1"/>
                                  </LinearGradientBrush>
                              </Border.Background>
                              <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
                                  <ItemsPresenter/>
                              </ScrollViewer>
                          </Border>
                      </Popup>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

The default ControlTemplate for ComboBox references the ControlTemplate for ValidationTooltip. The following XAML shows the ControlTemplate for ValidationTooltip that you must specify when you work with the ComboBox control template:

<ControlTemplate x:Key="ValidationToolTipTemplate">
      <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
          <Grid.RenderTransform>
              <TranslateTransform x:Name="xform" X="-25"/>
          </Grid.RenderTransform>
          <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup Name="OpenStates">
                  <vsm:VisualStateGroup.Transitions>
                      <vsm:VisualTransition GeneratedDuration="0"/>
                      <vsm:VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                          <Storyboard>
                              <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                  <DoubleAnimation.EasingFunction>
                                      <BackEase Amplitude=".3" EasingMode="EaseOut"/>
                                  </DoubleAnimation.EasingFunction>
                              </DoubleAnimation>
                              <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                          </Storyboard>
                      </vsm:VisualTransition>
                  </vsm:VisualStateGroup.Transitions>
                  <vsm:VisualState x:Name="Closed">
                      <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                      </Storyboard>
                  </vsm:VisualState>
                  <vsm:VisualState x:Name="Open">
                      <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                      </Storyboard>
                  </vsm:VisualState>
              </vsm:VisualStateGroup>
          </vsm:VisualStateManager.VisualStateGroups>

          <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
          <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
          <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
          <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>

          <Border Background="#FFDC000C" CornerRadius="2"/>
          <Border CornerRadius="2">
              <TextBlock 
                  UseLayoutRounding="false" 
                  Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
          </Border>
      </Grid>
  </ControlTemplate>