基於改變背景顏色

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的顏色，一切都會自動調整。