Xamarin Forms NavigationBar 有左边距答案

【问题标题】：Xamarin Forms NavigationBar has left marginXamarin Forms NavigationBar 有左边距
【发布时间】：2020-01-03 14:21:41
【问题描述】：

我有问题。我创建了一个这样的 TabbedPage：

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")
});

我这样称呼它：

Navigation.PushModalAsync(TabbedBuilder);

现在在TabbedBuilder 我有这个自定义导航栏：

<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>

但是左边有一个小边距！

我怎样才能删除它？

更新

这是完整的 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>

我不知道我在哪里设置了可能导致导航栏中出现空格的填充/边距！

【问题讨论】：

尝试通过为您的堆栈布局提供背景颜色来调试它
是的，我这样做了，我看到titleview中的主stacklayout不是全宽...左侧有4mm的间隙！
如果你强制使用负边距，它们不起作用吗？
不，因为 NavigationBar 会在不可见的空间后面消失！有什么东西挡住了它还是？
阅读这篇文章，您所指的 4 毫米似乎几乎正常。 andrewhoefling.com/Blog/Post/…

标签： c# xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

对于 Android，您可以手动调整 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);
   }
}

【讨论】：

您好，我正在使用 Xamarin 表单，但出现“V7”错误：命名空间“Android.Support”中不存在 V7。知道为什么吗？
同样的问题here 有一个适合我的详细解决方案。上面的解决方案在我的项目中不起作用。

【解决方案2】：

您已在 xaml 中的 ImageButton 上设置 Margin

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

改成：

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

【讨论】：

那是因为图像不需要打到左边，但是我在导航栏的底部画了一条线，但这也不是全宽！
发布完整的 xaml。您可能在某处设置了边距或填充。
我认为这可能是由于您的RelativeLayout，您有什么理由使用它吗？还可以尝试将您的第二个 StackLayout HorizontalOptions 设置为 FillAndExpand 或 CenterAndExpand。
因为我的 xaml 底部的图像按钮

【解决方案3】：

在您的堆栈布局中添加负边距，这样它就会像这样填补空白 <StackLayout Margin="-5,0,0,0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

【讨论】：

就像我在问题的 cmets 中已经说过的那样......那行不通！！！！