根据背景颜色更改按钮的鼠标悬停颜色答案

【问题标题】：Changing a button's mouse hover color BASED ON the background color根据背景颜色更改按钮的鼠标悬停颜色
【发布时间】：2015-07-10 18:27:32
【问题描述】：

我一直试图弄清楚如何更改按钮的悬停颜色，我找到了this：

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

默认按钮背景颜色：灰色

我点击它，按钮的背景颜色会变成红色。悬停颜色应更改为粉红色。

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

这可能在标记和代码后面吗？怎么样？

【问题讨论】：

标签： c# wpf

【解决方案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;
    }

当你点击它时，它会改变背景颜色，并在鼠标悬停时同时改变颜色。

【讨论】：

【解决方案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 的颜色，一切都会自动调整。

【讨论】：