I want to animate my button's BorderThickness property to 5 on MouseOver, everything works great except that when BorderThickness increases the content inside the button gets padded, which is something I don't want to happen. Is there a way to bypass/disable this?
Here is my code
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseOverAnimation">
<ThicknessAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="BorderThickness" To="3" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="MouseOutAnimation">
<ThicknessAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="BorderThickness" To="1" Duration="0:0:0.2" />
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="ButtonBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<VirtualizingStackPanel VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" Background="{TemplateBinding Background}">
<ContentPresenter Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
</VirtualizingStackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}"></BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
And here is the button in XAML
<Button Style="{StaticResource SoulsButton}" Width="150" >
<TextBlock FontFamily="Resources/Fonts/#Univers UltraCondensed" FontSize="20" Foreground="{StaticResource DarkSoulsYellow}" Width="50" Height="20">INSTALL</TextBlock>
</Button>
You can get rid of that annoying as followinging XAML. The Text will not be padded when border thichness change:
<Button Width="150" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseOverAnimation">
<ThicknessAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="BorderThickness" To="3" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="MouseOutAnimation">
<ThicknessAnimation Storyboard.TargetName="ButtonBorder" Storyboard.TargetProperty="BorderThickness" To="1" Duration="0:0:0.2" />
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Border x:Name="ButtonBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<VirtualizingStackPanel VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" Background="{TemplateBinding Background}">
</VirtualizingStackPanel>
</Border>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}"></BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}"></BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<TextBlock FontSize="20" Foreground="Green">INSTALL</TextBlock>
</Button>
Related
I apologize in advance for any mistakes, English is not my native.
<Style TargetType="{x:Type Button}" x:Key="LogOutButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background= "{TemplateBinding Background}"
Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}"
CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}">
<TextBlock Text="{TemplateBinding Property=Content}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="18"></TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
To="85" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Height"
To="45" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="19" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
To="80" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Height"
To="40" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="18" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
I have a WPF style for a button with various animations, but these ones don't work:
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="18" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="19" Duration="0:0:0.3" />
My goal is to animate TextBlock's FontSize when the mouse enters or leaves the Button, but I don't know how to access a TextBlock's property which is defined like that:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="{TemplateBinding Background}" Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}" CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}">
<TextBlock Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<FrameworkElement.Resources>
<Style TargetType="{x:Type Button}" x:Key="LogOutButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background= "{TemplateBinding Background}"
Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}"
CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}">
<TextBlock x:Name="PART_TBlock" Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="85" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="FontSize" Storyboard.TargetName="PART_TBlock" To="19" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Height" To="40" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="FontSize" Storyboard.TargetName="PART_TBlock" To="18" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
</Style>
</FrameworkElement.Resources>
<Grid>
<Button Content="Кнопка" Style="{DynamicResource LogOutButtonTheme}"
Width="100" Height="60"/>
</Grid>
Note that if the button is not explicitly dimensioned, your animation will throw an exception.
You can also bind the font size of the TextBlock to the font size of the button.
And then you can animate the font size of the button.
<FrameworkElement.Resources>
<Style TargetType="{x:Type Button}" x:Key="LogOutButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background= "{TemplateBinding Background}"
Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}"
CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}">
<TextBlock Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="85" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="19" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Height" To="40" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="18" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</FrameworkElement.Resources>
<Grid>
<Button Content="Кнопка" Style="{DynamicResource LogOutButtonTheme}"
Width="100" Height="60"/>
</Grid>
I have a custom message box with two button 'Yes' and 'No'. Button 'Yes' is green and button 'No' is red.
I apply the same style for the two buttons through a xaml file defined separately as below:
MsgBoxButtonStyle.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button"
x:Key="MsgBoxButtonStyle">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TextBlock.TextAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0"
BorderBrush="#000" BorderThickness="1,1,1,1"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
These two buttons are place in my WPF window as below:
<Window x:Class="My.XAML.Controls.Windows.WpfMessageBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/My.XAML;component/Styles/MsgBoxButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Button Name="btnYes" Content="Yes"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#b6dbd6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#dbb6b6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
</Window>
Now, I would like to perform a nice effect when mouse is positioned over the buttons, some kind of blinking or whatever using storyboard and dependant on the color of the button.
Also I would like to put this storyboard within my existing style file MsgBoxButtonStyle.xaml and no put each storyboard in the window for each button, i want to share it.
How can I do this? some one can provide me a nice effect for buttons?
Just add triggers to the style. Here's an example to start you off.
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
Here I have a button style in appliction resources
<Style x:Key="ClickableText" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="/Tasks;component/Assets/Fonts/#Abel"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<StackPanel VerticalAlignment="Center">
<ContentPresenter x:Name="Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=Text}" Height="2" Fill="{DynamicResource LightGrey}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the style I have added a underlining rectangle to the text in the button.
<Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=Text}" Height="2" Fill="{DynamicResource LightGrey}"/>
I have binded the rectangles width to be the same width as the text so that it adds a underline effect.
I now want to add an effect so that when you hover the button the rectangle reveals by spliting out.
I have got this far by adding this under the trigger tag
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.300" From="0" To="{Binding ActualWidth, ElementName=Text}" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.300" From="{Binding ActualWidth, ElementName=Text}" To="0" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
I want to link the to and from part of the double animation to the binding I used in the rectangle but it keeps producing errors. How can I do this effect?
I also want to use this as a reusable style I can distribute and keep in Application resources. I have seen other people do this through workarounds in code but am not sure if you can do this in application resources
Any help or guidance is greatly appriciated!!
LayoutTransform animation is Better for this effect.
I would do this animation in this way:
<Style x:Key="ClickableText" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="/Tasks;component/Assets/Fonts/#Abel"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="MainBorder" Background="{TemplateBinding Background}">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="Text" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Rectangle x:Name="Rect1" Grid.Row="1" Height="2" Width="{Binding ElementName=Text, Path=ActualWidth}" Fill="LightGray">
<Rectangle.LayoutTransform>
<ScaleTransform ScaleX="0"/>
</Rectangle.LayoutTransform>
</Rectangle>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="MainBorder" Value="White"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleX)" From="1" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
im using a button which contains a popup control. Now i want the popup control to align on top of the button and it should also be centered.
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Padding="{TemplateBinding Padding}" UseLayoutRounding="True">
<Grid>
<Popup x:Name="popup" Placement="Top" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="-7" IsOpen="False">
<DockPanel Width="55" Background="#01FFFFFF">
<Button x:Name="DeleteButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle3}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="DeleteButton_Click" />
<Button x:Name="EditButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle4}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="EditButton_Click" />
<Button x:Name="AddButton" DockPanel.Dock="Bottom" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle5}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="AddButton_Click" />
</DockPanel>
</Popup>
<Image x:Name="add_img" Source="img\menu.png" RenderOptions.BitmapScalingMode="Fant" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="True">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource HidePopup}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource ShowPopup}" />
<BeginStoryboard>
<Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
<DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="180" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource HidePopup}" />
<BeginStoryboard>
<Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
<DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="180" To="0" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code snippet works, but if I use another computer to compile my code, the popup isn't aligned anymore. Is there a better way to do this?
Have you forgotten set the PlacementTarget attribute of the Popup?
Hope that this helps:
<Popup ... PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"></Popup>
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);
}