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

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

2 个答案: