鼠标移动Wpf按钮改变颜色

本文关键字:改变 变颜色 按钮 Wpf 移动 鼠标 | 更新日期: 2023-09-27 18:06:44

我正在尝试创建一个按钮模板。一切正常,除了当我将鼠标移动到按钮上时,文本的颜色应该变为白色。xml代码:

  <!--Control colors.-->
    <Color x:Key="ControlNormalColor">#FFFFFF</Color>
    <Color x:Key="ControlMouseOverColor">#999999</Color>
    <Color x:Key="DisabledControlColor">#FFFFFF</Color>
    <Color x:Key="DisabledForegroundColor">#999999</Color>
    <Color x:Key="ControlPressedColor">#999999</Color>
    <!-- FocusVisual -->
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Button -->
    <Style TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
        <Setter Property="MinHeight" Value="29px" />
        <Setter Property="MinWidth"  Value="103px" />
        <Setter Property="FontFamily" Value="Century Gothic" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="Foreground" Value="#999999" />
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border">
                        <Border.Background>
                            <SolidColorBrush  Color="{DynamicResource ControlNormalColor}" />
                        </Border.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5" />
                                    <VisualTransition GeneratedDuration="0" To="Pressed" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter Margin="2"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    RecognizesAccessKey="True" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我的问题,我必须做什么才能让按钮中的文本在鼠标悬停时变为白色?这个代码是从网上复制的。我是WPF世界的新手。虽然我大致理解这段代码中发生的事情,但我对WPF的了解还是有限的。

鼠标移动Wpf按钮改变颜色

你必须在MouseOver VisualState中添加一个ColorAnimationUsingKeyFrames来改变鼠标悬停发生时的前景色,你可以使用下面提到的代码

 <Color x:Key="ControlNormalColor">#FFFFFF</Color>
    <Color x:Key="ControlMouseOverColor">#999999</Color>
    <Color x:Key="DisabledControlColor">#FFFFFF</Color>
    <Color x:Key="DisabledForegroundColor">#999999</Color>
    <Color x:Key="ControlPressedColor">#999999</Color>
    <!-- FocusVisual -->
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Button -->
    <Style TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
        <Setter Property="MinHeight" Value="29px" />
        <Setter Property="MinWidth"  Value="103px" />
        <Setter Property="FontFamily" Value="Century Gothic" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="Foreground" Value="#999999" />
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border">
                        <Border.Background>
                            <SolidColorBrush  Color="{DynamicResource ControlNormalColor}" />
                        </Border.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5" />
                                    <VisualTransition GeneratedDuration="0" To="Pressed" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                    Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                    Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlNormalColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                    Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                    Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                    Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter Margin="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RecognizesAccessKey="True" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

通过在样式中使用触发器,我们可以得到它。当鼠标悬停时,我们可以在setter

中设置背景颜色
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                 <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="DarkGoldenrod"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>