Use relative binding to bind prop Window.ActualHeight to DoubleAnimation.To prop - wpf

I try use relative binding and bind Window.ActualHeight property to DoubleAnimation.To property.
Relative binding doesn’t work but if I use binding by ElementName it work.
NOT WORK:
<Window xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Sample.Window"
x:Name="Shell"
Title="Sample"
Width = "525"
Height = "350">
<Canvas Height="400">
<Ellipse Canvas.Left="80"
Canvas.Top="0"
Width="30"
Height="30"
Fill="LimeGreen">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True"
To="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}, Path=ActualHeight}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</Window>
THIS WORK:
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True"
To="{Binding ElementName=Shell, Path=ActualHeight}"/>
It is possible use relative binding to Window.ActualHeight property ?
EDITED:
I tested again on routed event Ellipse.Loaded animation not work but if I changed routed event to MouseEnter animation work. I posted all project.
sample download
Thank

Strangely if any frameworkElement traverses Visual Tree till ancestral window, in that case DoubleAnimation too is able to find ancestral window but if no element is referring to ancestral window, DoubleAnimation is not able to traverse up the Visual tree.
In your sample in case i simply traverse till window outside of animation, it works. Test this sample (traverse tree using Tag property of canvas)-
<Canvas Height="400"
Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=Window}}"> <-HERE
<Ellipse Canvas.Left="80"
Canvas.Top="0"
Width="30"
Height="30"
Fill="LimeGreen">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True"
To="{Binding RelativeSource={RelativeSource
AncestorType={x:Type Window},
Mode=FindAncestor},
Path=ActualHeight}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>

Related

Animation triggering on property change doesn't seem to fire

I'm trying to make a status textblock that will display things like "Database updated" and other information for which a dialog would be overkill. It should flash on the screen and then fade away within 2 seconds or so. The goal is that it will sit at opacity 0 until its binding is updated, then 1 opacity and fade out. Problem is, what I came up with doesn't seem to trigger at all. Here's my code:
<TextBlock Text="{Binding AppState.Feedback}" x:Name="feedbackBlock"
Opacity="0" FontSize="100" Foreground="Black">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="feedbackBlock"
Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
Not really sure where to start in debugging this, I don't get an error, it just doesn't show.
You haven't told the Binding to fire the TargetUpdated event. Add NotifyOnTargetUpdated=True to the Binding expression. Besides that, you don't need to set Storyboard.TargetName:
<TextBlock x:Name="feedbackBlock"
Text="{Binding AppState.Feedback, NotifyOnTargetUpdated=True}"
Opacity="0" FontSize="100" Foreground="Black">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>

Xaml Doubleanimation targetproperty crashes

I would like to animate my Label inside of canvas from canvas right to canvas left + size of label, infinitely. Which means my label comes from the right side and goes to the left till the end and then again repeats.
This is my xaml:
<Canvas Margin="0, 0, 0, 20" Name="CanMain2" Height="30" Width="350" >
<Label x:Name="LabelNameSong" Content="Hello" >
<Label.Resources>
<Storyboard x:Key="Scroll">
<DoubleAnimation To="{Binding ActualWidth, ElementName=LabelNameSong}" Duration="00:00:10"
Storyboard.TargetProperty="(Canvas.Right)"
Storyboard.TargetName="LabelNameSong"
RepeatBehavior="Forever"/>
</Storyboard>
</Label.Resources>
<Label.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<BeginStoryboard Storyboard="{StaticResource Scroll}" />
</EventTrigger>
<EventTrigger RoutedEvent="Label.SizeChanged">
<BeginStoryboard Storyboard="{StaticResource Scroll}" />
</EventTrigger>
</Label.Triggers>
</Label>
</Canvas>
As soon as I launch app it crashes, and debugger says:
Cannot animate the 'Right' property on a
'System.Windows.Controls.Label' using a
'System.Windows.Media.Animation.DoubleAnimation'. For details see the
inner exception.
I am new to xaml and can't seem to make this work.
This is because Canvas.Right is an AttachedProperty but you have not attached the property to your Label
If you add the AttachedProperty to your Label it will then let you animate the value as the Property will be registered(attached) to the Label
Example:
<Canvas Margin="0, 0, 0, 20" Name="CanMain2" Height="30" Width="350" >
<Label x:Name="LabelNameSong" Content="Hello" Canvas.Right="0" >
<Label.Resources>
<Storyboard x:Key="Scroll">
<DoubleAnimation To="{Binding ActualWidth, ElementName=LabelNameSong}" Duration="00:00:10"
Storyboard.TargetProperty="(Canvas.Right)"
Storyboard.TargetName="LabelNameSong"
RepeatBehavior="Forever"/>
</Storyboard>
</Label.Resources>
<Label.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<BeginStoryboard Storyboard="{StaticResource Scroll}" />
</EventTrigger>
<EventTrigger RoutedEvent="Label.SizeChanged">
<BeginStoryboard Storyboard="{StaticResource Scroll}" />
</EventTrigger>
</Label.Triggers>
</Label>
</Canvas>

