I have a rectangle which I want to animate the angle on, from 0-180 degrees.
I'm doing this from code-behind rather than in XAML.
I have everything set up, but when I trigger the animation - nothing happens! I have checked multiple times and nothing is wrong! I really don't know what to do anymore.
Here is the code for the animation itself:
DoubleAnimation menuRktAngle = new DoubleAnimation();
menuRktAngle.From = 0;
menuRktAngle.To = 180;
menuRktAngle.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTarget(menuRktAngle, aniR);
Storyboard.SetTargetProperty(menuRktAngle, new PropertyPath((Rectangle.RenderTransform).(RotateTransform.Angle)"));
menubtnStoryboard.Children.Add(menuRktAngle);
menubtnStoryboard.Begin(this);
And the XAML code for the rectangle:
<Rectangle Fill="#FF707070" Height="15" Width="20" HorizontalAlignment="Center" VerticalAlignment="center" x:Name="aniR">
<Rectangle.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_arrow_left}" Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
I tried manually setting the transform-angle and it works just fine. So there must be something wrong with the animation.
Any help would be greatly appreciated!
I think it is because you try to animate a property that is not there yet. The property RenderTransform property of the Rectangle doesn't contain a RotateTransform. Set this in your XAML with a default value of 0, and my guess is, you will be able to animate it.
Add this to your XAML:
<Rectangle.RenderTransform>
<RotateTransform Angle="0"/>
</Rectangle.RenderTransform>
Related
I need some help regarding my dropshadoweffect. i am currently working on rotating a control with a dropshadow. but when i'm rotating the control, the dropshadow also follows the direction. these are the sample images:
this is the normal look of the dropshadow when the user control is not yet rotated.
and this is the dropshadow after rotating the control
this is my code for that control and dropshadow:
<local:CogWheel x:Name="CogWheel2" Width="100" Height="100" GearColor="#FF4D5D" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="105,13,0,0" RenderTransformOrigin="0.5,0.5">
<local:CogWheel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="100"/>
<TranslateTransform/>
</TransformGroup>
</local:CogWheel.RenderTransform>
<local:CogWheel.Effect>
<DropShadowEffect Color="#FF4D5D" BlurRadius="20" ShadowDepth="12" Direction="280" Opacity="0.70"/>
</local:CogWheel.Effect>
</local:CogWheel>
i want to rotate a control but retain its dropshadow direction. any help would be appreciated. thank you!
EDIT:
I solved it by my own by putting the control i am rotating to a transparent grid and adding the dropshadow to the grid instead.
I think you can add the Angle to the Shadoweffect direction to retain the effect
var rotate = (CogWheel2.RenderTransform as TransformGroup).Children.Where(x => x is RotateTransform).FirstOrDefault() as RotateTransform;
this.shadowEffect.Direction = 280 + rotate.Angle;
Applying the dropshadow effect on a parent grid do the job.
To elaborate on Justin CI's answer : binding the DropShadowEffect.Direction to the RotateTransform.Angle also works. It's convenient when animations come into play.
<local:CogWheel x:Name="CogWheel2" GearColor="#FF4D5D" RenderTransformOrigin="0.5,0.5">
<local:CogWheel.RenderTransform>
<RotateTransform Angle="100" x:Name="rotation"/>
</local:CogWheel.RenderTransform>
<local:CogWheel.Effect>
<DropShadowEffect Direction="{Binding Angle, ElementName=rotation}" Color="#FF4D5D" />
</local:CogWheel.Effect>
</local:CogWheel>
I have a DockPanel with some images nested inside.
<DockPanel x:Name="ControlStack"
Background="LightGray"
MouseLeftButtonUp="ECIControlStack_MouseLeftButtonUp">
<DockPanel.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Margin" Value="0,0,3,0"/>
</Style>
</DockPanel.Resources>
<Image x:Name="FirstImage" Source="{Binding GpsImage}" Height="36" Width="36"/>
<Image x:Name="SecondImage" Source="{Binding YellowIcon}" Height="36"/>
<Image x:Name="ThirdImage" Source="{Binding RedIcon}" Height="36"/>
<Image x:Name="FourthImage" Source="{Binding GreenIcon}" Height="36"/>
</DockPanel>
I would like to change the order of the items programmatically from code behind or really anywhere.
Just doing some general tinkering, trying to even get the objects to move.
I've attempted something such as:
Rect rectangleBounds = new Rect();
rectangleBounds = ControlStack.RenderTransform.TransformBounds(
new Rect(0, 0, ControlStack.Width, ControlStack.Height));
Canvas.SetLeft(FirstImage, rectangleBounds.Left + 100);
Canvas.SetRight(FirstImage, rectangleBounds.Right + 100);
Canvas.SetTop(FirstImage, rectangleBounds.Top + 100);
Canvas.SetBottom(FirstImage, rectangleBounds.Bottom + 100);
But to no avail.
1.I don't think this works because it is in the dockpanel and not a canvas child?
2.Even if it did work it would move freely and I assume destroy the dockPanel stack order.
Thanks for taking a look.
As stated in the comments, changing the order is easiest by simply adjusting the index of the images. I ended up using the following:
private void SetTopImage()
{
Image NewTopImage = FindIconPriority(); // Finds what Icon I would like to have in front.
ControlStack.Children.Remove(NewTopImage);
ControlStack.Children.Insert(0, NewTopImage);
}
I have a text data. I would like to place the data dynamically to a certain point [Absolute point, it may be (0,0) (10,10) or (100,100)].
Here the problem comes. My requirement is text block's center point should be the base point. How to make it and place it directly on the canvas? [Which means align the absolute point and center point of the textblock]. Because in winforms we can set the alignment property and place it directly. Please check this question .It describes how to move the textblock after placing it on the canvas since actual width can be found.
I have two specific questions
Is it possible to do it in WPF
Is there anyway to find the actual width before placement, in case I can do it as in the other question
Update (Further explanation)::::: This is my Data Template to place the text, I can use TranslateTransform to translate the text as soon as the text is placed on the canvas by using MoveToPoint function mention below.
The real problem come, how to pass the ActualWidth to MoveToPoint inside datatemplate,
XAML
<DataTemplate DataType="{x:Type local:Text}">
<TextBlock Text="{Binding Description}"
FontSize= "{Binding Thickness}"
RenderTransformOrigin="0.5,0.5"
Foreground="#FFF63AFF"
FontWeight="Bold" >
<TextBlock.RenderTransform>
<TransformGroup>
<TranslateTransform X= "{Binding StartPoint.X}" Y= "{Binding StartPoint.Y}" />
<RotateTransform Angle= "{Binding Angle}" />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</DataTemplate>
C#
void MoveToPoint(UIElement sender, Point point)
{
Canvas.SetLeft(sender, point.X - sender.RenderTransformOrigin.X * sender.ActualWidth);
Canvas.SetTop(sender, point.Y - sender.RenderTransformOrigin.Y * sender.ActualHeight);
}
i use a rectangle lying over other controls to darken them. now, i still want to be able to interact with the controls behind the rectangle, this rectangle will never have another sense than his visual aspect. the problem is, that it catches all clicks & so on, so it's ATM a obstacle.
xaml
<Rectangle Canvas.ZIndex="1" Opacity="0" Name="shadow" Fill="Black"/>
c#
shadow.Opacity = Math.Round(1-(double)(App.Current as App).dimfactor / 255,2);
(App.Current as App).dimfactor is a value between 150 & 255.
how to deal with that?
thanks
I'm not entirely sure if it's the same in WP7 as silverlight but can't you set the IsHitTestVisible bool to false?
<Rectangle Canvas.ZIndex="1" IsHitTestVisible="false" Opacity="0" Name="shadow" Fill="Black"/>
I'm trying to rotate this canvas
<Canvas Canvas.Left="203" Canvas.Top="274" Name="canvas1" Height="0" Width="0" >
<Rectangle.LayoutTransform>
<RotateTransform Angle="-45"/>
</Rectangle.LayoutTransform>
I want to rotate this canvas but in the same position.. check this image
The left image I dont want to do that.. I need to create the second one.. but always I need to set X, Y values? Or is there another way?
In WPF, has two properties to support display transformations, LayoutTransform and RenderTransform.Any Transform assigned to LayoutTransform is applied when layout is performed. RenderTransform is applied after layout when rendering is performed.
You need to change the Transformation to RenderTransform
<Rectangle.RenderTransform>
<RotateTransform Angle="-45"/>
</Rectangle.RenderTransform>
You can see the difference between LayoutTransform and RenderTransform.