Visual Feedback for custom button in WPF

Question

I have a custom button in my main window that I would like to have the ability to provide some visual feedback to the user when it is clicked, and when the mouse hovers over it. I use the RadialGrandientBrush to color my button. I would like to continue using it in these events, but I don't know how to implement it inside a trigger.

Here is my current code:

   <Button Width="100"
        Height="100" Click="Button_Click_1">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black"
                         StrokeThickness="1">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0"
                                          Color="White" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--- THIS IS WHERE I NEED TO USE THE RADIALGRADIENTBRUSH AGAIN -->
                        <Setter ........ />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

</Window>

How do I use a brush, such as RadialGradientBrush as a setter, inside a trigger?

Thank you.

Answer 1

You can name your Ellipse in the control template using x:Name and access it by using TargetName property on the Setter in the triggers section.

Sample code is below:

<Button Width="100"
        Height="100" >
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black" x:Name="ellipse"
                         StrokeThickness="1">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0"
                                          Color="White" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ellipse" Property="Fill">
                                <Setter.Value>
                                <RadialGradientBrush>
                                <GradientStop Offset="0"
                                          Color="White" />
                                <GradientStop Offset="1"
                                          Color="LightGreen" />
                                <GradientStop Offset="1"
                                          Color="Green" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

Ideally, you should use VisualStateManager to achieve this.

Refer to this MSDN Walkthrough about Customizing the Appearance of a Button by Using a ControlTemplate and VisualStateManager