Question

I’m currently building some custom controls in Silverlight. I want these controls to respond to validation errors. What I’m trying to do is to get that red border around my control, just like the default Silverlight controls.

What I understand is that I need to add this to my template:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="ValidationStates">
    <VisualState x:Name="Valid"/>
    <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>
    </VisualState>
    <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>
    </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

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

and

<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>
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup Name="OpenStates">
        <VisualStateGroup.Transitions>
          <VisualTransition GeneratedDuration="0"/>
          <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>
          </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="Closed">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
          </Storyboard>
        </VisualState>
        <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>
        </VisualState>
      </VisualStateGroup>
    </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>

And I need to add this for every control that I create (with the exception of the ValidationToolTipTemplate-ControlTemplate).

1. How can I add the validation style to all my controls and still be DRY?
2. If that is not possible, does this mean that when the style of the validation template changes, I have to copy and paste the templates of all the controls in the known universe in a file called ‘generic.xaml’ and change it accordingly?

I’ve worked with Microsoft APIs long enough to know that (2) is probably the way to go, but I want to make sure first.

Answer 1

With the way that Silveright/WPF work there are some gotchas in these sorts of situations. You DO end up repeating XAML as ControlTemplates are all or nothing. You either end up replacing the Style’s template or not. You can’t pick and choose what to override like you do with a class.

I will try to answer your specific questions then try to provide a couple of broad approaches that should help to eliminate redundancy in XAML files.

How can you add the validation style to all controls?

First, take that border and make it a StaticResoruce by giving in a Key attribute. Then put it in a shared resource dictionary. When you need the style again you can use it in your templates like this:

<ContentControl x:Name="ValidationErrorElement" Content={StaticResource MyBorderResource}" />

You can’t do much more than that for encapsulating the template. As far as the Validation VisualStates, those are as compact as possible already. What you can do however, is combine multiple templates into one larger template. I like to do this with ToggleButtons, Buttons and RadioButtons that look like buttons. See point #2 below.

General Rules of Thumb

1. Encapsulate commonly used XAML fragments into templated Controls and Control templates. For instance, let’s say you have a border within a border that you’re using in a few different places. That could be described as a ControlTemplate resource and loaded into a ContentControl.

2. If you have several styles or control templates that are largely the same (Button,ToggleButton,RadioButton come to mind), then you can apply the style to a common ancestor ButtonBase, in this case. Your new button ControlTemplate would contain all the VisualStates and graphic elements needed by Button,ToggleButton and RadioButton and be applied to the type ButtonBase. As noted above, this approach works well for very similar looking controls but would be a poor choice for controls that aren’t that similar.