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>
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 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>
SliderMenu in Youtube
I can't do something similar to this video, the animation doesn't stop and the menu always flashes. Here's my XAML:
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="-70,0,0,0" To="15,0,15,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="15,0,15,0" To="-70,0,0,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
What's the problem with it?
The flickering is happening because as soon as the StackPanel starts animating, it moves itself out of the way (of the mouse cursor), causing the other animation to start. I don't see you full code, so here are a couple of pointers to improve your code.
Make sure the entire menu is hittest-visible (e.g. by setting a background)
Don't use two triggers, use one trigger with enter and exit-triggers
Avoid the margin on the left - it can cause the same kind of flickering again.
<StackPanel Background="Blue" Width="100" HorizontalAlignment="Left">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Margin" Value="-70,0,0,0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="-70,0,0,0" To="0,0,0,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="0,0,0,0" To="-70,0,0,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Button Width="100" Height="25"></Button>
</StackPanel>
Result:
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
I have a style for a ListViewItem control:
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
I want to when mouse is over a ListViewItem, border of item appearing slowly and when mouse leave it, border effect disappear,
But i get this error when mouse goes to leave item:
Cannot resolve all property references in the property path 'BitmapEffect.Opacity'. Verify
that applicable objects support the properties.
Note that when i use only first EventTrigger which routed to ListViewItem.MouseEnter, program works correct! but it has not a good view!
I'm using OuterGlowBitmapEffect!
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="SkyBlue" GlowSize="20" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Black" />
</Trigger>
I was trying with BitmapEffect, it is working fine as your above code.
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Added Whole sample.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Custom="http://schemas.microsoft.com/wpf/2008/toolkit"
xmlns:uc="clr-namespace:WpfApplication10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="WpfApplication10.Window1"
x:Name="Window"
Title="Window1" mc:Ignorable="d">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate1">
<StackPanel>
<TextBlock Text="{Binding Property1}"/>
<Image Source="{Binding Property2}" HorizontalAlignment="Left" Height="64" Width="64"/>
</StackPanel>
</DataTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource SampleDataSource1}}">
<ListBox DataContext="{Binding Source={StaticResource SampleDataSource3}}"
ItemTemplate="{DynamicResource ItemTemplate1}" ItemsSource="{Binding Collection}"
ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" >
</ListBox>
</Grid>