Xamarin Forms NavigationBar has left margin

Question

I have a problem. I created a TabbedPage like this:

TabbedBuilder = new TabbedPage
{
    BarBackgroundColor = Color.FromHex("#212121"),
    BarTextColor = Color.White
};

TabbedBuilder.Children.Add(new NavigationPage(new Builder())
{ 
    Title = "Builder",
    BarBackgroundColor = Color.FromHex("#212121")
});
TabbedBuilder.Children.Add(new NavigationPage(new TemplateList())
{
    Title = "Templates",
    BarBackgroundColor = Color.FromHex("#212121")
});

And I call it like this:

Navigation.PushModalAsync(TabbedBuilder);

Now in the TabbedBuilder I have this custom navbar:

<NavigationPage.TitleView>
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <StackLayout VerticalOptions="CenterAndExpand" Orientation="Horizontal" BackgroundColor="#212121">
            <ImageButton Source="Back_Dark.png" HeightRequest="25" WidthRequest="35" HorizontalOptions="Start"
                VerticalOptions="Center" BackgroundColor="Transparent" Clicked="btnBack_Clicked"/>
            <Image Source="Title_Dark.png" HeightRequest="25" HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/>
        </StackLayout>
        <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand">
            <Label HeightRequest="1" BackgroundColor="White" HorizontalOptions="Fill"/>
        </StackLayout>
    </StackLayout>
</NavigationPage.TitleView>

But there is a small margin on the left side!

How can I remove that?

UPDATE

Here is the full xaml:

<?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"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             xmlns:tt="clr-namespace:TouchTracking.Forms;assembly=TouchTracking.Forms"
             mc:Ignorable="d"
             x:Class="MyApp.Builder"
             BackgroundColor="#212121"
             Title="Builder">

    <NavigationPage.TitleView>
        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <StackLayout VerticalOptions="CenterAndExpand" Orientation="Horizontal" BackgroundColor="#212121">
                <ImageButton Source="Back_Dark.png" HeightRequest="25" WidthRequest="35" HorizontalOptions="Start"
                    VerticalOptions="Center" Margin="0,0,0,0" BackgroundColor="Transparent" Clicked="btnBack_Clicked"/>
                <Image Source="Title_Dark.png" HeightRequest="25" HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/>
            </StackLayout>
            <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand">
                <Label HeightRequest="1" BackgroundColor="White" HorizontalOptions="Fill"/>
            </StackLayout>
        </StackLayout>
    </NavigationPage.TitleView>

    <ContentPage.Content>
        <StackLayout>
            <RelativeLayout VerticalOptions="FillAndExpand" x:Name="MainLayout">
                <StackLayout Orientation="Vertical" VerticalOptions="Center"
                             RelativeLayout.XConstraint=
                                    "{ConstraintExpression 
                                        Type=RelativeToParent,
                                        Property=Width, 
                                        Factor=0,
                                        Constant=0
                                        }"
                            RelativeLayout.YConstraint=
                                "{ConstraintExpression 
                                        Type=RelativeToParent,
                                        Property=Height,
                                        Factor=0.12,
                                        Constant=0}">

                    <Grid x:Name="GridUpperControl">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                        </Grid.ColumnDefinitions>

                        <AbsoluteLayout Grid.Row="1" Grid.ColumnSpan="15" x:Name="CanvasLayout" BackgroundColor="Transparent">
                            <Grid x:Name="CanvasGrid" VerticalOptions="Center" Grid.Row="1" Grid.ColumnSpan="15">
                                <skia:SKCanvasView x:Name="Canvas" BackgroundColor="White" VerticalOptions="FillAndExpand"
                                        PaintSurface="OnCanvasViewPaintSurface" />
                                <Grid.Effects>
                                    <tt:TouchEffect Capture="True"
                                        TouchAction="OnTouchEffectAction" />
                                </Grid.Effects>
                            </Grid>
                        </AbsoluteLayout>
                    </Grid>

                    <Grid x:Name="GridBottomControl" VerticalOptions="Center" HorizontalOptions="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="60"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="5" />
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="5" />
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="5" />
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="5" />
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="10" />
                        </Grid.ColumnDefinitions>
                    </Grid>
                </StackLayout>

                <StackLayout Orientation="Horizontal"
                             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                               Property=Width,
                                                                               Factor=0.95,
                                                                               Constant=-65}"
                             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                               Property=Height,
                                                                               Factor=0.95,
                                                                               Constant=-65}"
                             VerticalOptions="End">
                    <ImageButton
                Margin="0,0,15,15"
                BackgroundColor="Transparent"
                HeightRequest="65"
                HorizontalOptions="End"
                Source="ActionButton_Continue.png"
                WidthRequest="65" Clicked="OnContinueClicked" />
                </StackLayout>
            </RelativeLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

