We Keep Coding

What is the difference between Xamarin.Form's LayoutOptions, especially Fill and Expand?

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?

Short answer
Start, Center, End and Fill define the view's alignment within its space.
Expand defines whether it occupies more space if available.
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, 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 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
Let's have a look on the following example to see the difference between all eight layout options.
The app contains a dark gray StackLayout with eight nested white buttons, each of which is labeled with its vertical layout option. When clicking on one of the buttons, it assignes its vertical layout option to the stack layout. This way we can easily test the interaction of views with parents, both with different layout option.
(The last few lines of code add additional yellow boxes. We'll come back to this in a moment.)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
The following screenshots show the result when clicking on each of the eight buttons. We make the following observations:
As long as the parent stackLayout is tight (does not Fill the page), the vertical layout option of each Button is negligible.
The vertical layout option only matters if the stackLayout is larger (e.g. via Fill alignment) and the individual buttons have the Expand suffix.
Additional space is evently proportioned amongst all buttons with Expand suffix. To see this more clearly we added yellow horizontal lines between every two neighboring buttons.
Buttons 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 button of their space or fill it completely.
All buttons span across the whole width of the layout, since we only modify the VerticalOptions.
Here you find the corresponding high-resolution screenshots.

There is a bit of a bug in the current version of Xamarin.Forms; maybe it has been there a while.
CenterAndExpand generally doesn't expand, and working around it can be confusing.
For example if you have a StackLayout set to CenterAndExpand, then you put a label inside that also set to CenterAndExpand you would expect a label that is full width of the StackLayout. Nope. It won't expand. You have to set the StackLayout to "FillAndExpand" to get the nested Label object to expand to the full width of the StackLayout, then tell the Label to center the text, not itself as an object, with HorizontalTextAlignment="Center". In my experience you need both the parent and nested child to be set to FillAndExpand if you really want to make sure it expands to fit.
<StackLayout HorizontalOptions="FillAndExpand"
Orientation="Vertical"
WidthRequest="300">
<Label BackgroundColor="{StaticResource TileAlerts}"
HorizontalOptions="FillAndExpand"
Style="{StaticResource LabelStyleReversedLrg}"
HorizontalTextAlignment="Center"
Text="Alerts" />

Falko gave a good explanation but I wanted to add onto that with another visual and how these tags work in xaml, which is what I prefer to use most of the time. I made a simple project for testing out display results. Here is the Xaml for the Main Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Alignments.MainPage"
BackgroundColor="White">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray" Padding="1" Margin="30">
<Label Text="Vert: EndAndExpand, Horz: EndAndExpand" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="White"/>
</StackLayout>
</ContentPage>
As you can see it's a very simple StackLayout with a Label inside. For each image below I kept the StackLayout the same, I just changed the horizontal and vertical options for the Entry and changed the text to show the selected options, so you can see how the Entry moves and resizes.
Here is the code used for Start:
<Label Text="Vert: Start, Horz: Start" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="White"/>
And the code used for StartAndExpand:
<Label Text="Vert: StartAndExpand, Horz: StartAndExpand" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" BackgroundColor="White"/>
As you can see there is no difference visually other than there is more text used in the StartAndExpand option. This was tested on my Samsung A30 physical device. These may display differently on different devices, but I think all of the images here collectively show that there are some bugs in Xamarin. For the rest I will just show the screenshots, I think they are self-explanitory.
I also recommend taking a look at the Microsoft documentation for some additional details. Notable is that "Expansion is used only by a StackLayout".

Why Border disappear when setting big Width?

I resize the border according to timeline. Why when the Width becomes very big the Border disappear. For example for Width=100000 the Border is visible but for Width=200000 the Border disappears.
<StackPanel>
<Border BorderThickness="0,0,0,1" BorderBrush="Black" Height="100" Width="1000000">
</Border>
</StackPanel>

It turns out, that there are some limitations on the Border setting BorderThickness property.
Unfortunately, I can not say exactly how they look, I tried to find them using ILSpy (you can try to look for them am).
One limitation I can say: if the value of one coordinate over 125,000 the line of Border disappears. Here is my list of examples:
Thickness Width
--------- ---------
0,0,0,1 125 001
0,0,0,2 251 000
0,0,0,3 375 001
0,0,0,4 501 000
In all these cases, the line is not drawn.
As an alternative, you can increase the value for Thickness each time (not varinat), or using a Line / Separator, for them, there should be no restrictions. You need to change the value of Margin, depending on conditions or setting the Visibility for him.
Example with Separator:
<Separator Name="HighSignal"
Width="1000000"
Background="Black"
Height="2"
Visibility="Collapsed"
Margin="0,100,0,0" />
<Separator Name="LowSignal"
Width="1000000"
Background="Black"
Height="2"
Visibility="Visible"
Margin="0,0,0,0" />
Note: For Separator you may create a Style, because for him base type a Control (for Line -Shape).

Image in one column is expanding to the second column

I have defined a grid with some rows and two columns
In [0,0] I have placed an image with main attributes as below:
HorizontalAlignment="Left" VerticalAlignment="Center"
Stretch="None" Margin="10 0 0 0" Width="260"
And in [0,1] I have placed a label with some text in it with some main attributes like this:
HorizontalContentAlignment="Left" HorizontalAlignment="Left" Width="36" FontSize="16"
My question is why if I remove the width = 260 from image field then suddenly also the label in next column is disappearing? I think the image expands and covers it. But why? Shouldn't it be limited to its own [0,0] cell?

Your columns are autosizing to the size of their contents, so I would guess that your image in (0,0) isn't actually spreading into column 1 it is just that column 0 is growing so large that you can't see column 1 anymore.
If you make the column size * you will constrain it to the available space. As someone else said, you can use ShowGridLines to help debug what is going on with your columns, especially if you add a second row just to see where the division between your columns is.

the display word gets cut off 1 position

In the following code, there is a column that gets displayed called
'All day event' for some reason here the 't' is getting cut off. can you point me if there is any value here too large that would cause this?
<dxe:CheckEdit x:Name="chkAllDay" Margin="0,6,202,4" Grid.Column="2"
Content="{Binding Source={StaticResource SchedulerControlStringIdConverter},
ConverterParameter=Form_AllDayEvent,
Converter={StaticResource SchedulerControlStringIdConverter}}"
EditValue="{Binding Controller.AllDay}" IsReadOnly="{Binding ReadOnly}"
IsEnabled="True" HorizontalAlignment="Right" Width="81" />

