Customize progress bar in Xamarin Forms within a frame

Question

I'm trying to add a progress bar in Xamarin Forms within my XAML. But the default progress bar gives me only one type of colour without labels on both ends and the 2 circled points on both ends as shown in the image below:

Further, I am unable to add the progress bar inside the frame. My code is as follows:

                      <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 as in the image ?

Markus Michel Markus Michel · Accepted Answer · 2018-10-12T13:49:32

A frame can only hold one element as content. You can solve that by putting a layout such as a Grid or a StackLayout into the content property of your frame.

<Frame.Content>
    <StackLayout Orientation="Vertical">
        <Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
        <ProgressBar x:Name="myProgressBar" WidthRequest="100"
            HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
    </StackLayout>
</Frame.Content>

Regarding your progress bar, you will have to implement a custom renderer, which will fill the progress bar with a gradient instead of a simple fill color.

Customize progress bar in Xamarin Forms within a frame

1 Answers