<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush x:Name="backgroundBrush" Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="backgroundBrush" Property="Color" Value="Green" />
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
Doesn't compile with error 'Cannot find the trigger target 'backgroundBrush'.'
If I remove the DataTrigger it will compile and work. If I change the DataTrigger to use TargetName="grid" Property="Background" it will compile and work (but without the desired opacity).
Where am I going wrong?
While I'm not sure why the brush isn't in the namescope, you can do this by swapping out the brush, and "dotting-down" to the Color property of the background brush in the animations like so:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="grid" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Green" Opacity="0.1"/>
</Setter.Value>
</Setter>
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
Related
I'm trying to create a hover and select effect on a radio button within a group So far it works but if I hover on a button that has once been selected the hover effect doesn't work> Hovering on a button that hasn't previously been selected works and also the isChecked state seems to work. Also how do I deselect a radio button on click so that no button is selected within the group. Thanks for any help or pointers.
<Color x:Key="Hover" R="135" G="0" B="0" A="255" />
<Color x:Key="Default" R="40" G="40" B="40" A="255" />
<Color x:Key="Selected" R="0" G="255" B="0" A="255" />
<!-- // CustomRadioButton // -->
<Style TargetType="{x:Type RadioButton}" x:Key="CustomRadioButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="tabRadBtn" Margin="10"
Width="60" BorderThickness="0">
<TextBlock Background="Transparent" x:Name="ToggleData"
Text="{TemplateBinding Property=Content}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="ToggleColor" Color="{StaticResource Default}"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="EnterRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Hover}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="EnterRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Selected}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
Set ExitActions ColorAnimation Property - FillBehavior="Stop" -
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
...
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
I need define simple animation in the XAML (without code behind), that must rotate the background image of button by changing the bounded boolean property. I have a button in the XAML:
<Button Style="{StaticResource btnStyle}" />
In the Resources section of the Window I create following:
<RotateTransform Angle="180" x:Key="rotAt180" />
<Style TargetType="Button" x:Key="btnStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="Images\pic.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding MyBoolProp}" Value="False">
<Setter Property="RenderTransform" Value="{StaticResource rotAt180}" />
<!-- This animation works good -->
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="180" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<!-- This animation causes exception -->
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="180" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
MyBoolProp is initialized by True.
The first animation is works perfect. But the second animation causes System.InvalidOperationException in PresentationFramework.dll ("Unable to resolve all property references in the "RenderTransform.Angle" property path. Check that the corresponding objects support such properties").
I tried to move the second animation into the trigger, where MyBoolProp is True:
<DataTrigger Binding="{Binding MyBoolProp}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="180" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
But the result is the same. What is wrong in such realization?
The RenderTransform must be set in the Style, not in the DataTrigger:
<Style TargetType="Button" x:Key="btnStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="Images\pic.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform" Value="{StaticResource rotAt180}"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Style.Triggers>
<DataTrigger Binding="{Binding MyBoolProp}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="180" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
I have a ListBox with customized item's style. I want the item to grow a bit when selected, and go back to its original size when deselected. I've tried several solutions but none seemed to work. I think the problem lies in the proper setting of Storyboard.TargetProperty.
My current XAML looks like this:
...
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)" To="1.2" Duration="0:0:.3" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
...
My final code (with answers applied):
...
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.1" Duration="0:0:.1" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.1" Duration="0:0:.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.0" Duration="0:0:.1" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.0" Duration="0:0:.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
...
Try using following code:
...
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform x:Name="scaleTransform" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="1.2" Duration="0:0:.3" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
...
I need to create a color animation. I have a control (a slick button - minimize, close) which works perfectly. There's a mouseover trigger that changes its color. The problem is when I want to animate this color transition. :S
There's an example how it looks like:
<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}">
<Grid>
<Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1">
</Border>
<Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black"
BorderThickness="1">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/>
</Border.BitmapEffect>
</Border>
<Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1">
<ContentPresenter Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Trigger.Setters>
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
<Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" />
</Style>
I tried to remove Trigger.Setters section and replace it by:
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
It works once. There is an animation when mouse enters on the button area but no animation when it leaves. Next when mouse enters on that button again - no animation, but color changes immediately:S I dunno how to do that. I beg for some help.
Thx in advance.
Not here
<Trigger Property="IsMouseOver" Value="False">
Not here
<Trigger.Setters>
But here
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
Should be:
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="0"></Setter>
By the way I think you got Property="IsMouseOver" Value="False" confused with Property="IsPressed" Value="True"
and still the Opacity for ButtonBackgroundBorder on IsMouseOver=false should be 0
Thx, I'm stupid, don't comment:P
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.Setters>
<Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
</Trigger.Setters>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
Everything works fine:)
I am applying a ItemContainerStyle to a ListBox control. In my ListBoxItem style I have several triggers containing storyboard animations that apply to the current state of the ListBoxItem (IsSelected, IsMouseOver).
It all works fine and dandy until after I have selected a ListBoxItem, then the IsMouseOver storyboard animation isn't fired for the ListBoxItem which was previously selected.
I can't see where the problem is, so I am hoping someone will help me out with this issue.
Cheers
Here is the code I am using
<Style x:Key="ListBoxFeedItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" Margin="5" SnapsToDevicePixels="true">
<Grid Name="Grid" Height="Auto" Margin="5">
<TextBlock Margin="10" Text="{Binding Path=Name}" FontSize="14" TextTrimming="CharacterEllipsis" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#4CDFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#00DFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#FFDFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#00DFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Check the order of your Triggers.
Have a look at Multiple storyboards on one property
Check out Yuri's answer.May be that's what you are looking for.