基于改变背景颜色

Question

我一直在试图找出如何改变按钮的悬停颜色按钮的鼠标悬停颜色，我发现this：

但是，这仅仅是我想要的一半实现。我想根据当前背景颜色更改悬停颜色。即

默认按钮背景颜色：灰色

我点击它和按钮的背景颜色就会变成红色。悬停颜色应该变成粉红色。

我再次单击它，按钮的背景颜色将变为绿色。悬停颜色应该变成浅绿色。

这是可能的标记和代码后面？怎么样？

Answer 1

XAML：

<Button Content="Color change" Background="{Binding BackGround}" Command="{Binding ButtonPressedCommand}"> 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Border Name="Border" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background, Mode=OneWay}"> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" TargetName="Border" 
           Value="{Binding BackGroundOnHover}"/> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="False"> 
         <Setter Property="Background" TargetName="Border" 
           Value="{Binding BackGround}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 

视图模型：

class MainViewModel : INotifyPropertyChanged 
    { 
     private Brush _backGround = new SolidColorBrush(Colors.Red); 

     public Brush BackGround 
     { 
      get { return _backGround; } 
      set 
      { 
       _backGround = value; 
       OnPropertyChanged(); 
      } 
     } 

     private Brush _backGroundOnHover; 
     public Brush BackGroundOnHover 
     { 
      get 
      { 
       if (_backGroundOnHover == null) 
        SetHoverBackGround(); 
       Debug.WriteLine(((SolidColorBrush)_backGroundOnHover).Color.R); 
       return _backGroundOnHover; 
      } 
      set 
      { 
       _backGroundOnHover = value; 
       OnPropertyChanged(); 
      } 
     } 

     private RelayCommand _buttonPressedCommand; 

     public RelayCommand ButtonPressedCommand 
     { 
      get 
      { 
       return _buttonPressedCommand ?? 
         (_buttonPressedCommand = new RelayCommand(SetBackgroundWhenButtonPressed)); 
      } 
     } 

     private void SetBackgroundWhenButtonPressed() 
     { 
      var color = ((SolidColorBrush)BackGround).Color; 
      BackGround = new SolidColorBrush(Color.FromRgb((byte)(color.R - 5), color.G, color.B)); 
      SetHoverBackGround(); 
     } 

     private void SetHoverBackGround() 
     { 
      var color = ((SolidColorBrush)BackGround).Color; 
      BackGroundOnHover = new SolidColorBrush(Color.FromRgb((byte)(255-color.R), color.G, color.B)); 
     } 


     public void OnPropertyChanged([CallerMemberName] string propertyName = null) 
     { 
      if (PropertyChanged != null) 
       PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
     } 

     public event PropertyChangedEventHandler PropertyChanged; 
    } 

每当你点击它改变背景颜色和颜色的同时，当鼠标悬停。

Answer 2

纯粹在XAML中的按钮样式。

首先定义两个SolidColorBrush一个继承另一个color，但第二刷的不透明度被定义。

<Window.Resources> 
    <SolidColorBrush x:Key="ButtonBrush" Color="red" /> 
    <SolidColorBrush x:Key="shadedButtonBrush" Color="{Binding Source={StaticResource ButtonBrush}, Path=Color}" Opacity="0.5" /> 


    <Style TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border x:Name="custBorder" Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="custBorder" Property="Background" Value="{StaticResource shadedButtonBrush}" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 



    <Button Background="{StaticResource ButtonBrush}"> 
     Button 
    </Button> 

如果你想改变按钮的颜色，只需改变ButtonBrush的颜色，一切都会自动调整。