I have here some buttons that are inside a stackpanelin a wpf, the buttons have slightly curved corners. I want that there will be an animation that will turn the buttons into a circle if the mouse hovers over them. However this code here throws "System.InvalidOperationException, This Freezable cannot be frozen."
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard Name="CurveStoryboard" Storyboard.TargetProperty ="Button" >
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:5">
<DiscreteObjectKeyFrame.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="30,30,30,30" ></Border>
</ControlTemplate>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
Thanks a bunch.
Related
<DockPanel Name="MyPanel" IsVisibleChanged="MyPanel_IsVisibleChanged">
<DockPanel.Triggers>
<EventTrigger RoutedEvent="IsVisibleChanged"> // error here
</EventTrigger>
</DockPanel.Triggers>
</DockPanel>
Above is my dockpanel xmal code. Because IsVisibleChanged is not a RoutedEvent I can not add in the EventTrigger this code:
<Storyboard x:Key="hideMe">
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" To="0.0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="showMe">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:5" To="0.75"/>
</Storyboard>
I try to give a fade out animation to my dockpanel.
Instead of using an event trigger, I would use a normal trigger to check the value of the Visibility property of the DockPanel.
You can create a style on the DockPanel to do it, like this:
<DockPanel Name="MyPanel">
<DockPanel.Style>
<Style TargetType="DockPanel">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<!-- Set storyboard to run when DockPanel is set visible here: -->
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<!-- Set storyboard to run when DockPanel is no longer set visible here: -->
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
I'm trying to create a style in XAML that can be applied to any TextBlock element to make the text blink. Here is the style:
<Style x:Key="BlinkingTextBlock" TargetType="TextBlock">
<Style.Resources>
<Storyboard x:Key="FlashMe" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard x:Name="FlashMe" />
</EventTrigger>
</Style.Triggers>
</Style>
When I apply it to a text block
<TextBlock FontSize="16" FontStyle="Italic" FontWeight="Bold" Foreground="Red" Style="{StaticResource BlinkingTextBlock}" >
I get an error:
Must have a Storyboard object reference before this trigger action can execute.
Does anyone have an idea of where I need another storyboard?
The error says it all, you should bind to the "FlashMe" StoryBoard:
<BeginStoryboard Storyboard= "{StaticResource FlashMe}" />
I have a storyboard animation that fades a control out of view using the Opacity property. When it completes, I want to set the Visibility of the control to Collapsed.
I'd like to be able to do the reverse as well... Set the Visibility to Visible and then use a storyboard to fade the control into view.
I know I can hook up events, but I would like to do this all in XAML. Is it possible?
you can do this in the animation as well
<Window.Resources>
<Storyboard x:Key="OnLoaded1">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:01.4000000" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
</EventTrigger>
</Window.Triggers>
I have a listbox containing some items that have a template. The items are created at runtime. The template triggers an scale animation when the mouse is hovering over a ListBoxItem. I would like to change the background of the item when the user clicks the item. The code below does not work because I believe the IsMouseCaptured (click) is handled by the listbox selector. Any ideas how I can do this all in XAML code?
<ControlTemplate.Triggers>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter TargetName="rec" Property="Fill" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
When the user clicks an item in a listbox, it is selected, therefor your trigger needs to operate on the IsSelected-Property.
Create a style for your ListBoxItem, put the Trigger on the IsSelected-Property and set that Style as ItemContainerStyle.
As Falcon said, you could use events for your task. This can even be done purely in XAML, like this:
<EventTrigger RoutedEvent="MouseDown" >
<EventTrigger.Actions>
<BeginStoryboard x:Name="ClickBackground">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Duration="0" FillBehavior="HoldEnd"
Storyboard.TargetName="rec"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Black" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseUp" >
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="ClickBackground" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave" >
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="ClickBackground" />
</EventTrigger.Actions>
</EventTrigger>
Am facing hard time finding solution for this problem. I've a control template in which i've a content presenter and a Custom visual state manager with visual state Selected and UnSelected under SelectionStates group. Inside the content presenter's content template i've an ellipse whose Fill property i want to animate according to the visual state. This is not directly possible since the ellipse is residing inside the content presenter's content template. Is ther any indirect workaround possible to do the same. Below is my template
<Style TargetType="local:TabNavigationItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TabNavigationItem">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF3B5A82"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Transparent"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter>
<ContentPresenter.ContentTemplate>
<DataTemplate x:Key="tabNavigationItemTemplate">
<Border Padding="1">
<Ellipse x:Name="TabStripEllipse"
Fill="Transparent"
Stroke="#FF3B5A82" Cursor="Hand"
Height="8" Width="8"/>
</Border>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your thoughts and suggestions are appreciated..
you may also want to put my xaml file as below.. but the properties related to target type of outer template should be accessible by inner data template.
<Style TargetType="local:TabNavigationItem">
<Setter Property="ItemContentTemplate" Value="{StaticResource contentTemplate}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TabNavigationItem">
<Grid>
<Border>
<ContentPresenter>
<ContentPresenter.ContentTemplate>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabItemPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF3B5A82"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabItemPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Transparent"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border Padding="1">
<Ellipse x:Name="TabStripEllipse"
Fill="Transparent"
Stroke="#FF3B5A82" Cursor="Hand"
Height="8" Width="8"/>
</Border>
</ContentPresenter.ContentTemplate>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Perhaps you have a reason why you are using a ContentPresenter in this way. The normal use of a content presenter would be act as a place holder for content being bound to a property of the control. You wouldn't normally use ContentPresenter and then provide your own DataTemplate to it. Here is my version of your Xaml without the apparrently unnecessary content presenter:-
<Style TargetType="local:TabNavigationItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TabNavigationItem">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF3B5A82"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="UnSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Transparent"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border Padding="1">
<Ellipse x:Name="TabStripEllipse"
Fill="Transparent"
Stroke="#FF3B5A82" Cursor="Hand"
Height="8" Width="8"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now your VSM should be able to find the Ellipse.