Button Style when mouse stay on

Question

Hi,

  I applied the style to the button when the mouse over, i want to retain the same color(Orange) when the mouse stay on that button. how i can achieve it. This is my sample code

<Window.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Orange"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="StyleButton"  Height="22" Width="80" Style="{StaticResource buttonStyle}"/>
    </StackPanel>

 

Answer 1

Hi Udaya,

Please see the below code snippet for ur issue.

<Window x:Class="SandBox.Window24"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window24" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="MyStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border 
            x:Name="Border"  
            CornerRadius="2" 
            BorderThickness="1"
                            Background="#FF71A8D6"
                            BorderBrush="Black"
            >
                            <ContentPresenter 
              Margin="2"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="Orange" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button x:Name="btn" Height="25"  Width="150" Content="Button" Style="{StaticResource MyStyle}" ></Button>
        </StackPanel>
    </Grid>
</Window>

Here we are setting our own control template for the button thus overriding the default template. In ur code there isn't any issues however since u want to change the color on MouseOver = true then u need to override default style of button.

Ur code works perfectly fine if u set Value = False.

Please mark it as an answer if it resolves ur issue!

---

Regards, Parth Shah

Answer 2

Hi Parth,

    When i apply your logic, it's fine when my button's content is text, but in case my button's content is image, at that time your style is not working, how i can solve those problems

<Window.Resources>
        <Style x:Key="buttonStyle1" TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Orange"/>
                </Trigger>                
            </Style.Triggers>            
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button  Margin="10" Height="20" Width="20" Style="{StaticResource buttonStyle1}">            
            <Button.Content>
                <Image Source="/StyleDemo;component/Images/broadcast_small.png" Height="10" Width="10"/>
            </Button.Content>
        </Button>
    </StackPanel>

 

Answer 3

Hi Udaya,

I tried the same thing that u said i.e. setting content of a button to image. However, everything works fine for me.

Please check the code snippet below for the same.

<Window x:Class="SandBox.Window27"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window27" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="MyStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border 
            x:Name="Border"  
            CornerRadius="2" 
            BorderThickness="1"
                            Background="#FF71A8D6"
                            BorderBrush="Black"
            >
                            <ContentPresenter 
              Margin="2"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="Orange" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button x:Name="btn" Height="50"  Width="200" Style="{StaticResource MyStyle}" >
                <Button.Content>
                    <Image Source="D:\demoprojects\SandBox\SandBox\Images\Orange.jpg" Height="25" Width="100" ></Image>
                </Button.Content>
            </Button>
        </StackPanel>
    </Grid>
</Window>

I am also attaching the Orange.jpg image so that u can staright away try this out.

Above is the image. Please try this out.

One more thing the code snippet that u posted in the earlier post doesn't implement the controltemplate.

Please mark it as an answer if it resolves ur issue.

---

Regards, Parth Shah