How to cut rendering within a rounded border?

Question

I am trying to create a rounded border and select its upper half. I use an ellipse with a radial gradient, overlapping the upper half of the border to highlight the selection, but I cannot figure out how to prevent the ellipse coloring the corners of the border. Here is a screenshot from Kaxaml:

And here is the XAML code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray"> <Grid Width="256" Height="256"> <Border CornerRadius="16" Background="Black" Margin="4"> <Border Background="Gray" Margin="32"> <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </Border> <Border CornerRadius="16" ClipToBounds="True"> <Ellipse> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> </RadialGradientBrush> </Ellipse.Fill> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/> <TranslateTransform Y="-235"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/> </Grid> </Page> 

How can I stop the upper corner areas affected by ellipse shading?

I tried playing with OpacityMask , but I have to admit that I don’t understand how to use it, especially with the conversion of the ellipse for rendering. No matter what I try, the ellipse either completely disappears or is not completely affected.

Any help would be greatly appreciated.

Thanks in advance.

Answer 1

Firstly, it looks great when I compiled and ran the code in Visual Studio. Secondly, why don't you use this RadialGradientBrush as the Background first Border ? Something like that:

 <Border CornerRadius="16" > <Border.Background> <RadialGradientBrush Center=".5 0" GradientOrigin=".5 0" RadiusX="1" > <GradientStop Color="White" Offset="0"/> <GradientStop Color="Black" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border> 

Answer 2

Instead of using ClipToBounds or OpacityMask I ended up using a radial gradient as the background for the optional Border element. Thanks alpha mouse for the tip.

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray"> <Grid Width="256" Height="256"> <Border CornerRadius="16" Background="Black" Margin="4"> <Border Background="Gray" Margin="32"> <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </Border> <Border CornerRadius="16" Margin="4"> <Border.Background> <RadialGradientBrush> <RadialGradientBrush.Transform> <TransformGroup> <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/> <TranslateTransform Y="-235"/> </TransformGroup> </RadialGradientBrush.Transform> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border> <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/> </Grid> </Page> 

And here is the final view:

Thanks.