Ghost1372

everything can be handy

CompositionShadow

Demonstrates how to apply drop shadows to Xaml elements

Property

Name
BlurRadius
Color
OffsetX
OffsetY
OffsetZ
ShadowOpacity
Content
Mask
IsRounded

Example

1
2
3
4
5
6
7
 <dev:CompositionShadow BlurRadius="10" ShadowOpacity="0.7" Color="Yellow">
    <TextBlock FontSize="30"
                FontWeight="SemiBold"
                TextWrapping="Wrap">
        Here’s a custom control that allows you to apply DropShadows through Markup on XAML Text, Images, or Shapes
    </TextBlock>
</dev:CompositionShadow>

Using Mask

Example 1

1
2
3
4
5
6
<dev:CompositionShadow x:Name="RenderShadow"
                       Width="100"
                       Height="100"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Color="Red"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

float width = (float)RenderShadow.ActualWidth;
float height = (float)RenderShadow.ActualHeight;
float radius = MathF.Min(width, height) / 2f;

var ellipse = compositor.CreateEllipseGeometry();
ellipse.Center = new Vector2(width / 2f, height / 2f);
ellipse.Radius = new Vector2(radius, radius);

var shape = compositor.CreateSpriteShape(ellipse);
shape.FillBrush = compositor.CreateColorBrush(Colors.White);

var shapeVisual = compositor.CreateShapeVisual();
shapeVisual.Size = new Vector2(width, height);
shapeVisual.Shapes.Add(shape);

var visualSurface = compositor.CreateVisualSurface();
visualSurface.SourceVisual = shapeVisual;
visualSurface.SourceSize = new Vector2(width, height);

var maskBrush = compositor.CreateSurfaceBrush(visualSurface);

RenderShadow.Mask = maskBrush;

Example 2

1
2
3
4
5
<ToggleSwitch x:Name="TGMask" Header="Toggle Mask" Toggled="TGMask_Toggled" />

 <dev:CompositionShadow x:Name="RenderShadow" Width="200" Height="300" BlurRadius="10" ShadowOpacity="0.7" Color="Green">
    <dev:CompositionImage x:Name="ComImage" Source="ms-appx:///Assets/Others/Girl.jpg" />
</dev:CompositionShadow>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
private Compositor _compositor;
private ManagedSurface _imageMaskSurface;
private CompositionMaskBrush _maskBrush;
public CompositionShadowPage()
{
    InitializeComponent();
    Loaded += CompositionShadowPage_Loaded;
    Unloaded += CompositionShadowPage_Unloaded;
}

private void CompositionShadowPage_Unloaded(object sender, RoutedEventArgs e)
{
    if (_imageMaskSurface != null)
    {
        _imageMaskSurface.Dispose();
    }
}

private void CompositionShadowPage_Loaded(object sender, RoutedEventArgs e)
{
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

    _imageMaskSurface = ImageLoader.Instance.LoadCircle(200, Colors.White);

    CompositionSurfaceBrush source = ComImage.SurfaceBrush as CompositionSurfaceBrush;

    _maskBrush = _compositor.CreateMaskBrush();
    _maskBrush.Mask = _imageMaskSurface.Brush;
    _maskBrush.Source = source;
}

private void TGMask_Toggled(object sender, RoutedEventArgs e)
{
    if (TGMask.IsOn)
    {
        ComImage.Brush = _maskBrush;
        RenderShadow.Mask = _maskBrush.Mask;
    }
    else
    {
        ComImage.Brush = _maskBrush.Source;
        RenderShadow.Mask = null;
    }
}

CompositionShadow

Demo

you can run demo and see this feature.

0%