How to specify origin for storyboard based double animation.
Following is the code
<Storyboard x:Key="gridin">
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:05" Storyboard.TargetName="gridA" Storyboard.TargetProperty="Width" From="100" To="300" ></DoubleAnimation>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:05" Storyboard.TargetName="gridA" Storyboard.TargetProperty="Height" From="100" To="300" ></DoubleAnimation>
</Storyboard>
gridA is a grid on which animation is to be done.
This issue is that gridA animation is started from top middle.
I want to set origin to 0.5, 0.5 but not able to get where to set this value.
One option is to use somehow RenderTransform and set RenderTransformOrigin. I want to avoid this approach.
You could place gridA in another (larger) Grid with HorizontalAlignment and VerticalAlignment set to Center:
<Grid Width="300" Height="300">
<Grid Name="gridA" HorizontalAlignment="Center" VerticalAlignment="Center">
</Grid>
</Grid>
Personally i would prefer to animate a ScaleTransform in RenderTransform.
Related
I have a Rectangle and a Path defined by a RectangleGeometry:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Stroke="Red" Width="{Binding RctWidth}"/>
<Path Grid.Row="1" Stroke="Red">
<Path.Data>
<RectangleGeometry Rect="0,0,50,10"/>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="StrokeThickness">
<DoubleAnimation RepeatBehavior="Forever" From="1" To="3" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Grid>
The rectangle changes its width dynamically according to the binding.
The rectangular Path has an animation applied on its StrokeThickness.
I want the rectangular Path to exactly match that rectangle in size, but in such a manner that the stroke thickness animation won't affect that (the thicker stroke should make the Path actually a little bit bigger than the Rectangle - that's the intended behavior).
How can I do that?
Note, that I cannot use the Stretch="Fill" property on the Path. In that case, the stroke thickness will grow only inside the Paths bounds, but I want to keep the default behavior of stroke's growing both in the inner and outer directions.
Furthermore, I cannot change the view model the Rectangle's width is bound to. It's an external component that I'm not allowed to modify.
I could get rid of that Rectangle actually. The important thing for me is the Path and its dynamically changing width.
As commented, the effect of stroke thickness growing only to the inside can be canceled by negative margins.
For an animation that changes the thickness from 1 to 3, the margin needs to change from 0 to -1 (compensate for half of the thickness change):
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="StrokeThickness" RepeatBehavior="Forever" From="1" To="3" Duration="0:0:0.5"/>
<ThicknessAnimation Storyboard.TargetProperty="Margin" RepeatBehavior="Forever" From="0" To="-1" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
With this, you can use your solution with Stretch="Fill", whatever it might look like.
I want to animate my window coming in from the right edge of the screen.
This is my xaml
<Window x:Class="SidebarTest.DockWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DockWindow" Width="275"
ShowInTaskbar="False"
WindowStyle="None" ResizeMode="NoResize"
AllowsTransparency="True" Background="Transparent" >
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:1.5" Storyboard.TargetProperty="Width" From="0" To="275" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid Background="#2F2F2F">
</Grid>
But it animates the width from left to right instead of right to left.
Like this:
How can I change this so it comes in from the edge?
In your codebehind,
public DockWindow()
{
InitializeComponent();
this.Left = this.Width + SystemParameters.FullPrimaryScreenWidth;
}
Change your trigger to
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:1.5" Storyboard.TargetProperty="Left" To="10" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
Instead of trying to scale the width I might suggest leaving the width fixed and applying a TranslateTransform to the Window itself and in effect literally sliding it in from offscreen. A quick and dirty example provided below, you'll likely want to play with the value of the X coordinate and the KeyTime to get the effect just right but hopefully this is helpful to you. Cheers
<Window.RenderTransform>
<TranslateTransform x:Name="SlideTheThingy" X="1000" />
</Window.RenderTransform>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SlideTheThingy"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
Windows are positioned by their Top-Left corner. So, when you animate your width and the position stays constant, the window will naturally grow to the right
In order to have the effect you're looking for, you also need to animate the position of the Window using the .Left property. If you want to snap the window to the right side of the screen and slide in from there, you need to start animating with a value of Left that matches your screen's width (and a zero-pixel width), and then animate to screenWidth - finalWidthOfWindow.
I actually figured it out, I needed to set the horizontal Alignment to right of the component I wanted to animate the size of. And it worked like a charm!
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.
I would like to zoom in on a Image when Image.MouseEnter fires and then zoom out when Image.MouseLeave fires.
I thought of creating a Trigger, but no luck.
This is what i tried so far:
<Image Name="logo" Source="{Binding Path=ImagePath}"
Width="50" Height="50">
<Image.RenderTransform>
<ScaleTransform x:Name="TransRotate" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TransRotate"
Storyboard.TargetProperty="ScaleX"
From="0" To="100"
BeginTime="0:0:0"
Duration="0:0:10"
AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetName="TransRotate"
Storyboard.TargetProperty="ScaleY"
From="0" To="100"
BeginTime="0:0:0"
Duration="0:0:10"
AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Is this the correct way, or is there a better way?
I would remove the From property, this makes the animation jump, apart from that you just seem to be lacking the reverse animations on MouseLeave. Also to center the zoom you can set the RenderTransformOrigin of the Image to 0.5,0.5.
Instead of using those two events i usually prefer a trigger on IsMouseOver with Enter and ExitActions.
If you want to retain the space the image takes you can place it in a container with fixed size and set ClipToBounds to true.
I have a WPF Window that contains a ContentPresenter that has Height and Width set to 0 by default.
When a user clicks a button, I run an animation to transform the ContentPresenter's Height and Width properties to 896,1024 (actually it does 3 rotations whilst its growing, too) and this is all good...
The DataContext for the User control implements IDataErrorInfo and if the user does not click the 'I have read and understand these Health & Safety instructions" checkbox, then a red border is shown around the checkbox...
My problem is that if the user clicks 'Cancel', and I run the animation that shrinks the Height & Width back down to 0,0, then the UserControl shrinks as required, but the red border does not completely disappear - it leaves a single red pixel in the middle of my Window
Anybody any ideas what I'm doing wrong? The 'red-border', I'm assuming is just an Adorner being rendered by WPF for me, so I'm not sure how to change this behaviour...
All help much appreciated!
Update - I tried Abe's excellent suggestion, but unfortunately it didn't work, but it did get me trying other stuff... So now I have (temporarily) commented out the 'shrinking' animations, and simply set the visibility to Collapsed at KeyTime="0:0:0.9"... when I press cancel, just less than a second later, the UserControl disappears but the red adorner stubbornly remains :(
As an extra bit of info (not sure if relevant?) the UserControl being shown in the ContentPresenter also contains a ContentPresenter to render a UserControl, and its the inner content that contains the validation adorner...
code sample:
<Button
Name="signInButton"
Grid.Row="0" Grid.Column="0"
Margin="30"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
Style="{StaticResource LargeButtonStyle}"
Content="Sign In"
Command="{Binding SignInCommand}">
<Button.Triggers>
<EventTrigger
RoutedEvent="Button.Click">
<BeginStoryboard
Storyboard="{DynamicResource openViewAnimation}" />
</EventTrigger>
</Button.Triggers>
</Button>
<ContentPresenter
Name="mainView"
Grid.RowSpan="2" Grid.ColumnSpan="2"
HorizontalAlignment="Center" VerticalAlignment="Center"
Opacity="0.9"
Content="{Binding CurrentContent}">
<ContentPresenter.RenderTransform>
<RotateTransform
Angle="0" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<Storyboard x:Key="closeViewAnimation">
<DoubleAnimation
Storyboard.TargetName="mainView" Storyboard.TargetProperty="Height"
From="896" To="0" Duration="0:0:0.9"
AutoReverse="False" RepeatBehavior="1x" />
<DoubleAnimation
Storyboard.TargetName="mainView" Storyboard.TargetProperty="Width"
From="1024" To="0" Duration="0:0:0.9"
AutoReverse="False" RepeatBehavior="1x" />
</Storyboard>
Thanks, Ian
If you add an ObjectAnimationUsingKeyFrames that sets the Visibility of the element to Collapsed at the time that the other animations complete, the adorner will go away also.
<Storyboard x:Key="closeViewAnimation">
<DoubleAnimation
Storyboard.TargetName="mainView" Storyboard.TargetProperty="Height"
From="896" To="0" Duration="0:0:0.9"
AutoReverse="False" RepeatBehavior="1x" />
<DoubleAnimation
Storyboard.TargetName="mainView" Storyboard.TargetProperty="Width"
From="1024" To="0" Duration="0:0:0.9"
AutoReverse="False" RepeatBehavior="1x" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="mainView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"
KeyTime="0:0:0.9" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
Obviously, you would need to do the reverse operation at KeyTime 0 for the openViewAnimation.