Xamarin.Forms and sizing

Question

Can someone tell me why this is doing what it's doing? And if you know how please tell me how I can define controls to horizontally or vertically fill up their parent.

The page in this code draws what's in the screenshot below. I totally do not understand what's happening. I interpreted that the * in the row-/columndefinitions would force the content to be as wide as it's containing control but that's not what is happening. As a matter of fact if I increase the rowdefinitions width in the inner grid to 10000* it get's as wide as the container but just * makes it only 1 bit wide. Totally not intuitive.

The outer grid does what I expect. It is only 1/5 wide and occupies 1/2 of the height. That's what I would expect with *, 4* columndefinition and *, * rowdefinition.

I honestly suspect a bug here and if it is it's a nasty one.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:tgb="clr-namespace:TGB.Xamarin.Forms.Controls;assembly=TGB.Xamarin.Forms"
                 mc:Ignorable="d"
                 x:Class="TGB.Xamarin.Forms.TestApp.MainPage">

        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="4*" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <AbsoluteLayout BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50*" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="50*"/>
                        </Grid.RowDefinitions>

                        <ContentView BackgroundColor="Orange" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        </ContentView>
                    </Grid>
                </AbsoluteLayout>
            </Grid>
        </StackLayout>

    </ContentPage>

EDIT:

This scales as expected:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     xmlns:tgb="clr-namespace:TGB.Xamarin.Forms.Controls;assembly=TGB.Xamarin.Forms"
                     mc:Ignorable="d"
                     x:Class="TGB.Xamarin.Forms.TestApp.MainPage">

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <ContentView BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <ContentView BackgroundColor="Orange" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    </ContentView>
                </Grid>
            </ContentView>
        </Grid>
    </StackLayout>
</ContentPage>

Which effect did you want to achieve ? You could provide a screen shot . — Lucas Zhang
I'm creating a custom slider. The default slider only has a horizontal orientation. I need one that is vertical. So I thought I'll take an AbsoluteLayout and position a contentview inside it which I can slide within it. It of course has to automatically size to containers. — Paul Sinnema
I've been using Xamarin.Forms for some time now but can't interpret how it intuitively should work. — Paul Sinnema
Did you want to let the orange ContentView fill the AbsoluteLayout in horizontal ? — Lucas Zhang
No, I want the orange to be as wide as the outer container and with a fixed height, let's say HeighRequest = "150" — Paul Sinnema

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-05-19T09:42:23

This is because that you used AbsoluteLayout .So it is necessary to set AbsoluteLayout.LayoutBoundsand AbsoluteLayout.LayoutFlags in its child element .

In addition , if you want to set the height of ContentView manually , set the Height of row as Auto , in this option it will fit the size of its child element .

So you could improve your code like following .

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <AbsoluteLayout BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>


                    <ContentView HeightRequest="100" BackgroundColor="Orange" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    </ContentView>
                </Grid>
            </AbsoluteLayout>
        </Grid>
    </StackLayout>

Xamarin.Forms and sizing

1 Answers