Как реализовать пользовательскую панель прогресса в XAML

Question

Я пытаюсь реализовать пользовательский «progressbar», основанный на изображении, которое не является прямоугольником. Я могу использовать opacitymask для достижения этого, но я еще не понял, как это сделать. У меня есть изображение с прозрачным фоном, и оно окрашено в белый цвет изнутри. Исходным состоянием является то, что изображение полностью голубое, а конечное состояние - это то, что изображение полностью белое (кроме границ будет оставаться черным)

В настоящее время у меня для этого есть такой код XAML, но я не вижу синего заполнения над изображением. ..

<Style TargetType="ProgressBar" x:Name="ImageProgressBar"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Border BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Margin="{TemplateBinding Margin}" 
          Background="{TemplateBinding Background}" 
          Width="{TemplateBinding Width}" 
          Height="{TemplateBinding Height}"> 
          <Grid> 
           <Image Source="Assets/emptyprogress.png" Stretch="Fill" /> 
           <Rectangle Fill="Blue"> 
            <Rectangle.OpacityMask> 
             <ImageBrush ImageSource="Assets/emptyprogress.png" Stretch="Fill" /> 
            </Rectangle.OpacityMask> 
            <Rectangle.Clip> 
             <RectangleGeometry x:Name="CLIPRECTANGLE" /> 
            </Rectangle.Clip> 
           </Rectangle> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

    <ProgressBar Grid.Row="3" Style="{StaticResource ImageProgressBar}" 
       Width="200" 
       Height="200" 
       Minimum="0" 
       Maximum="100" 
       Value="50" /> 

Это то, что у меня есть, и это должно быть конечной точкой

Это то, что я хочу

Answer 1

досыта прямоугольник должен быть назван ProgressBarIndicator для Progres sBar, чтобы иметь возможность находить и заполнять его.

Вы также можете рассмотреть возможность замены изображения зуба на PathGeometry. Затем вы можете использовать ту же геометрию, чтобы скопировать прямоугольник.

Вот пример с эллипсов и неадекватно жестко закодированных значений (я уеду более сложный путь для художника :))

<Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">      
    <Ellipse Height="50" x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" /> 
    <Rectangle Height="50" x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" > 
     <Rectangle.Clip> 
       <EllipseGeometry Center="200,25" RadiusY="25" RadiusX="200" /> 
     </Rectangle.Clip> 
    </Rectangle> 
</Grid>