I have some problem. This is my code behind:
var s = new Storyboard();
var dAnimation = new DoubleAnimation();
dAnimation.RepeatBehavior = RepeatBehavior.Forever;
dAnimation.AutoReverse = true;
dAnimation.EnableDependentAnimation = true;
dAnimation.From = 200;
dAnimation.To = 300;
Storyboard.SetTarget(dAnimation, viewBox);
Storyboard.SetTargetProperty(dAnimation, "Width");
dAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(2000));
s.Children.Add(dAnimation);
s.Begin();
viewBox is on Canvas and has just a few property: Canvas.Left, Canvas.Top, Height and Width. Code from codebehind working great with Opacity, but not working with Width or Height. Codebehind work when user pointer is entered. I want do it without triggers. Found some solutions for Silverlight and WPF:
WinRT/Metro Animation in code-behind
they are not working. I dont undersstand why it work with opacity and didn't work with Width and Height Any ideas?
You cannot animate Width with a DoubleAnimation, you need to use a DoubleAnimationUsingKeyFrames.
var animation = new DoubleAnimationUsingKeyFrames();
var frame = new EasingDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2000)), Value = 300});
animation.KeyFrames.Add(frame);
Storyboard.SetTargetProperty(animation, "(FrameworkElement.Width)");
Storyboard.SetTarget(animation, viewBox);
Storyboard.Children.Add(animation);
I didn't check ViewBox,but I can with DoubleAnimation for Grid.
Code is like below
var s = new Storyboard();
var widthAnim = new DoubleAnimation()
{
To = w,
Duration=new Duration(TimeSpan.FromMilliseconds(duration))
};
widthAnim.EnableDependentAnimation = true;
Storyboard.SetTarget(widthAnim,elem);
Storyboard.SetTargetProperty(widthAnim,"Width");
s.Children.Add(widthAnim);
s.Begin();
Related
My aim is to create a textBlock containing a name, after doing something with the method GetThings() I want an animation to play on the textBox basically moving it out of the view. as it is being animated the next textBlock is created with the next name.
But when I try and run the program I get the error:
No installed components were detected. Cannot resolve TargetProperty
(UIElement.RenderTransform).(CompositeTransform.TranslateY) on
specified object.
There is probably a better way of doing this, but I am limited in terms of my ability and would appreciate any help on the current issue.
Below is the code for the project:
await Task.Run(async () =>
{
TextBlock tb = null;
foreach (KeyValuePair<string, string> s in things)
{
await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => {
TextBlock _txtBlock = new TextBlock()
{
Text = s.Key,
Margin = new Thickness(131, 0, 0, 0),
FontSize = 26,
Height = 40,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Center,
Width = 168,
};
innerOverlay.Children.Add(_txtBlock);
tb = _txtBlock;
});
string tested = GetThings(s.Value);
if (tested == string.Empty)
{
MessageDialog failedMsg = new MessageDialog("failed", "problem");
failedMsg.Commands.Add(new UICommand("Exit"));
IUICommand command = await failedMsg.ShowAsync();
if (command.Label.Equals("Exit", StringComparison.CurrentCultureIgnoreCase))
{
Windows.UI.Xaml.Application.Current.Exit();
}
return;
}
else
{
await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => {
var animation = new DoubleAnimation
{
EnableDependentAnimation = true,
To = 40,
Duration = new Duration(TimeSpan.FromMilliseconds(500)),
};
Storyboard.SetTarget(animation, tb);
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
var sb = new Storyboard();
sb.Children.Add(animation);
sb.Begin();
});
thingGroup.Add(s.Key, tested);
}
}
});
It seems that you are having questions about how to animate the transformation of the TextBlock. #Clemens is right, you will need to create a CompositeTransform object and assign it to the RenderTransform property of the TextBlock first.
I've made a simple demo here. You could refer to it and adjust it to your real scenario.
Code:
TextBlock _txtBlock = new TextBlock()
{
Text = "Frist One",
//Margin = new Thickness(131, 0, 0, 0),
FontSize = 26,
Height = 40,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Center,
Width = 168,
};
RootGrid.Children.Add(_txtBlock);
//create a CompositeTransform for the TextBlock
CompositeTransform TextBlockTransform = new CompositeTransform();
_txtBlock.RenderTransform = TextBlockTransform;
//Create animation to animate the CompositeTransform
Storyboard storyboard = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.From = 0;
animation.To = 40;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
Storyboard.SetTarget(animation, _txtBlock);
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard.Children.Add(animation);
storyboard.Begin();
You could get more information about Transforms and Animation here: Transforms overview, DoubleAnimation Class and CompositeTransform Class
I am using MSDN example to setup the animation of Width of a Rectangle in C3 UWP.
Here is the code of the sample:
private void Create_And_Run_Animation()
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 0;
myRectangle.Height = 20;
SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
myRectangle.Fill = myBrush;
// Create the transform
TranslateTransform stretchTransform = new TranslateTransform();
stretchTransform.X = 0;
stretchTransform.Y = 0;
myRectangle.RenderTransform = stretchTransform;
// Add the rectangle to the tree.
DefaultLayout.Children.Add(myRectangle);
myRectangle.Name = "myWidthAnimatedRectangle";
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
Storyboard justintimeStoryboard = new Storyboard();
justintimeStoryboard.Duration = duration;
justintimeStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTarget(myDoubleAnimation, stretchTransform);
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
// Set the X property of the Transform to be the target property
Storyboard.SetTargetProperty(myDoubleAnimation, "X");
myDoubleAnimation.To = 300.0;
// Make the Storyboard a resource.
DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
// Begin the animation.
justintimeStoryboard.Begin();
}
However, on Build, what it does is move the object and not change its width.
I need to animate width change.
However, on Build, what it does is move the object and not change its width. I need to animate width change.
Your code was used to animate the Rectangle's position, not its width. You could specify a default value for its width and animate its ScaleTransform.
If you have to use DoubleAnimation to animate its width, you need to set EnableDependentAnimation to true. Please check the following code sample:
private void Create_And_Run_Animation()
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 10;
myRectangle.Height = 20;
SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
myRectangle.Fill = myBrush;
// Add the rectangle to the tree.
DefaultLayout.Children.Add(myRectangle);
myRectangle.Name = "myWidthAnimatedRectangle";
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
Storyboard justintimeStoryboard = new Storyboard();
Storyboard.SetTargetProperty(myDoubleAnimation, "(Rectangle.Width)");
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
myDoubleAnimation.To = 300.0;
myDoubleAnimation.EnableDependentAnimation = true;
justintimeStoryboard.Children.Add(myDoubleAnimation);
// Make the Storyboard a resource.
DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
// Begin the animation.
justintimeStoryboard.Begin();
}
I am having trouble adding multiple effects within an animation sequence in WPF. I have multiple rectangles arranged within a grid and the way the animation effect is to work is in the following order:
By default, the user sees the grid such that every cell is bounded by a silver border on a black canvas, the color of the rectangle within each cell could be transparent/black.
On mouse hover, the rectangle in the cell changes its stroke and fill to green.
On exiting the mouse over, the previous cell slowly changes color to its default state before the mouse hover.
I was able to do the animation effect for just the stroke color but not combine it with the fill properties. Here is the code snippet for creating the rectangles within the grid:
Style cellStyle = PrepareAnimationStyle();
foreach (string label in rowHeaders)
{
for (int n = 0; n < numOfCols; n++)
grid.Children.Add(new Rectangle()
{
Stroke = Brushes.Silver,
StrokeThickness = 2,
Fill = Brushes.Transparent,
Height = cellSize,
Width = cellSize,
Style = cellstyle
});
}
And here is the code that sets the animation (still in progress, can't make it work as required):
Style PrepareAnimationStyle()
{
Trigger animTrigger = new Trigger();
animTrigger.Property = ContentElement.IsMouseOverProperty;
animTrigger.Value = true;
System.Windows.Media.Animation.ColorAnimation toGreen = new System.Windows.Media.Animation.ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
toGreen.FillBehavior = FillBehavior.HoldEnd;
System.Windows.Media.Animation.ColorAnimation toTransparent = new System.Windows.Media.Animation.ColorAnimation(Colors.Transparent, TimeSpan.FromSeconds(1));
System.Windows.Media.Animation.ColorAnimation toSilver = new System.Windows.Media.Animation.ColorAnimation(Colors.Silver, TimeSpan.FromSeconds(1));
System.Windows.Media.Animation.Storyboard sbEnter = new System.Windows.Media.Animation.Storyboard();
//Storyboard.SetTargetProperty(toGreen, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(toGreen, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));
sbEnter.Children.Add(toGreen);
/*Storyboard sbFill = new Storyboard();
Storyboard.SetTargetProperty(toGreen, new PropertyPath("Fill.Color"));
sbFill.Children.Add(toSilver);
Storyboard sbFillEmpty = new Storyboard();
Storyboard.SetTargetProperty(toTransparent, new PropertyPath("Fill.Color"));
sbFillEmpty.Children.Add(toSilver);*/
Storyboard sbExit = new Storyboard();
//Storyboard.SetTargetProperty(toSilver, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(toTransparent, new PropertyPath("Fill.Color"));
sbExit.Children.Add(toSilver);
animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbEnter });
//animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbFill });
//animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbFillEmpty });
animTrigger.ExitActions.Add(new BeginStoryboard() { Storyboard = sbExit });
Style cellStyle = new Style();
cellStyle.Triggers.Add(animTrigger);
return cellStyle;
}
Here you go
Style PrepareAnimationStyle()
{
Trigger animTrigger = new Trigger();
animTrigger.Property = FrameworkElement.IsMouseOverProperty;
animTrigger.Value = true;
ColorAnimation strokeToGreen = new ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
ColorAnimation strokeToSilver = new ColorAnimation(Colors.Silver, TimeSpan.FromSeconds(1));
ColorAnimation fillToGreen = new ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
ColorAnimation fillToTransparent = new ColorAnimation(Colors.Transparent, TimeSpan.FromSeconds(1));
Storyboard sbEnter = new Storyboard();
Storyboard.SetTargetProperty(strokeToGreen, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(fillToGreen, new PropertyPath("Fill.Color"));
sbEnter.Children.Add(strokeToGreen);
sbEnter.Children.Add(fillToGreen);
Storyboard sbExit = new Storyboard();
Storyboard.SetTargetProperty(strokeToSilver, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(fillToTransparent, new PropertyPath("Fill.Color"));
sbExit.Children.Add(strokeToSilver);
sbExit.Children.Add(fillToTransparent);
animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbEnter });
animTrigger.ExitActions.Add(new BeginStoryboard() { Storyboard = sbExit });
Style cellStyle = new Style();
cellStyle.Triggers.Add(animTrigger);
return cellStyle;
}
in order to make it work properly make sure to set a fill and stroke while you add the cell
example
Style cellStyle = PrepareAnimationStyle(); //this line is out side of the cell loop
....
rect.Fill = new SolidColorBrush(Colors.Transparent);
rect.Stroke = new SolidColorBrush(Colors.Silver);
rect.Style = cellStyle;
I am trying to make an image slide diagonally in windows phone 8 C#, i have tried some code, and gotten rid of an error i created - but when i doubletap the canvas, it is supposed to trigger the event, but nothing happens. Please take a look at my code:
private void Canvas_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
{
//The canvas was doubletapped
//Create DoubleAnimation for x value
DoubleAnimation movedefenderxpositionAnimation = new DoubleAnimation();
movedefenderxpositionAnimation.From = 0;
movedefenderxpositionAnimation.To = 30;
movedefenderxpositionAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
movedefenderxpositionAnimation.AutoReverse = false;
//Create DoubleAnimation for y value
DoubleAnimation movedefenderypositionAnimation = new DoubleAnimation();
movedefenderypositionAnimation.From = 0;
movedefenderypositionAnimation.To = 15;
movedefenderypositionAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
movedefenderypositionAnimation.AutoReverse = false;
//Create StoryBoard
Storyboard movedefenderxpositionSB = new Storyboard();
movedefenderxpositionSB.Children.Add(movedefenderxpositionAnimation);
Storyboard movedefenderypositionSB = new Storyboard();
movedefenderypositionSB.Children.Add(movedefenderypositionAnimation);
//Set the timespan
movedefenderxpositionSB.Duration = new Duration(TimeSpan.FromSeconds(1));
movedefenderypositionSB.Duration = new Duration(TimeSpan.FromSeconds(1));
//Set the target
Storyboard.SetTarget(movedefenderxpositionAnimation, squaddefender1);
Storyboard.SetTarget(movedefenderypositionAnimation, squaddefender1);
//Set the target property
Storyboard.SetTargetProperty(movedefenderxpositionAnimation, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(movedefenderypositionAnimation, new PropertyPath("(Canvas.Top)"));
//Start the animation
movedefenderxpositionSB.Begin();
movedefenderypositionSB.Begin();
}
And also, something i dont understand. How can i set the target property of the StoryBoard, and not the one i created, two times? I added this piece of code to iron out an error, which created a new one
I would like to use it, but it doesnt't work, I wanna create a tile animation, in code behind, or if you know a project for this gol, pls write me
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
while(true){
Duration duration = new Duration(TimeSpan.FromSeconds(0.15));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation1.From = -173
myDoubleAnimation1.To = 173;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
Storyboard.SetTarget(myDoubleAnimation1, image);
// Set the attached properties of Canvas.Left and Canvas.Top
// to be the target properties of the two respective DoubleAnimations.
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath(StackPanel.MarginProperty));
// Begin the animation.
sb.Begin();}
});
Here is the working example, if anybody needs:
//Animate margin for Label, named "label" from right to left. from 300 to 0.
var sb = new Storyboard();
var ta = new ThicknessAnimation();
ta.BeginTime = new TimeSpan(0);
ta.SetValue(Storyboard.TargetNameProperty, "label");
Storyboard.SetTargetProperty(ta, new PropertyPath(MarginProperty));
ta.From = new Thickness(300, 30, 0, 0);
ta.To = new Thickness(0, 30, 0, 0);
ta.Duration = new Duration(TimeSpan.FromSeconds(3));
sb.Children.Add(ta);
sb.Begin(this);
Use a ThicknessAnimation instead of a DoubleAnimation. It's almost the same.
Edit:
If you want to make the Animation endless use Timeline.RepeatBehavior.
myThicknessAnimation1.RepeatBehavior = RepeatBehavior.Forever;