Develop Reference

How can I apply style based on a trigger property to a content control?

In the current WPF application that I am working on, I have to invert the color of an icon when the mouse is pressed on (when property isPressed=true ). The reason why I need to do is I want to keep the consistency of the application with regard to the icon color and background. But this icon is embedded within a button which when clicked displays a similar color and hence the icon is not visible
As my style trigger picks up the red color that I have set but the color of the geometry is not changed. Is there any way I can use this style trigger to set the color of the geometry also to Red when (isPressed=true)?
Here is my code
My Style is as follows
<Style x:Key="ButtonBackground" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red" />
<Setter Property="Content" Value="yellow" />
</Trigger>
</Style.Triggers>
</Style>
I tried setting a setter property to content as yellow just to see if it works but it did not work
The part where it is being used is as follows
<Border BorderBrush="{StaticResource ContentBackground}" BorderThickness="0,0,0,1">
<Button
x:Name="NameButton"
Style="{StaticResource ButtonBackground}"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<ContentControl x:Name="Icon"
Width="25"
Height="25"
">
</ContentControl>
<TextBlock Text="{Binding Name}"
"/>
</StackPanel>
</Grid>
</Button>
</Border>
As shown in the images as well the style is picked up by the textblock but I do not know how I can add this style to the contentcontrol which has the icons
Edit :- Example of icon specified in the application
<DataTemplate x:Key="FolderIcon">
<Path
Fill="#047F89"
Data="....."/>
</DataTemplate>

You have to bind the Fill property of the Path to the parent Control element's Control.Foreground (or Button.Foreground) instead of setting it directly. Now the icon color will adapt to the Foreground value assigned by the trigger. I also removed the redundant Grid of the Button.Content and the Content Setter of the Trigger as it would remove the icon Path element every time the Button is pressed and added the default Forground value to the Style (moved from Path.Fill to Style-Setter):
<Style x:Key="ButtonBackground" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="#047F89" />
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
<Button x:Name="NameButton"
Style="{StaticResource ButtonBackground}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Path Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Control}, Path=Foreground}"
Height="16"
Width="16"
Stretch="Uniform"
VerticalAlignment="Center"
Margin="5,0,0,0"
Data="....."/>
<TextBlock Text="{Binding Name}"
TextTrimming="WordEllipsis"
VerticalAlignment="Center"
Margin="5,0,0,0"/>
<StackPanel>
<Button.Content>
</Button>
The Binding on Path.Fill would still work in case you decide to move the Path to a ResourceDictionary.

Change color of subelements by mouseover

I have the following Window bar with four buttons and one image (a littlebit like ribbon):
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?

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.

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.

