Wpf: Storyboard.TargetName works, but Setter TargetName doesn't - wpf

Let's say we have a XAML code like this:
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.LayoutTransform>
<!--We are rotating randomly each image. Selected one will be rotated to 45°.-->
<RotateTransform Angle="{Binding RandomAngle}" x:Name="globalRotation"/>
</Border.LayoutTransform>
<Grid>
<Image Source="{Binding ImageLocation}" Stretch="None" />
<TextBlock x:Name="title" Text="{Binding Title}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="title" Property="Visibility" Value="Visible"/>
<!--The next line will not compile.-->
<Setter TargetName="globalRotation" Property="Angle" Value="45"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--This compiles well.-->
<DoubleAnimation Storyboard.TargetName="globalRotation" Storyboard.TargetProperty="Angle" To="45" Duration="00:00:03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This code is intended to display a set of images in a listbox. Each image has a random rotation, but when selected, rotates to 45 degrees.
Rotating selected image through a storyboard works well. I just specify Storyboard.TargetName and it rotates the image when selected (Trigger.ExitActions is omitted to make the code shorter).
Now, if I want, instead of using a storyboard, assign 45 degrees value directly, I can't do that, because <Setter TargetName="globalRotation" Property="Angle" Value="45"/>: it compiles with
"Cannot find the Trigger target 'globalRotation'. (The target must appear before any Setters, Triggers, or Conditions that use it.)"
error. What happens? I suppose that Storyboard.TargetName is evaluated during runtime, so let me compile it. Is it right?
How to make it work with just a setter, without using a storyboard?

The thing is that Trigger Setter can target only FrameworkElement or FrameworkContentElement objects, whereas Storyboard works with any DependencyProperty.
Here is a workaround:
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="brd" HorizontalAlignment="Center" VerticalAlignment="Center" Tag="{Binding RandomAngle}">
<Border.LayoutTransform>
<!--We are rotating randomly each image. Selected one will be rotated to 45°.-->
<RotateTransform Angle="{Binding ElementName=brd, Path=Tag}" x:Name="globalRotation"/>
</Border.LayoutTransform>
<Grid>
<Image Source="{Binding ImageLocation}" Stretch="None" />
<TextBlock x:Name="title" Text="{Binding Title}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="title" Property="Visibility" Value="Visible"/>
<!--The next line will not compile.-->
<Setter TargetName="brd" Property="Tag" Value="45"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--This compiles well.-->
<DoubleAnimation Storyboard.TargetName="globalRotation" Storyboard.TargetProperty="Angle" To="45" Duration="00:00:03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

WPF Multiple Triggers & DataTrigger on Button Style

Working on a "data entry style" program. After a certain combination of data changes a property IsSaveNeeded (enum: Yes, No) is set to Yes and the Save button is suppose to flash.
I have been able to get the button to flash with a basic button
<!--Save Button-->
<Button Content=" Save
Settings
 to File" x:Name="SaveBtn" Command="{Binding SaveCMD}" Padding="10,5" Margin= "10,0" IsEnabled="{Binding SaveEnabled}"
Background="{StaticResource {x:Static SystemColors.ControlLightBrushKey}}">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSaveNeeded}" Value="Yes">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="FlashBackground">
<Storyboard BeginTime="00:00:00" RepeatBehavior="Forever" >
<ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:00.75" AutoReverse="True" To="Red" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashBackground" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I have been required to make all the buttons a custom style button.
<!--My Custom Buton-->
<Style x:Key="myBtn" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White" />
<Setter Property="Margin" Value="0" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="{StaticResource myColorBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid UseLayoutRounding="True" SnapsToDevicePixels="True">
<!--Button Content / DropShadow / Border-->
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource myColorBrush}">
<Border.Effect>
<DropShadowEffect ShadowDepth="4" Direction="330" Color="Black" Opacity="0.2" BlurRadius="4"/>
</Border.Effect>
</Border>
<Border Padding="{TemplateBinding Padding}" UseLayoutRounding="True" SnapsToDevicePixels="True">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Content}" SnapsToDevicePixels="True" >
<!--<TextBlock.Effect>
<DropShadowEffect ShadowDepth="4" Direction="330" Color="{StaticResource MyColor}" Opacity="0.3" BlurRadius="4"/>
</TextBlock.Effect>-->
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="#FFC1C1C1" />
<Setter Property="Foreground" Value="#FFACA8A8" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource myHoverBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource myColorBrush}"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
I need to add the IsSaveNeeded DataTrigger to this custom button style, myFlashingBtn, but when I do the Flashing works but the other Triggers stop working.
How do I incorporate the IsSaveNeeded Flashing into my custom button style and keep all the Triggers working? MultiTrigger and MultiDataTriggers haven't helped unless I wrote them wrong.
I believe you're looking for the BasedOn property (Style.BasedOn).
This allows you to inherit everything from a specific style and add to it.
<!--Save Button-->
<Button Content=" Save
Settings
 to File" x:Name="SaveBtn" Command="{Binding SaveCMD}" Padding="10,5" Margin= "10,0" IsEnabled="{Binding SaveEnabled}" >
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource myBtn}">
<Setter Property="Background" Value="{StaticResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSaveNeeded}" Value="Yes">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="FlashBackground">
<Storyboard BeginTime="00:00:00" RepeatBehavior="Forever" >
<ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:00.75" AutoReverse="True" To="Red" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashBackground" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Edit: I moved the Background to a setter of the Style

