ControlTemplate for adding UIElements to original control

Question

I want to add an exclamation mark Image to the left of the built-in TextBox and make it visible whenever the TextBox Validation.HasError attached property is true, otherwise hide it.

How can I use ControlTemplate to add the Image without having re-bind all the TextBox properties?

<StackPanel>
    <StackPanel.Resources>
        <ControlTemplate x:Key="TextBoxWithIndicator" TargetType="{x:Type TextBox}">
            <StackPanel Orientation="Horizontal">
                <!-- Re-bind {Binding Path=Property}, including some that I may miss -->
                <TextBox Text="{TemplateBinding Text}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                <Image Source="resources/exclaim.png" Visibility="{TemplateBinding Validation.HasError}"/>
            </StackPanel>
        </ControlTemplate>
    </StackPanel.Resources>
    <TextBox Template="{StaticResource TextBoxWithIndicator}" Width="120">Happy Go Lucky</TextBox>
</StackPanel>

Note The preceding block of code represents my futile effort in WPF so far. It is probably also wrong on several counts, e.g. probably need a ValueConverter for Visibility <--> Validation.HasError; Setting Width="120" on TextBox seems to adjust the StackPanel width instead of TextBox width despite the TemplateBinding, etc.

Have you considered using an [`Adorner`](http://msdn.microsoft.com/en-us/library/ms743737.aspx) instead of a `ControlTemplate`? — Brian S, Apr 30 '13 at 02:35
Also, keep in mind, if you are just talking about customizing the look of the `TextBox` when it has a validation error, there is a `Validation.ErrorTemplate` which is intended for specifically this purpose. [Here](http://stackoverflow.com/questions/7434245/validation-error-style-in-wpf-similar-to-silverlight) is an answer with code for creating one, which you could customize. — Brian S, Apr 30 '13 at 02:38
@BrianS Sorry as I am new to WPF, I wasn't aware of the ErrorTemplate and Adorner. I actually would like an answer that applies even when out of the error validation context. I think Adorner should be what i am looking for. If you can write it as answer, i'll mark it. — Jake, Apr 30 '13 at 03:51
no need to apologize whatsoever. We were all new to WPF at one point or another, and one of the biggest challenges is learning all the different possibilities. Glad I was able to point you in the right direction, and good luck! — Brian S, Apr 30 '13 at 14:52

score 0 · Accepted Answer · answered Apr 30 '13 at 14:50

0

I would suggest looking into Adorners. These are special FrameworkElements that are rendered in a special Adorner Layer on top of visual elements, and are intended to provide visual cues to the user.

The above link provides a summary of Adorners as well as an example of a Custom Adorner.

answered Apr 30 '13 at 14:50

Brian S

5,675
1
22
22

Thanks! Unfortunately, my problem didn't end here. The Adorner was placed in another layer, hence my StackPanel did not resize to fit. Guess I'll have to look all over again. – Jake May 02 '13 at 02:49

ControlTemplate for adding UIElements to original control

1 Answers1