We Keep Coding

DropShadowEffect direction follows the RotateTransform of a control

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>

Circular CaptureElement camera stream in Windows 10

Wherever you look in Windows 10, there are circles. It's fairly easy to make images circular, but camera is a bit different. Is there a simple XAML way to clip the camera stream in a CaptureElement to make it a circle?
I tried putting it in a border, but CaptureElement doesn't care about its borders. I also tried using the Clip property, but it can only clip to RectangleGeometry.
One way would certainly be to grab CaptureElement frames, transforming them to images (frame by frame) and applying to Image element, and then clipping the image, but it seems like that would have awful performance.
Is there something in the framework to make this really simple, but I'm not seeing it?

Well after seeing that might be the background is always black of the Canvas DirectX the only way I see is:
1.- Clip a rectangle with an ellipse in Inkscape for instance.
2.- Copy to Expression Design and Ctrl-Shift-C (to copy XAML)
3.- Place inside a ViewBox only the path generated
<Grid Width="300" Height="300">
<CaptureElement Name="PreviewControl" Stretch="Uniform" Width="280" Height="280" />
<Viewbox Width="280" Height="280">
<Path Width="813.701" Height="813.701" Canvas.Left="-33.3503" Canvas.Top="-45.3503" Stretch="Fill" Fill="#FF800080" Data="F1 M -33.3503,-45.3503L -33.3503,768.35L 780.35,768.35L 780.35,-45.3503L -33.3503,-45.3503 Z M 373.54,158.095C 485.863,158.095 576.985,249.137 576.985,361.54C 576.985,473.863 485.863,564.985 373.54,564.985C 261.137,564.985 170.095,473.863 170.095,361.54C 170.095,249.137 261.137,158.095 373.54,158.095 Z "/>
</Viewbox>
</Grid>
With that you can place an image in the path or a solid color, that's the only way I see to do it. Hope it helps

Tint a partially transparent image in WPF

How can I tint/colorize an image in WPF (using MVVM) without sacrificing performance? A purely XAML solution would be ideal, as modifying bitmaps in the code will cause performance loss with lots of changing images. The image is made up of more than simple shapes, so it is not possible using a path.

Unlike WinForms/GDI+, WPF does not seem to contain any easy ways to colorize/tint an image as it is being rendered. Two ideas for accomplishing this are, using a shader, or overlaying a colored rectangle over the image.
I decided to try the rectangle route and found that it works. Basically, all you need to do is overlay a colored rectangle over your image, and use an OpacityMask to restrict the color fill to a certain area. OpacityMask is primarily used with paths, but it can take any kind of brush, including an ImageBrush. This means you can use your image as a "stencil" for the colored fill.
Example: (Taken from my application where a user can "highlight" a section of a map, the actual image looks like this)
Before Overlay & Mask
After Overlay & Mask
Here is all of the required XAML for this:
<Image
Source="{Binding MyImage}"
Width="150"
Height="150" />
<Rectangle Width="150" Height="150">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Color}"/>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{Binding MyImage}"/>
</Rectangle.OpacityMask>
</Rectangle>
To bind the color to a brush as I did, use a ColorToBrushConverter.

Anchoring/docking behavior in WPF on Canvas layout

I am arranging quite freely a lot of elements on a Canvas layout, in fact the elements represent an interactive flow-chart. As transformations are applied, I need relative transformations on some of the elements.
Especially I require some elements being anchored or docked to their parent elements. I found different solutions, however I don't know if they solve my problem in the most elegant way.
Here is an example:
<Line X1="80" X2="800" Y1="730" Y2="730"/>
<Polygon Points="0,30 40,0 40,60" Canvas.Left="48" Canvas.Top="700"/>
The Polygon draws a triangle and I would like to let it dock on the left side of line. Which means, when translating the line to a new position or when scaling it down, the Polygon should move with it.
Is this possible?

put them in a canvas of their own, that way you can position the outer canvas absolutely and keep the inner stuff together.
like this:
<Canvas>
<Line X1="60" X2="820" Y1="60" Y2="760"> <!--some other line--> </Line>
<Canvas Canvas.Left="48" Canvas.Top="700">
<Polygon Points="0,30 40,0 40,60"/>
<Line X1="32" X2="752" Y1="30" Y2="30"/>
</Canvas>
</Canvas>

Issues with getting some text centered in a Polygon

I'm creating a map in Silverlight that contains a bunch of rooms. All of the rooms are polygons, most of them are rectangles.
So what I'm doing is creating a Polygon using the x y point coordinates for the room. Something like
Polygon p = new Polygon
p.points = pointCollection;
MainCanvas.Chilren.Add(p);
This works great. Next, I want to put the name of each room inside these on the map. I figured I'd just add a textblock child to the polygon. Unfortunately, it seems that UIElements cannot contain child UIElements. I think this is dumb, but whatever.
Next plan: Create a new Silverlight user control containing the polygon and a text field. Center text field in polygon within user control. So I just create one of these UserControls "Room" set the property "RoomShape" to the polygon and add it to the canvas. The problem here is that The Usercontrol is always added at position (0,0) and the room shape is in the bottom right position. What I really wanted was for the control to take on the size and shape of the polygon I add to it so I can find the center and add the text in. Is this possible?
Also, let's say I add a polygon to my layout in a control:
LayoutRoot.Children.Add(poly);
Why do
poly.ActualHeight
poly.ActualWidth
poly.height
poly.width
all return 0 or NaN when I can clearly see them on the Canvas?
And why do
Canvas.GetTop(poly);
Canvas.GetLeft(poly);
both return 0 when I can clearly see they are not located at (0,0)?
Any other suggestions for centering text in a polygon is appreciated.

First of all, for sure you cannot add UIElements to Polygon. The Polygon is not a container so you can't add elements in it.
Second, if you want to set text in the middle of your polygon, why don't you wrap your polygon in a Grid. Then in the Grid, add your polygon, and your textblock like that :
<Grid x:Name="room1" Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center">
<Polygon Stroke="Black" Fill="Beige">
<Polygon.Points >
<Point X="0" Y="0" />
<Point X="20" Y="100" />
<Point X="100" Y="50" />
<Point X="0" Y="0" />
</Polygon.Points>
</Polygon>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Room Name</TextBlock>
</Grid>
Third, for the size always at 0, this is probably because you create/add the usercontrol at Load time. I know its sad but you will have to do the work in the UserControl_SizeChanged event of the container.