WPF deforms opacity mask - wpf

Question

I'm trying to achieve this:
The gradient proportion will grow so I did a circle as opacityMask then a recangle using the circle as mask, like that:
<Ellipse Name="Mask"
Fill="Red"
Width="{Binding ActualWidth, ElementName=mainGrid}" Grid.ColumnSpan="3"
Visibility="Visible"/>
<Rectangle Name="Gradient" Fill="Azure"
Grid.Column="2" Width="100"
HorizontalAlignment="Left"
VerticalAlignment="Stretch">
<Rectangle.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}" />
</Rectangle.OpacityMask>
</Rectangle>
and I get this:
How do I keep the rectangle's form and mask it using the circle ??

Answer 1

This should work:
<VisualBrush Visual="{Binding ElementName=Mask}"
Stretch="None" AlignmentX="Left" AlignmentY="Top"/>

Answer 2

So you need something like this:
<Border Name="Mask"
Background="White"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
</Border>
<Ellipse Name="gradient"
Stroke="Black"
StrokeThickness="1"
Width="{Binding ActualWidth, ElementName=mainGrid}" Grid.ColumnSpan="3"
Visibility="Visible">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0" > >
<GradientStop Color="Green" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}"
Stretch="None"
AlignmentX="Right"
AlignmentY="Top" />
</Ellipse.OpacityMask>
</Ellipse>
<Border Name="Mask2"
Grid.Column="0"
Background="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
</Border>
<Ellipse Name="BlueEllipse"
Fill="Blue"
Stroke="Black"
StrokeThickness="1"
Width="{Binding ActualWidth, ElementName=mainGrid}"
Grid.ColumnSpan="3" >
<Ellipse.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask2}"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top"/>
</Ellipse.OpacityMask>
</Ellipse>
To achive what the original image is.