i am trying to create a animation using grid. it's a login screen. whenever user taps forget password i want the second grid to animate from top and slide till it stops at center and on tap it's visibility changes. i know how to do it using blend but the thing is i hav a compulsion for doing it from code behind. For that i am using doublekeyframe class. Having real trouble in knowing where is the issue in code behind for animating the second grid. Don't know what the issue and how to animate so serious help needed.
here is my code behind:
Grid gd= this.FindName("SecondaryGrid") as Grid;
DoubleAnimationUsingKeyFrames dm=new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame l1=new LinearDoubleKeyFrame();
LinearDoubleKeyFrame l2=new LinearDoubleKeyFrame();
l1.Value=-703.203;
l1.KeyTime=TimeSpan.FromSeconds(0);
l2.Value=0;
l2.KeyTime=TimeSpan.FromSeconds(1);
dm.KeyFrames.Add(l1);
dm.KeyFrames.Add(l2);
dm.Duration=new Duration(TimeSpan.FromMilliseconds(3000));
Storyboard sb = new Storyboard();
sb.Children.Add(dm);
Storyboard.SetTarget(dm, gd);
Storyboard.SetTargetName(dm, gd.Name);
Storyboard.SetTargetProperty(dm, "Position");
sb.Begin();
SecondaryGrid.Visibility = Visibility.Visible;
Grid gd = this.FindName("SecondaryGrid") as Grid;
DoubleAnimationUsingKeyFrames dm = new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame l1 = new LinearDoubleKeyFrame();
LinearDoubleKeyFrame l2 = new LinearDoubleKeyFrame();
l1.Value = -703.203;
l1.KeyTime = TimeSpan.FromSeconds(0);
l2.Value = 0;
l2.KeyTime = TimeSpan.FromSeconds(1);
dm.KeyFrames.Add(l1);
dm.KeyFrames.Add(l2);
dm.Duration = new Duration(TimeSpan.FromMilliseconds(30000));
Storyboard sb = new Storyboard();
sb.Children.Add(dm);
Storyboard.SetTarget(dm, gd);
Storyboard.SetTargetName(dm, gd.Name);
Storyboard.SetTargetProperty(dm, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
sb.Begin();
Enjoy :)
EDIT
Well what I did was went to XAML and created a SecondaryGrid now in its properties went to render transform and clicked on edit and set Y value as 1 then I saw in XAML that we get
<Grid.RenderTransform>
<CompositeTransform TranslateX="0" TranslateY="1"/>
</Grid.RenderTransform>
So from this I knew that since there is no position property so I need to set targetProperty as render transform and in that I should Change the Y property since it needs to come from top to bottom which is present inside Composite Transform.TranslateY
Related
I have an application that needs to give status updates, but they're pretty easy to miss. I want to very lightly and very briefly pulse the status bar when messages are posted. Almost every guide I've seen so far only lists how to set it up on hover or click using XAML instead of actual C#. I want to call a function to pulse the bar when I'm updating status messages in C#:
This is what I have and it doesn't work at all.
private void PulseStatus()
{
ColorAnimation animation;
animation = new ColorAnimation();
animation.To = Color.FromRgb(111, 80, 80);
animation.Duration = new Duration(TimeSpan.FromSeconds(.4));
animation.AutoReverse =true;
StatusArea.Background.BeginAnimation(WrapPanel.BackgroundProperty,animation);
}
I tried it and i found some mistakes. It has nothing todo with XAML as everything that can be written in XAML can be written in C# as well.
However:
First you want to animate the Color property of the SolidBrush object. And second, at least in my try i could not animate the pre set background brush of the wrap panel (it said it was "sealed"). You might also want to set the RepeatBehavior to Forever, to keep the animation running.
ColorAnimation animation;
animation = new ColorAnimation();
animation.To = Color.FromRgb(111, 80, 80);
animation.Duration = new Duration(TimeSpan.FromSeconds(.4));
animation.AutoReverse = true;
animation.RepeatBehavior = RepeatBehavior.Forever;
var clonedBackgroundBrush = wrap.Background.Clone();
wrap.Background = clonedBackgroundBrush;
clonedBackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, animation);
I need to make a border slide from the bottom of the screen into view, however i'm having issues getting the ActualHeight of my border control. Because this is animation code i'm putting it in the code-behind as it's the Views responsibility.
My Border has got it's Loaded event tied to this:
private void NotifcationWindow_Loaded(object sender, RoutedEventArgs e)
{
SlideFromBottom(sender);
}
The Sender is the Border object, so the SlideFromBottom method SHOULD be able to use this object and get it's height as it has already been rendered.
public void SlideFromBottom(object sender)
{
//The Notification container
Border notification = (sender as Border);
//The screen size
var workingArea = SystemParameters.WorkArea;
Storyboard sb = new Storyboard();
var animation = new DoubleAnimation()
{
BeginTime = TimeSpan.FromSeconds(0),
Duration = TimeSpan.FromSeconds(5),
// Get the height and turn it to a negative value, and add screen height.
From = (notification.ActualHeight * -1),
//Slide the border into view
To = notification.ActualHeight
};
Storyboard.SetTarget(animation, notification);
Storyboard.SetTargetProperty(animation, new PropertyPath("(Margin.Bottom)"));
sb.Begin();
}
I'm not receiving any errors, but the animation isn't playing, have I got something wrong? The Border is Vertically Aligned to the bottom, so the negative margin should take it off the screen.
The reason why you're not seeing anything is that you haven't added the animation to the storyboard:
sb.Children.Add(animation);
Then there are some more problems. Such that a part of the margin cannot be animated separately. You would need a ThicknessAnimation.
But there is an easier solution. Use the RenderTransform. If you give your border the following render transform:
<Border>
<Border.RenderTransform>
<TranslateTransform/>
</Border.RenderTransform>
</Border>
, then you can animate it as follows:
// ...
var animation = new DoubleAnimation()
{
BeginTime = TimeSpan.FromSeconds(0),
Duration = TimeSpan.FromSeconds(5),
From = notification.ActualHeight,
To = 0
};
Storyboard.SetTarget(animation, notification);
Storyboard.SetTargetProperty(animation, new PropertyPath("RenderTransform.Y"));
sb.Children.Add(animation);
// ...
I am trying to implement a translation animation on a Grid in Windows Phone 8.
The behavior that I want to implement is that when the user drags from left to right a new panel comes from the left(in animation) and reverse happens when the user drags from right to left.
For this I have implemented the following code which is called on Manipulation_Completed :
public Storyboard AnimateContent(int direction)
{
DoubleAnimation animation = new DoubleAnimation();
if (direction == 1)
{ //content_trans is the object of composite transform of grid
animation.From =content_trans.TranslateX;
animation.To = 370;
}
else if(direction==0)
{
animation.From = content_trans.TranslateX;
animation.To = 0;
}
animation.Duration = new TimeSpan(0,0,0,0,500);
Storyboard.SetTarget(animation, Content);
Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
Storyboard sb = new Storyboard();
sb.Children.Add(animation);
return sb;
}
Now problem I am facing is that after calling this function(and calling begin() on storyboard object), when I am writing
content_trans.TranslateX=250;//or any other value of my choice
it is not being reflected on the screen.
I want to change these values because I writing this line of code in Manipulation_Delta , so that the user can have a feeling of dragging something, but it is not being reflected after animation.
This is because animated values take precedence over local values. See Dependency Property Value Precedence
If you want to set the value yourself, you will need to stop the animation first.
EDIT: If you want to be able to drag after the animation, then set the END location manually just before animating, and tell the animation to stop applying itself when it finishes with:
animation.FillBehaviour = FillBehaviour.Stop;
This means that when the animation finishes, your local values will apply.
I have several boxes from type Windows.UI.Xaml.Controls.Control with different sizes. I wanna transform a few of them vertically. Like shown in the picture.
I'm struggling doing this.I'm sure that should not be very difficult but I don't get it...
Btw. I wanna do that in code behind not in XAML.
Many thanks for your help.
Cheers
Daniel
edit:
DoubleAnimation scaleAnimation = new DoubleAnimation();
scaleAnimation.From = startHeight;
scaleAnimation.To = this.ClientHeight * Percentage;
scaleAnimation.Duration = TimeSpan.FromMilliseconds(500);
scaleAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
Storyboard storyScaleX = new Storyboard();
storyScaleX.Children.Add(scaleAnimation);
Storyboard.SetTarget(storyScaleX, slice);
scaleAnimation.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(storyScaleX, "Height");
You can apply a TranslateTransform to the LayoutTransform or RenderTransform of the element (depending on what you need). e.g.
element.LayoutTransform = new TranslateTransform(0, 100)
If the effect you require depends on the height of the element, use the element's ActualHeight as the value to translate by.
I have the following animation defined in code-behind:
DoubleAnimation dbAscending = new DoubleAnimation(0, 15, new Duration(TimeSpan.FromMilliseconds(300)));
(myImage.RenderTransform as RotateTransform).BeginAnimation(RotateTransform.AngleProperty, dbAscending);
This works fine, when started it rotates myImage by 15 degrees. Now I just need to create new Storyboard and add the animation into it, because I need to use its Completed event. I have a little problem with that, I noticed that I can add the animation to Storyboard.Children, but I didn't managed to define the object and property I want to apply this animation to...
Thanks in advance for any help, until now I created storyboards only in XAML...
You need to set the Storyboard-attached properties on the animation, something like:
DoubleAnimation dbAscending = new DoubleAnimation(0, 15, new Duration(TimeSpan.FromMilliseconds(300)));
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(dbAscending);
Storyboard.SetTarget(dbAscending, myImage);
Storyboard.SetTargetProperty(dbAscending, new PropertyPath("RenderTransform.Angle"));
(untested; could also directly target the transform and reduce path to angle)