How can i create a badge over an image

I tried to place a text over a badge, but this badge is the part of image. Then i thought that would be better to craete a badge and to put the value inside it. How can i do this(badge and value) and can i to put the badge in anywhere? The badge can be like a retangle? I have 8 images and each image receive a badge. Below image

and this is the code of the image above

<ContentPage.Content>
        <StackLayout Padding="0" Spacing="0" Margin="0">
            <Grid x:Name="grd" RowSpacing="1" ColumnSpacing="1" Padding="0" Margin="0" >
            <Grid.RowDefinitions>
                <RowDefinition Height="1" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

                    <Image x:Name="imgDesvioFat" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Source="{local:ImageResource Estapar.AppOperacional.Images.faturamento caixa-28.png}" Aspect="AspectFill">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnDesvioFaturamentoTapReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                        </Image.GestureRecognizers>
                    </Image>

                <Image x:Name="imgTckCancelados" Grid.Row="1" Grid.Column="1" Source="{local:ImageResource Estapar.AppOperacinal.Images.tickets cancelados-05.png}" Aspect="AspectFill">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnTckCanceladosTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                    </Image.GestureRecognizers>
                </Image>

                <Image x:Name="imgPrestacaoContas" Grid.Row="2" Grid.Column="0" Source="{local:ImageResource Estapar.AppOperacional.Images.prestação de contas-07.png}" Aspect="AspectFill">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnPrestacaoContasTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                    </Image.GestureRecognizers>
                </Image>

                <Image x:Name="imgArrecadacao" Grid.Row="2" Grid.Column="1" Source="{local:ImageResource Estapar.AppOperacional.Images.pendencias de arrecadação-10.png}" Aspect="AspectFill">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnPendenciasTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                    </Image.GestureRecognizers>
                </Image>

                    <Image x:Name="imgOcupacao1" Grid.Row="3" Grid.Column="0" Source="{local:ImageResource Estapar.AppOperacional.Images.ocupação maior 80-15.png}" Aspect="AspectFill" >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnOcupacaoTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                        </Image.GestureRecognizers>
                    </Image>

                <Image x:Name="imgOcupacao2" Grid.Row="3" Grid.Column="1" Source="{local:ImageResource Estapar.AppOperacional.Images.ocupação menor 60-16.png}" Aspect="AspectFill">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnOcupacaoTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                    </Image.GestureRecognizers>
                </Image>

                <Image x:Name="imgCheckList" Grid.Row="4" Grid.Column="0" Source="{local:ImageResource Estapar.AppOperacional.Images.checklist-24.png}" Aspect="AspectFill">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnCheckListTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                    </Image.GestureRecognizers>
                </Image>

                <Image x:Name="MyImage" Grid.Row="4" Grid.Column="1" Source="{local:ImageResource Estapar.AppOperacional.Images.mensagens-21.png}" Aspect="AspectFill">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnTrocaImageTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                    </Image.GestureRecognizers>
                </Image>

                <AbsoluteLayout>
                    <Label x:Name="lblFaturamento" Text="" AbsoluteLayout.LayoutBounds="20,8,40,100" Grid.Row="1" Grid.Column="0" TextColor="White" FontSize="9" FontAttributes="Bold"/>
                    <Label x:Name="lblCancelados" Text=""  AbsoluteLayout.LayoutBounds="195,8,40,100" Grid.Row="1" Grid.Column="1" TextColor="White" FontSize="9" FontAttributes="Bold"/>
                    <Label x:Name="lblPrestacaoContas" Text="" AbsoluteLayout.LayoutBounds="20,8,40,100" Grid.Row="2" Grid.Column="0" TextColor="White" FontSize="9" FontAttributes="Bold"/>
                    <Label x:Name="lblPendencias" Text="" Grid.Row="2" Grid.Column="1" TextColor="White" FontSize="9" FontAttributes="Bold"/>
                    <Label x:Name="lblOcupacao1" Text="" AbsoluteLayout.LayoutBounds="20,232,80,100" Grid.Row="3" Grid.Column="0" TextColor="White" FontSize="9" FontAttributes="Bold"/>
                    <Label x:Name="lblOcupacao2" Text="" AbsoluteLayout.LayoutBounds="196,234,80,100" Grid.Row="3" Grid.Column="1" TextColor="White" FontSize="9" FontAttributes="Bold"/>
                </AbsoluteLayout>
            </Grid>

            <Grid x:Name="grdBottom" RowSpacing="0" ColumnSpacing="0" Margin="0" Padding="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackLayout Grid.Row="0" Grid.Column="0" Spacing="0" Padding="0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand"  >
                    <Image x:Name="imgCheckListCinza" Source="{local:ImageResource Estapar.AppOperacional.Images.paineis icone-57-btn.png}" Aspect="AspectFill" >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnCheckListTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                        </Image.GestureRecognizers>
                    </Image>
                </StackLayout>

                <StackLayout Grid.Row="0" Grid.Column="1"  Spacing="0" Padding="0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" >
                    <Image x:Name="imgPainesCinza" Source="{local:ImageResource Estapar.AppOperacional.Images.check list icone-56.png }" Aspect="AspectFill" >
                        <!--<Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="" NumberOfTapsRequired="1"></TapGestureRecognizer>
                            </Image.GestureRecognizers>-->
                    </Image>
                </StackLayout>

                <StackLayout Grid.Row="0" Grid.Column="2" Spacing="0" Padding="0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" >
                    <Image x:Name="imgMobileCinza" Source="{local:ImageResource Estapar.AppOperacional.Images.mobile conect-55.png}" Aspect="AspectFill" >
                        <!--<Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="" NumberOfTapsRequired="1"></TapGestureRecognizer>
                            </Image.GestureRecognizers>-->
                    </Image>
                </StackLayout>

                <StackLayout Grid.Row="0" Grid.Column="3" Spacing="0" Padding="0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" >
                    <Image x:Name="imgPrestacaoContasCinza" Source="{local:ImageResource Estapar.AppOperacional.Images.prestação de contas icone-54-btn.png}" Aspect="AspectFill" >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnPrestacaoContasTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
                        </Image.GestureRecognizers>
                    </Image>
                </StackLayout>
            </Grid>
        </StackLayout>
    </ContentPage.Content>