I have a observable collection of 10 objects binded in a itemscontrol canvas .
Each object has a different canvas.right canvas.top value.
The ideea was to click on the object to edit it , the object should move to a certain position , edit it and when its done click on it to go back to its original position.
So i used a checkbox to have a datatriger for the animation , i have two animations one for edit the other for going back.
Problem is that only the first animation fires the second never so the control never moves back to its position.
Here is the code:
<ItemsControl ItemsSource="{Binding SelectedButtonForEdit.Layers}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Canvas IsItemsHost="True"/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Right" x:Name="right" Value="{Binding CanvasRight}"/>
<Setter Property="Canvas.Top" x:Name="top" Value="{Binding CanvasTop}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Width="342" Height="156" IsChecked="{Binding IsEditing}" BorderBrush="Black" BorderThickness="1" Style="{StaticResource MaterialDesignRaisedAccentButton}" Background="{Binding Name,Converter={StaticResource LayerNameToColor}}" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
</Grid>
</CheckBox>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEditing}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" Duration="0:0:0:0.1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0:0.1" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsEditing}" Value="True">
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" To="200" Duration="0:0:0:0.1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="150" Duration="0:0:0:0.1" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
On your first trigger, you have a EnterActions, and on the second you have ExitActions. But in your case, you only need 1 trigger, with both EnterActions and ExitActions, like so :
<DataTrigger Binding="{Binding IsEditing}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" To="200" Duration="0:0:0:0.1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="150" Duration="0:0:0:0.1" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" Duration="0:0:0:0.1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
In the code I provided, when IsEditing will turn to True, the animation will move the object to 200,150, and when IsEditing will turn to false, will go back to the original values.
I am trying to animate a DropShadowEffect I have applied to one grid and a BlurEffect that I have applied to another grid.
The blur animation seems to work fine and this is the code.
<Style x:Key="BluredGridStyle" TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="extentions:GridExtention.IsBlured" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).Radius" From="0" To="10" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).Radius" From="10" To="0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
<Grid Background="{DynamicResource BrHostBackground}">
<Grid extentions:GridExtention.IsBlured="{Binding BackgroundIsBlured}" Style="{StaticResource BluredGridStyle}">
<Grid.Effect>
<BlurEffect x:Name="BlurEffect" Radius="0"/>
</Grid.Effect>
</Grid>
</Grid>
But when I try with the drop shadow I get errors. Here is my initial code.
<Style x:Key="DropShaodowGridStyle" TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).BlurRadius" From="0" To="80" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).BlurRadius" From="80" To="0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
<Grid Visibility="{Binding HardwareLoadingVisibility}">
<Grid x:Name="grid" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" Width="550" Height="250" Style="{DynamicResource DropShaodowGridStyle}">
<Grid.Effect>
<DropShadowEffect ShadowDepth="0" Opacity="0.8"/>
</Grid.Effect>
</Grid>
</Grid>
This generates the following error
InvalidOperationException: Cannot resolve all property references in the property path '(Effect).BlurRadius'. Verify that applicable objects support the properties.
If I change the property to (Effect).Radius I get the same error.
I also tried changing the property to (UIElement.Effect).(DropShadowEffect.BlurRadius) which generated this error
InvalidOperationException: 'Effect' property does not point to a DependencyObject in path '(0).(1)'.
Looks like I found the answer.
I had to assign a default value to the property in the style.
<Style x:Key="DropShaodowBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="0"></DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Effect).BlurRadius" From="0" To="80" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Effect).BlurRadius" From="80" To="0" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Currently I have an Image that I pulse when it is loaded. I want to rather activate the Storyboard when I change the Visibility of the Image. But I see that Image.Triggers have to be EventTriggers.
Which event do I need to hook into?
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MandateErrorImage"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.1" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
In WPF there is an event UIElement.IsVisibleChanged but is a CLR event, not a routed event, therefore in EventTrigger can not be used.
In this case use IsVisible property in DataTrigger like this:
<Window.Resources>
<Style x:Key="AnimationImageStyle" TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="1.0" To="0.1"
Duration="0:0:0.5"
AutoReverse="True"
RepeatBehavior="0:0:2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Image Name="TestImage"
Style="{StaticResource AnimationImageStyle}"
Source="Enter.jpg"
Width="400"
Height="400" />
</Grid>
If you want to animate on a DependencyProperty or bound value you will need to create a Style for your image and put the animation in the style.
The following Style will perform your animation when the Visibility of your image is set to Visible:
<Style x:Key="FlashingImageStyle" TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.1" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="0:0:2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
I have been playing around with vector images. I have been successful in creating them but would like to create some animations using them. I have created a button style to house the image that works quite nicely with one exception. I am trying to enlarge the image when the mouse overs over it. My code works fine but it is expanding the image with respect to the top left corner. In other words, the topmost and leftmost point remains stationary and the image expands down and right. I would like the bottom-most center point to remain stationary and the image to expand in each direction horizontally and expand upward. As you can see, I am actually expanding the Viewbox using a trigger to make things happen. Any help in achieving this would be appreciated.
<Style x:Key="DockButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Margin="{TemplateBinding Margin}"
BorderThickness="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="Transparent">
<Grid HorizontalAlignment="Center" Name="OuterGrid">
<Viewbox Height="65">
<Viewbox.Style>
<Style TargetType="Viewbox">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=OuterGrid}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1.1" Duration="0:0:0.2" FrameworkElement.FlowDirection="RightToLeft" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1.1" Duration="0:0:0.2" FrameworkElement.FlowDirection="RightToLeft" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1.0" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1.0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Viewbox.Style>
<Grid Name="VectorImageGrid" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<Path Fill="#FF555555">
<Path.Style>
<Style TargetType="Path">
<Style.Resources>
<Storyboard x:Key="GlowOn">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="#FF555555"
To="Blue"
Duration="0:0:0.5"
AutoReverse="False"/>
</Storyboard>
<Storyboard x:Key="GlowOff">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="Blue"
To="#FF555555"
Duration="0:0:0.5"
AutoReverse="False"/>
</Storyboard>
</Style.Resources>
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="1"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=VectorImageGrid}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource GlowOn}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource GlowOff}"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M640,5105C370,5051 144,4858 50,4603 35,4560 17,4491 11,4450 2,4394 0,3918 2,2610 6,622 -2,813 85,635 180,443 347,302 565,228L635,205 1693,202C2549,200 2750,202 2744,212 2740,219 2722,243 2705,265 2659,323 2593,432 2554,514L2520,585 1612,590 705,595 649,618C535,664 437,771 409,882 388,963 388,4362 409,4435 448,4567 536,4658 675,4709 708,4721 826,4724 1365,4727 2092,4731 2068,4734 2114,4662 2158,4596 2163,4549 2169,4100 2175,3677 2175,3675 2198,3637 2211,3617 2243,3587 2268,3572L2315,3545 2750,3540C3131,3535 3191,3532 3230,3517 3281,3497 3306,3476 3329,3435 3343,3409 3345,3354 3348,3003L3351,2601 3388,2617C3454,2645,3580,2679,3661,2692L3741,2705 3738,3170 3735,3635 3699,3710C3633,3849 3554,3938 3056,4436 2496,4995 2415,5063 2253,5105 2174,5126 743,5126 640,5105z" />
</Path.Data>
</Path>
<Path>
<Path.Style>
<Style TargetType="Path">
<Style.Resources>
<Storyboard x:Key="GlowOn">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="DarkGreen"
To="Green"
Duration="0:0:0.3"
AutoReverse="False"/>
</Storyboard>
<Storyboard x:Key="GlowOff">
<ColorAnimation Storyboard.TargetProperty="Fill.Color"
From="Green"
To="DarkGreen"
Duration="0:0:0.3"
AutoReverse="False"/>
</Storyboard>
</Style.Resources>
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="DarkGreen" Opacity="1"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=VectorImageGrid}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource GlowOn}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource GlowOff}"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M3832,2319C3574,2297 3319,2177 3131,1989 2731,1588 2684,955 3021,499 3082,417 3216,288 3295,235 3870,-146 4641,50 4952,655 5050,848 5085,1006 5077,1225 5066,1528 4948,1794 4734,2000 4485,2239 4177,2348 3832,2319z M4140,1575L4140,1380 4335,1380 4530,1380 4528,1183 4525,985 4333,982 4140,980 4138,787 4135,595 3938,592 3740,590 3740,785 3740,980 3545,980 3350,980 3350,1180 3350,1380 3545,1380 3740,1380 3740,1575 3740,1770 3940,1770 4140,1770 4140,1575z" />
</Path.Data>
</Path>
</Grid>
</Viewbox>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please try setting the RenderTransformOrigin to 0.5, 1. It will now scale horizontally from the center of the control and vertically from the bottom.
...
<Viewbox Height="65">
<Viewbox.Style>
<Style TargetType="Viewbox">
<!-- Made the change here -->
<Setter Property="RenderTransformOrigin" Value="0.5, 1"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
...
Taken from MSDN:
Gets or sets the center point of any possible render transform declared by RenderTransform, relative to the bounds of the element.
See this post for a solution to a similar problem: Make ScaleTransform start from Center instead of Top-Left Corner.
I have multiple storyboards that access the same property (not at the same time). After one storyboard changed the property, the other one seems to have no access to it and does not change anything.. What can I do against this?
Sample:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="Border" BorderBrush="DarkGray" BorderThickness="1" Margin="3">
<ContentPresenter />
<Border.Background>
<SolidColorBrush />
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="#3e8bff" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Orange" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Items>
<sys:String>hey</sys:String>
<sys:String>du</sys:String>
<sys:String>dux</sys:String>
<sys:String>duy</sys:String>
<sys:String>dua</sys:String>
</ListBox.Items>
</ListBox>
This is the smallest sample code I could make. After you've hovered an item, it won't turn blue when it's selected (try to click on one item and then use the arrow keys to select items without hovering them).
I have a solution!!! Triggers and actions order does matter... the answer is not to play more then one storyboard at the same time, just stop other.
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="Selector.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="SelectedBegin" />
<StopStoryboard BeginStoryboardName="UnselectBegin" />
<BeginStoryboard x:Name="EnterBegin" Storyboard="{StaticResource MouseEnterSb}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="LeaveBegin" Storyboard="{StaticResource MouseLeaveSb}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="Selector.IsSelected" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="LeaveBegin" />
<StopStoryboard BeginStoryboardName="EnterBegin" />
<BeginStoryboard x:Name="SelectedBegin" Storyboard="{StaticResource SelectedSb}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="UnselectBegin" Storyboard="{StaticResource UnselectSb}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
I've been able to reproduce your erroneous results using the following code (I'm stumped too):
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="BorderAnimationToRed">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToBlue">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Blue" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToOrange">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Orange" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToWhite">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</ControlTemplate.Resources>
<Border Name="Border" BorderBrush="DarkGray" BorderThickness="1" Margin="3">
<ContentPresenter />
<Border.Background>
<SolidColorBrush />
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToOrange}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToWhite}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToBlue}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToWhite}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Items>
<sys:String>hey</sys:String>
<sys:String>du</sys:String>
<sys:String>dux</sys:String>
<sys:String>duy</sys:String>
<sys:String>dua</sys:String>
</ListBox.Items>
This code is a little easier to read, as the visuals, resources, and triggers are declared separately. Maybe you could try to use EventTriggers to accomplish your goal (using the "ListBoxItem.MouseEnter" and "ListBoxItem.MouseLeave" routed events). Good luck!