XAML animation of height of control with dynamic content

I have a panel that should be minimized unless the user hovers the mouse over the panel. It is implemented using a storyboard that lets the height of the panel grow when the use puts the mouse over the control. At the moment the target height is hard coded to 400 which is a bad solution as the content of the panel will be different each time the application starts (it is static during execution).
How do you create an animation that lets the panel grow to the size of the current content?
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="500" Width="525">
<Grid>
<Border Margin="10,0" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="0,0,8,8">
<Border.Effect>
<DropShadowEffect Opacity="0.5"/>
</Border.Effect>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
From="25"
To="400"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
From="400"
To="25"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<StackPanel Margin="5">
<TextBlock Height="25" Text="My items panel" />
<ListBox MinWidth="150" MinHeight="100" ItemsSource="{Binding MyItems}" />
</StackPanel>
</Border>
</Grid>
Edit: I have tried with binding to the Height of the StackPanel but that didn't really help as it didn't take the margins of the stackpanel into account thus making the panel shorter than needed.
<DoubleAnimation Storyboard.TargetProperty="Height"
From="{Binding ElementName=NameOfStackPanel, Path=ActualHeight}"
To="25"
Duration="0:0:0.2" />
You could create a converter to handle adding the margins to the ActualHeight of your StackPanel. You could even use a multivalue convertor so you could bind the margin too and not have to hardcode a fudge factor. Finally, you could probably wrap your stackpanel in another panel (without margins) and bind to the height of that instead.

XamlParseException occured - animating an ellipse

I have the following code to animate the width of the ellipse forever until the window is closed. However, it throws XamlParseExceptionError. Could someone point out to me where I made the mistake?
`
</TextBlock>
<TextBlock x:Uid="ProductName" Localization.Attributes="$Content(Readable Unmodifiable)">
<TextBlock.ToolTip>
<TextBlock x:Uid="ProductNameTip" Localization.Attributes="$Content(ToolTip Readable Modifiable)">
A photo editor that will make everyone look beautiful
</TextBlock>
</TextBlock.ToolTip>
Amazing Photo Editor
</TextBlock>
<Ellipse Name="Circle"
Width="100"
Height="100"
Fill="Red">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.Target="Circle"
Storyboard.TargetProperty="Width"
From="1"
To="100"
Duration="0:0:5"
AutoReverse="True"
RepeatBehavior="Forever">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</StackPanel>
</Grid>
`
Use Storyboard.TargetName Attached Property instead of Storyboard.Target.
<DoubleAnimation Storyboard.TargetName="Circle"

Bind Controls TO standalone animations

i'm new to wpf and i'm try to learn something.
My problem is : i need to bind all that i want to a looping animation...
Example:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<Slider Visibility="Hidden" Minimum="0" Maximum="100" Height="22" Margin="73,40,105,0" Name="Slider1" VerticalAlignment="Top" Value="0">
<Slider.Triggers>
<EventTrigger RoutedEvent="Slider.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Slider1"
Storyboard.TargetProperty="Value"
From="0" To="100" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Slider.Triggers>
</Slider>
<Slider Minimum="0" Maximum="100" Height="22" Margin="72,98,106,0" Name="Slider2" VerticalAlignment="Top" Value="{Binding ElementName=Slider1, Path=Value}"/>
<Button Width="{Binding ElementName=Slider1, Path=Value}"></Button>
</StackPanel>
Slider1 is hidden and act as a Source for Slider2 and ButtonWidth.
Like a standalone oscillator.
I need a way to eliminate slider1 and bind directly to a standalone animation that loops.
It is possible?
Thanks in advance :)
Why don't you simply animate the Slider2 Value the same way you've animated Slider1's value? You can also animate the Button's Width. I am not sure why you would need Slider1 in the first place. The following markup demonstrates removing Slider1 and using the animation as a resource:
<Window.Resources>
<DoubleAnimation x:Key="ValueAnimation"
Storyboard.TargetProperty="Value"
From="0" To="100" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Window.Resources>
<StackPanel>
<Slider Minimum="0" Maximum="100" Height="22" Margin="72,98,106,0"
Name="Slider2" VerticalAlignment="Top">
<Slider.Triggers>
<EventTrigger RoutedEvent="Slider.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="Slider2">
<StaticResource ResourceKey="ValueAnimation"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Slider.Triggers>
</Slider>
<Button Width="{Binding ElementName=Slider2, Path=Value}"/>
</StackPanel>
You could remove the TargetProperty from ValueAnimation and specify that per animation, as well. That would let you use a single animation for both the Button.Width and the Slider.Value.
thanks for your answer :)
Why don't you simply animate the Slider2 Value the same way you've animated Slider1's value?
because i need to centralize the animation values to share it on multiple objects (not only another slider) and, in this way, i can edit values in 1 place only :)
Thank you your example fits well :)

Resources