How to scale dynamic image control from the center programmatically in c# for Windows 8.1. This code scales image from left upper corner:
Image img=new Image(){Width=150,Height=150};
img.RenderTransform = new CompositeTransform();
Storyboard story = new Storyboard();
DoubleAnimation xAnim = new DoubleAnimation();
DoubleAnimation yAnim = new DoubleAnimation();
xAnim.From = 0;
yAnim.From = 0;
xAnim.To = 1;
yAnim.To = 0.5;
xAnim.Duration = TimeSpan.FromMilliseconds(1000);
yAnim.Duration = TimeSpan.FromMilliseconds(1500);
story.Children.Add(xAnim);
story.Children.Add(yAnim);
Storyboard.SetTarget(xAnim, img);
Storyboard.SetTarget(yAnim, img);
Storyboard.SetTargetProperty(xAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
Storyboard.SetTargetProperty(yAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
story.Begin();
You want
img.RenderTransformOrigin = new Point(0.5, 0.5);
That will mean that all of your transforms will be relative to the center of your image. See the RenderTransformOrigin documentation for more details.
Related
I'm trying to understand rules of WPF animation usying code from this site:
https://www.codeproject.com/Articles/23257/Beginner-s-WPF-Animation-Tutorial
Now I have a code to rotate element around x, y point:
RotateTransform rt = new RotateTransform();
DoubleAnimation da = new DoubleAnimation();
da.From = 0;
da.To = 360;
da.Duration = new Duration(TimeSpan.FromSeconds(10));
da.RepeatBehavior = RepeatBehavior.Forever;
image.RenderTransformOrigin = new Point(x, y);
image.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);
This is GIF image like "^", so I want to rotate it 90 deg BEFORE animation to rotate image like ">".
Tried RotateTransform rt = new RotateTransform(90); but no success.
Any suggestions?
Besides setting the Angle property of rt to 90, you should also change the From property of da to 90 to start animating from this value:
RotateTransform rt = new RotateTransform(90);
...
da.From = 90;
I need a smooth animation of window transparency. I added this code to the "LOADED" event of the window.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 100.0;
myDoubleAnimation.To = 0.1;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myDoubleAnimation, Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(UIElement.OpacityProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
myStoryboard.Begin(this);
There is a sharp jump of transparency. Animation is missing. Where there has been a mistake?
Opacity is a relative value in the range 0 .. 1. Use
myDoubleAnimation.From = 1.0;
or don't set it at all.
Instead of using a Storyboard, you may also just write
BeginAnimation(OpacityProperty, new DoubleAnimation
{
To = 0.1,
Duration = TimeSpan.FromSeconds(1)
});
I am trying to animate the location of a MapIcon in the UWP version of Bing Maps. I am having problems specifying the PropertyPath for the Latitude component (a double value) of the GeoPoint used as the center value for the icon:
MapIcon mapIcon1 = new MapIcon();
mapIcon1.Location = myMap.Center;
mapIcon1.NormalizedAnchorPoint = new Point(0.5, 1.0);
mapIcon1.Title = "My Friend";
mapIcon1.Image = mapIconStreamReference;
mapIcon1.ZIndex = 0;
myMap.MapElements.Add(mapIcon1);
double centerLatitude = myMap.Center.Position.Latitude;
double centerLongitude = myMap.Center.Position.Longitude;
Storyboard storyboard = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.From = centerLatitude;
animation.To = centerLatitude + 100f;
animation.Duration = new Duration(new TimeSpan(0, 0, 0, 5));
animation.EnableDependentAnimation = true;
storyboard.Children.Add(animation);
//Storyboard.SetTargetProperty(animation, "(MapIcon.Location)(Geopoint.Position)(BasicGeoposition.Latitude)");
//Storyboard.SetTargetProperty(animation, "(MapIcon.Location)(MapControl.Center)(Geopoint.Position)(BasicGeoposition.Latitude)");
//Storyboard.SetTargetProperty(animation, "(MapIcon.Location)(BasicGeoposition.Latitude)");
//Storyboard.SetTargetProperty(animation, "(MapIcon.Location.Latitude)");
Storyboard.SetTarget(storyboard, mapIcon1);
storyboard.Begin();
None of the commented out statements work; they all result in the "Cannot resolve TargetProperty on specified object" error. I was particularly hopeful for the first attempt "(MapIcon.Location)(Geopoint.Position)(BasicGeoposition.Latitude)", but no luck.
(I am able to animate the Color attribute of a MapIcon successfully.)
Storyboard.SetTargetProperty targets the dependency property where the animation applies. So, what you want to apply animation to 'Latitude'is impossible.
You would have to make it by yourself. For example, using the DispatcherTimer.
I have an image in a canvas. What I want to do is code an animation which both rotates the image 90 degrees and move the image from the top left corner of canvas to the bottom right corner at the same time to create an action looks like projectile motion. However, I could only manage to do one part of the animation so far.
DoubleAnimation rotateAnimation = new DoubleAnimation(0, 90, new Duration(TimeSpan.FromSeconds(1)));
RotateTransform rt = new RotateTransform();
image.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, rotateAnimation);
TranslateTransform tt = new TranslateTransform();
image.RenderTransform = tt;
DoubleAnimation moveXAnimation = new DoubleAnimation(0, 300, TimeSpan.FromSeconds(1));
DoubleAnimation moveYAnimation = new DoubleAnimation(0, 300, TimeSpan.FromSeconds(1));
tt.BeginAnimation(TranslateTransform.XProperty, moveXAnimation);
tt.BeginAnimation(TranslateTransform.YProperty, moveYAnimation);
These two blocks works very well separately, but do not work together(consequently). The latter one works only. Anyone can tell me why?
UPDATE (Complete answer of Clemens):
RotateTransform rt = new RotateTransform();
DoubleAnimation rotateAnimation = new DoubleAnimation(0, 90, new Duration(TimeSpan.FromSeconds(5)));
TranslateTransform tt = new TranslateTransform();
DoubleAnimation moveXAnimation = new DoubleAnimation(0, 300, TimeSpan.FromSeconds(5));
DoubleAnimation moveYAnimation = new DoubleAnimation(0, 300, TimeSpan.FromSeconds(5));
TransformGroup transform = new TransformGroup();
transform.Children.Add(rt);
transform.Children.Add(tt);
image.RenderTransformOrigin = new Point(0.5, 0.5);
image.RenderTransform = transform;
rt.BeginAnimation(RotateTransform.AngleProperty, rotateAnimation);
tt.BeginAnimation(TranslateTransform.XProperty, moveXAnimation);
tt.BeginAnimation(TranslateTransform.YProperty, moveYAnimation);
Put both transforms in a TransformGroup, and assign that to the image's RenderTransform:
var rt = new RotateTransform();
var tt = new TranslateTransform();
var transform = new TransformGroup();
transform.Children.Add(rt);
transform.Children.Add(tt);
image.RenderTransform = transform;
// run animations
You may also want to take a look at how to use a Path Animation for a more realistic look. The projectile might follow a parabolic curve.
How do I go about animating the opacity of a dropshadoweffect in code. I am dynamically creating stackpanels in my UI which contain an image and a text block. I have applied a dropshadoweffect to the image, which I would like to animate the opacity. Here's what I have:
Image img = ch.ChannelLogo; //Create the image for the button
img.Height = channelStackPnl.Height * .66;
DropShadowEffect dSE = new DropShadowEffect();
dSE.Color = Colors.White;
dSE.Direction = 25;
dSE.ShadowDepth = 10;
dSE.Opacity = .40;
img.Effect = dSE;
DoubleAnimation animateOpacity = new DoubleAnimation();
animateOpacity.From = 0;
animateOpacity.To = 1;
animateOpacity.AutoReverse = true;
animateOpacity.RepeatBehavior = RepeatBehavior.Forever;
animateOpacity.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 400));
//Here's where I am stuck. How do I specifically target the opacity of the effect propery?
img.BeginAnimationimg.BeginAnimation(DropShadowEffect.OpacityProperty,animateOpacity);
dSE.BeginAnimation(DropShadowEffect.OpacityProperty, animateOpacity);
Probably...
(You are animating the effect, not the image)