I have a MenuItem style , it works great but when I select (click) on a menu item it doesn't fire "IsMouseOver" or "IsHighlighted" again.
I tried to fix it by using IsKeyboardFocused but it kills IsPressed on the other side so I can't use it too.
here's my style code :
<Style TargetType="{x:Type MenuItem}" x:Key="MyCustomMenuItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FontFamily" Value="{DynamicResource MenuFontFamily}"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="brd" Background="{StaticResource MainBrush}" >
<Grid>
<ContentPresenter Content="{TemplateBinding Header}" Margin="10,3,10,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Popup x:Name="PART_Popup" Placement="Right" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Border x:Name="SubMenuBorder" BorderBrush="{DynamicResource KeyColor}" BorderThickness="1" Background="{DynamicResource MainBrushTransparent}" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{DynamicResource MainBrushTransparent}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#349E7E" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.300" To="#FFEAEAEA" Storyboard.TargetProperty="Foreground.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#2C2C2C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.300" To="#FF8B8B8B" Storyboard.TargetProperty="Foreground.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#FF34008D" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#2C2C2C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSubmenuOpen" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#349E7E" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.300" To="#FFEAEAEA" Storyboard.TargetProperty="Foreground.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#2C2C2C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.300" To="#FF8B8B8B" Storyboard.TargetProperty="Foreground.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I make it work after pressing menu ?
If I remove press trigger it works fine :\
Replace the <BeginStoryboard> element in the ExitAction for the IsHighlighted trigger with a RemoveStoryboard and set the FillBehavior property of the IsPressed animation to Stop:
<Trigger Property="IsHighlighted" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="sb1">
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#349E7E" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.300" To="#FFEAEAEA" Storyboard.TargetProperty="Foreground.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="sb1" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="sb2">
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd" Duration="0:0:0.300" To="#FF34008D"
FillBehavior="Stop"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
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 textbox that i'd like to also use as a password box? Is it possible to do this? I've added PasswordChar='*' but this has made no difference? Here is my code.
public class AnimatedTextBox2 : TextBox
{
public static readonly DependencyProperty LabelProperty =
DependencyProperty.Register("Label", typeof(string), typeof(AnimatedTextBox2),
new FrameworkPropertyMetadata(null));
public static readonly DependencyProperty HintProperty =
DependencyProperty.Register("Hint", typeof(string), typeof(AnimatedTextBox2),
new FrameworkPropertyMetadata(null));
static AnimatedTextBox2()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(AnimatedTextBox2),
new FrameworkPropertyMetadata(typeof(AnimatedTextBox2)));
AnimatedTextBox2.PasswordChar = '*';
}
public string Label
{
get { return (string)GetValue(LabelProperty); }
set { SetValue(LabelProperty, value); }
}
public string Hint
{
get { return (string)GetValue(HintProperty); }
set { SetValue(HintProperty, value); }
}
public static char PasswordChar { get; set; }
}
<StackPanel Margin="0,0,-60,194.833" Height="62.731" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="458.167">
<local:AnimatedTextBox2
Margin="139.5,0,151.5,15"
VerticalAlignment="Center"
Hint="Enter Password"
Label="Floating Label Text" Height="37.921" />
</StackPanel>
UPDATE control template added below.
<Style TargetType="{x:Type local:AnimatedTextBox2}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="BorderBrush" Value="{StaticResource SolidColorBrush.Control.Border}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="FontSize" Value="14" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:AnimatedTextBox2}">
<ControlTemplate.Resources />
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,0,0,2"
SnapsToDevicePixels="True">
<StackPanel>
<TextBlock x:Name="LabelTextBlock"
Focusable="False"
Foreground="{TemplateBinding BorderBrush}"
RenderTransformOrigin="0.5,0.5"
Text="{TemplateBinding Label}" HorizontalAlignment="Stretch">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
<TranslateTransform X="0" Y="0" />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<Grid>
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" Margin="-2,0,1,0" />
<TextBlock x:Name="HintTextBlock"
Margin="-1,0,6,0"
Focusable="False"
Foreground="{StaticResource SolidColorBrush.Hint}"
IsHitTestVisible="False"
Opacity="0"
Text="{TemplateBinding Hint}" />
</Grid>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetProperty="BorderBrush.Color"
To="{StaticResource Color.Control.Border.Focus}" />
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="Foreground.Color"
To="{StaticResource Color.Control.Border.Focus}" />
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LabelTextBlock" From="14" To="10" Storyboard.TargetProperty="FontSize"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6" Storyboard.TargetProperty="BorderBrush.Color" />
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="Foreground.Color" />
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LabelTextBlock" From="10" To="14" Storyboard.TargetProperty="FontSize"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" />
<Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="false" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"
To="15" />
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LabelTextBlock" From="10" To="14" Storyboard.TargetProperty="FontSize"/>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" />
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LabelTextBlock" From="14" To="10" Storyboard.TargetProperty="FontSize"/>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" />
<Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="true" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="HintTextBlock"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="HintTextBlock"
Storyboard.TargetProperty="Opacity" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this is part of my code, i already search it on google but no one know what i mean.
<Label HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="30" Height="30" Content="" FontFamily="FontAwesome" HorizontalAlignment="Right" VerticalAlignment="Center">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Style.Triggers>
<Trigger Property="Label.IsMouseOver" Value="True">
<Setter Property="Label.Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
You can try using EventTrigger in this case. If's of course longer but it's the simplest approach using pure standard XAML (not any custom):
<Label HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Width="30" Height="30" Content="Clgt?" FontFamily="FontAwesome"
HorizontalAlignment="Right" VerticalAlignment="Center">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Yellow" Duration="0"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeftButtonUp">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Transparent" Duration="0"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
It's even better to use RemoveStoryboard action when the MouseLeftButtonUp like this:
<Style.Triggers>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard Name="bg">
<Storyboard>
<ColorAnimation To="Yellow" Duration="0"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeftButtonUp">
<RemoveStoryboard BeginStoryboardName="bg"/>
</EventTrigger>
</Style.Triggers>
I'm trying to animate the selected item color of a ListView.
I can access this "property" through this code:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Blue">
</Style.Resources>
How can I animate the color of this "property"?
<Storyboard x:Key="MyStoryboard">
<ColorAnimation Storyboard.TargetName="MyList"
Storyboard.TargetProperty="{x:Static SystemColors.HighlightBrushKey}" // compilation error
To="Gray" Duration="0:0:1" />
</Storyboard>
Many thanks!
So here is the SampleStyle ;-)
It uses a Template for the ListViewItem in which you can add a Stoyboard with a ColorAnimation in the Trigger Enter/Exit Actions for the IsSelected-Property!
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid>
<GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<ContentPresenter x:Name="contentPresenter" Visibility="Collapsed" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="GridView.ColumnCollection" Value="{x:Null}">
<Setter TargetName="contentPresenter" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="Red" To="Blue" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="Blue" To="Transparent" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have two DataTriggers binded to a property (Side) but only one storyboard could be started (the one in the last DataTriggers).
Why ?
I feel like the last storyboard override the first one
<Border x:Name="layout" Background="Transparent" BorderBrush="#BAC8CE" BorderThickness="1" CornerRadius="5">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Side}" Value="Up">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:01"
From="Transparent"
To="Green"/>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:00.5"
From="Green"
To="Transparent"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Side}" Value="Down">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:01"
From="Transparent"
To="Red"/>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:00.5"
From="Red"
To="Transparent"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
I would suggest stopping your storyboard before the other one runs:
<Border x:Name="layout" Background="Transparent" BorderBrush="#BAC8CE" BorderThickness="1" CornerRadius="5">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Side}" Value="Up">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="BeginStoryboardTwo" />
<BeginStoryboard x:Name="BeginStoryboardOne">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:01"
From="Transparent"
To="Green"/>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:00.5"
From="Green"
To="Transparent"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Side}" Value="Down">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="BeginStoryboardOne" />
<BeginStoryboard x:Name="BeginStoryboardTwo" >
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:01"
From="Transparent"
To="Red"/>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:00.5"
From="Red"
To="Transparent"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="Hello World!" />
</Border>
try following solution, put your second datatrigger enter action at the first datatrigger exit action
<Border x:Name="layout"
Grid.Row="1"
Background="Transparent"
BorderBrush="#BAC8CE"
BorderThickness="1"
CornerRadius="5">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Side, ElementName=uc, Mode=OneWay}"
Value="Up">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:05"
From="Transparent"
To="Green" />
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:00.5"
From="Green"
To="Transparent" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:05"
From="Transparent"
To="Red" />
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Duration="00:00:00.5"
From="Red"
To="Transparent" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
hope this helps