I have no idea where I have set a padding/margin that could cause a space in the navigation bar!

Try to debug it by giving your stack layouts background colors — Greggz, Jan 03 '20 at 15:12
Yes I did that and I see that the main stacklayout in the titleview is not the full width... There is a gap of 4mm on the left! — A. Vreeswijk, Jan 03 '20 at 15:20
No, because the NavigationBar will dissappear behind the invisible space! Something is blocking it or? — A. Vreeswijk, Jan 03 '20 at 23:14
Reading this article, it seems almost normal those 4 mm you're refering about. https://www.andrewhoefling.com/Blog/Post/xamarin-forms-title-view-a-powerful-navigation-view — Greggz, Jan 03 '20 at 23:48
Reduce your width request to be the same as the height request! — Saamer, Jan 05 '20 at 06:58
@A.Vreeswijk Try to apply some of the tecnhiques in this question. https://stackoverflow.com/questions/55763897/titleview-not-covering-the-entire-toolbar/55772150 — Greggz, Jan 05 '20 at 13:56
@A.Vreeswijk Hi ,have you solved it ? Alos , you can share a screenshot of the small margin on the left side . — Junior Jiang, Jan 06 '20 at 03:06
Hi, I haven't solved it yet, but was busy with other coding things. Here is a tutorial where you can also see the margin on the left side: https://www.andrewhoefling.com/Blog/Post/xamarin-forms-title-view-a-powerful-navigation-view — A. Vreeswijk, Jan 12 '20 at 23:18
@A.Vreeswijk Okey , I will check it . If good news will update here . — Junior Jiang, Jan 16 '20 at 09:30
For Android, I succeeded adding [this style](https://stackoverflow.com/a/28086802/1855967) — Eli, Jan 30 '20 at 21:11

score 0 · Accepted Answer · edited Feb 10 '21 at 19:34

0

For Android you can manually tweak the Toolbar in MainActivity.

protected override void OnResume()
{
   base.OnResume();

   var toolbar = this.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
   if (toolbar != null)
   {
       toolbar.SetPadding(0, 0, 0, 0);
       toolbar.SetContentInsetsAbsolute(0, 0);
   }
}

edited Feb 10 '21 at 19:34

Wai Ha Lee

8,598
83
57
92

answered Feb 10 '21 at 14:29

Mauro Cavallin - Lemcube

220
2
7

Hello, I'm using Xamarin Forms and I get an Error with "V7": V7 doesn't exist in the namespace 'Android.Support'. Any idea Why ? – Belight Apr 07 '21 at 11:14
Same question [here](https://stackoverflow.com/questions/66990741/how-to-remove-left-space-in-toolbar-and-above-and-under) with a detailled solution which works for me. The solution here above was not working in my project. – Belight Apr 08 '21 at 08:46

score -1 · Answer 2 · answered Jan 03 '20 at 14:34

-1

You have set Margin in your xaml, on your ImageButton

               VerticalOptions="Center" Margin="5,0,0,0" BackgroundColor="Transparent" Clicked="btnBack_Clicked"/>

Change it to:

               VerticalOptions="Center" BackgroundColor="Transparent" Clicked="btnBack_Clicked"/>

answered Jan 03 '20 at 14:34

Woj

773
4
17

That is because the image doesn't need to hit the left side, but I draw a line at the bottom of the nav bar, but that isn't full width as well! – A. Vreeswijk Jan 03 '20 at 14:38
Post your full, xaml. You might have margin or padding set somewhere there. – Woj Jan 03 '20 at 14:49
I think it might be due to your RelativeLayout, is there any reason why are you using it? Also try settings your 2nd StackLayout HorizontalOptions to FillAndExpand or CenterAndExpand. – Woj Jan 03 '20 at 15:47
Because of the image button at the bottom of my xaml – A. Vreeswijk Jan 03 '20 at 21:31

score -2 · Answer 3 · answered Jan 04 '20 at 10:33

-2

Add Margin in your stack layout in negative so it will fill the gap like this <StackLayout Margin="-5,0,0,0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

answered Jan 04 '20 at 10:33

Muhammad Adeel Shoukat

345
6
17

Like I already said in the comments in my question... That doesn't work!!!! – A. Vreeswijk Jan 04 '20 at 23:58

Xamarin Forms NavigationBar has left margin

UPDATE

3 Answers3

Linked