How to Change ContentControl `s Content on Toggle Button IsChecked Proprrty

Currently i am working on Changing the Content ( as image) of a container on toggle button IsChecked Proprty.
So i thought ContentControl would be a nice choice for a container. But i am not able to figure out how to achieve the result.
I created a resource of images in windows.resource
<Image Source="Resources/Desert.jpg" x:Key="image1"/>
<Image Source="Resources/Koala.jpg" x:Key="image2"/>
<Image Source="Resources/Lighthouse.jpg" x:Key="image3"/>
<Image Source="Resources/Chrysanthemum.jpg" x:Key="image4"/>
So i thought to Use the above resource to change the Content Property of a ContentControl by changing the ControlTemplate proprty by using Triggers where SourceName as (ToggleButton) and TargetName as (ContentControl) but its not working
SO how can I change the content of a ContentControl on toggleButton Ischeck property.
Edit
<ContentControl BorderBrush="Black" Name="cc">
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger SourceName="ToggleButton" Property="IsChecked" Value="True">
<Setter TargetName="cc" Property="Content" Value="{StaticResource image1}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ContentControl>
I just tried as i have no idea how to do it.....
Any help are welcomed

You seem to have over complicated the situation unnecessarily. You can just use an Image control rather than a ContentControl. To alternate between two Images, you can simply do this with a DataTrigger:
<Image Source="Resources/Desert.jpg" x:Key="image1"/>
<StackPanel>
<ToggleButton Name="Button" Content="Change Image" Margin="10" />
<Image Margin="10,0,10,10">
<Image.Style>
<Style>
<Setter Property="Image.Source"
Value="/YourAppName;component/Resources/Desert.jpg" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=Button}"
Value="True">
<Setter Property="Image.Source"
Value="/YourAppName;component/Images/Resources/Koala.jpg" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>

Display button tooltip on a label for wpf button

I have several WPF buttons on my Page and I want to display tooltips when the mouse is hovered over them.
But I want the tooltip to appear in a label that I have pplaced on my page so I want to show this label and set its text to something.
Whenever the mouse is moved away from the button I want the label to disappear again.
I can change the image of my buton by doin what I learned here: http://www.canofcode.co.uk/software/wpf-rollover-images/
but I cant figure out how to display this tooltip yet....

You can achieve that using DataTrigger on IsMouseOver property of button. This is what you are looking for i guess -
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Button x:Name="button1" Content="TestButton" Width="100" Height="50"/>
<Label x:Name="label1" Content="Tooltip Text">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=button1,
Path=IsMouseOver}"
Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</StackPanel>

WPF ItemsControl IsMouseOver not working as expected

I have the following code in the Window.Resources of a WPF window. What it is basically doing is creating an item that represents a grid with a label positioned on the left and a button on the right. When I mouse over the label or the button the row changes color as expected but I want it to also change color if the mouse is over any of the row.
How can this be achieved?
Any help is appreciated.
<Window.Resources>
<dtos:ProjectDto x:Key="data"/>
<Style x:Key="alternatingWithTriggers"
TargetType="{x:Type ContentPresenter}">
<Setter Property="Height" Value="25"></Setter>
</Style>
<Style x:Key="onmouseover" TargetType="{x:Type DockPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Yellow">
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="ItemTemplate">
<Border x:Name="ItemBorder" HorizontalAlignment="Stretch" BorderThickness="0" Background="#BBB" ClipToBounds="True" >
<DockPanel ClipToBounds="True" HorizontalAlignment="Stretch" Style="{StaticResource onmouseover}">
<Label Content="{Binding Name}" HorizontalAlignment="Left" Height="80"></Label>
<Button Content="Delete" HorizontalAlignment="Right" Margin="0,0,10,0"/>
</DockPanel>
</Border>
...

Give the DockPanel Background="Transparent". That should allow it to capture mouse events.

I don't see anything obviously wrong in the snippet you've posted, and since I'm not in front of Studio, I can't try it out, but if I were you, I'd try adding a MouseEnter handler on the DockPanel (just throw the do-nothing handler in the code-behind for the view, since you'll remove it later).
Make sure that handler is getting hit when you enter, and with the debugger/immediate window, make sure the IsMouseOver property is as you expect it to be. That will at least direct your next debugging steps:
If IsMouseOver is true and your handler is hit, then my guess would be something about the trigger you've got set up isn't quite right.
If IsMouseOver is false or your handler isn't hit, then my guess would be something like IsHitTestVisible is set to false or something of that sort.
Just for fun, I'd also try moving the style declaration inline to the dockpanel, just to make sure, like so:
<DataTemplate x:Key="ItemTemplate">
<Border x:Name="ItemBorder" HorizontalAlignment="Stretch" BorderThickness="0" Background="#BBB" ClipToBounds="True" >
<DockPanel ClipToBounds="True" HorizontalAlignment="Stretch">
<DockPanel.Style>
<Style TargetType="{x:Type DockPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
<Label Content="{Binding Name}" HorizontalAlignment="Left" Height="80"></Label>
<Button Content="Delete" HorizontalAlignment="Right" Margin="0,0,10,0"/>
</DockPanel>
</Border>