Adding labels on both ends of a progress bar in Xamarin Forms

Question

I have a progress bar in Xamarin Forms defined in my XAML.

Actually I want to add labels beneath the progress that shows the minimum and maximum value of the progress bar as shown in the image below:

My XAML code:

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

Can someone please help me to achieve this in Xamarin Forms ? Also, how can I add a gradient color like in the image ?

Answer 1

For the text, you would probably want to use labels positioned under the progressbar. I'd recommend a grid with two rows.

As for the gradient, unfortunately the xamarin forms progress bar doesn't support this out of the box. You can either create a custom renderer for each platform that draws the gradient, or consider a third party control like Syncfusion's (https://www.syncfusion.com/products/xamarin/progress-bar)

Answer 2

You can make a custom Xamarin Forms control. The content could be something like that:

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

For the gradient progress bar, instead of CustomRenderers you can use an image.

• this image will be the full width gradient bar
• over this image, like a MASK, there is a frame. You have to compute the frame width depending on the progress value. ==> It will 'make appear" the gradient image smotthly when progress will increase.

Hope you understand the concept :) Then in the code behind (in your ViewModel ?) manage the start/end label values and the computation of the "progress" value... I presume you will have to make a Binding Converter for: "progress" ==> "bar Width"...

Tell me if it's clear

Answer 3

Wanted to comment on above answer from @KFactory but don't have permission yet.

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

Has a few typos. missing end quotes and s on closing tag. Should be

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