Changing color rectangle inside button wpf

Question

I am trying to achieve something that's driving me nuts, it partially works, but I can't achieve the same results that I did on my old Winforms project(I am trying to learn WPF and move away from Winforms).

I am trying to paint a Button if I place the mouse over it, so it change the background color and add a yellow rectangle on the left like this:

I tried to create with much difficulty a Styled button that partially do the job, it changes the background color but I can't figure out how to paint the yellow rectangle

<Style x:Key="MenuButton" TargetType="Button">
    <Setter Property="Button.Background" Value="#525864"/>
    <Setter Property="Button.Foreground" Value="#ffffff" />
    <Setter Property="Button.BorderThickness" Value="0"/>
    <Setter Property="Button.Margin" Value="10,0,0,0"/>
    <Setter Property="Button.Height" Value="40"/>
    <Setter Property="Button.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            **
            <Setter Property="Rectangle.Fill" Value="#f0e68c"/> **
            <Setter Property="Button.Background" Value="#737b8c"/>
        </Trigger>
    </Style.Triggers>
</Style>

From the main Window I created the button like this:

<Button Style="{StaticResource MenuButton}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Width="10"/>
        <TextBlock Grid.Column="1" Text="Comparador Archivos" Margin="5,0,0,0" 
                   HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <Image Grid.Column="2" Margin="5" Source="/Imagenes/icono_comparar.png"/>
    </Grid>
</Button>

Answer 1

Cant you just change the fill hex so one of these

<Setter TargetName="rec" Property="Fill" Value="#f0e68c"/> <Setter Property="Background" Value="#737b8c"/> Change the hex of Value="#hexcode" Tell me if it works

Answer 2

Because the Content in the ContentPresenter is set on the UI, the style does not know the existence of the Rectangle. Therefore, to access the Rectangle, you need to insert <Grid> ~ </Grid> directly instead of <ContentPresenter/>.

And in Style.Trigger, objects in the ControlTemplate is not accessible. Therefore, it must be processed within ControlTemplate.Triggers.

By giving x:name to the Rectangle, internal properties can be accessed in Trigger.

<Style x:Key="MenuButton" TargetType="Button">
    <Setter Property="Background" Value="#525864"/>
    <Setter Property="Foreground" Value="#ffffff" />
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Margin" Value="10,0,0,0"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="rec" Grid.Column="0" Width="10"/>
                        <TextBlock Grid.Column="1" Text="Comparador Archivos" Margin="5,0,0,0" 
                                   HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <Image Grid.Column="2" Margin="5" Source="/Imagenes/icono_comparar.png"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="rec" Property="Fill" Value="#f0e68c"/>
                        <Setter Property="Background" Value="#737b8c"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Button Style="{StaticResource MenuButton}"/>