WPF geometry (Path) partly filled shapes

Question

The idea is to get rating control, that could have value like 0.3 and draw it as partly filled shape.
The approach I used was described in CodeProject article. Have Path, add mask (rectangle), add outline.
Original code used Margin for mask and fixed-width paths.
The problem is that using rectangle as mask re-draws background, which is gradient, so I can't set the same background value for mask. I've changed colors just to make it more clear.

Is it possible to simulate partly filled paths?

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid x:Name="gdStar" Width="Auto" Height="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>

        <Path 
            Grid.ColumnSpan="2"
        Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>

        <Rectangle Grid.Column="1"
        Fill="Yellow"/>

        <Path 
            Grid.ColumnSpan="2"
            Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>

    </Grid>


</Page>

EDIT
This could be wrong approach. What else could be used? OpacityBrush/Clip?

Answer 1

Are you looking for something like this:

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">   
    <Grid x:Name="gdStar" Width="Auto" Height="Auto">
        <Path 
        Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z">
            <Path.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="Transparent" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.3"/>
                </LinearGradientBrush>
            </Path.OpacityMask>
        </Path>
        <Path 
            Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
    </Grid>
</Page>

Edit Here is a version that changes the background of non filled area by adding a white star behind it, I've left the previous example there because its a bit clearer.

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Background="yellow">   
    <Grid x:Name="gdStar" Width="Auto" Height="Auto">
        <Path 
        Fill="White" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
        <Path 
        Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z">
            <Path.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="Transparent" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.3"/>
                </LinearGradientBrush>
            </Path.OpacityMask>
        </Path>
        <Path 
            Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
    </Grid>
</Page>