How to change Button Color On Mouse Hover

Question

I am new In XAML. I have my styling in Resources File and that style will automatically be applied to All Button in my application. But some scenario has been changed and what I have to do is if any delete button in application exist change mouse hover color to white other button mouse hover color remains same. I tried but mouse hover event change all the button background color but what I want is only Delete Button color should change I need only design side

Before Mouse Hover

after Mouse Hover

My Code is:

<Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="3" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="BorderThickness" Value="2">
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="DELETE">
                <Setter Property="Background" Value="#990000"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
                <Setter Property="Background" Value="#990000"></Setter>
            </DataTrigger>

            <DataTrigger Binding="{Binding ElementName=delete,  Path=IsMouseOver}" Value="True">
                <Setter Property="Background" Value="White"/>

                <Setter Property="BorderBrush" Value="Red"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

<Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button">
        <Setter Property="FontSize" Value="16"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                         <Border x:Name="BaseShape" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                        <Rectangle x:Name="ButtonHighlight" Margin="1" RadiusX="9" RadiusY="9" Stroke="{StaticResource ButtonHoverHighlightBorderBrush}" StrokeThickness="1" Grid.ColumnSpan="2" Opacity="0" />
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Rectangle x:Name="FocusedVisualElement" Stroke="{StaticResource ButtonFocusedBorderBrush}" StrokeThickness="1"  RadiusX="10" RadiusY="10" Opacity="0" />
                        <Rectangle x:Name="DisabledVisualElement" Fill="Chartreuse" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<Grid>
    <Button Content="Delete" Name="delete" Width="50" Height="50" HorizontalAlignment="Right" Margin="0,70.121,170.028,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    <Button x:Name="button" Content="Kii" Width="50" Height="50" HorizontalAlignment="Left" Margin="186.349,70.121,0,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    <Button x:Name="button1" Content="ZeKiillo" Width="50" Height="50" HorizontalAlignment="Left" Margin="82.075,70.121,0,0" VerticalAlignment="Top"></Button>
</Grid>

Peter · Answer 1 · 2017-06-26T11:22:16.120

Go like this:

        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Green" />
            <Setter Property="BorderBrush" Value="Blue" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="BorderThickness" Value="2">
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
                    <Setter Property="Background" Value="#990000"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
                    <Setter Property="Background" Value="#990000"></Setter>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding
                                   RelativeSource={
                                   RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}},
                                   Path=IsMouseOver}" Value="True"/>
                        <Condition Binding="{Binding Content}" Value="Delete"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

MultiDataTrigger with RelativeResource solves here

Actually above code is working for all Button That's fine But my question is how to change Background color on mouse hover when content is Delete — Vaibhav Srivastava, Jun 26 '17 at 10:41
Thank you its working as per my requirements..And also i got good answer from mm8 ..Thank you — Vaibhav Srivastava, Jun 26 '17 at 13:50
@Astin Martin: You can only accept *one* answer but when you have a reputation of 15+, you can upvote several answers: https://stackoverflow.com/help/privileges/vote-up. — mm8, Jun 26 '17 at 15:08
I did not accept this answer @MM8 i accepted only yours and i gave a comment for this answer ..But i used your answer — Vaibhav Srivastava, Jun 27 '17 at 05:57

score 0 · Accepted Answer · answered Jun 26 '17 at 10:18

You could use a MultiTrigger that checks both the IsMouseOver and the Content property:

<Style x:Key="BaseButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Padding" Value="3" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="BorderThickness" Value="2">
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
            <Setter Property="Background" Value="#990000"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
            <Setter Property="Background" Value="#990000"></Setter>
        </DataTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="Content" Value="Delete" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderBrush" Value="Red"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

Remember that the values are case-sensitive. "DELETE" is not the same value as "Delete".

It works fine for me so you are obviously doing something wrong. Please provide a *full* repo of your issue: https://stackoverflow.com/help/mcve — mm8, Jun 26 '17 at 10:40
Thank you so much it worked for me...Can you please tell me what is wrong in my code/..... — Vaibhav Srivastava, Jun 26 '17 at 10:52
You are not using a *Multi*Trigger. Please accept the answer if your issue has been solved and then ask a new question if you have another issue: https://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow — mm8, Jun 26 '17 at 10:54
Sir How to accept answer i m new In Stack Over flow ....So you meant that multidatatrigger is not good for this condition — Vaibhav Srivastava, Jun 26 '17 at 10:57
There is no need to use a Multi*Data*Trigger when you want to check the value of two properties of the Button Control itself. — mm8, Jun 26 '17 at 11:00

How to change Button Color On Mouse Hover

2 Answers2