xamlxamarinxamarin.formstitleview

TitleView not covering the entire toolbar

I am developing notification count on Toolbar using TitleView. Inside TitleView I have used RelativeLayout which is cropping from top side not showing full count circle Label.

This is my code:

<NavigationPage.TitleView>
<RelativeLayout  HorizontalOptions="Fill" BackgroundColor="Transparent">
    <Image Source="bell.png"   HeightRequest="30" WidthRequest="30" x:Name="yellowBoxView"
         RelativeLayout.YConstraint="{ConstraintExpression
         Type=RelativeToParent,
         Property=Height,
         Factor=0.018,Constant=0}"

         RelativeLayout.XConstraint="{ConstraintExpression
         Type=RelativeToParent,
         Property=Width,
         Factor=0.85,Constant=0}"/>
    <Frame
        CornerRadius="20"
        Padding="-2"
        BackgroundColor="White"

        HasShadow="False"
        RelativeLayout.YConstraint="{ConstraintExpression
        Type=RelativeToView,
        Property=Y,
        ElementName=yellowBoxView,
        Factor=1,Constant=-6}"

        RelativeLayout.XConstraint="{ConstraintExpression
        Type=RelativeToView,
        Property=X,
        ElementName=yellowBoxView,
        Factor=1,Constant=-8}">

        <Label  FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  BackgroundColor="Transparent" Text="2"
                TextColor="Red" HeightRequest="22" WidthRequest="23" x:Name="labelText"/>

    </Frame>
</RelativeLayout>
</NavigationPage.TitleView>

This is my output:

enter image description here

Solution

  • You can try this solution might be it is useful for you
    You can try this solution might be it is useful for you

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinTest.View.Page3">

    <NavigationPage.TitleView   >
        <StackLayout   BackgroundColor="Transparent">
            <Grid>
                  <Grid.RowDefinitions>
                     <RowDefinition Height="50"  />    
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="100*"/>    
                  </Grid.ColumnDefinitions>
                   <Image Source="notification.png" Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center"   HeightRequest="25" WidthRequest="25"/>
                   <Frame Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" Margin="0,-25,10,0"   CornerRadius="20"
                    Padding="-2"
                    BackgroundColor="White"
                    HasShadow="False">
                             <Label  FontSize="10" HeightRequest="22" WidthRequest="23" Margin="1,1,1,1"    HorizontalTextAlignment="Center"  VerticalTextAlignment="Center"  BackgroundColor="Transparent" Text="100"
                         TextColor="Red"  x:Name="labelText"/>
                  </Frame>
            </Grid>
        </StackLayout>
</NavigationPage.TitleView>
    <ContentPage.Content>
        <StackLayout >
                <Label Text="Hello" />
            </StackLayout>
    </ContentPage.Content>
</ContentPage>