Page with toolbar and footer layout question

[williambuchanan2]

I am trying to make a page which has a top row (toolbar), main content in the middle, then a status bar along the bottom of the screen. If the main content is too large then I want it to scroll. Should be easy - right?

Below is the XAML I have been using but just can't seem to get it to work. More accurately - I can't get it to work on iOS. It works fine on Android but in iOS it just expands off the bottom of the screen so I can't see it.

Any suggestions?

 <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition />
                <RowDefinition Height="100"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition/>

            </Grid.ColumnDefinitions>


            <BoxView Grid.Column="0" Grid.Row="0" Color="Green"/>
            <Label Text="Row 0, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <BoxView Grid.Row="1" Color="Teal" />

            <ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
                <StackLayout>
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
                    </StackLayout>
                </ScrollView>
     
            <BoxView Grid.Row="2"  Color="Red" />
            <Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
        </Grid>

[mohachouch]

Hi can you add screenshot between androïd and iOS

[mohachouch]

Can you remove the VerticalOptions="FillAndExpand" on scroll view

[Xyncgas]

Even if the bug is fixed by removing VerticalOptions="FillAndExpand", it would be very unreasonable for it to be, it would be a bug regardless

[williambuchanan2]

Didn't make any difference. Feels like I spend a lot of time changing all the Vertical and Horizontal options in the hope that I can land on a combination which works on all platforms, but just feels like i'm working against so many Maui bugs.

[mohachouch]

I'm sorry but that's just another bug. To be honest with you, a year ago we reviewed MAUI and decided to rewrite all apps in Flutter. (Now I will also study Jet Pack Compose). After a few months of development, we have performances that have nothing to do with Maui.

[williambuchanan2]

Wishing I had done the same now :)

[xtuzy]

奇怪的布局bug, 试试我的布局库 https://github.com/xtuzy/SharpConstraintLayout

[williambuchanan2]

Turns out it's another bug in Maui. Must have only recently been introduced because I am certain the problem wasn't there when I originally made the pages. Ended up having to calculate dimensions in code to set the height of the controls.

[Xyncgas]

Don't you wish you can just use a recursion statement to write all those lables

[williambuchanan2]

That would make life easier. What would be better though would be if they got it to work like it's supposed to :)

[Xyncgas]

Don't use MAUI in your next project, options for UI inside .NET I say is too much a hassle, just use flutter like everyone else or you are looking at stuff like

https://fabulous.dev/
https://avaloniaui.net/
https://fable.io/

You can still access native features with some of these frameworks, MAUI.Blazor is not bad too because .NET is actually running on the phone instead of inside browser so you can use Apple AR or stuffs directly in codes if you wanted

I'm using MAUI, because I am a hobbyist I don't have a dead line and I made custom library that minimize the stuffs I have to deal with .NET too. Imo Blazor itself has those typical counter-productive phenomenon you encounter with Xamarin too

say you are opening a profile window in discord, you are expected to do it their way which is to make a page that displays the profile window's content and navigate the url to that page

but what if you want the profile window to be opened without covering the entire screen while your discord messages are visible behind

now you are creating a component that displays profile window's content, you are putting that component in the discord message page, you are implementing a bool value that can be toggled

but what if you want the profile window to be opened via chat command or clicking people's profile picture or etc : in short dynamically, so you gotta have the component that toggles profile window on and off static so it's visible globally

but what if the component that toggles profile window gets destroyed, in principle why force the profile window to live in any component (Menu/MessagePage/LeftUserView...), but maybe instead in a top level component in your app (Shell/MarshaledMasterProUltraFlex2000...), so now you can navigate to a page without Menu and you can still display Profile Window by changing the static toggle to true and telling the top level component to update

That's a lot to learn, if you are putting your hands in dirt it's not helpful by the framework to inform people you should use ComponentBase.InvokeAsync(StateHasChanged) to notify update or else it wont work in the async void handler you binded to a button's onclick event

But why not use

 let renderStack1 = RenderStack()

        type ProfileWindow () =
            member val Content = RenderStack() //put stuffs inside
            static member op_Implicit (i:ProfileWindow) : Renderer =
                Element.Default.withParameter(fun p -> {p with Children = i.Content; oncontextmenu = (fun arg -> renderStack1.remove i)})

        type Justany () =
            static member op_Implicit (i :Justany) : Renderer =
                Element.Default.withParameter(fun p -> {p with onclick = (fun arg -> ProfileWindow() |> renderStack1.addAndUpdate)})

Now you can open ProfileWindow on any element when they are being clicked demonstrated this way, you can ask the rendering engine to remove everything in the RenderStack or in this case the ProfileWindow's content is contained in yet another generic element that can notify the rendering engine to remove itself when being right clicked

Just saying

[williambuchanan2]

Yeah I think i'm going to look at Flutter after this. Can't deal with this level of pain any more.