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>
Related
I'm trying to create a tile in WPF that looks like the tiles of the Windows 8 Start screen.
Actually, the problem is that I don't know how to make the tilt effect of the Windows 8 tiles ( the click effect ).
I tried different transformations such as matrix transofmration, but this is not what I want.
Explanation in image :
Default style:
Here is my code
<Grid >
<Grid.LayoutTransform>
<MatrixTransform>
<MatrixTransform.Matrix >
<Matrix OffsetX="5" OffsetY="5" M11="1" M12="0.1"></Matrix></MatrixTransform.Matrix>
</MatrixTransform>
</Grid.LayoutTransform>
<Grid.Background>
<ImageBrush ImageSource="/MaCollectivitéWPF;component/src/Img/Home/Porte Document-petite.jpg" Stretch="UniformToFill" >
</ImageBrush>
</Grid.Background>
It's almost what I want but I only want the bottom to be tilted.
I've take a look at the 3D controls but I think it's to complicated for what I'm looking for.
Is there a solution with Layout Transformation I would not have seen yet ?
I think you want to pinch Greg Schechter's Planerator for tilting.
Your use case is exactly the one in the article, so I doubt you'd need to change anything. I've not tried it myself, but it seems to reduce tilting the plane to fairly easy xaml. Worth a look at least.
<pl:Planerator RotationY="35">
<StackPanel Orientation="Horizontal" ... >
<StackPanel>
<Label FontSize="24" Content=" " Foreground="#FF000000"/>
<Border ... >
<MediaElement x:Name="myMediaElement" />
</Border>
</StackPanel>
<ListBox ... />
</StackPanel>
</pl:Planerator>
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>
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 am trying to flip and rotate image in C# (for Windows Store App).
And it becomes complicated if I try to flip image which is rotated first by some angle say x.
I see
Image.RotateFlip
method is available only in for Dektop apps.
Is there any existing API that can help in this situation? Any help appreciated :)
If you are working on a Windows Store App (in C#), I am assuming that you are using XAML for your GUI. If that is the case and you want to perform a rotation, This bit of markup should do it.
For Rotation :
<Image Source="/Assets/Logo.png" >
<Image.RenderTransform>
<RotateTransform Angle="90"/>
</Image.RenderTransform>
</Image>
For Flipping :
<Image Source="/Assets/Logo.png">
<Image.RenderTransform>
<ScaleTransform ScaleY="-1"/>
</Image.RenderTransform>
</Image>
If you want to perform an animation, you might want to take a look at this answer.
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.