Develop Reference

DropShadowPanel and border corner radius

I want to make drop shadow effect with border control. I am using UWP toolkit.
<controls:DropShadowPanel x:Name="dspShadow"
BlurRadius="10"
ShadowOpacity="0.8"
OffsetX="0"
OffsetY="0"
Color="Black">
<Border x:Name="borderMain" Background="Red" CornerRadius="10"/>
</controls:DropShadowPanel>
But it doesn't recognize corner radius, the result is like this:
And I need it to look like this:
Any ideas how to achieve this?

You need to mask it. Currently you can only get the mask from TextBlock, Shape and Image. In this case just replace the Border with a Rectangle.
<controls:DropShadowPanel x:Name="dspShadow"
BlurRadius="10"
OffsetX="0"
OffsetY="0"
ShadowOpacity="0.8"
Color="Black">
<Rectangle Width="100"
Height="48"
Fill="Red"
RadiusX="10"
RadiusY="10" />
</controls:DropShadowPanel>

Fit Border around arbitrary Path

I have a Path based on a group of rectangle/ellipse Geometry. When I put an auto-sized Border around it, the border shrinks to fit the RectangleGeometry but does something weird with the EllipseGeometry, as shown below. Anyone know how to fix it so the Border (shown in blue) fits snugly around the whole thing?
Ultimately, I want a Border or a Panel that fits an arbitrary, runtime-generated Path (including the stroke thickness), and I need the geometry size maintained.
Sample code:
<Border BorderBrush="Blue" BorderThickness="2"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Stroke="Orange" StrokeThickness="5" Fill="Red">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="-10,-10" RadiusX="12" RadiusY="12" />
<EllipseGeometry Center="70,0" RadiusX="70" RadiusY="10">
<EllipseGeometry.Transform>
<RotateTransform Angle="-25" CenterX="50" CenterY="0" />
</EllipseGeometry.Transform>
</EllipseGeometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryGroup>
</Path.Data>
</Path>
</Border>

You may set the Path's Stretch property and bind its Width to the Width of the Bounds of the Geometry:
<Path ... Stretch="Uniform"
Width="{Binding Data.Bounds.Width, RelativeSource={RelativeSource Self}}">
...
</Path>
As the Geometries's Bounds do not contain the rendered Path's StrokeThickness, you may alternatively put the Border into a Canvas (which does not resize its child elements at all), and don't set the Path's Width. This may may however lead to problems when you want to center the Canvas in an outer Grid. It's actual size appears to be zero.
<Canvas>
<Border BorderBrush="Blue" BorderThickness="2">
<Path ... Stretch="Uniform">
...
</Path>
</Border>
</Canvas>

wpf canvas and video control fullscreen

In my WPF program, I want to draw a shape. Then after I press a button, the program plays a video in fullscreen mode. I can't seem to make the video play in fullscreen on the canvas.
my XAML is like below
<Canvas>
<Ellipse Name="face1" Panel.ZIndex="2" Fill="Green" Width="400" Height="400" />
<MediaElement Panel.ZIndex="1000" Name="videoControl1" Stretch="Fill"
Source="C:\Users\videos\carcrash.mp4"
LoadedBehavior="Manual" MediaEnded="videoControl1_MediaEnded">
</MediaElement>
</Canvas>
As you can see, I put the video in front of my shape. as sson as a button is pressed, I then start to play the video. So the video will be in front of the shape. The problem is that the video is very small. How to make it full screen?

Per Dennis Cheng's comment here:
Canvas is a "no-layout" panel so children won't size to parent. Try
Grid if you want children fill or manually Bind to the parent's size
if you must use a Canvas:
<Canvas x:Name="MyCanvas"
Width="300"
Height="300">
<Ellipse Name="face1"
Width="400"
Height="400"
Panel.ZIndex="2"
Fill="Green" />
<MediaElement Name="videoControl1"
Width="{Binding RelativeSource={RelativeSource Self},
Path=Parent.ActualWidth}"
Height="{Binding RelativeSource={RelativeSource Self},
Path=Parent.ActualHeight}"
Panel.ZIndex="1000"
Source="C:\Users\videos\carcrash.mp4" />
</Canvas>
That scales the video's width to that of the containing Canvas, but it remains in proportion to its original dimensions.
If you use a Grid you can achieve the kind of scaling you're aiming for:
<Grid Width="500" Height="500">
<Ellipse Name="face1"
Width="400"
Height="400"
Panel.ZIndex="2"
Fill="Green" />
<MediaElement Name="videoControl1"
Grid.Row="0"
Panel.ZIndex="1000"
Source="D:\Downloads\The.Strain.S01E13.HDTV.x264-LOL.mp4"
Stretch="Fill" />
</Grid>

Resizable circle button xaml

I'm developping a universal app for Windows in XAML/C# and I can't manage to create a circle button that I can resize. I use an Ellipse with uniform stretch so as to make it circle and a ContentPresenter.
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stretch="Uniform">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
The problem is a uniform ellipse is automatically aligned top, left, and it's impossible to make it stretch the grid. When I resize the button, the ContentPresenter stays in the center while the ellipse stays in the top left corner. I'd like to be able to resize the button and that the text stays in the center of the circle.
Thanks for help!

You may use a Path with a circular EllipseGeometry:
<ControlTemplate TargetType="Button">
<Grid>
<Path Stretch="Uniform" ...>
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
You would however have to explicitly set the Width or Height of the Button, otherwise it would take up all available space.

I've also found another solution which is to use a ViewBox:
<ControlTemplate TargetType="Button">
<ViewBox>
<Grid>
<Ellipse Stretch="Uniform" Width="50" Height="50">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ViewBox>
</ControlTemplate>
The ViewBox automatically scales everything when resized. You have to set Width and Height, but it's only to set proportions. Very useful when using the user control with both Windows and Windows Phone.
Thanks for your answers!

cannot draw shape in canvas

I have a canvas in xaml defined as following. However adding a rectangle in it doesn't show any thing.
<lib:DrawingCanvas x:Name="drawingCanvas" Background="White" AllowDrop="True">
<Rectangle Margin="20,20,20,20" Fill="Black" Stroke="White" Width="100" Height="100">
</Rectangle>
</lib:DrawingCanvas>
Can you give me some hints here?
Thanks.

You're not using a Canvas, you're using a "DrawingCanvas", so I can't speak for any differences. But assuming it derives from Canvas:
You need to set the attached properties for the Rectangle. These are Canvas.Left or Canvas.Right, in addition to Canvas.Top or Canvas.Bottom.
For example:
<Rectangle Canvas.Left="50" Canvas.Top="100" Width="100" Height="100" Fill="Black" />