如何顯示按鈕綁定到命令的驗證錯誤

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是假的風格，是否有可能以某種方式從風格檢查其他一些指示狀態中，使按鈕紅色驗證錯誤？

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