Question

我正在尝试实现基于非矩形图像的自定义“进度条”。我通过我可以使用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" />

End 这就是我所拥有的，这应该是终点

Half-way 这就是我想要的

Answer 1

您的填充矩形需要命名为ProgressBarIndicator，以便ProgressBar能够找到并填充它。

您也可以考虑使用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>

如何在XAML中实现自定义进度条

1 个答案: