XAML: Add circle below another circle

veso266veso266 Member ✭✭

Hi there
I am using some nice Circle Progress Bar control: https://github.com/jsuarezruiz/MyTripCountdown/blob/master/src/MyTripCountdown/MyTripCountdown/Controls/CircleCountdown.cs

and in my XAML I am putting a label inside it

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.Views.SomeInfo"
             xmlns:vm="clr-namespace:MyApp.ViewModels"
             xmlns:controls="clr-namespace:MyApp.Controls"
             Title="{Binding Title}">

    <!-- You need this so compiler knows where to find View Model for this file -->
    <ContentPage.BindingContext>
        <vm:BoardInfoViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />

                </Grid.RowDefinitions>
            <Grid Grid.Row="1">
                    <!-- Work Time -->
                    <Label Text="Some Text in the center of the ring"
                     VerticalOptions="CenterAndExpand" 
                     HorizontalOptions="CenterAndExpand" 
                     Margin="12"
                     Font="Bold,40" />
                    <!-- Work Countdown circle -->
                    <controls:CircleCountdown 
                        VerticalOptions="FillAndExpand"
                        HorizontalOptions="FillAndExpand"
                        Progress="0.50"
                        ProgressStartColor="#DB1D8B"
                        ProgressEndColor="#5098CD"
                        StrokeWidth="10"/>
                </Grid>
            </Grid>
    </ContentPage.Content>
</ContentPage>

as you can see from the picture while this counter counts down there is nothing below it so How can I add some grey Circle below this pink/blue one so when pink/blue circle is dissaphearing it will show the below grey circle?

Also if anyone has any Idea how would I position the whole circle+text on the vertical center of a screen that would be great too

Thanks for Anwsering and Best Regards

Best Answer

Answers

Sign In or Register to comment.