How to display validation error in button bound to command

Question

I am developing an app and trying to stick to an MVVM model, I have a button that is just bound to a command. Currently the command can be enabled / disabled and greys out the button when the command is set to CanExecute false. But I want to add the ability to show validation errors on the button (by changing its color to red, maybe showing a tooltip).

The validation is currently already shown in another location in the UI, but the users are getting annoyed that the button is enabled and they click it only to have a message box pops up telling them they shouldn't of clicked the button because there is a validation error. But just disabling the button completely without showing them why would make the users confused(since they overlook the large red validation error at the bottom of the screen). So how can I show additional information on the save button?

This is my current button xaml:

<Button Name="SaveDataPointButton" Style="{StaticResource ImageButton}" Command="{Binding OpenDataPoint.SaveDataPointEditsCommand}" Margin="5,0" VerticalAlignment="Stretch">
    <Image Source="save.png" Stretch="None" ToolTip="Save Edits"/>
</Button>

And the style that is changing its appearance when IsEnabled is false, is it possible to somehow inspect some other command state from the style to make the button red during validation errors?

<!-- Style for all of the nav and save buttons in the datapoints view -->
<Style x:Key="ImageButton" TargetType="Button">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                    x:Name="Border"  
                    BorderThickness="0">
                    <ContentPresenter 
                        Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <SolidColorBrush Color="LightGray"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <SolidColorBrush Color="Gray"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" Value="0.3"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Command" Value="{x:Null}">
            <Setter Property="IsEnabled" Value="False"/>
        </Trigger>
    </Style.Triggers>
</Style>

score 0 · Answer 1 · answered Mar 30 '14 at 18:26

I ended up using a DataTrigger bound to another property on the view model to change the background color, but because I was setting a ControlTemplate in the style, the only way I could figure out to make the DataTrigger apply a background change was to copy the entire style and put the DataTrigger on the Border element in the control template. Since apparently you can't reference a child element from the new ControlTemplate from outside that control template.

<!-- Style for all of the nav and save buttons in the datapoints view -->
<Style x:Key="ImageSaveButton" TargetType="Button">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                x:Name="Border"  
                BorderThickness="0">
                    <Border.Style>
                        <Style TargetType="Border">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding OpenDataPoint.HasValidationError}" Value="True">
                                    <Setter Property="Background" Value="Red"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <ContentPresenter 
                    Margin="2"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    RecognizesAccessKey="True"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <SolidColorBrush Color="LightGray"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <SolidColorBrush Color="Gray"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" Value="0.3"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Command" Value="{x:Null}">
            <Setter Property="IsEnabled" Value="False"/>
        </Trigger>
    </Style.Triggers>
</Style>

How to display validation error in button bound to command

1 Answers1