What is the difference between Xamarin.Form’s layout options?

In Xamarin.Forms every View has the two properties HorizontalOptions and VerticalOptions. Both are of type LayoutOptions and can have one of the following values:

  • LayoutOptions.Start
  • LayoutOptions.Center
  • LayoutOptions.End
  • LayoutOptions.Fill
  • LayoutOptions.StartAndExpand
  • LayoutOptions.CenterAndExpand
  • LayoutOptions.EndAndExpand
  • LayoutOptions.FillAndExpand

Apparently it controls the view’s alignment on the parent view. But how exactly is the behavior of each individual option? And what is the difference between Fill and the suffix Expand?

Theory

The structure LayoutOptions controls two distinct behaviors:

  • Alignment:

    How is the view aligned within the parent view?

    • Start: For vertical alignment the view is moved to the top. For horizontal alignment this is usually the left-hand side. But note, that on devices with right-to-left language setting this is the other way around, i.e. right aligned.
    • Center: The view is centered.
    • End: Usually the view is bottom or right aligned. On right-to-left languages, of course, it is left aligned.

    • Fill: This alignment is slightly different. The view will stretch across the full size of the parent view. If the parent, however, is not larger then its children, you won’t notice any difference between those alignments. Alignment only matters for parent views with additional space available.

  • Expansion:

    Will the element occupy more space if available?

    • Suffix Expand:

      If the parent view is larger than the combined size of all its children, i.e. additional space is available, then the space is proportioned amongst child views with that suffix. Those children will “occupy” their space, but do not necessarily “fill” it. We’ll have a look on this behavior in the example below.

    • No suffix: The children without the Expand suffix won’t get additional space, even if more space is available. Again, if the parent view is not larger than its children, the expansion suffix does not make any difference as well.

Example

To demonstrate the effect of different LayoutOptions, we create a tiny example app. It consists of a gray StackLayout with some padding and some spacing between its child elements.

static readonly StackLayout stackLayout = new StackLayout {
    BackgroundColor = Color.Gray,
    Padding = 2,
    Spacing = 2,
};

The constructor of our App adds eight child elements before assigning the StackLayout to the MainPage. Note that we use a device-dependent padding for the MainPage to avoid elements being overlaid by the iOS status bar.

public App()
{
    AddElement("Start", LayoutOptions.Start);
    AddElement("Center", LayoutOptions.Center);
    AddElement("End", LayoutOptions.End);
    AddElement("Fill", LayoutOptions.Fill);
    AddElement("StartAndExpand", LayoutOptions.StartAndExpand);
    AddElement("CenterAndExpand", LayoutOptions.CenterAndExpand);
    AddElement("EndAndExpand", LayoutOptions.EndAndExpand);
    AddElement("FillAndExpand", LayoutOptions.FillAndExpand);

    MainPage = new ContentPage {
        Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
        Content = stackLayout,
    };
}

The method AddElement creates a new Label with different text and corresponding layoutOption. Its text is centered horizontally and vertically using the two properties HorizontalTextAlignment and VerticalTextAlignment.

Furthermore, it adds a flat yellow BoxView. This will serve as a visual separator between the space occupied by the white labels.

static void AddElement(string text, LayoutOptions layoutOption)
{
    stackLayout.Children.Add(new Label {
        Text = text,
        BackgroundColor = Color.White,
        HorizontalTextAlignment = TextAlignment.Center,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalOptions = layoutOption,
        VerticalOptions = layoutOption,
        WidthRequest = 160,
        HeightRequest = 25,
    });
    stackLayout.Children.Add(new BoxView {
        HeightRequest = 1,
        Color = Color.Yellow,
    });
}

The screenshot shows the resulting layout. We make the following observations:

  • The different alignment is only visible if there is space available. If the stackLayout would not fill the page, we might not be able to see a difference between elements with options Start or StartAndExpand.

  • Additional space is evenly proportioned amongst all labels with Expand suffix. To see this more clearly we added yellow horizontal lines – actually flat BoxViews – between every two neighboring labels. Labels with more space than their requested height do not necessarily “fill” it. In this case the actual behavior is controlled by their alignment. E.g. they are either aligned on top, center or label of their space or fill it completely.

  • If there is space available and no other expanding element – like in the horizontal direction – the alignment controls the element’s position even if it is not expanding, like the first four labels.

screenshot

Windows 10: Changing Paradigms

windows10-evolutionWindows 10 is the main discussion topic in the online development communities. This new operating system that is currently in the technical preview (and available through the Microsoft insider program) is a milestone in the platform unification journey that Microsoft embarked upon with starting with Windows Phone and Windows 8 operating systems. With Windows 10, developers and users are introduced to one development kit, one store, one application and one binary distribution package.

Introducing Windows Core

With Windows 10, developers are introduced to the new Windows Core concept. Windows Core is the refactored common core of Windows. It is the common set of APIs, a common infrastructure, which gives a, for the first time, truly binary compatibility across different platforms.

Up until Windows 10, a lot of the operating systems shared lots of commonality. In essence, most features were re-written from scratch for different platforms by separate development teams. Windows 8 was the first attempt to create a unified core with the so-called windows 8 kernel. The Windows CE kernel that was used for Windows Phone 7 was finally replaced with the Windows 8 kernel on Windows Phone 8. Xbox platform with the same kernel joined the unified platform with the release of Xbox One.

