Question

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

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

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

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

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

1 个答案: