Develop Reference

How to align row selection in My toolkit Datagrid?

I am using My Toolkit datagrid. I have reduced the Row height. then when I am selecting a row. It is displaying like this. How can I get proper alignment for Datagid row.....
can any one help me how can I reduce the row height with proper alignment.
It is like this:
Code for this grid is:
<Border x:Name="WideMainGrid" Grid.Row="1" Grid.ColumnSpan="8" Background="Black" BorderThickness="1" BorderBrush="Gray" Margin="10,-5,5,0">
<ScrollViewer x:Name="svCartItemsList" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1" Grid.ColumnSpan="8">
<controls:DataGrid x:Name="dgNewBill" RowBackgroundEvenBrush="Black" RowBackgroundOddBrush="Black" ItemsSource="{Binding objStockIssueItemList}" VerticalAlignment="Stretch" Height="470" SelectionMode="Single" TabNavigation="Local" HeaderBackground="Black" Background="Black" BorderThickness="1" BorderBrush="Gray" Grid.Row="2" Grid.ColumnSpan="9" Margin="0,0,0,0">
<controls:DataGrid.Resources>
<Converters:VisibilityConverter x:Key="vc" />
<Converters:NotConverter x:Key="nc" />
<Style x:Key="TransparentListBox" TargetType="ListBox">
<Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DataGridStyle1" TargetType="controls:DataGrid">
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="HeaderBackground" Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
<Setter Property="RowBackgroundOddBrush" Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Margin="12" Content="{Binding Control}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:DataGrid">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Visibility="Collapsed" Background="{TemplateBinding HeaderBackground}" Height="40" x:Name="ColumnHeaders">
<!-- HACK: Needed so that column DPs are working when adding columns in code only. -->
<ContentPresenter>
<controls:DataGridTextColumn />
</ContentPresenter>
</Grid>
<controls:MtListBox BorderThickness="0" Grid.Row="1"
ItemContainerStyle="{TemplateBinding RowStyle}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
Style="{StaticResource TransparentListBox}"
Margin="0" x:Name="Rows" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
Margin="12,0,12,2"
VerticalAlignment="Center"
FontSize="{ThemeResource TextStyleLargeFontSize}"
Content="{Binding Header}" />
<StackPanel Grid.Column="1"
Visibility="{Binding IsSelected, Converter={StaticResource vc}}"
VerticalAlignment="Center"
HorizontalAlignment="Left">
<Path Data="M4,0 L0,8 L8,8 Z" Fill="White" Visibility="{Binding IsAscending, Converter={StaticResource vc}}"/>
<Path Data="M0,0 L4,8 L8,0 Z" Fill="White" Visibility="{Binding IsAscending, Converter={StaticResource nc}}"/>
</StackPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</controls:DataGrid.Resources>
<controls:DataGrid.Style>
<StaticResource ResourceKey="DataGridStyle1"/>
</controls:DataGrid.Style>
<controls:DataGrid.RowStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsTabStop" Value="True"></Setter>
<Setter Property="Padding" Value="0,0,0,0"></Setter>
<Setter Property="Height" Value="35"></Setter>
</Style>
</controls:DataGrid.RowStyle>
<controls:DataGrid.Columns>
<controls:DataGridTextColumn Binding="{Binding SNumber}" Width="0.5*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<!--<Setter Property="MinHeight" Value="30"></Setter>-->
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn CellTemplate="{StaticResource myCellTemplateMonth}" Width="2.5*" x:Name="ItemDesc" CanSort="False" IsAscendingDefault="True">
<!--<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.Resources>
<Storyboard x:Key="std" x:Name="std">
<ColorAnimation To="DarkTurquoise" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Storyboard.TargetName="lastnamePanel" />
</Storyboard>
</Grid.Resources>
<StackPanel x:Name="lastnamePanel" Background="Black">
<i:Interaction.Behaviors>
<Core:DataTriggerBehavior x:Name="desctrgr" Binding="{Binding description}" ComparisonCondition="Equal">
<Media:ControlStoryboardAction x:Name="mediaDesc" Storyboard="{StaticResource std}" />
</Core:DataTriggerBehavior>
</i:Interaction.Behaviors>
<TextBlock x:Name="lastnameTxt" Foreground="White" Text="{Binding description}" TextAlignment="Left" VerticalAlignment="Stretch" Margin="0,0,0,0"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>-->
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding uom}" Width="0.5*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="pricePanel" Height="30" Tapped="pricePanel_Tapped" >
<TextBlock Name="price" Foreground="White" Text='{Binding editedPrice}' TextAlignment="Center" VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="quantityPanel" Height="30" Tapped="quantityPanel_Tapped">
<TextBlock Name="quantity" TextAlignment="Center" Foreground="White" Text='{Binding quantity}' VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.6*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="discountPanel" Height="30" Tapped="discountPanel_Tapped" >
<TextBlock Name="Discount" TextAlignment="Center" Foreground="White" Text='{Binding discount}' VerticalAlignment="Center" Margin="10,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding cartTotal}" Width="0.85*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="-40,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<!--delete image column-->
<controls:DataGridTemplatedColumn CanSort="False">
<!--<controls:DataGridTemplatedColumn.Header>
<Image Source="/Images/erase.png" Height="40" Width="40" Grid.Column="7" Margin="5"></Image>
</controls:DataGridTemplatedColumn.Header>-->
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel x:Name="voidImagePanel" Height="30" Tapped="voidImagePanel_Tapped">
<Image x:Name="VoidImage" Source="{Binding imageUrl}" Height="20" Width="30" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-20,5,0,0"></Image>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</ScrollViewer>
</Border>

You need to remove the margin="12" of ContentPresenter in x:Key="DataGridStyle1" :
Now the it looks like this:
You can slightly modify the margins of your element in DataGridTemplatedColumn.CellTemplate to let the items stay in center of the row:

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>

Edit the Style of a ScrollViewer

I have the following style for the ScrollViewer of a ListBox but I don't know where to put it in my ListBox's xaml :
<Style x:key"Style1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
<ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Where Do I have to add this in my ListBox to customize the ScrollViewer ?

Here is the default list box style: http://msdn.microsoft.com/en-us/library/ms754242(v=vs.110).aspx You will notice it has a scroll viewer as part of the ControlTemplate. You will need to target the scroll viewer style in the list box control template like so:
<ControlTemplate TargetType="ListBox">
<Border Name="Border"
BorderThickness="1"
CornerRadius="2">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer Style="{StaticResource Style1}" Margin="0"
Focusable="false">
<StackPanel Margin="2"
IsItemsHost="True" />
</ScrollViewer>
</Border>

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);
}

UserControl IsPressed gives nothing back

I created UserControl(Button) in Expression Blend
XAML:
<UserControl
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"
mc:Ignorable="d"
x:Class="Marica.FullClient.Graphics.Node"
x:Name="UserControl" Height="360" Width="500" Margin="40">
<UserControl.Resources>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Stroke="Red" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="StrokeThickness" TargetName="rectangle" Value="13"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="StrokeThickness" TargetName="rectangle" Value="13"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Button Name="NodeButton" Style="{DynamicResource ButtonStyle1}"/>
<StackPanel Orientation="Vertical">
<TextBlock
x:Name="NodeName"
x:FieldModifier="public"
Text="Property"
Margin="8,100,8,8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextWrapping="Wrap"
TextAlignment="Center"
FontFamily="Segoe Print"
FontWeight="Bold"
Foreground="White"
FontSize="50"/>
<TextBlock
x:Name="CategoryName"
x:FieldModifier="public"
Text="Property"
Margin="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextWrapping="Wrap"
TextAlignment="Center"
FontFamily="Segoe Print"
FontWeight="Bold"
Foreground="White"
FontSize="25"/>
</StackPanel>
</Grid>
When I hoovered it over the control, the stroke width becomes bigger, but when I click, nothing happens.

I expect that on IsPressed you wanted to do the Easing animation, and it does not appear to be working. Well, good news, your animation fires fine, you just need to tune it to do what you want in order to see that it's actually working. Play with KeyTime and Value
For example, change it to:
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="30" />
and you will see it starting to work/do more