Develop Reference

Assigning templates to dynamically generated WPF controls

In an application, I need to remove the default highlighting effect applied to buttons when the mouse is over them. I understand this effect can be achieved by creating a custom template without the highlight feature and applying it to your buttons. However, I don't know how many buttons are needed until runtime and therefore cannot explicitly set the template property beforehand in the xaml file.
I tried setting the template as you would in the xaml file: Template = "{StaticResource MyButtonTemplate}" when I created the object but this did not work.
How can I set the template of a new Button object to a template that I specified in the xaml file? (I have heard that templates can be defined in C# but would like to avoid this if possible as I heard it is extremely tedious).

It sounds like you could use a DataTemplate to achieve what you want.
You could set the style property of the template and then that would apply to any button that you added to the list that the template is bound to.
Here's a quick example that I made (It's not using bindings because it's kind of late here but I'm sure you can work that part out)
MainWindow.xaml
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<ListBox x:Name="listBox" ItemsSource="{Binding}" BorderBrush="Transparent" HorizontalContentAlignment="Stretch">
<!--Remove the hover and select style of the list view because we aren't using the list in that way-->
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<!--Setup the design that we have for our buttons-->
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="4">
<Button Content="{Binding}" FontWeight="Bold" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<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="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Windows;
namespace WpfApp1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
List<string> items = new List<string>();
public MainWindow()
{
InitializeComponent();
//Add the buttons to the list
items.Add("test");
items.Add("test1");
items.Add("test2");
items.Add("test3");
//Update the item source of the list view
//This should probably be done properly with bindings but the main question was about the xaml
listBox.ItemsSource = items;
}
}
}
And here you can see the result

Button Mouse-over to Change Images of buttons WPF

Apologies if i miss anything out I am new to this, also the state of my code(Jr Developer in the making). I am trying to create a style in the resource dictionary that will do the following:
Be able to apply to all buttons.
Change from a white icon png to blue icon png.
and have this done ideally in the resource dictionary but open to other ways.
Any help would be greatly appreciated :)
here is my app.xaml code;
<Style x:Key="SideMenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource bmBlue}" />
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Cairo"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="10 20 10 0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" >
<StackPanel Orientation="Horizontal">
<Image x:Name="image1" Visibility="Visible" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\BackIconBWblue.png"/>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#005389" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#fff"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#005389" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#fff" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#005389"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#fff" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Here is the button Xaml;
<Button Click="NewQuote_Click" Style="{StaticResource SideMenuButton}" >
<StackPanel Orientation="Horizontal">
<Image Grid.Column="0" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\NewIconBlueWhitewhite.png"/>
<TextBlock Text="New" Grid.Column="1" HorizontalAlignment="Center" />
</StackPanel>
</Button>

Try this:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource= "\Images\ButtonImages\Image.png" Stretch="Uniform"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="Transparent">
<ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

ListView background colour not working

