WPF C# How to make button highlight when hovered over using a Template-CodePudding

        <Button x:Name="ButtonEquals" Grid.Column="4" Grid.Row="6" Width="47" Height="47"
            Content="=" Foreground="White"
            BorderBrush="{x:Null}" Background="#FFFF9500">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Fill="#FFFF9500"/>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

Recently started WPF and am very new to Xaml, I'm trying to make a calculator that looks similar to the IOS one however after I changed the button to ellipse, the highlighting when hovered over or clicked on stopped working, if also the highlighting issue were to be fixed, how would I go about changing the colour of it?

CodePudding user response：

You need to create Style of button instead Template. Button's template you can set inside style (read more about Style in WPF):

        <Button x:Name="ButtonEquals"
                Grid.Column="4"
                Grid.Row="6"
                Width="47"
                Height="47"
                Content="=">
            <Button.Style>
                <Style TargetType="Button">
                    <!-- Here is properties for buttons with same style-->
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="BorderBrush" Value="{x:Null}"/>
                    <Setter Property="Background" Value="#FFFF9500"/>
                    
                    <!-- Here is your template -->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Ellipse Fill="{TemplateBinding Background}"/>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    
                    <!-- Here is style triggers for interact with button -->
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!-- Set color as you wish -->
                            <Setter Property="Background" Value="LightSalmon"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

But actually, you need to create global ResourceDictionary (read about it) and there set styles for all buttons like <Style x:Key="CalculatorButton"> for set to buttons like <Button Content="1" Style="{StaticResource CalculatorButton}"/>