Question

我使用以下代码创建了一个圆角按钮。

<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>

当鼠标悬停时，我需要使这个按钮有点大。我搜索了这个社区和谷歌。但我找不到办法去做。

Answer 1

当鼠标悬停在按钮上时，您需要在渲染时应用ScaleTransform 样式触发器是一种方法：

MouseEnter

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

Answer 2

在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>

我只是通过Trigger访问Button.Style然后更改属性。

Answer 3

更重要的是，在改变xaml控件的方面时，你可以做两件事：

1：更改其状态：每个控件都有一组状态（悬停，释放，按下，...）附加到属性（背景颜色，渲染大小，...）绑定上课。根据您尝试修改的控件，您可以通过修改子项的参数（让我们说明椭圆的大小，在按钮内）来改变很多事情。

2：制作自定义动画：换句话说，它被称为故事板，您可以在其中定义动画键。这些动画由触发器启动，非常有用，因为它们不仅仅是两个状态之间的简单插值，而是一个真实的动作设计。

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

WPF - 在鼠标悬停时使圆形按钮变大

3 个答案: