This question already has answers here:
Set button background style in wpf
(2 answers)
Closed 3 years ago.
I am trying to add a background color to a button whenever it is clicked and restoring to its original color after some time. I tried to create a ResourceDictionary.xaml and added my style set and added its reference to a XAML page. Seems something is wrong in my code. If I add the style directly into the button tags, it works.. But not via ResourceDictionary . Please help.
ResourceDictionary.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:FantasyPlay">
<Style TargetType="Button">
<Setter Property="Background" Value="Gainsboro" />
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" From="Orange" To="Gainsboro" Duration="0:0:0.50" AutoReverse="True" />
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" From="Gainsboro" To="Orange" Duration="0:0:0.1" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
MyXAML:
I have referenced it like
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Good day, let try this
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard AutoReverse="True" >
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" Duration="0:0:0"/>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Orange" Duration="0:0:0.50"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
WPF controls have a template.
The button's template does various things, one of which is a mouseover effect. That will interfere with your styling.
Here's a style which works similarly to yours but replaces the template of buttons so you can see the effect when the mouse is over it.
I've used red rather than Gainsboro so this might not be a total cut and paste solution but is to get you started.
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
To="Orange"
Duration="0:0:1"
AutoReverse="True"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Obviously, this replaces what you have in your resource dictionary. Keep a copy of your original first.
Related
I am currently working on a C# WPF project and I am trying to make my custom style buttons.
What I want to have to happen, is when the mouse hovers over the button, it slightly increases in size as an animation, then when the mouse leaves the button, the animation decreases the size of the button to the original size.
Below is my ControlTemplate that I've created for my button. No errors are thrown but nothing happens either.
<Application.Resources>
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="ButtonGrid">
<Border x:Name="border" CornerRadius="8" BorderBrush="White" BorderThickness="2">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="Bold"></ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="Blue"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="0.95" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="0.95" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="1.08" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="1.08" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="ButtonGrid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
Thanks for any help you can provide
You have couple of problems with your code:
1) You are trying to animate Rectangle.RenderTransform properties and there is no Rectangle in your ControlTemplate. RenderTransform is a dependency property on UIElement. So, you should remove Rectangle
2) Also, There is no RenderTransform applied to your Grid.
3) After fixing above two items, if you try you get continuous animation (Button expanding/shrinking in size), to fix this set Background property Grid to Transparent, so that Grid participates in hit testing and respond to Mouse overs.
Update your style XAML to the following and it will work:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="ButtonGrid" Background="Transparent">
<Border
x:Name="border"
BorderBrush="White"
BorderThickness="2"
CornerRadius="8">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold">
</ContentPresenter>
</Border>
<Grid.RenderTransform>
<ScaleTransform />
</Grid.RenderTransform>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="0.95"/>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="0.95"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="1.08"/>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="1.08"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonGrid" Property="Opacity" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Another thing, instead of using Trigger.EnterActions and Trigger.ExitActions, you could use VisualStateManager to achieve the same result. Using VisualStateManager is much more easier than Trigger.EnterActions and ExitActions.
Below is the code with VisualStateManager used to do the animations:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="ButtonGrid" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05" To="MouseOver"/>
<VisualTransition GeneratedDuration="0:0:0.05" To="Normal"/>
</VisualStateGroup.Transitions>
<VisualStateGroup.States>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="0.95"/>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="0.95"/>
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
x:Name="border"
BorderBrush="White"
BorderThickness="2"
CornerRadius="8">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold">
</ContentPresenter>
</Border>
<Grid.RenderTransform>
<ScaleTransform/>
</Grid.RenderTransform>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonGrid" Property="Opacity" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using the Material Design for my WPF Project and I now want to set a background color for the hover state of a button.
As seen in the code, the implementation is made with a ProgressBar, Ripple and Border.
If I try to overwrite the style, i end up having a invisible Button:
<Style TargetType="{x:Type Button}"
BasedOn="{StaticResource MaterialDesignRaisedButton}">
<Setter Property="Background"
Value="{StaticResource MainColorSolidBrush}" />
<Setter Property="Foreground"
Value="{StaticResource TextColorLightSolidBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Triggers>
<!--Hover-->
<Trigger Property="IsMouseOver"
Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="{StaticResource SubColor}"
FillBehavior="HoldEnd"
Duration="{StaticResource HoverStartDuration}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="{StaticResource MainColor}"
FillBehavior="Stop"
Duration="{StaticResource HoverEndDuration}" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So do I have to reimplement the original style from the package and add a Hover?
You cannot "override" only a part of a template. It has to be defined as a whole which means that you should copy the MaterialDesignRaisedButton style from GitHub and edit it as per your requirements, by for example adding additional setters to the IsMouseOver trigger.
I am designing a ListView and I want to change its border color when it is focused, IsFocused property dosen't seem to work for ListView. Is there any property similar to IsFocused for Listview?
<Style x:Key="{x:Type ListView}" TargetType="ListView">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource EnabledListViewBorder}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Border"
Background="Transparent"
Padding="{TemplateBinding Padding}"
BorderBrush="{StaticResource EnabledListViewBorder}"
BorderThickness="1">
<ScrollViewer Style="{DynamicResource ListViewColumnHeaderScrollViewer}">
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I have updated the question with my Sourcecode with the solution provided but the Border Color isn't changing. What am i missing here.
You can use Style.Triggers to handle GotFocus and LostFocus events.
<ListView.Style>
<Style TargetType="ListView">
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
Update:
If you have rewritten the ControlTemplate, then delete Style.Triggers part and move EventTriggers from it to the ControlTemplate.Triggers. Additionally you have to set Storyboard.TargetName="Border".
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1" Storyboard.TargetName="Border" >
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
For ListBox IsFocused not working because focus goes to ItemsPresenter that contains ListBoxItems. So focus go to ItemsPresenter that is inside the ListBox. I got workaround that you subscribe event MouseDown and inside it do Focus for ListView, then the trigger starts working.
Let me know if it works for you
I got a button, that display an image.
I want to add, to this image, an animation, so that it will blink (so the user can't ignore it).
So I tried this in the style.xaml :
<Style x:Key="WarningIcon" TargetType="Button">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="30"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid>
<Image Source="../images/im_warning.png" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Visibility">
<Setter.Value>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(Button.Visibility)"
Duration="5:0:0.5"
RepeatBehavior="Forever"/>
</Storyboard>
</Setter.Value>
</Setter>
</Style>
But it doesn't work.
What kind of animation, and setter should I add to make the image blinking, so basically, appear and desappear?
I do not find any example that match with my research.
Thank you.
You should start animation after defining it. Another thing is that probably Opacity will look better:
<Style
...
<Style.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)"
BeginTime="0:0:0" Duration="0:0:0.5"
From="1.0" To="0.0" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
...
</Style>
I am trying to create a Border that shows/hides the border itself on hover. The desired effect is to show a border around content on hover and when the mouse leaves the area, the border fades out. I can't figure out the "fading out" part.
The snippet below uses style Triggers. It works as far as toggling the border color. How can I achieve the fade-out?
<Border
BorderThickness="1"
>
<Border.Style>
<Style>
<Style.Triggers>
<Trigger
Property="Border.IsMouseOver"
Value="false">
<Setter
Property="Border.BorderBrush"
Value="Transparent" />
</Trigger>
<Trigger
Property="Border.IsMouseOver"
Value="true">
<Setter
Property="Border.BorderBrush"
Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
You can try using a ColorAnimation
something like:
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="BorderBrush"
Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.01"
Storyboard.TargetProperty="BorderBrush.Color"
To="LightGray" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetProperty="BorderBrush.Color"
To="Transparent" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>