Button with both background image and color WPF

I have a button in my wpf app, looking like :
<Button x:Name="button" Content="" HorizontalAlignment="Left" Margin="402,10,0,0" VerticalAlignment="Top" Width="26" Height="28" BorderBrush="{x:Null}" Grid.Column="1" Foreground="White">
<Button.Background>
<ImageBrush ImageSource="cls_blk_btn.png" Stretch="None"/>
</Button.Background>
</Button>
Now as you can see the button has a background image, is it possible to have a background color keeping the image also ??
What i am trying to do is change the button's background color(keeping the image as it is) on mouse enter with this :
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Color" To="#FF484A4D" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline >
<ColorAnimation Storyboard.TargetProperty="Color" To="#FF57626C" Duration="0:0:0.1" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
The problem is, as the background is an image, i get exceptions while trying to change the color...Any help in keeping the image as it is and changing the backColor ???
THIS IS WHAT I JUST TRIED
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="resources\c_ml.bmp" Stretch="Fill"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Resources\c_mo.bmp" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
But it gives me 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' in line 45.The lines throwing the exceptions are:
<Style TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="resources\c_ml.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
<Style.Triggers>
Any idea how to fix it ?
I FIXED MY SECOND ERROR BUT HAVE A NEW PROBLEM
The second error occured because i didn't include the pictures in my project.After including, i have a new problem. Now , on mouse over, The button becomes white, i mean it changes it's Background color instead of changing the image...What's wrong ?
Do you have to put the Image in background? If you just want to show an Image with background in the button, it will be lot easier to put the Image in Button.Content and animate the background, e.g.:
<Button x:Name="button" HorizontalAlignment="Left" Margin="402,10,0,0" VerticalAlignment="Top" Width="260" Height="280" BorderBrush="{x:Null}" Foreground="White">
<Button.Content>
<Image Source="image.png" Stretch="None" />
</Button.Content>
<Button.Background>
<SolidColorBrush Color="#FF57626C" />
</Button.Background>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF484A4D" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline >
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF57626C" Duration="0:0:0.1" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
FIXED IT MYSELF
<Button.Content>
<StackPanel>
<Image Name="image1" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_ml.bmp" Stretch="Fill" >
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Image Name="image2" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_mo.bmp" Stretch="Fill" >
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Button.Content>

How to make Rotate in WPF

I beginner in wpf and I want rotate a TextBlock but I have error:"Cannot resolve all property references in the property path 'RotateTransform.Angle'. Verify that applicable objects support the properties."
<TextBlock Grid.Row="1" Grid.Column="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Rotate}">
<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle="-16.308"/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Background>
<ImageBrush ImageSource="image/1.png"></ImageBrush>
</TextBlock.Background>
</TextBlock>
and this is my style
<Style x:Key="Rotate" TargetType="{x:Type TextBlock}">
<!--<Setter Property="Width" Value="10"></Setter>
<Setter Property="Height" Value="10"></Setter>-->
<Setter Property="Background" Value="Black"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RotateTransform.Angle" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
You should be able to use the orientation of a stack panel in your xaml to rotate easily, but this does not give immediate access to the angle.
<StackPanel Orientation="Horizontal">
<Textbox ...../>
</StackPanel>
Or in your style you can add a setter property.
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="-90"></RotateTransform>
</Setter.Value>
</Setter>
If you need TransformGroup in your RenderTransorm, then StoryboardTargetProperty will be look like
RenderTransform.Children[0].Angle
If you leave only RotateTransform there, then it will be
RenderTransform.Angle
In both cases, as you see, we start searching property from RenderTransform.

XamlWriter skips "x:Name" attribute while saving ResourceDictionary

