Develop Reference

Animate button background image on IsMouseOver in WPF/XAML/C#

Based on the code below, is it possible to animate the transition from image1 to image2 on button IsMouseOverevent?
The following code works fine showing image1 as the upstate image and image2 as the hover image on a button but it does not animate the transition.
XAML Style
<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button" CornerRadius="0"
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<TextBlock Text="{TemplateBinding Button.Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="button" Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/App;component/Images/image2.png" Stretch="None"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Usage
<Button x:Name="findRButton"
Style="{StaticResource MainMenuButtonTemplate}"
Margin="0,0,0,0"
Height="53"
Command="{Binding FindrViewCommand}" BorderBrush="{x:Null}" Foreground="White" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="Images/image1.png" Stretch="None"/>
</Button.Background>
</Button>

Here is code that shows you how to do what you're looking for.
In order to use animations during triggers you must utilize the enter and exit actions of that trigger. You must also name BeginStoryboard so that you can stop it in other calls.
Review the code and if you have anymore questions let me know. This will fade from image1 to image2 and vice versa with mouse over / leave.
<Window x:Class="Question_Answer_WPF_App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow"
Height="400"
Width="500">
<Window.Resources>
<Storyboard x:Key="mouseOverStoryboard"
Duration="00:00:00.5">
<DoubleAnimation Storyboard.TargetName="image1"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="00:00:00.5" />
<DoubleAnimation Storyboard.TargetName="image2"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="mouseLeaveStoryboard"
Duration="00:00:00.5">
<DoubleAnimation Storyboard.TargetName="image1"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="00:00:00.5" />
<DoubleAnimation Storyboard.TargetName="image2"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="00:00:00.5" />
</Storyboard>
<Style x:Key="MainMenuButtonStyle"
TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image x:Name="image1"
Source="Images/image1.png" />
<Image x:Name="image2"
Source="Images/image2.png"
Opacity="0" />
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="mouseLeaveStoryboard" />
<BeginStoryboard Name="mouseOverStoryboard"
Storyboard="{StaticResource mouseOverStoryboard}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="mouseOverStoryboard" />
<BeginStoryboard Name="mouseLeaveStoryboard"
Storyboard="{StaticResource mouseLeaveStoryboard}" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MainMenuButtonStyle}"
Width="120"
Height="120" />
</Grid>
</Window>

Style trigger property is not changing element's width in XAML

i am trying to trigger IsMouseOverproperty of an element and chnging the width in XAML and it's working but the problem is if i define the default or static width property in element's tag then this doesn't work. Why ?
Working code
<UserControl x:Class="IntelliVentory.UserControls.SideMenuBarControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:IntelliVentory.UserControls"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:userControls="clr-namespace:IntelliVentory.UserControls"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<ItemsControl Margin="50">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone2" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone3" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
</ItemsControl>
</Grid>
but if now i add width="40" property then this trigger property wont work on first ColorZone Element Name="colorZone1" it won't work .
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" width="40" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />

You need to set the default width in the style.
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Width" Value="40"/>
</Style.Setters>
</Style>

WPF window appearance is not same with design view

I create WPF application. I want to create borderless window. For that my code as follow
<Window x:Class="AzLeks.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="CanMinimize" Height="600.586" Width="826.694" WindowStyle="None" AllowsTransparency="False"
MouseLeftButtonDown="MainWindow_OnMouseLeftButtonDown" Loaded="Window_Loaded"
WindowStartupLocation="CenterScreen">
<!--<Window.Background>
<ImageBrush ImageSource="images/bckgr.png" />
</Window.Background>-->
<Window.Resources>
<Style x:Key="Close" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Margin="-9,-13,-9,-16" HorizontalAlignment="Center" Background="Transparent" VerticalAlignment="Center" Height="630" Width="845">
<Grid.RowDefinitions>
<RowDefinition Height="235*" />
<RowDefinition />
</Grid.RowDefinitions>
<Border CornerRadius="12" BorderBrush="Transparent" BorderThickness="1" >
<Border.Background>
<ImageBrush ImageSource="/images/bckgr.png"></ImageBrush>
</Border.Background>
</Border>
<!--Some Content-->
</Grid>
In design mode it shown as follow:
But after runing the app it shown as:
I don't know what is a problem here. PLease help me, I can't find solution for this

