Change particular button Background color on Mouse over in xaml wpf

Question

I am struggling with the issue for last three days. I have to change particular Button background color on mouse over and Button Content should be delete, But i got issue that all button changed if i am hovering of button. I put my design In resource dictionary Below is my design code

<VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="MouseOver">
                  <Storyboard>`<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaseShape" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonHoverBackgroundBrush}" />
                         </ObjectAnimationUsingKeyFrames>
                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaseShape" Storyboard.TargetProperty="BorderBrush">
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonHoverBorderBrush}" />
        </ObjectAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonHighlight" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1" />
                     </DoubleAnimationUsingKeyFrames>
                 </Storyboard>
          </VisualState> </VisualStateGroup></VisualStateManager.VisualStateGroups>'
                             <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="{StaticResource DisabledBackgroundBrush}" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />

<Button Content="delete" Name="xyz" Width="70"Margin="0,65,59,4" HorizontalAlignment="Right">      
           </Button>`

and Xaml File with design is and i need fix only design side not in code behind

Answer 1

I'm assuming by "Button background color on mouse over and Button Content should be delete" you mean that you want to change the colour and hide the content while your mouse is over the button. If so, why don't you do something like this

    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Blue"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="SkyBlue"/>
                <Setter Property="Foreground" Value="SkyBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>

While it doesn't delete the content it sets the foreground and background to the same colour so it is hidden from the user.

Edited to address your comments

You seem to be trying to use a DataTrigger; as this answer suggests Triggers are ideal for making changes on things like OnMouseOver and DataTriggers are ideal for making changes on data changes. So unless I'm missing something, you should be using a Trigger not a DataTrigger.

An obvious solution to your style-variation problem is to create a default style with most of your styling in and then a second style that overrides the changing elements. In this case your second style would give it the "hide my text on mouse over" behaviour.

Your default style could be something like this

<Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Trigger>
    </Style.Triggers>
</Style>

And your second style could be something like this

<Style x:Key="ButtonHideTextOnMouseOverStyle" BasedOn="{StaticResource ButtonDefaultStyle}" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>
</Style>

Then you'd use them like this

<Button Content="First Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Second Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Delete" Style="{StaticResource ButtonHideTextOnMouseOverStyle}"/>

In the ButtonDefaultStyle cases the white text on a blue background is changed to blue text on a white background on mouse over. In the ButtonHideTextOnMouseOverStyle case the white text on a blue background is changed to white text on a white background on mouse over.

The full example is here

<Window x:Class="Button_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Button_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="Foreground" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="ButtonHideTextOnMouseOverStyle" BasedOn="{StaticResource ButtonDefaultStyle}" TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBlock Text="Buttons"/>
        <Button Content="First Button" Style="{StaticResource ButtonDefaultStyle}"/>
        <Button Content="Second Button" Style="{StaticResource ButtonDefaultStyle}"/>
        <Button Content="Delete" Style="{StaticResource ButtonHideTextOnMouseOverStyle}"/>
    </StackPanel>
</Window>