However, even though the kernels were the same, the implementation still differed on certain features which led to the Universal App Concept. The core functionality for mobile and desktop apps were implemented in either shared libraries or windows runtime class libraries targeting certain platforms that could be reused on the separate binaries for the respective platforms.

Universal App Platform

Universal App Platform is another new concept that we, developers, will need to get acquainted with. UAP is a collection of contracts and versions. It defines the platform that is running your application and acts as a broker between the application and the operating systems. It is built on top of the Windows Core and can be described as a superset of all the APIs that are supported on different devices and platforms running Windows 10.

With this new concept, the developers’ responsibility towards the OS shifts towards the UAP and in return the operating system is responsible for providing the UAP to the applications. Targeting platforms with the UAP is as simple as a manifest declaration.

<TargetPlaform Name="Microsoft.Universal" minVersion="2.0.0.0" maxVersionTested="3.5.0.0" />

The existence of a broker between the application and the operating system also creates an OS-agnostic development experience. For instance, if/when a new version of the OS becomes available, the application does not need to be aware of the version of the OS. Only important thing is to check if the UAP version is compatible with the current application.

Extensions SDK

Extensions SDK is really what makes the device specific APIs accessible. In an object oriented analogy, if the UAP is defining the abstract classes and interfaces to all the available APIs, the extensions SDK provides the implementations for these device specific feature sets. For instance, without adding the windows phone extension SDK as a reference to your application (the extension SDKs can be added using the Add Reference link in the project menu), the UAP will not be able to provide your application the access to types like BackButtonPressed or a contract like Wallet.

API Information Metadata

Since your application communicates with the OS through the UAP, and using the implementation by the extension sdks, the easiest way to probe for a certain API or device is the foundation metadata namespace. ApiInformation static class lets developers/application probe the current platform any of the supported classes, APIs, contracts, etc.

On Windows 8.1 Universal App:

#if Windows_Phone_App

Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_Pressed

#else

On Windows 10 App:

If(Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))

{

Windows.Phone.UI.Input.HardwareButtons.Backpressed += HardwareButtons_BackPressed;

}

Since the HardwareButtons class and the Backpressed event is infact included in the UAP, even though the runtime type does not exist in the current device, there is no need for conditional compilation.

Instead of using IsTypePresent, you can test for the presence of individual members by using IsEventPresent, IsMethodPresent, IsPropertyPresent, and similar methods.

The set of APIs within a device family is further broken down into subdivisions known as API contracts. And you can use the ApiInformation.IsApiContractPresent method to tests for the presence of an API contract. This is useful if you want to test for the presence of a large number of APIs that all exist in the same version of an API contract.

public boolean HasScannerApi

{

get

{

return Foundation.Metadata.ApiInformation

.IsApiContractPresent("Devices.Scanners.ScannerDeviceContract", 3);

}

}

Windows 10 Changes

Other than the basic concepts in the development methodology, there are also changes in the framework and app model itself.

Continuation Manager No More (Windows Phone)

The infamous continuation context and the continuation manager are completely removed from windows phone to create a more unified programming model.
The methods that provide a continuation context such as FileOpenPicker.PickSingleFileAndContinue or WebAuthenticationBroker.AuthenticateAndContinue are replaced with their Windows Runtime counter parts such as FileOpenPicker.PickSingleFileAsync, WebAuthenticationBroker.AuthenticateAsync.

Charms Bar No More (Windows)

A concept that was introduced with Windows 8, the so-called charms bar, has been removed from Windows 10. In order to support the Windows 8 applications running on Windows 10, a top navigation button is introduced to access the charm functionalities like settings or sharing contracts.

win10-windows8apponwindows10

 

 

For windows 10 applications, this top menu item does not appear. It is the developer’s responsibility to make these contracts accessible either with an app bar button or a button in the application interface.

windows10-settingsflyout

 

Another change related to the charms is that the flyouts related to the charm bar buttons, such as the settings flyout; does not appear in the side of the whole client window but rather uses the application window.

Changing Layout Concepts (Windows)

Windows application on Windows 8 two separate models of layout. First one was the full screen layout, and the second one was the snapped layout. Snapped layout was initially a fixed half window sized view but later changed to an adjustable window.

Windows 10 - Tablet Mode

Windows 10 – Tablet Mode

Windows 10 user interface can be used in two different modes. One is the tablet mode, which resembles to the previous layout and the application is visible either in snapped or full screen views. The second mode is the desktop mode, which makes the windows runtime apps visually no different than classic windows applications. On the desktop mode, the applications can be moved by the user or resized as desired.

App Bar (Windows)

App bar is still accessible and usable in Windows 10 applications. The only change is the fact that now the app bar became part of the window that is presenting your application. This change does not affect the developers directly, only directed towards the user experience.

However, windows 8 applications running on Windows 10 still display their app bar just like before.

I tried to give a quick overview of the changes related to Windows 10. Overall, Windows 10 is coming with a lot of surprises both for developers and users.
Happy coding every one,

Advertsing

125X125_06

TagCloud

MonthList

CommentList