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?

,,can you clarifies your question? you said blue color to be removed? which blue color? — Anand, Mar 19 '19 at 06:32
Are you testing on emulator? Please test it on real devices. I think it will only cause this issues on emulators — Anand, Mar 19 '19 at 06:43
thank you it's working on the device preview.But after converting into apk it looks like what present in the emulator right ? — Anu Priya, Mar 19 '19 at 06:53
Did it worked fine on real devices after installing the apk? — Anand, Mar 19 '19 at 06:54
i'm not telling the real device .it's a designer Area present in Xamarin .In designer area i'm getting correct output but not in the emulator . — Anu Priya, Mar 19 '19 at 07:01
Yes I have faced similar issue on emulator. It will no cause any problem in real devices. — Anand, Mar 19 '19 at 07:02
I didn't convert into APK . I'm asking if i convert into APK it will show same as what i'm getting in the emulator right ? — Anu Priya, Mar 19 '19 at 07:03
If you convert it into apk and going to test it on a smartphone, it will never going to create any issue — Anand, Mar 19 '19 at 07:03
Thank you so much @AndroDevil ... But what is the reason for this issue ? — Anu Priya, Mar 19 '19 at 07:04
Actually I dont know Anu priya.. May be the resolutions or something. ;) — Anand, Mar 19 '19 at 07:05

jedipi · Answer 1 · 2019-03-29T02:06:19.443

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

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. enter image description here

edited Mar 29 '19 at 02:06

answered Mar 19 '19 at 05:47

jedipi

155
4

i created a Blank Project only . but i still adding that tab – Anu Priya Mar 19 '19 at 06:32
i used the same code from your second image .and my emulator also same .but still getting same problem – Anu Priya Mar 19 '19 at 06:50

score 1 · Answer 2 · answered Oct 09 '19 at 16:03

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

Jaymin · Answer 3 · 2019-03-19T06:37:55.230

0

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>

edited Mar 19 '19 at 06:37

answered Mar 19 '19 at 05:50

Jaymin

2,879
3
19
35

i added Spacing="0" but still same ..nothing is changed – Anu Priya Mar 19 '19 at 06:25
Set `Aspect` to image view. Check my updated answer. – Jaymin Mar 19 '19 at 06:38
Yeah i added Aspect.Still same problem i have . Is this depends on Emulator ? i'm using Oreo 5554 emulator. – Anu Priya Mar 19 '19 at 06:49
I don't think so. Try to uninstall the app and install a fresh one. – Jaymin Mar 19 '19 at 06:55

Anand · Accepted Answer · 2019-03-19T07:02:39.357

0

I think the problem is you are testing on emulators.Real devices will not show this issue I hope.

edited Mar 19 '19 at 07:02

answered Mar 19 '19 at 06:40

Anand

1,866
3
26
49

I don't want to hide the action bar.just want to hide blue color which is present after the action bar and before the button.I added Aspect like your code but still same i'm getting – Anu Priya Mar 19 '19 at 06:56
Okey as I said above in comment section, Test it on real devices, Problem will be solved i guess – Anand Mar 19 '19 at 06:57

score 0 · Answer 5 · edited Jun 06 '19 at 11:24

0

I think you are using like below in your App.xaml.cs page:

MainPage = new NavigationPage(new MainPage());

edited Jun 06 '19 at 11:24

Adrita Sharma

21,581
10
69
79

answered Jun 06 '19 at 11:06

Sumel

1
1

remove extra space in xamarin forms layout

5 Answers5