Understanding WidthRequest

Question

I want to change the WidthRequest. Thereby I noticed that this doesn't really set the width of an element. Rather it is kind of a proposal.

Example: I have a ListView added as child to a StackLayout. I'm setting a WidthRequest for the ListView, but the result is not what I expect.

this.listView = new ListView
{
    ItemsSource = new List
    {
        // creation of some entries
        // ...
    },
    ItemTemplate = new DataTemplate(typeof(IconMenuCell)),
    RowHeight = 44,
    // HERE is the problematic code!
    WidthRequest = 10,
};

Content = new StackLayout
{
    Orientation = StackOrientation.Horizontal,
    Children = {
        this.listView,
        this.detailView,
    },
};

This is the structure/layout of IconMenuCell:

public IconMenuCell()
{
    var icon = new Image
    {
        Aspect = Aspect.AspectFit,
        WidthRequest = 40,
    };
    icon.SetBinding(Image.SourceProperty, "IconSource");

    this.textLabel = new Label {
        TextColor = Color.Gray,
        FontSize = 10,
        VerticalOptions = LayoutOptions.Center,
    };
    this.textLabel.SetBinding(Label.TextProperty, "Text");

    View = new StackLayout
    {
        Orientation = StackOrientation.Horizontal,
        Children =
        {
            icon,
            this.textLabel,
        },
    };
}

Setting the WidthRequest to 10 doesn't make sense, because the icon itself should take 40. But here I get the smallest width for the whole list view.

There is no difference if I set WidthRequest to 60 or 120. The resulting width is the same (and not what I want).

How does WidthRequest work here? Do I have to change some LayoutOptions?

user_5835002 · Answer

You need to specify a HorizontalOptions such as "start" or "center". The default horizontalOptions for stackLayout is FillAndExpand, so child elements like a listview will fill the entire available horizontal area even though you specify a width. This was a bad call on behalf of Microsoft because the default behavior will ignore/override a width request.

Here is a visual example: I have a picker where I set the width request to 200, which should take up about 2/3 of the horizontal space.

As you can see the width request is overridden/ignored. Then if after setting the HorizontalOptions to "Start"...

The width request is honored. Of course I'm setting the properties in the .xaml file here, which I usually prefer but you can also set the HorizontalOptions in C# like this

pickerRanks.HorizontalOptions = LayoutOptions.Start;

Understanding WidthRequest

2 Answers