Add IsRounded Property for CompositionShadow

Author: ghost1372

dev/DevWinUI.Controls/Controls/Win2DAndComposition/CompositionShadow/CompositionShadow.Properties.cs

@@ -128,4 +128,22 @@ private static async void OnImageSourceForEdgeColorChanged(DependencyObject d, D
             await ctl.UpdateColorFromImageAsync();
         }
     }
+
+    public bool IsRounded
+    {
+        get { return (bool)GetValue(IsRoundedProperty); }
+        set { SetValue(IsRoundedProperty, value); }
+    }
+
+    public static readonly DependencyProperty IsRoundedProperty =
+        DependencyProperty.Register(nameof(IsRounded), typeof(bool), typeof(CompositionShadow), new PropertyMetadata(false, OnIsRoundedChanged));
+
+    private static void OnIsRoundedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var ctl = (CompositionShadow)d;
+        if (ctl != null)
+        {
+            ctl.UpdateIsRounded();
+        }
+    }
 }

dev/DevWinUI.Controls/Controls/Win2DAndComposition/CompositionShadow/CompositionShadow.cs

@@ -15,7 +15,9 @@ public partial class CompositionShadow : Control
     public DropShadow DropShadow => _dropShadow;
 
     public SpriteVisual Visual => _shadowVisual;
+    public Compositor compositor;
 
+    private bool _isCustomMask;
     public CompositionBrush Mask
     {
         get => _dropShadow?.Mask;
@@ -24,6 +26,7 @@ public CompositionBrush Mask
             if (_dropShadow != null)
             {
                 _dropShadow.Mask = value;
+                _isCustomMask = value != null; // mark that user provided a mask
             }
         }
     }
@@ -32,7 +35,7 @@ public CompositionShadow()
         this.DefaultStyleKey = typeof(CompositionShadow);
         this.SizeChanged += CompositionShadow_SizeChanged;
         this.Loaded += CompositionShadow_Loaded;
-        var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
+        compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
 
         _shadowVisual = compositor.CreateSpriteVisual();
         _dropShadow = compositor.CreateDropShadow();
@@ -70,7 +73,15 @@ private void CompositionShadow_SizeChanged(object sender, SizeChangedEventArgs e
 
     private void ConfigureShadowVisualForContent()
     {
-        UpdateShadowMask();
+        if (IsRounded)
+        {
+            UpdateIsRounded();
+        }
+        else
+        {
+            UpdateShadowMask();
+        }
+
         UpdateShadowSize();
 
         if (_dropShadow != null)
@@ -87,25 +98,26 @@ private void UpdateShadowMask()
         if (_dropShadow == null)
             return;
 
-        if (Content != null)
+        // If IsRounded is true, always use rounded mask
+        if (IsRounded)
+            return; // Mask is already set in UpdateIsRounded
+
+        // Only auto-generate mask if user hasn't set a custom mask
+        if (!_isCustomMask && Content != null)
         {
             CompositionBrush mask = null;
             if (Content is Image image)
-            {
                 mask = image.GetAlphaMask();
-            }
             else if (Content is Shape shape)
-            {
                 mask = shape.GetAlphaMask();
-            }
             else if (Content is TextBlock textBlock)
-            {
                 mask = textBlock.GetAlphaMask();
-            }
+
             _dropShadow.Mask = mask;
         }
-        else
+        else if (!_isCustomMask)
         {
+            // fallback if Content is null or unsupported
             _dropShadow.Mask = null;
         }
     }
@@ -156,4 +168,37 @@ private async Task UpdateColorFromImageAsync()
             Color = Colors.Black;
         }
     }
+
+    private void UpdateIsRounded()
+    {
+        if (IsRounded)
+        {
+            float width = (float)this.ActualWidth;
+            float height = (float)this.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);
+
+            _dropShadow.Mask = maskBrush;
+        }
+        else
+        {
+            UpdateShadowMask();
+        }
+    }
 }

dev/DevWinUI.Controls/Themes/Generic.xaml

@@ -17372,11 +17372,13 @@ Themes\Styles\Controls\WaveProgressBar.xaml
     <Setter Property="IsTabStop" Value="False" />
     <Setter Property="CompactPaneLength" Value="{ThemeResource RailNavigationViewCompactPaneLength}" />
     <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
-    <Setter Property="MenuItemContainerStyle" Value="{StaticResource NavigationViewItemStoreStyle}" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="NavigationView">
           <Grid x:Name="RootGrid">
+            <Grid.Resources>
+              <Style TargetType="NavigationViewItem" BasedOn="{StaticResource NavigationViewItemStoreStyle}" />
+            </Grid.Resources>
             <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="DisplayModeGroup">
                 <VisualState x:Name="Compact" />

dev/DevWinUI.Gallery/Views/Pages/Composition/CompositionShadowPage.xaml

@@ -45,6 +45,9 @@
                                      IsHexInputVisible="False"
                                      IsMoreButtonVisible="False"
                                      Color="Yellow" />
+                        <ToggleSwitch x:Name="TGIsRounded"
+                                      Header="Is Rounded"
+                                      IsOn="True" />
                     </StackPanel>
                 </local:ControlExample.Pane>
                 <StackPanel Spacing="10">
@@ -78,6 +81,14 @@
                         <Polygon Fill="Blue"
                                  Points="50,0 0,50 50,50" />
                     </dev:CompositionShadow>
+                    <dev:CompositionShadow Width="100"
+                                           Height="100"
+                                           BlurRadius="{x:Bind BlurSlider.Value, Mode=OneWay}"
+                                           IsRounded="{x:Bind TGIsRounded.IsOn, Mode=OneWay}"
+                                           OffsetX="{x:Bind OffsetXSlider.Value, Mode=OneWay}"
+                                           OffsetY="{x:Bind OffsetYSlider.Value, Mode=OneWay}"
+                                           ShadowOpacity="{x:Bind ShadowSlider.Value, Mode=OneWay}"
+                                           Color="{x:Bind ColorPickerSample.Color, Mode=OneWay}" />
                 </StackPanel>
 
             </local:ControlExample>