删除 xamarin 表单布局中的额外空间答案

【问题标题】：remove extra space in xamarin forms layout删除 xamarin 表单布局中的额外空间
【发布时间】：2019-08-09 13:35:57
【问题描述】：

您好，我正在尝试使用 stackLayout 在 xamarin 表单中放置 2 个图像。但它在表单顶部添加了一些空间。我使用了空白项目。我的代码是

<StackLayout>

    <Image Source="review.jpg"
               BackgroundColor="Transparent"
        WidthRequest="300"
        HeightRequest="100"
        VerticalOptions="Start" HorizontalOptions="FillAndExpand"
        FlexLayout.Grow="1">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="Navigate_review"/>
        </Image.GestureRecognizers>
    </Image>

    <Image Source="upload.jpg"
               BackgroundColor="Transparent"
        WidthRequest="320"
        HeightRequest="100"
        VerticalOptions="Start" HorizontalOptions="FillAndExpand"
        FlexLayout.Grow="1">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="Navigate_upload"/>
        </Image.GestureRecognizers>
    </Image>
</StackLayout>

我得到这个输出：

Output Image 1
Output Image 2

它在页面顶部增加了一些额外的空间。怎么设置布局去掉这个空间？

【问题讨论】：

您要删除哪个空白？
按钮前出现蓝色
,，你能澄清你的问题吗？你说蓝色要去掉？哪种蓝色？
我修改了我的输出图像。希望现在你能理解。
你在模拟器上测试吗？请在真实设备上进行测试。我认为它只会在模拟器上导致这个问题

标签： c# image xamarin.forms stacklayout

【解决方案1】：

您发布的代码没有任何问题。我认为您的应用程序是使用选项卡式模板创建的。如果是这样的话，顶部的空白空间实际上是选项卡。如图所示。

如果您创建一个空白项目（不是 Tabbed 或 MasterDetails），它的顶部不会有空格。如图所示。

【讨论】：

我只创建了一个空白项目。但我仍然添加该选项卡
我使用了第二张图片中的相同代码。我的模拟器也相同。但仍然遇到同样的问题

【解决方案2】：

您可以使用 Margin 属性来移除顶部、底部、右侧或左侧的多余空间。假设，如果我们使用表格视图，它会在显示器顶部产生 20 像素的多余空间。所以我们可以通过使用来减少多余的空间

<TableView Margin="0,-20,0,0" >
<TableVie/>

-20 用于减少多余的 20pix?

【讨论】：

【解决方案3】：

我认为问题在于您正在模拟器上进行测试。我希望真实设备不会显示此问题。

【讨论】：

我不想隐藏操作栏。只想隐藏在操作栏之后和按钮之前出现的蓝色。我添加了 Aspect，就像你的代码一样，但我得到的还是一样
好吧，正如我在评论部分所说的，在真实设备上测试它，我想问题会解决的

【解决方案4】：

StackLayout 和 Grid 的默认间距为 6。在 StackLayout 上，您可以设置 Spacing。更多详情可以参考这个Document

试试这个 sn-p：

 <StackLayout
        Spacing="0">
        <Image
            Source="hintsicon"
            BackgroundColor="Transparent"
            WidthRequest="300"
            HeightRequest="100"
            Aspect="Fill"
            VerticalOptions="Start"
            HorizontalOptions="FillAndExpand">
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                    Tapped="Navigate_review" />
            </Image.GestureRecognizers>
        </Image>
        <Image
            Source="hintsicon"
            BackgroundColor="Transparent"
            WidthRequest="320"
            HeightRequest="100"
            Aspect="Fill"
            VerticalOptions="Start"
            HorizontalOptions="FillAndExpand">
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                    Tapped="Navigate_upload" />
            </Image.GestureRecognizers>
        </Image>
    </StackLayout>

【讨论】：

我添加了 Spacing="0" 但还是一样..没有任何改变
将Aspect 设置为图像视图。检查我更新的答案。
是的，我添加了 Aspect。我仍然有同样的问题。这取决于模拟器吗？我正在使用 Oreo 5554 模拟器。
我不这么认为。尝试卸载该应用并安装一个新的。

【解决方案5】：

我认为您在 App.xaml.cs 页面中使用如下：

MainPage = new NavigationPage(new MainPage());

【讨论】：