Добавление меток на обоих концах индикатора выполнения в формах Xamarin

Question

У меня есть индикатор выполнения в формах Xamarin, определенный в моем XAML.

На самом деле я хочу добавить метки под прогрессом, который показывает минимальное и максимальное значение индикатора выполнения, как показано на рисунке ниже:

Мой код 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?Кроме того, как я могу добавить цвет градиента, как на картинке?

Answer 1

Вы можете сделать пользовательский элемент управления Xamarin Forms .Содержимое может быть примерно таким:

<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» ... Я полагаю, вам потребуется сделать привязывающий преобразователь для : "progress" ==> "bar Width" ...

Скажи мне, если это ясно

Answer 2

Для текста вы, вероятно, захотите использовать метки, расположенные под индикатором выполнения.Я бы порекомендовал сетку с двумя рядами.

Что касается градиента, к сожалению, индикатор выполнения форм xamarin не поддерживает это из коробки.Вы можете создать собственный рендерер для каждой платформы, которая рисует градиент, или рассмотреть сторонний элемент управления, такой как Syncfusion's (https://www.syncfusion.com/products/xamarin/progress-bar)