Radio Button Error Style

Question

I have implemented an error style for textboxes using the following code. This sets a tool tip and puts a nice error image to the right of the textbox if the element reports an error status via an IDataErrorInfo interface:

    <!-- Set error style for textboxes -->
    <Style x:Key="txtBoxErrStyle" TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="ToolTip" 
                        Value="{Binding RelativeSource={x:Static RelativeSource.Self}, 
                        Path=(Validation.Errors)[0].ErrorContent}" />
            </Trigger>
        </Style.Triggers>

        <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <DockPanel DockPanel.Dock="Right">
                        <AdornedElementPlaceholder />
                        <Image Source="Icons/Error.png"
                               Height="16"
                               Width="16"
                               ToolTip="{Binding Path=AdornedElement.ToolTip, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Adorner}}}" />
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This works really well for me by adding the tool tip text and setting the Error.png image to the right of the textbox. But what I want to do is give similar functionality to a radio button. I attempted to do this by copying the above code and changing the tag to be:

    <!-- Set error style for radio buttons -->
    <Style x:Key="radioBtnErrStyle" TargetType="{x:Type RadioButton}">

The field that the radio button is bound to reports errors via the IDataErrorInfo interface, and the radio button itself has ValidatesOnDataErrors set to true.

This sort of worked for me. When the radio button is deemed to be in error, the tool tip is set to the error message returned from the IDataErrorInfo routine. But I cannot seem to get the Error.png image to display on the form.

I have tried some basic screwing around with the style, such as swapping the order of the and elements, but nothing I tried seemed to work.

So any ideas as to how I can get the image to display?

Update

Steffen's reply hit the nail on the head. Increasing the margin did allow room for the image to be displayed.

However I have run into another, separate issue in that if the error condition is present when the program first starts then the tool tip will reflect the error condition, but the image will not be displayed. It is only when error condition is actively raised after the program start does the image also be displayed. I have seen this before but have not yet seen the correct way of handling it. Time to research another WPF topic!

Answer 1

You could create a custom control, which has the standard radio button as well as an image next to the right of it, that you could then set when it's in the error status?

Alternatively have you thought about replacing the fill of the raido button with an image?

Answer 2

Given that the style seems to get applied correctly in the first place this is likely just an effect of your particular window composition, i.e. width, margin and placement of the related controls:

Depending on your layout the image might end up behind the radio button 'canvas' and thus invisible, if their is not enough space left within the window to display the image alongside your control, e.g. if the RadioButton fills the entire width of a StackPanel row.

Consequently you should be able to 'reveal' the image by providing enough space as you see fit, e.g. by setting an appropriate right margin of at least 16 in your case:

<RadioButton Margin="0,0,16,0"/>

According to this assumptions I've indeed been able to reproduce the issue: presumably it is easily overlooked because width and/or margin of a TextBox are often provided explicitly and visible either way due to the default TextBox border, while this is less common for a RadioButton and its border is invisible by default.