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
IsBreathing
UseCornerRadius
CornerRadius

Methods

Name
GetDropShadow
StartBreath
StopBreath

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%