WPF геометрия (контур) частично заполненные фигуры

Question

Идея состоит в том, чтобы получить контроль рейтинга, который мог бы иметь значение, подобное 0,3, и нарисовать его как частично заполненную форму.
Подход, который я использовал, был описан в статье CodeProject.Имейте Path, добавьте маску (прямоугольник), добавьте контур.
Оригинальный код, используемый Margin для маски и путей фиксированной ширины.
Проблема заключается в том, что использование прямоугольника в качестве маски перерисовывает фон, который является градиентом, поэтому я не могу установить одно и то же значение фона для маски.Я изменил цвет, чтобы сделать его более понятным.

Возможно ли смоделировать частично заполненные пути?

<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>

РЕДАКТИРОВАТЬ
Это может быть неправильный подход.Что еще можно использовать?OpacityBrush / Клип

Answer 1

Вы ищете что-то вроде этого:

<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>

Редактировать Вот версия, которая изменяет фон незаполненной области, добавляя за ней белую звезду, я оставил предыдущий пример, потому что она немного понятнее.

<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>