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

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>