.NET Maui HorizontalStackLayout expand to fill remaining window

Sarah Shelby 0
Viewed 76

I am trying to design an interface where there is a pane on the left and a another pane that expands to fit the remaining space. I attempted to do this with a HorizontalStackLayout, but no matter what I do, I can't get the second pane to appear without setting a specific WidthRequest. This is a demonstration of how I want it to look:

enter image description here

This is what I am trying, but no combination of options seems to work:

<HorizontalStackLayout HorizontalOptions="FillAndExpand">
    <BoxView BackgroundColor="Green" HorizontalOptions="Start" WidthRequest="200"></BoxView>
    <BoxView BackgroundColor="Blue" HorizontalOptions="FillAndExpand"></BoxView>
</HorizontalStackLayout>

This is all I ever get in Maui without setting an explicit width:enter image description here

I have tried Start, StartAndExpand, FillAndExpand, nothing works. What am I doing wrong?

maui xaml .net
1 Answers

It looks like I was able to accomplish my goal by using a Maui Grid. It seems there was discussion here, stating the following:

With this pull request I am proposing the following:

  1. The "AndExpand" options will not go into MAUI Core.
  2. The "AndExpand" options in Controls will be marked Obsolete
  3. The Controls implementation of StackLayout will, for the time being, honor the "AndExpand" options. We may choose to remove that capability in the future.
  4. No new form of the "AndExpand" options will be added to any future versions of Core or Controls.

This pull request marks all of the "AndExpand" LayoutOptions in Controls as Obsolete. Current usages are preserved with warnings disabled.

The pull request also adds "AndExpand" legacy capabilities to the new StackLayout. When the new StackLayout detects the use of "AndExpand" it will drop into a separate mode which lays out child views as expected. VerticalStackLayout and HorizontalStackLayout do not honor "AndExpand" - only StackLayout does this. This is to ease the transition for existing Xamarin.Forms applications.

All of the functionality provided by "AndExpand" is already available to layouts via the Grid, so no new attached properties or other StackLayout->specific properties are required.

This is the solution:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <BoxView BackgroundColor="Green" Grid.Column="0" />
    <BoxView BackgroundColor="Blue" Grid.Column="1" />
</Grid>

This results in the following layout: enter image description here

Sarah Shelby0
Related