WPF - make rounded button larger in mouse hover

Question

I have created a rounded button using following code.

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

I need to make this button little bit large when mouse hover. I searched on this community and Google also. But I could not find a way to do it.

Answer 1

You need to apply ScaleTransform on rendering, when mouse is over the button.
Style triggers is a way to do this:

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

Note, that you must change RenderTransformOrigin to scale from center instead of top left corner.