I have a simple listView put inside other elements.
Since I want to simulate an explorer style I have done that:
<ListView x:Name="lvAllowedPPtab2" Grid.Row="1" FontSize="12" Background="{x:Null}" BorderBrush="Gainsboro" BorderThickness="5" Margin="10" VerticalAlignment="Stretch" >
<ListView.ItemsPanel >
<ItemsPanelTemplate >
<WrapPanel Orientation="Horizontal" Width="250" Background="{x:Null}" VerticalAlignment="Top"></WrapPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
the problem is that by doing that the background gets coloured while i want it to be transparent = null.
By looking at that
Datagrid foreground colour not working
as a workaround i've searched for something similar but didn't find any similar event.
Don't know if posting my complete xaml helps
Thanks for helping
--ADD--
At request I post a wider part of my xaml:
<TabItem Name="tabItem2" HorizontalAlignment="Center" Height="80" MouseLeftButtonUp="TabItem_MouseLeftButtonUp" FontSize="{StaticResource TOOLTIP_FONTSIZE}" IsSelected="false" >
<TabItem.Header>
<StackPanel>
<TextBlock Text="" FontSize="{StaticResource TAB_FONTSIZE}"/>
<TextBlock Name="tbTab2" Visibility="Hidden" FontSize="{StaticResource BUTTON_FONTSIZE}" />
</StackPanel>
</TabItem.Header>
<TabItem.Background>
<ImageBrush/>
</TabItem.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab2" BorderBrush="Gainsboro" BorderThickness="5" Width="200" Margin="10,10,10,10" >
<StackPanel Margin="-1.8,-0.8,2.2,1.4">
<ListBox x:Name="lbxPalletsTab2" Background="{x:Null}" BorderBrush="{x:Null}" Height="600" SelectionChanged="ListBox_SelectionChanged" Margin="12,10.2,8.4,10.4" />
</StackPanel>
</Border>
<Border x:Name="Border2Tab2" BorderBrush="Gainsboro" MinWidth="150" BorderThickness="5" Grid.Column="1" Margin="10,10,10,10">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300px"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="50px"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="tbkPPtab2" Grid.Row="0" FontSize="22" Background="{x:Null}" FontWeight="Black" Text="---" HorizontalAlignment="Center" VerticalAlignment="Bottom"></TextBlock>
<ListView x:Name="lvAllowedPPtab2" Grid.Row="1" FontSize="12" Background="{x:Null}" BorderBrush="Gainsboro" BorderThickness="5" Margin="10" VerticalAlignment="Stretch" PreviewMouseLeftButtonDown="ListBox_PreviewMouseLeftButtonDown">
<ListView.ItemsPanel >
<ItemsPanelTemplate >
<WrapPanel Orientation="Horizontal" Width="250" Background="{x:Null}" VerticalAlignment="Top"></WrapPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
<Border Grid.Column="1" BorderBrush="Gainsboro" BorderThickness="5" Margin="10,60,10,10">
<Grid Name="grdPalletTab2" AllowDrop="True" Drop="Grid_Drop"/>
</Border>
</Grid>
</Border>
</Grid>
</TabItem>
--ADD--
the same problems happens everywhere in my xaml. Even just adding a empty listview with a transparent or null background makes it darkblue. I think I can't override the presets of my styled winwdow.
--ADD2--- as Sivasubramanian suggested here is the relevant part of my style sheet
<Style TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="{DynamicResource BackgroundDepth4}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BackgroundDepth4}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="{DynamicResource TextDepth1}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
<ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{x:Null}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="Bd" Value="{DynamicResource DisabledOpacity}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
and
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid x:Name="Bd" Background="{TemplateBinding Background}" Height="Auto" SnapsToDevicePixels="true">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverElement">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="{StaticResource DisabledOpacity}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectedElement">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectedElement">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="SelectedElement" Fill="{DynamicResource CannoliAccentColorBrush}" HorizontalAlignment="Stretch" Height="Auto" Stroke="{x:Null}" VerticalAlignment="Stretch" Width="Auto" StrokeThickness="0" Opacity="0"/>
<Rectangle x:Name="MouseOverElement" Fill="{x:Null}" HorizontalAlignment="Stretch" Height="Auto" Stroke="{DynamicResource CannoliAccentColorBrush}" VerticalAlignment="Stretch" Width="Auto" StrokeThickness="2" Opacity="0"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter Property="Foreground" Value="{DynamicResource WindowTitleForegroundColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Remove focus from button on Windows 10 Core - XAML

I have a button with background image and white text.
When i click it or put the mouse over (focus) show a black border and the text stay black.
What can i do to ignore the mouse over and assume the click visual effect when pressed?
Already add this but no effect.
<Style x:Key="ButtonActionStyle" TargetType="Button">
...
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="False"/>
</Style>
Thank you
This code do what i need, but no click visual effect :x
<Style x:Key="ButtonActionStyle" TargetType="Button">
...
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="1">
<DiscreteObjectKeyFrame.Value>
<x:Int32>1</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid x:Name="grid" Margin="0" Grid.Row="0" Grid.RowSpan="1">
<Border
BorderBrush="{TemplateBinding Background}"
BorderThickness="0"
CornerRadius="0"
Background="{TemplateBinding Background}"/>
<ContentPresenter>
<TextBlock
FontFamily="{TemplateBinding FontFamily}"
SelectionHighlightColor="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="Auto"
Width="Auto"
Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ContentPresenter>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Based on this tutorial, it's done.
<Style x:Key="ButtonActionStyle" TargetType="Button">
...
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="grid.(Grid.Row)" Value="0"/>
<Setter Target="grid.(Canvas.ZIndex)" Value="0"/>
<Setter Target="grid.(UIElement.RenderTransformOrigin)">
<Setter.Value>
<Foundation:Point>0.5,0.5</Foundation:Point>
</Setter.Value>
</Setter>
<Setter Target="grid.(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Value="1"/>
<Setter Target="grid.(UIElement.Projection).(PlaneProjection.LocalOffsetX)" Value="5"/>
<Setter Target="grid.(UIElement.Projection).(PlaneProjection.LocalOffsetY)" Value="5"/>
<Setter Target="grid.(UIElement.Projection).(PlaneProjection.LocalOffsetZ)" Value="0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid x:Name="grid" Margin="0" Grid.Row="0" Grid.RowSpan="1">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border
BorderBrush="{TemplateBinding Background}"
BorderThickness="0"
CornerRadius="0"
Background="{TemplateBinding Background}"/>
<ContentPresenter>
<TextBlock
FontFamily="{TemplateBinding FontFamily}"
SelectionHighlightColor="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="Auto"
Width="Auto"
Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ContentPresenter>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Changing the label foreground on mouseover, but the label is inside of button content

