How to set ProgressBar in Xamarin

I have a question here about customizing ProgressBar. However I am not using Syncfusion. Here is my idea, it seems not perfect =]]]]]

<StackLayout Padding="12,0" Margin="0,0,0,35">
    <Grid HorizontalOptions="FillAndExpand" BackgroundColor="#fff" Padding="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="0" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="0 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="Red"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="0" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="10%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="1" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="10 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="1" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="11%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="2" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="200 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="2" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="3" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="300 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="3" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="3" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="4" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="400 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="4" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="4" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="5" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="500 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="5" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="5" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
    </Grid>

    <ProgressBar Margin="35,-37.5,35,0" ProgressColor="#ddd" HeightRequest="3" HorizontalOptions="FillAndExpand" x:Name="progressbar"/>
</StackLayout>

And this is the result:

I have 2 questions:

1. How is the ProgressBar below the red dot I circled in the image above?
2. Inside .xaml.cs how can i set ProgressTo for ProgressBar. Here is how I set it up. However it doesn't work:

private async void Progress()
{
    progressbar.Progress = 10000;
    float progress = 2000;
    await progressbar.ProgressTo(progress, 500, Easing.Linear);
}

Please help any solution. Thank you!