View Sizing In Xamarin Forms

Let's start with the view side of the layout negotiation and look at how a view tells a panel its preferred size and position in all three platforms .

These tend to size themselves just large enough to fit around their content

For example, label and button both typically size themselves just large enough to show their text.

In this case, the label shown here that says hello.

There are many other factors that influence the final size both settings on the view and the layout algorithm. We will see all the detail shortly. Four properties influence the views rendered size. There are all requests and may be overridden by the layout container. The first two are for sizing you can set a width and a height value on the view. Notice that word requests in the property name you use these properties to tell the layout panel its preference but the layout makes the final sizing decision.

The other two properties give positioning information vertical options and horizontal options influence how the view is positioned within its rectangle allocated by the layout container.

You can specify you want to be aligned to one of the four edges of the rectangle. or that you want to occupy the entire rectangle .

 

Notice when we set width request and height request we use literal values like one hundred. In xamarin forms, these values have no unit. They are not points or pixels. They are just values of type double.

Xamarin Forms passes these values on to the underlying operating system.

The operating system provides the context needed to decide what these numbers mean.

   

On Windows, these values are interpreted as effective.

                                  

 On Android there density-independent pixels  

                                 

And on iOS the values are called points

                     

           

Now let's look at how the translation from literal values to concrete units plays out. Your xamarin forms app will likely run on multiple operating systems and on a wide range of devices.

 The width request and height request value set near xamarin source code are interpreted at runtime. According to the rules of the operating system based on the screen size and resolution.

The typical behavior for each OS is to apply a scale factor to your values to determine the number of physical pixels for review

For example if this app will run on the Windows Device shown the one hundred label by three hundred label .would render as 200 by 600 pixels since the devices are the scale factor of two .

On an iPhone 6s we would again see two hundred by six hundred physical pixels.

 Since it also has a scale factor of two. The screen of the Nexus has a higher pixel density so the scale factor is three point five resulting in a render size of 350 by 10520 pixels

 Those values like width requests and height request properties might not be respected at runtime. They cannot be used to see the result of your layout algorithm. for example if you set width request to 100 and its value will still be  100 after the layout algorithm runs regardless of whether the view is actually given units by the layout panel .

Instead, several other read-only properties tell you the actual size of a view in platform-independent unit’s .x and y give you the distances from the upper left corner of the layout

 Width the height tell you the size

And bounds as a convenience property that returns a rectangle containing all four values X, Y width and height.

 These properties are updated every time the layout algorithm runs.

Remember that the layout container gives each child view a rectangle. This rectangle is the area where the child will be rendered with these horizontal options and vertical options control the placement of the child within this rectangle.

 It’s actually a bit trickier than that simple statement the layout options struct has two properties.

 One used by all layouts and one which is only used for stack layout. Let’s look at the details next. The layout option struts two properties are both related to layout but they're not related to each other. Layout options is complex despite only having two properties. Alignment controls how the child view is positioned within the rectangle given to it by its layout container. Remember for each view it has two layout options values. One for horizontal and one for vertical. These two values let you align the child due to any of the edges of its rectangle or to Center, fill is different than the other values it means a child should fill its entire rectangle. Again each of us two of these values so you can independently control whether the child fills a rectangle in just one direction or both.

The expands property lets the view request extra space if the parent stack layout has any available. Expands is only used by stack layout the value is completely ignored by the other layout container’s. We will explore  expands more when we talk stack layout.

 The layout alignment Enums has four values start Center end , fill. When you choose one of these options for either the horizontal or vertical directions two things happen . The width requests or height requests setting is used to determine the view size in that direction if the view doesn't have a sizes default size is used for that access. The view has been aligned to the side of the layout rectangle you specify .in this case the fact layout gives each label or layout rectangle spanning the entire width start Center and end position within that rectangle. Fill however ignore any width request or height request setting and instead size of view so it occupies the entire rectangle in that direction.

 A view can have more than one property setting that influences its size for example it can have on width request of 100 and horizontal options of fill.  In these cases the two settings might conflict suppose a layout panel at 300 units wide the panels are not simultaneously make the view units 100 wide and have it filled a layout width. The fill options will take precedence in this case and the width request is ignored.

This can be confusing since fill is also the default .

Let’s look at that next. Horizontal options and vertical options in both default to fill making these two declarations identical. It’s important to keep in mind this when debugging a UI. It’s easy to forget and it can make it very hard to figure out why your view renders the way it did.

You may want a bit of extra space around a view. For example suppose you have some buttons next to each other you may want to add room around them to avoid accidental touches this is exactly what the margin property is for. Now what you include extra space or in any view. Margin is of type thickness so you have several options on how you would like to specify the value. the most flexible option is to give individual values for all four sides the order is top left right and bottom. Another option is to give two values the first is used on the left and right side the second is use for the top and bottom. Finally you can give a single value used for all four sides.

 There’s another option to add some extra space but this one's only available to layout panels. The padding property has space inside a layout panel. It reduces the area available to layout children. Padding is also a thickness type so you have the exact same options for setting it that we saw with margin.