Here's custom style:
<Style TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="false" />
<Setter Property="Background" Value="{StaticResource AppBackBrush}"/>
<Setter Property="Foreground" Value="{StaticResource AppBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{StaticResource AppBrush}"
Name="content"
BorderThickness="1"
CornerRadius="3"
Background="{StaticResource AppBackBrush}"
>
<Grid Background="Transparent">
<Label Content="{TemplateBinding Content}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Grid.Row="0" Grid.Column="0"
Background="Transparent"
Style="{x:Null}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}"/>
</Grid>
<Border.RenderTransform>
<!-- push the content a bit to the left and the top -->
<TranslateTransform x:Name="translation"
X="-1" Y="-1"/>
</Border.RenderTransform>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0"
To="0"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.X)"/>
<DoubleAnimation Duration="0:0:0"
To="0"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.Y)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0"
To="-1"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.X)"/>
<DoubleAnimation Duration="0:0:0"
To="-1"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.Y)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="content" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I save this ResourceDictionary that contains this style to string like this:
XamlWriter.Save(s);
where s is ResourceDictionary. The problem is that when I get expected string, it looks so:
<Style TargetType=\"Button\" x:Key=\"{x:Type Button}\">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property=\"UIElement.Focusable\">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property=\"Panel.Background\">
<Setter.Value>
<SolidColorBrush>#FFF1F2F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property=\"TextElement.Foreground\">
<Setter.Value>
<SolidColorBrush>#FF13776A</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property=\"Control.Template\">
<Setter.Value>
<ControlTemplate TargetType=\"Button\">
<Border BorderThickness=\"1,1,1,1\" CornerRadius=\"3,3,3,3\" BorderBrush=\"#FF13776A\" Background=\"#FFF1F2F4\" Name=\"content\">
<Border.RenderTransform>
<TranslateTransform X=\"-1\" Y=\"-1\" />
</Border.RenderTransform>
<Grid>
<Grid.Style>
<Style TargetType=\"Grid\">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property=\"Panel.Background\">
<Setter.Value>
<SolidColorBrush>#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Style>
<Label Content=\"{TemplateBinding ContentControl.Content}\" Background=\"#00FFFFFF\" Foreground=\"{TemplateBinding TextElement.Foreground}\" HorizontalContentAlignment=\"Center\" VerticalContentAlignment=\"Center\" Padding=\"{TemplateBinding Control.Padding}\" Style=\"{x:Null}\" Grid.Column=\"0\" Grid.Row=\"0\" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=\"ButtonBase.IsPressed\">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<DoubleAnimation To=\"0\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.X)\" />
<DoubleAnimation To=\"0\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.Y)\" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<DoubleAnimation To=\"-1\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.X)\" />
<DoubleAnimation To=\"-1\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.Y)\" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property=\"UIElement.IsEnabled\">
<Setter Property=\"UIElement.Opacity\" TargetName=\"content\">
<Setter.Value>
<s:Double>0.5</s:Double>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please take a look at TranslateTransform in Border.RenderTransform. In the ResourceDictionary it has x:Name="translation", but the name is missing in the output string.
Where was I mistaken or is this a bug? Thanks in advance.
According to this MSDN blog post, "some markup extensions, such as {x:Static}, are resolved at load-time by XamlReader and the markup extension itself is discarded, so there is no means for XamlWriter to re-produce it." It looks like x:Name is one of those markup extensions that is lost.
It looks like you are trying to create two styles - an original and an extended one - that both implicitly target button (presumably in different scopes). If that is the case, you can create a base style in a resource both styles above can reference, then use Style's BasedOn property to keep from duplicating the template.

WPF Trigger animation when Visibility is changed?

Well i have a custom control and when Visibility is changed to Visible I have a Trigger with a enter/exit action but the problem is that when the exit action fires the Visibility is no longer Visible so the animation can't be seen how would I fix this?
here is my Trigger:
<ControlTemplate.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Hide}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Show}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
I tried this too and failed. I think it is not possible to accomplish this in a simple ControlTemplate with a Trigger on the Visibility property. What you can do is add an Opacity animation From 1 To 0 to a Trigger for a different property, for instance a DependencyProperty that you add in the code behind yourself.
You could also use ObjectAnimationUsingKeyFrames to set Visibility for animation period.
In such case there is no need in any codebehind.
There is a way to achieve it. Not 100 % pure, but works for me:
Don't use Visibility property, but use Opacity and Tag property.
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border CornerRadius="5"
BorderThickness="2"
BorderBrush="DodgerBlue"
Background="#CC4f9dea" >
<Grid>
<ContentPresenter HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch" />
<Button x:Name="btnClose" Opacity="0" Content="X" Style="{StaticResource RoundedButtonStyle}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" TargetName="btnClose" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2" BorderBrush="Black">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Tag" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="0.5" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.5" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>

Resources