Add ImageCropper overlay sample

components/ImageCropper/samples/ImageCropper.md

@@ -16,7 +16,7 @@ The `ImageCropper Control` allows user to freely crop an image.
 
 > [!Sample ImageCropperSample]
 
-## Syntax
+### Syntax
 
 ```xaml
 <Page ...
@@ -25,9 +25,7 @@ The `ImageCropper Control` allows user to freely crop an image.
 </Page>
 ```
 
-## Examples
-
-### Use ImageCropper
+### Basic usage
 
 You can set the cropped image source by using the `LoadImageFromFile(StorageFile)` method or setting the `Source` property.
 
@@ -66,3 +64,9 @@ Or you can crop image without aspect ratio.
 ```csharp
 ImageCropper.AspectRatio = null;
 ```
+
+### With an Overlay
+
+The crop area can be overlaid with a brush. Here we use a `RadialGradientBrush`, but you can use any brush; backdrop Media brushes, Geometry brushes, bitmap and image brushes, and so on.
+
+> [!Sample ImageCropperOverlaySample]

components/ImageCropper/samples/ImageCropperOverlaySample.xaml

@@ -0,0 +1,25 @@
+<Page
+	x:Class="ImageCropperExperiment.Samples.ImageCropperOverlaySample"
+	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+	xmlns:local="using:ImageCropperExperiment.Samples"
+	xmlns:media="using:Microsoft.UI.Xaml.Media">
+	<Grid>
+		<controls:ImageCropper
+			x:Name="ImageCropper"
+			Width="520"
+			Height="520"
+			AspectRatio="{x:Bind local:ImageCropperSample.ConvertStringToAspectRatio(AspectRatioSetting), Mode=OneWay}"
+			CropShape="{x:Bind local:ImageCropperSample.ConvertStringToCropShape(CropShapeSetting), Mode=OneWay}"
+			ThumbPlacement="{x:Bind local:ImageCropperSample.ConvertStringToThumbPlacement(ThumbPlacementSetting), Mode=OneWay}">
+			<controls:ImageCropper.Overlay>
+				<media:RadialGradientBrush>
+					<GradientStop Offset="0.75" Color="Transparent" />
+					<GradientStop Offset="1" Color="DimGray" />
+				</media:RadialGradientBrush>
+			</controls:ImageCropper.Overlay>
+		</controls:ImageCropper>
+
+	</Grid>
+</Page>

components/ImageCropper/samples/ImageCropperOverlaySample.xaml.cs

@@ -0,0 +1,28 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.Storage;
+
+namespace ImageCropperExperiment.Samples;
+
+[ToolkitSampleMultiChoiceOption("ThumbPlacementSetting", "All", "Corners", Title = "Thumb Placement")]
+[ToolkitSampleMultiChoiceOption("CropShapeSetting", "Circular", "Rectangular", Title = "Crop Shape")]
+[ToolkitSampleMultiChoiceOption("AspectRatioSetting", "Custom", "Square", "Landscape(16:9)", "Portrait(9:16)", "4:3", "3:2", Title = "Aspect Ratio")]
+
+[ToolkitSample(id: nameof(ImageCropperOverlaySample), "ImageCropper Overlay", description: $"A sample for showing how to use the overlay feature of {nameof(ImageCropper)}.")]
+public sealed partial class ImageCropperOverlaySample : Page
+{
+    public ImageCropperOverlaySample()
+    {
+        this.InitializeComponent();
+
+        _ = Load();
+    }
+
+    private async Task Load()
+    {
+        var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/Owl.jpg"));
+        await ImageCropper.LoadImageFromFile(file);
+    }
+}