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.
Related
I am using the WPF version of Gmap.NET.
This feels like a stupid question....but I can't figure out how to change the stroke color/width of a route.
In winforms GMapRoute has property Stroke that can be set as you would expect
GMapRoute r = new GMapRoute(route.Points, "My route");
r.Stroke.Width = 2;
r.Stroke.Color = Color.TurdBrown;
The WPF version seems very different and I can't figure it out.
I could access to these properties using a casting, here is my code:
GMapRoute mRoute = new GMapRoute(route.Points);
mRoute.RegenerateShape(MainMap);
((System.Windows.Shapes.Path)mRoute.Shape).Stroke = new SolidColorBrush(Colors.Red);
((System.Windows.Shapes.Path) mRoute.Shape).StrokeThickness = 20;
Firts of all I created the GMapRoute, then I generated its shape in the map, then I modified the shape changing color and thickness.
I hope that this can help you.
I think use RegenerateShape for creating Shape is not good for performance.
It is better to setup style of line before adding route to map.
List<PointLatLng> routePath = List<PointLatLng>();
routePath.Add(new PointLatLng(Lat1,Lon1));
....
routePath.Add(new PointLatLng(LatN,LonN));
GMapRoute groute = new GMapRoute(routePath);
groute.Shape = new Path() { Stroke = new SolidColorBrush(Colors.Red), StrokeThickness = 4 };
map.Markers.Add(groute);
I am new for RenderTransform, I need to apply the below RenderTransform in code behind(C#)
<local:Container.RenderTransform>
<CompositeTransform x:Name="visualCoinatiner_transform" />
</local:Container.RenderTransform>
Any suggestion on this?
We can apply the RenderTransform in code behind like below code,
private CompositeTransform _compositeTransform;
_compositeTransform = new CompositeTransform();
this.RenderTransform = _compositeTransform;
yes, thank you for this answer. Just to build on it a little, flip a MediaPlayerElement both horizontally and vertically:
thisMPElement = Canvas.FindName("NameOfXAMLElement") as MediaPlayerElement;
var cp = new CompositeTransform()
{
ScaleX = -1,
ScaleY = -1
};
thisMPElement.RenderTransform = cp;
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
I have an button which I move, using a storyboard and a translateTransform :
_animatedTranslateTransform = new TranslateTransform();
this.RegisterName("slide", _animatedTranslateTransform);
DoubleAnimation slideDown = new DoubleAnimation();
slideDown.By = 20;
slideDown.Duration = TimeSpan.FromSeconds(0.5);
Storyboard.SetTargetName(slideDown, "slide");
Storyboard.SetTargetProperty(slideDown, new PropertyPath(TranslateTransform.YProperty));
After some iterations, my button have moved from 60 px, for example. How can I replace it to its initial position ?
I tried this (I set -60 to simplify the explanation) :
TranslateTransform t = (TranslateTransform) _button.RenderTransform;
t.Y = -60;
But it doesn't work if the animation already occurred once.
UPDATE:
To keep future readers from being confused by the back-and-forth below, the correct answer is to do:
_button.RenderTransform = new TranslateTransform();
Original answer:
I would store the original position to be used whenever you want to reset. I don't think there's a concept of the "original state" for a control.
It seems like it should be so simple. I've read dozens of links and I can't get anything to animate the position. I believe the closest code I can write so far is this:
Storyboard storyboard = new Storyboard();
TranslateTransform trans = new TranslateTransform() { X = 1.0, Y = 1.0 };
myCheckbox.RenderTransformOrigin = new Point(0.5, 0.5);
myCheckbox.RenderTransform = trans;
DoubleAnimation moveAnim = new DoubleAnimation();
moveAnim.Duration = TimeSpan.FromMilliseconds(1200);
moveAnim.From = -1;
moveAnim.To = 1;
Storyboard.SetTarget(moveAnim, myCheckbox);
Storyboard.SetTargetProperty(moveAnim, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
storyboard.Completed += new System.EventHandler(storyboard_Completed);
storyboard.Children.Add(moveAnim);
storyboard.Begin();
No errors are thrown.
The completion callback does get called.
If I animate opacity in a similar fashion it works fine.
How can I simply animate a UIElement's position with code??
The comment from xyzzer was correct. The cause of the confusion was because the coordinates for RenderTransformOrigin use (0,1) relative to the element. The actual transforms (e.g. TranslateTransform) use pixels as units.