Your CheckEdit has its Width fixed to 81 pixels and also fixed Margins*. From your code snippet I cannot guess how the whole layout looks, but be sure to re-calculate those values. Maybe you've just accidentally got 5px off and the remaining area is too small for the text?
*) I said about Margin, but I've mistaken them with Padding. Margin is not relevant here, they it's the outer spacing' and does not count to the Width. OTOH, the Padding would. I think here's one good explanation

How do you get the REAL position of objects in silverlight?

How do you get the REAL position of objects in silverlight?
I have a header image centered on the screen. When I make the browser window smaller, obviously, the header's left side goes off the screen. Finding out the actual position is good to know if you want to position objects on top of the image.
I capture the Content_Resized and I run a little test:
if (App.Current.Host.Content.ActualWidth > header.Width)
{
TEST = Canvas.GetLeft(header);
}
else
{
TEST = Canvas.GetLeft(header);
}
TEST always returns zero.
EDIT: header sits on a grid instead of a canvas. "Well, there is your problem..." So a better question might be this. How would I get the margins of an image sitting on a grid?

I probably should just answer the question but how to find the position of an element relative to another is probably something that has been answered before (by myself and others) here and elsewhere on the tinternet.
However if your goal is to place an item over an image then place the image in a Grid and then add the item as child of the Grid. That way you assign the relative position over the image as the margin of the item and let Silverlight's layout system do the rest.
As a general rule if you feel that you need to write code to move stuff about when the size of things change then unless you are writing a custom panel or something you're probably not using Silverlight layout system properly.
Edit:
Try this experiment:-
<Grid x:Name="LayoutRoot">
<Grid x:Name="headerContainer" Margin="50, 60, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="YourLargeImage" />
<Image Source="YourSmallerImage" HorizontalAlignment="Center" VerticalAlignment="Top" />
</Grid>
</Grid>
Now try changing the inner grid's Margin to move its position around the screen. Note the smaller image always remains at the top center of the large image.

I got it working.
First of all, these images are on a grid, not a canvas. But switching the grid to a canvas caused lots of other problems one of which is that I could not have the header image centered like before.
The solution was to change the margin of the smaller image sitting on top of the larger header image when the content resized like this:
blankbarimage.Margin = new Thickness((App.Current.Host.Content.ActualWidth - header.Width) / 2, 0, 0, 0);
and, by the way, you create a content resized method like this:
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
So, to answer my own question, the way you get the REAL position of object in silverlight is (if they are on a grid) by looking at their margin settings.