UWP Thin Window - Better Sizing Solution

Before I go and make a suggestion I thought I would ask here to make sure that I'm not wrong in what I think. At the moment when you resize a UWP window to the thinnest it will go it still acts as if it was full width of the screen. This is bad as when using the Idiom value in my layout it does not understand that the view is so thin, in this case the window has the same aspect ratio and physical size as a mobile.

Is there a way for Idiom to understand that while it may still be on a desktop, the app screen is not in fact the size of a desktop and more like a mobile. Alternatively a better solution would be for the view to have a flag that defines if the size of the view is like a mobile/tablet/desktop so that if you had a view on two pages, one where it takes up the whole page and one where it is more the size of mobile it could adapt to that size.

Posts

  • JohnHardmanJohnHardman GBUniversity mod

    @RicardoJarree -

    I figure there are two very different things:

    (1) Making a UI that looks appropriate on the device it is running on, whether that be a phone, tablet, desktop or other, with the display in landscape or portrait orientation, and with any limitation on available size (e.g. by re-sizing the window on UWP). That means being responsive to the available size, which is more detail than Idiom provides.
    (2) Making use of functionality that the device supports (e.g. only giving the option to send a SMS from a device with that capability). That means querying whether the device provides the required functionality, which is not something that Idiom provides.

    In neither case does Idiom provide the required level of detail, which is why I don't use it.

  • RicardoJarreeRicardoJarree USMember ✭✭
    edited March 2018
    @JohnHardman

    If you don't use Idiom then what do you use? Half tempted to make an interface that specialises in the size of the view based on phone, tablet and desktop.

    Functionality is obviously a very different business but something I will need as I will need to know if the device has a rear camera. Not just a camera but it's needs to be on the back of the device.

    It would be nice if we had classes built in such as SizeOf that is split into the various form factors such as Phone.Portrait, Tablet.Landscape and so on. And maybe something like SupportsFunction for checking to see if the device can SMS, take photos or has a microphone.
  • JohnHardmanJohnHardman GBUniversity mod
    edited March 2018

    @RicardoJaree - I have a page "base" class that inherits from ContentPage. All of my app pages inherit from that base class. The base class overrides OnSizeAllocated, as well as handling the SizeChanged event. It implements OnOrientationChange and OnOrientationChangeAsync, as well as an Orientation property.

    Alongside this, I use effects such as LabelSizeFontToFit, and have implemented a SplitScreenPageView that shows more than one ContentPage at a time, side by side, with toolbars, title bar etc taking the split into account.

    Combining all of those bits, together with simple tests on Width and Height, allows me to make pages responsive to how much space they have and whether they are in landscape or portrait orientation, as well as displaying more than one page where appropriate and where there is enough space to do so.

    I don't use Idiom, and any checks for RuntimePlatform are all in one file, so my code isn't riddled with checks on platform.

  • RicardoJarreeRicardoJarree USMember ✭✭
    edited March 2018

    @JohnHardman - Interesting, does this mean that, if you like, you could create an experience like the one in Mail on UWP on tablets and desktops? I have just been looking through the Xamarin.Forms.Core controls trying to understand how to reliably get the size of a View but I think a solution like yours will be more suited.

    Are you able to manipulate lets say the StackOrientation of a StackLayout even in a ListView Template based on the size of the page "base" class?

  • RicardoJarreeRicardoJarree USMember ✭✭

    @JohnHardman - A big question actually is how does the SplitScreenPageView deal with being resized to a phone size. Does it then navigate the base pages normally? I am using Prism primarily and I am using INavigationService throughout the app so I am not sure how I would navigate still on a phone if the ContentPages are all on one page.

    One way I can think of is just navigating to the base pages with the normal stack but then would that not mean you need to use Idiom again to check the form factor?

  • JohnHardmanJohnHardman GBUniversity mod

    @RicardoJarree said:
    @JohnHardman - Interesting, does this mean that, if you like, you could create an experience like the one in Mail on UWP on tablets and desktops?

    Yes

    @RicardoJarree said:
    Are you able to manipulate lets say the StackOrientation of a StackLayout even in a ListView Template based on the size of the page "base" class?

    I'd have to check to remind myself whether I actually do that, but yes it is possible.

    @RicardoJarree said:
    A big question actually is how does the SplitScreenPageView deal with being resized to a phone size. Does it then navigate the base pages normally?

    Yes, although in debug builds I keep the option of still showing split screen so that I can test responsiveness to the limits.

    @RicardoJarree said:
    I am using Prism primarily and I am using INavigationService throughout the app so I am not sure how I would navigate still on a phone if the ContentPages are all on one page.

    I don't use Prism, so don't know.

    @RicardoJarree said:
    One way I can think of is just navigating to the base pages with the normal stack but then would that not mean you need to use Idiom again to check the form factor?

    No. The page base class provides Width, Height etc.

    I should add a big caveat - reproducing the split-screen operation in the way that I have is a lot of work. It basically involves building a thin framework on top of Xamarin.Forms . Making standard ContentPages responsive is easy (if time-consuming). Adding the split-screen working is not (which is probably why Xamarin's own Master/Detail had so many defects)

  • RicardoJarreeRicardoJarree USMember ✭✭
    edited March 2018

    Well your advice has been very helpful, might have a play on a test project and see what I come up with, thanks very much!

  • JohnHardmanJohnHardman GBUniversity mod

    @RicardoJarree - I'll DM you a screenshot to better explain what I have done

Sign In or Register to comment.