使鼠标悬停时圆角按钮变大

本文关键字：按钮 圆角 鼠标 悬停 | 更新日期: 2023-09-27 18:10:58

我用下面的代码创建了一个圆角按钮。

<Button Width="100"
        Height="100">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Stroke="Black"
                         StrokeThickness="2">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Offset="0"
                                          Color="Lime" />
                            <GradientStop Offset="1"
                                          Color="Lime" />
                            <GradientStop Offset="1"
                                          Color="Gold" />
                            <RadialGradientBrush.Transform>
                                <TransformGroup>
                                    <ScaleTransform ScaleY="0.65" />
                                </TransformGroup>
                            </RadialGradientBrush.Transform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

我需要使这个按钮在鼠标悬停时稍微大一点。我搜索了这个社区和谷歌也。

使鼠标悬停时圆角按钮变大

您需要在渲染时应用ScaleTransform，当鼠标在按钮上时
样式触发器就是这样做的:

    <Button Width="100" Height="25" Content="Press me!">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

注意，您必须将RenderTransformOrigin更改为从中心而不是左上角缩放

在WPF中，没有"鼠标悬停"事件，但如果"鼠标悬停"也可以，我应该能够帮助我的答案。我只是不能在代码中测试，但这里应该是你的问题的解决方案:

<Button Width="100" Height="100">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Stroke="Black"
                         StrokeThickness="2">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Offset="0"
                                          Color="Lime" />
                            <GradientStop Offset="1"
                                          Color="Lime" />
                            <GradientStop Offset="1"
                                          Color="Gold" />
                            <RadialGradientBrush.Transform>
                                <TransformGroup>
                                    <ScaleTransform ScaleY="0.65" />
                                </TransformGroup>
                            </RadialGradientBrush.Transform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Height" Value="150"/>
                    <Setter Property="Width" Value="150"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

我只是通过Button.Style访问Trigger，然后改变那里的属性。

此外，在更改xaml控件的方面时，您可以做两件事:

1: 改变它的状态:每个控件都有一组状态(悬停，释放，按下，…)附加到属性(背景颜色，渲染大小，…)绑定到它的类。根据您要修改的控件的不同，您可以通过修改子项的参数(比如按钮中Ellipse的大小)来更改许多内容。

2: 制作自定义动画:换句话说，它被称为故事板，在那里你定义动画键。由触发器启动的这些动画非常有用，因为它们不仅仅是两种状态之间的简单插值，而是真正的运动设计。

对于这两种技术，您可能必须为按钮修改或创建自己的控件模板。

相关文章：