add qff mockup

[rdavisau]

I decided to have a go at doing one of the pages from the Qantas app.

Source (iOS):

I used some assets from their apk but did not bother to recolor them so there are a few inconsistencies but not material (ha ha) to this challenge. I also used '>' instead of the graphic to go faster. I altered one aspect of the source image to remove information given it has my details on it.

What went well?

Overall, it was pretty easy to put this layout together (that said, the code took many shortcuts and this screen would better be coded with templates etc). If I didn't have trouble hiding the navbar (spoilers for next question: I did), it would have looked something like this (edited to remove the nav):

which I think is pretty nice. Ignoring the navbar, it was very satisfying to build this on iOS and then find that many things 'just looked right' on android immediately.

What went less well?

Hiding the Navigation Bar:

The truth is, without hacks/post image editing, the pages actually looked like this:

So yeah, I had trouble hiding the navigation bar. It could be something I missed (I use native embedding so typically manage navigation bar and the 'shell' of the app from native code). In this case I tried Shell.NavBarIsVisible="False" in the Shell definition, and Xamarin.Forms.NavigationPage.SetHasNavigationBar(this, false);, but neither seemed to have the desired effect.

Default Values:

In most cases I explicitly specified text colour but you can see that where I didn't "Hello Ryan K" and "Trip to Melbourne", the colours that come out on each platform were different. My expectation for Visual is that they would be the same.

Customising tab bar:

This is probably something I'm just not across how to do - but I wasn't sure how to customise font/ size for the tabbar items. This is probably the biggest visual difference between the iOS and Android screenshots and I think that if I had customised the font and image size they would have ended up looking more consistent. However, similar to the previous point, I'd still expect that in lieu of any explicit configuration I should get tabbars that look the same.

Overall

I had fun mocking this up and it was my first exposure to both Visual and Shell. Based on my understanding of what Visual aims to achieve, I think my main piece of feedback would be that I think defaults for things like text colours should be consistent across platforms.

[davidortinau]

Love it! And great to see a XAML-free entry!

So the hiding of the navigation bar in this case can be done on the ContentPage like this:

Shell.SetNavBarIsVisible(this, false);

Doing it in the OnAppearing results in a content shift, so I did it in the constructor.

However it is resulting in still showing the status bar, so I set a negative margin of -44 to swallow it up. I think that still is something we should look at.

Customizing font/size and really anything at this point with the tab bar requires a platform renderer. This is a top request to provide a template for this, or at least expose more styles.

Colors - yes, this is a common theme across all the PRs. We'll get that fixed.

[rdavisau]

Aha! Too easy - thanks for that.

One other thing I thought of is that is small but significant is the Visual/Material default appearance for Frame. In standard forms you put a frame on the page and immediately have to fiddle with it to turn it into something a little more tasteful. The Visual frame is subtle and nice out of the box, which clued me into thinking that tasteful defaults make a lot of sense for Visual. Things like margin/padding, fonts (idk how easy bundling fonts would be) are all potentially part of the material theme, so it could make sense to default them (maybe you already are).

It was getting late last night so I mostly focused on the issues but I really liked working with Visual and next File -> New I think I'd start with it turned on 🤓