Change color of subelements by mouseover

Question

I have the following Window bar with four buttons and one image (a littlebit like ribbon):

enter image description here

this is the code (XAML) and the code behind (in C#) is not interesting :

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Focusable="False"
    Click="SaveClicked" Margin="10, 0">
    <StackPanel Orientation="Horizontal" >
        <Image x:Name="ImageSave" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="20"
           Source="images/titlebar/SaveIconWhite.png" Margin="0,0,0,5" />
        <Label x:Name="LbSave" Content="Save" VerticalAlignment="Stretch" FontSize="14"
           HorizontalAlignment="Left" Foreground="White" />
    </StackPanel>
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <ContentPresenter Content="{TemplateBinding Content}"/>
        </ControlTemplate>
    </Button.Template>
</Button>

The code is nearly the same for the other buttons.

The buttons feel a littlebit unhandy because they have no mouseover effects. I would like to implement a color change of the labels when the mouse is over the buttons. a change of the images for file load and save would be great too, but i think i am able to do it myself when i know how to implement the mouse over color change of the label.

under normal conditions i'd try to archieve a mouse over color change with these code:

<Button.Style>
     <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
       <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="DarkGoldenrod"/>
          </Trigger>
       </Style.Triggers>
     </Style>
 </Button.Style>

But this does not work, because i already have the Button.Template and i am also a littlebit confused about the Button.Template at all (haven't understood it - only copied..). How is the Button.Template working and what is it usage?

Is anybody able to give me a hint in the right direction?

Take a look at [Visual States](https://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager(v=vs.110).aspx), which would be defined at the top level element of your Button Template. — Clemens, Jun 27 '15 at 08:03
@Clemens found this link few seconds ago. i will have a look at this. — Jens, Jun 27 '15 at 08:07

M.kazem Akhgary · Answer 1 · 2015-06-27T07:54:23.163

0

We have MouseEnter and MouseLeave Events.

Use MouseEnter to Change the Color When Mouse is inside control.

Use MouseLeave to Change back the Color When Mouse comes out of the control.

edited Jun 27 '15 at 07:54

answered Jun 27 '15 at 07:52

M.kazem Akhgary

18,645
8
57
118

Yeah sure this is an option, but i'd like to know how to archieve this in XAML. – Jens Jun 27 '15 at 07:54
im not saying not to use xaml. but at this point i guess codebehind is easier. however thats your choice. @JensHorstmann – M.kazem Akhgary Jun 27 '15 at 08:09
i agree. but because this does not answer the question in XAML i can't accept it as best answer. – Jens Jun 27 '15 at 08:19

score 0 · Answer 2 · answered Jun 27 '15 at 08:18

Never Used but Put Trigger inside ControlTemplate of button: Something Like This:

<Button.Template>
        <ControlTemplate TargetType="Button">
            <ContentPresenter Content="{TemplateBinding Content}"/>
        <ControlTemplate.Triggers>
           <Trigger Property="Button.IsMouseOver" Value="True">
             <Setter TargetName="buttonLabel" Property="Foreground" Value="Red"/>
           </Trigger>
         </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

and How is the Button.Template working and what is it usage? visit the link below http://www.codeproject.com/Articles/84630/WPF-Customize-your-Application-with-Styles-and-Con

https://msdn.microsoft.com/en-us/library/cc295273.aspx Hope it may help you.

Change color of subelements by mouseover

2 Answers2