remove extra space in xamarin forms layout

Question

Hi i'm trying to place 2 image in xamarin forms using stackLayout.But it adds some space at the top of the form.I Used Blank Project. my code is

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

i am getting this output:

Output Image 1
Output Image 2

It adds some extra space at the top of the page. how to set the layout to remove this space?

Answer 1

The code you post does not have any issue. I reckon your app is created with Tabbed template. If that is the case, the empty space at the top is actually the tab. As shown in this image.

If you create a Blank project (not Tabbed nor MasterDetails), it will not have the empty spaces at the top. As shown in this image.

Answer 2

StackLayout and Grid have default spacing of 6. On StackLayout you can set Spacing. For more details, you can refer to this Document

Try this snippet:

 <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

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

Answer 4

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

MainPage = new NavigationPage(new MainPage());

Answer 5

You can use the Margin attribute to remove the excess space on top, bottom, right or left. Let's assume, if we using a table view and it produces the 20 pixel excess space on top of the display. So we can reduce that excess space by using

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

-20 using for reduce the excess 20pix😀