WPF: Validation on a UserControl

Hi everyone,

this is probably very simple, but I can't seem to figure it out...

I'm currently using a UserControl to replace form fields to input text on a touch screen. This UserControl is essentially a Button displaying the current text and a pen icon, opening a separate screen keyboard window when pressed.

It also needs to validate its content and display a red border around it when the content is invalid, and this is where I have a bit of trouble. For some reason, that border around my UserControl doesn't show up. Validation itself works perfectly - I currently display some red text below the element (see my comment below for more detail on this).

Now, what I have tried to do is define a separate ControlTemplate that looks like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <ControlTemplate x:Key="validationTemplate">
        <Border BorderBrush="Red" BorderThickness="2" Padding="3">
            <AdornedElementPlaceholder/>
        </Border>
    </ControlTemplate>
</ResourceDictionary>

This ControlTemplate is then referenced in my UserControl's Validation.ErrorTemplate property - see below for the UserControl's code.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UserControls.TextInputUserControl"
x:Name="textInputUserControl">

<!-- Using static resources -->
<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="../StyleTemplates/Button.xaml" />
            <ResourceDictionary Source="../StyleTemplates/Validation.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

    <Button x:Name="buttonEdit"
        Grid.Column="1"
        Style="{StaticResource StyleEditButton}" 
        Click="buttonEdit_Click">
    <Button.Content>
        <Grid Margin="0" 
              ClipToBounds="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="53"/>
            </Grid.ColumnDefinitions>

            <Border x:Name="textArea"
                    Grid.Column="0">

                    <TextBlock x:Name="editTextBlock"
                               Text="{Binding ElementName=textInputUserControl, 
                                              Path=Value, 
                                              Mode=TwoWay, 
                                              UpdateSourceTrigger=PropertyChanged}"/>
            </Border>

            <Image Source="/Icons/32x32/text-edit.png" 
                   Grid.Column="1"/>
        </Grid>
    </Button.Content>
</Button>
<Validation.ErrorTemplate>
    <StaticResource ResourceKey="validationTemplate"/>
</Validation.ErrorTemplate>
</UserControl>

I then use it like this:

    <UserControls:TextInputUserControl 
        x:Name="nameInputUserControl"
        DataContext="{Binding NameViewModel}">
            <UserControls:TextInputUserControl.Value>
                <Binding Path="Value" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
                    <Binding.ValidationRules>
                        <ValidationRules:NameRule ValidatesOnTargetUpdated="True" />
                    </Binding.ValidationRules>
                </Binding>
            </UserControls:TextInputUserControl.Value>
        </UserControls:TextInputUserControl>

I suspect there is a problem with the content sitting in a sub-element of my UserControl, and the visual Validation results to affect the whole UserControl, but I can't quite put my finger on it. Can you help?

Thanks! :-)

Jan

ansaurus

tags:

views:

answers:

WPF: Validation on a UserControl

related questions