I am new at WPF and XAML, but still as I was reading about this is tricky thing. The thing what I want to change on mouseover is the Label foreground color, but the label is inside of the button content. Everything should be done by styles, without C#.
<Button Name="Home_Button" Height="50" VerticalAlignment="Top" Click="Home_Click" Background="Gray" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">
<DockPanel>
<Image Source="Images/icons/home.png" HorizontalAlignment="Left" Margin="-90,0,0,0" />
<Label VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,-90,0" Foreground="LightGray" FontSize="12">Home</Label>
</DockPanel>
</Button>
My style settings looks like this:
<Style TargetType="{x:Type Button}" x:Key="MetroButton">
<Setter Property="MinHeight" Value="25" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="10" />
<Setter Property="FontFamily" Value="{DynamicResource DefaultFont}" />
<Setter Property="Background" Value="{DynamicResource GrayBrush7}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
<Setter Property="Padding" Value="5,6" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PressedBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="0.7" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActiveContent">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActiveContent">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
<Rectangle x:Name="DisabledVisualElement"
Fill="{DynamicResource ControlsDisabledBrush}"
IsHitTestVisible="false"
Opacity="0"
RadiusY="3"
RadiusX="3" />
<Border x:Name="MouseOverBorder"
Background="{DynamicResource GrayBrush8}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0" />
<Border x:Name="ActiveContent"
Background="LightGray"
Opacity="0"
/>
<Border x:Name="PressedBorder"
Background="{DynamicResource GrayBrush5}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0" />
<Rectangle x:Name="FocusRectangle"
Stroke="{DynamicResource TextBoxMouseOverInnerBorderBrush}"
RadiusY="4"
RadiusX="4"
Margin="-1"
Opacity="0" />
<Rectangle x:Name="FocusInnerRectangle"
StrokeThickness="{TemplateBinding BorderThickness}"
Stroke="{DynamicResource TextBoxMouseOverBorderBrush}"
RadiusX="3"
RadiusY="3"
Opacity="0" />
<ContentPresenter x:Name="contentPresenter"
RecognizesAccessKey="True"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content, Converter={StaticResource ToUpperConverter}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I wanna change the Foreground.Color on MouseOver on the Label which is inside of the Button. Right now the style settings only change the Background of the Button on MouseOver.

Put a sub style for Label inside the Style.Resources of your button style, this is a cut down example but should explain what I'm trying to say.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Button">
<Style.Resources>
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
</Grid.RowDefinitions>
<!-- This represents your image/-->
<Grid Grid.Row="0" Background="{TemplateBinding Background}"/>
<Label FontSize="20" Grid.Row="1" Content="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Margin="172,122,131,79" Foreground="Green">
test
</Button>
</Grid>
</Window>
The Label style won't apply to anything outside of the Button, if you mouse over any part of the button area it'll turn the top half blue but will only turn the text green if the mouse is over the bottom half (which is covered by the label)

try this.
<Button Height="36" Margin="286,274,0,0" Width="74" MouseEnter="Button_MouseEnter_1">
<Label x:Name="mylbl" Content="Test" MouseEnter="mylbl_MouseEnter"/>
</Button>
code behind:
private void mylbl_MouseEnter(object sender, MouseEventArgs e)
{
mylbl.Background = new SolidColorBrush(Colors.Red);
}