Question

我在XAML中定义了Xamarin Forms中的进度条。

实际上，我想在进度下方添加标签，以显示进度条的最小值和最大值，如下图所示：

我的XAML代码：

 <StackLayout Orientation="Vertical" Margin="5">

                            <Frame Padding="10"
                               BackgroundColor="White"
                               HeightRequest="80">
                            <Frame.Content>
                                <Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
                                <ProgressBar x:Name="myProgressBar" WidthRequest="100"
                                         HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
                            </Frame.Content>

                        </Frame>
                    </StackLayout>

有人可以帮我实现Xamarin Forms吗？另外，如何在图像中添加渐变色？

Answer 1

对于文本，您可能需要使用位于进度条下方的标签。我建议使用两行网格。

关于渐变，不幸的是，xamarin表单进度条不支持此功能。您可以为每个绘制渐变的平台创建自定义渲染器，也可以考虑使用Syncfusion（https://www.syncfusion.com/products/xamarin/progress-bar）这样的第三方控件

Answer 2

您可以制作一个自定义Xamarin表单控件。内容可能是这样的：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5* />
        <ColumnDefinition Width="0.5* />
    </Grid.ColumnDefinition>

    <Image x:Name="gradientImage" Grid.Row="0" Grid.ColumnSpan="2" Margin="10,10,10,0" />
    <Frame x:Name="progressFrame" Grid.Row="0" Width="{Binding Progress}" HorizontalOption="End" BackgroundColor="Gray" ... />

    <!-- Labels -->
    <Label x:Name="startLbl" Grid.Row="1" Grid.Column="0" Text="{Binding startLabel}" HorizontalOption="Start" />
    <Label x:Name="endLbl" Grid.Row="1" Grid.Column="1" Text="{Binding endLabel}" HorizontalOption="End" />

</Grid>

对于渐变进度栏，可以使用图像代替CustomRenderers。

此图像将是全宽渐变条
在这张图片上，就像是一个面具，上面有一个框架。您必须根据进度值计算帧宽度。 ==>当进度增加时，它将“使”渐变图像“出现”。

希望您能理解这个概念：）然后在后面的代码中（在ViewModel中？）管理开始/结束标签值和“ progress”值的计算...我想您必须为创建一个Binding Converter：”进度“ ==>”栏宽“ ...

请告诉我

Answer 3

想对@KFactory的上述答案发表评论，但尚无权限。

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5* />
        <ColumnDefinition Width="0.5* />
</Grid.ColumnDefinition>

有一些错别字。结束标记中缺少结尾的引号和。应该是

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>

在Xamarin Forms的进度条的两端添加标签

3 个答案: