如何使用 Prism/WPF/MahApps 隐藏按钮的背景？ [复制]

Question

我正在阅读 Brian Lagunas 的 PluralSight 教程中关于使用 Prism 的介绍，因为我仍然想掌握使用 MVVM 的概念。

当上面的CheckBox 启用时，我有一个看起来不错的按钮：

但是，当 Button 不再通过 Prism 的委托命令启用时，我会在按钮周围出现一个窗口。

当Button 被禁用时，如何移除该框？我想改为更改前景以使齿轮图标变为灰色，但现在将决定移除该框。

下面是StackPanel 和我尝试过的代码隐藏

XAML 代码：

<StackPanel HorizontalAlignment="Left" Orientation="Vertical">
   <CheckBox Content="CanExecute" IsChecked="{Binding CanExecute}"></CheckBox>
   <Button  Command="{Binding ClickCommand}" Background="#a9afb8" Height="35" Width="35" BorderThickness="0" ToolTip=" Marks the current work order as complete.">
      <Button.Style>
         <Style TargetType="Button">
            <Style.Triggers>
               <Trigger Property="IsEnabled" Value="True">
                  <Setter Property="Background" Value="#a9afb8"></Setter>
               </Trigger>
            </Style.Triggers>
         </Style>
      </Button.Style>
      <iconPacks:Unicons Width="35" Height="35" Kind="Cog" />
   </Button>
   <TextBlock Text="{Binding Title}"></TextBlock>
</StackPanel>

代码隐藏：

public class ViewAViewModel : BindableBase
{
   private string _title = "ViewAVM";
   public string Title
   {
      get { return _title; }
      set
      {
         SetProperty(ref _title, value);
      }
   }

   private bool _canExecute = false;
   public bool CanExecute
   {
      get { return _canExecute; }
      set
      {
         SetProperty(ref _canExecute, value);
         ClickCommand.RaiseCanExecuteChanged();
      }
   }

   public DelegateCommand ClickCommand { get; private set; }

   public ViewAViewModel()
   {
      ClickCommand = new DelegateCommand(Click, CanClick);
   }

   private bool CanClick()
   {
      return CanExecute;
   }

   private void Click()
   {
      Title = "Clicked";
   }
}

Answer 1

该问题与 MVVM 无关。 WPF 中的控件具有在 XAML 中定义的视觉和逻辑结构，以及这些状态的状态和触发器，以在状态更改时更改控件属性。这是在控件模板中定义的。

在Button 的情况下，有 Pressed、MouseOver 或 Disabled 等状态，仅举几例。所有这些状态都有一个视觉表示。例如，在 Disabled 状态下，Background 将变为浅灰色，并降低不透明度。控件模板中的触发器优先于样式中定义的触发器，因此您需要创建自定义控件模板来更改 Disabled 状态的表示。

由于创建自定义控件模板可能很复杂，您应该复制默认控件模板或控件样式并对其进行调整。请注意，默认模板可能会因您使用的库而异。如果是MahApps.Metro，你可以找到默认的按钮样式和模板here。

您感兴趣的部分是 Disabled 状态的触发器。

<Trigger Property="IsEnabled" Value="False">
   <Setter TargetName="DisabledVisualElement" Property="Opacity" Value="0.7" />
   <Setter TargetName="PART_ContentPresenter" Property="Opacity" Value="0.3" />
</Trigger>

由于您不想更改Background，而是更改Foreground，请像下面这样替换Setter，并将LightGray 颜色调整为您想要的颜色。

<Trigger Property="IsEnabled" Value="False">
   <Setter Property="Foreground" Value="LightGray"/>
</Trigger>

如果你也想改变其他状态，你可以用同样的方法。这是整个风格：

<Style x:Key="MyButtonStyle" TargetType="{x:Type ButtonBase}">
   <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Gray10}" />
   <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Button.Border}" />
   <Setter Property="BorderThickness" Value="1" />
   <Setter Property="Controls:ControlsHelper.ContentCharacterCasing" Value="Upper" />
   <Setter Property="Controls:ControlsHelper.CornerRadius" Value="3" />
   <Setter Property="Controls:ControlsHelper.FocusBorderBrush" Value="{DynamicResource MahApps.Brushes.Button.Border.Focus}" />
   <Setter Property="Controls:ControlsHelper.FocusBorderThickness" Value="2" />
   <Setter Property="Controls:ControlsHelper.MouseOverBorderBrush" Value="{DynamicResource MahApps.Brushes.Button.Border.MouseOver}" />
   <Setter Property="FontFamily" Value="{DynamicResource MahApps.Fonts.Family.Button}" />
   <Setter Property="FontSize" Value="{DynamicResource MahApps.Font.Size.Button}" />
   <Setter Property="FontWeight" Value="Bold" />
   <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ThemeForeground}" />
   <Setter Property="MinHeight" Value="25" />
   <Setter Property="Padding" Value="5 6" />
   <Setter Property="SnapsToDevicePixels" Value="True" />
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type ButtonBase}">
            <Grid>
               <Controls:ClipBorder x:Name="Border"
                                             Background="{TemplateBinding Background}"
                                             BorderBrush="{TemplateBinding BorderBrush}"
                                             BorderThickness="{TemplateBinding BorderThickness}"
                                             CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
               <Controls:ClipBorder x:Name="DisabledVisualElement"
                                             Background="{DynamicResource MahApps.Brushes.Control.Disabled}"
                                             CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
                                             IsHitTestVisible="False"
                                             Opacity="0"
                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
               <Controls:ContentControlEx x:Name="PART_ContentPresenter"
                                                   Margin="{TemplateBinding BorderThickness}"
                                                   Padding="{TemplateBinding Padding}"
                                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                   Content="{TemplateBinding Content}"
                                                   ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.ContentCharacterCasing)}"
                                                   ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                   ContentTemplate="{TemplateBinding ContentTemplate}"
                                                   ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                                   RecognizesAccessKey="{TemplateBinding Controls:ControlsHelper.RecognizesAccessKey}"
                                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="IsMouseOver" Value="True">
                  <Setter TargetName="Border" Property="Background" Value="{DynamicResource MahApps.Brushes.Gray8}" />
                  <Setter TargetName="Border" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.MouseOverBorderBrush), Mode=OneWay}" />
               </Trigger>
               <Trigger Property="IsPressed" Value="True">
                  <Setter TargetName="Border" Property="Background" Value="{DynamicResource MahApps.Brushes.Gray7}" />
               </Trigger>
               <Trigger Property="IsKeyboardFocusWithin" Value="True">
                  <Setter TargetName="Border" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.FocusBorderBrush), Mode=OneWay}" />
                  <Setter TargetName="Border" Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.FocusBorderThickness), Mode=OneWay}" />
               </Trigger>
               <Trigger Property="IsEnabled" Value="False">
                  <Setter Property="Foreground" Value="LightGray"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

您可以应用Style和控制模板like below or apply it implicitly：

<Button Style="{StaticResource MyButtonStyle}" ...>
   <iconPacks:Unicons Width="35" Height="35" Kind="Cog" />
</Button>

如果您想了解更多关于控件的状态和结构的信息，可以参考 MSDN 上的文档，例如 Buttonhere。但是，那里的示例可能不完整或有点过时。