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"
Related
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>
How i can enlarge an Ellipse in WPF, preffering using Margins, just like i did in my wrong code :D ? how i can do that, you will understand from the "wrong code"
<DoubleAnimation Duration="00:00:01" Storyboard.TargetProperty="Margin" From="789,-189,762,899" To="23,-189,-4,-637"/>
http://i.stack.imgur.com/Ryn31.png
Use ThicknessAnimation instead of DoubleAnimation :)
I tried enlarging an Ellipse by altering Margin values but did not see any visual change.
I see this question already has been answered, in any case, here is an example of how it is possible to animate the height and Width of an Ellipse in WPF using markup in XAML:
<Ellipse Height="100" Width="100" Fill="Blue" Stroke="Black">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation RepeatBehavior="Forever" Storyboard.TargetProperty="Width" From="100" To="300" Duration="00:00:02" />
<DoubleAnimation RepeatBehavior="Forever" Storyboard.TargetProperty="Height" From="100" To="300" Duration="00:00:02" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
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>
I'm new in programming (changing area, leaving Design) and pretty interested in WPF.
So I'm studying and doing some codes.
In this one, I'm trying to make an "invisible" grid (the gridNovoCliente, opacity = 0) to show up at a button click event (opacity = 1), with all its elements.
I want the grid/elements invisible until the user clicks the button.
But it's not working.
I've been Googling it for 3 days before decided to post here.
I get the error 'Set property 'System.Windows.Media.Animation.Storyboard.Target' threw an exception.' at the EventTrigger line.
There will be more buttons once I get this one working, so I created a style.
Thanks in advance!
Here's the code.
<Grid>
<Button Style="{StaticResource templateButton}" Name="novoCliente" Content="Novo
Cliente" Margin="20,41,0,598" TextBlock.TextAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.Target="gridNovoCliente"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Grid Height="705" HorizontalAlignment="Left" Margin="131,12,0,0" Name="gridNovoCliente" VerticalAlignment="Top" Width="859" Background="#FF6FAA6F" Opacity="0">
<TextBox Height="70" HorizontalAlignment="Left" Margin="270,250,0,0" Name="textBox1" VerticalAlignment="Top" Width="358" />
</Grid>
</Grid>
<Canvas>
<Button Name="novoCliente" Content="Novo
Cliente" Margin="20,41,0,598" TextBlock.TextAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click" >
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="gridNovoCliente"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
<Grid Height="705" HorizontalAlignment="Left" Margin="131,12,0,0" Name="gridNovoCliente" VerticalAlignment="Top" Width="859" Background="#FF6FAA6F" Opacity="0">
<TextBox Height="70" HorizontalAlignment="Left" Margin="270,250,0,0" Name="textBox1" VerticalAlignment="Top" Width="358" />
</Grid>
</Canvas>
It's very simple, please try above xaml, it's works for me. Thanks
I've created a simple user control in WPF and added an image to it:
<Image x:Name="logo" Source="/View/Images/Logo.png" Width="100" Height="100">
<Image.RenderTransform>
<RotateTransform Angle="0" CenterX="50" CenterY="50" />
</Image.RenderTransform>
</Image>
I want that image to spin constantly and to fade in and out. This is to be used as a busy indicator. So I created this animation storyboard:
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation From="0" To="360" Duration="00:00:05" Storyboard.TargetName="logo" Storyboard.TargetProperty="(RotateTransform.Angle)" />
<DoubleAnimation From="0.1" To="1" AutoReverse="True" Duration="00:00:02" Storyboard.TargetName="logo" Storyboard.TargetProperty="Opacity" />
</Storyboard>
However, when I view a window with the usercontrol in it, the fading works but the spiinning doesn't.
Your StoryBoard.TargetProperty is wrong, it should be:
Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"