Visual Challenge - Pocket Casts

[markmccaigue]

Hey, I've had a go at implementing a UI like podcast app Pocket Casts for the Visual Challenge!

I've run a little out of time on this one, as my choice of assets may indicate, but hopefully the feedback is useful even if it's late! So I'll likely pop back to tidy this up and see how much effort there would be to smooth out a few of rough edges with some effects or the like, but this was enough to get a good feel for some of the newer Forms APIs.

This was my first time actually using Visual, Shell, and FlexLayout, so it was a good 'deep-end' experience. I found the APIs fairly intuitive for what I had to do so far, and I'm looking forward to taking a deeper dive and then revisiting some of my implementation here to improve things.

What went well:

It was nice and easy to make the tab navigation in shell, and the colours and highlights came through for free.

It's useful to have the visual frame as an option vs the default one.

It was possible to get very close to the layout without platform specific code.

Tricky bits:

Although it's not a Visual renderer, it was a challenge to customise the searchbar, on Android there didn't seem to be an obvious way to hide the underline, or change the icon or icon tint, and as expected the properties map pretty differently on iOS.

It looks like the selected icon and title in the Tab Bar renders a little bigger, but I didn't see a way to disable this.

This might be user error, but I struggled to set the nav bar background color. On Android, this needed Shell.ShellBackgroundColor set on the Page itself, on iOS however, it needed set as a Shell setting in the resources provided. The colour also seems to render differently on the platforms in this area.

To really match up fonts in detail, letter spacing control would be useful, as would more granular numerical control over font weights, although granted this could have been addressed if I'd added some fonts as different font families.

Granular control over shadows would be great. For this challenge, I made use of the Frames, but controlling properties of the shadow, and on what sides it is applied would have helped a lot. It might be useful to be able to add a shadow to an element without requiring the wrapping frame. Specifically in this challenge, I used a frame to get close to the shadow at the 'play / pause'-bar, but unfortunately the bottom of the shadow overlaps the progress indicator lines, which would require a bit of attention to sort out, whereas an option to have a shadow only on the top might have been cleaner.

[davidortinau]

@markmccaigue shoot me your email so I can ship you some swag! david.ortinau@microsoft.com