在 xamarin 表单布局中删除多余的 space

Question

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

<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

它在页面顶部添加了一些额外的 space。如何设置布局以删除此 space?

Answer 1

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

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

Answer 2

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

试试这个片段：

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

Answer 3

我认为问题在于您正在 emulators.Real 设备上进行测试，我希望不会显示此问题。

Answer 4

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

MainPage = new NavigationPage(new MainPage());

Answer 5

您可以使用边距属性删除顶部、底部、右侧或左侧多余的 space。让我们假设，如果我们使用 table 视图，它会在显示顶部产生 20 像素的多余部分 space。所以我们可以通过使用

来减少多余的space

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

-20用于减少多余的20pix

在 xamarin 表单布局中删除多余的 space

remove extra space in xamarin forms layout

c#

image

xamarin.forms

stacklayout