如何在绑定到命令的按钮中显示验证错误答案

【问题标题】：How to display validation error in button bound to command如何在绑定到命令的按钮中显示验证错误
【发布时间】：2014-05-09 07:23:00
【问题描述】：

我正在开发一个应用程序并试图坚持使用 MVVM 模型，我有一个按钮，它只是绑定到一个命令。目前，当命令设置为 CanExecute false 时，可以启用/禁用该命令并灰显按钮。但我想添加在按钮上显示验证错误的功能（通过将其颜色更改为红色，可能显示工具提示）。

验证当前已显示在 UI 中的另一个位置，但用户对按钮已启用而感到恼火，他们单击它只是为了弹出一个消息框告诉他们不应单击该按钮，因为存在验证错误。但是只是完全禁用按钮而不告诉他们为什么会让用户感到困惑（因为他们忽略了屏幕底部的大红色验证错误）。那么如何在保存按钮上显示更多信息呢？

这是我当前的按钮 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>

当 IsEnabled 为 false 时更改其外观的样式是否可以通过某种方式检查样式中的其他命令状态以在验证错误期间使按钮变为红色？

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

【问题讨论】：

标签： c# wpf mvvm relaycommand

【解决方案1】：

我最终使用绑定到视图模型上的另一个属性的 DataTrigger 来更改背景颜色，但是因为我在样式中设置了 ControlTemplate，所以我想出让 DataTrigger 应用背景更改的唯一方法是复制整个样式并将 DataTrigger 放在控件模板中的 Border 元素上。因为显然您不能从该控件模板外部引用新 ControlTemplate 中的子元素。

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

【讨论】：