Something like this.
<Window x:Class="AzLeks.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="CanMinimize" Height="600" Width="820" WindowStyle="None" AllowsTransparency="True" Background="Transparent" MouseLeftButtonDown=" MainWindow_OnMouseLeftButtonDown" Loaded="Window_Loaded" WindowStartupLocation="CenterScreen">
<Window.Resources>
<Style x:Key="Close" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Border CornerRadius="12" BorderBrush="Transparent" BorderThickness="1" >
<Border.Background>
<ImageBrush ImageSource="/images/bckgr.png"></ImageBrush>
</Border.Background>
<Grid HorizontalAlignment="Center" Background="Transparent" VerticalAlignment="Center" >
<Grid.RowDefinitions>
<RowDefinition Height="235*" />
<RowDefinition />
</Grid.RowDefinitions>
<!--Some Content-->
</Grid>
</Border>

Setting Selected tab with small triangle below in wpf

Is there any examples of the animated tab control (one in android mentioned below) in WPF? Any tab/button controls that animate to down-arrow when pressed?
This one is for android:
Setting selected TAB with a small triangle below it

What is keeping you from doing like this
<Application.Resources>
<ControlTemplate x:Key="ButtonTemplate1"
TargetType="{x:Type Button}">
<Border
Name="Border"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="2"
Background="#FF2278CF"
TextBlock.Foreground="White">
<Grid>
<ContentPresenter
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalAlignment="Center">
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="ButtonTemplate2"
TargetType="{x:Type Button}">
<Border
Name="Border"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="50"
Background="Red"
TextBlock.Foreground="White">
<Grid>
<ContentPresenter
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalAlignment="Center">
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Control.Template" Value="{StaticResource ButtonTemplate1}"></Setter>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="true">
<Setter Property="Control.Template" Value="{StaticResource ButtonTemplate2}"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
In ControlTemplate you can make your control any form you want.

Perhaps you should use triggers.
Trigger Class
Styles using triggers in WPF

I was able to do this is blend. This is able to animate itself, the storyboard is triggered on click of the button. This is not the perfect answer, but it gives the idea.
<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"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
mc:Ignorable="d"
x:Class="SilverlightPrototype1Screens.Screen_1"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Callout.AnchorPoint)" Storyboard.TargetName="callout">
<EasingPointKeyFrame KeyTime="0" Value="0.254,0.962"/>
<EasingPointKeyFrame KeyTime="0:0:2" Value="0.269,1.385"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ed:Callout x:Name="callout" AnchorPoint="0.277,1.593" CalloutStyle="RoundedRectangle" Fill="#FF737393" FontSize="14.666999816894531" HorizontalAlignment="Left" Height="52" Margin="150,88,0,0" Stroke="Black" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5"/>
</Grid></UserControl>

How Can I change the way that focus looks like in WPF?

The focus visual hint that wpf provides on Windows 7 is a dashed line, as such this:
Now, how can I change the way it looks? How can I control its appearence?
Thanks!

Try something like following
<Window x:Class="FocusVisualStyle.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 x:Key="MyFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-2" StrokeThickness="1" Stroke="Red"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
<TextBox Width="96"/>
<Button Content="Yes" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
<Button Content="No" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
</StackPanel>
You can customise to suit your liking. This is just a starting point.
Edit: Since so many people have liked this solution here is another example which changes focus visual style for all buttons and textboxes without explicit setting of FocusVisualStyle property for each control (see that DynamicResource thingy?) in xaml
Also it uses animation to change the colour of the focus rectangle.
Enjoy :)
<Window x:Class="FocusVisualStyle.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 x:Key="MyFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate >
<Rectangle Margin="-2" StrokeThickness="2" RadiusX="2" RadiusY="2" >
<Rectangle.Stroke>
<SolidColorBrush Color="Red" x:Name="RectangleStroke" />
</Rectangle.Stroke>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded" >
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="Red"
To="Orange"
Duration="0:0:0.5"
RepeatBehavior="Forever"
Storyboard.TargetName="RectangleStroke"
Storyboard.TargetProperty="Color"/>
<DoubleAnimation To="3"
Duration="0:0:0.5"
RepeatBehavior="Forever"
Storyboard.TargetProperty="StrokeDashOffset" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
<TextBox Width="96"/>
<Button Content="Yes" Width="64" />
<Button Content="No" Width="64" />
</StackPanel>
Here you see that I have styles for Button and TextBox which set the property FocusVisualStyle for all the buttons and text boxes in this window.