CODEWITHSUNDEEP
.netxamlmaui
Sarah Shelby
Sarah Shelby

Reputation: 451

.NET Maui HorizontalStackLayout expand to fill remaining window

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?

Upvotes: 8

Views: 16306

Answers (3)

BenCamps
BenCamps

Reputation: 1854

According to Microsoft Documentation both the VerticalStackLayout and HorizontalStackLayout ignore *AndExpand suffixes. This is a change in behavior from the StackLyout from Xamarin.Forms. However, for backwards compatibility StackLayout still behaves the same but if you use AndExpand you will get a warning.

Upvotes: 2

George M Ceaser Jr
George M Ceaser Jr

Reputation: 1791

From what I have seen in the .Net Maui Git branch change comments - both the horizontal and vertical stack layouts ignore any layout options that have "andexpand" in them. In my project, in needed to convert every thing that used 'andexpand' back to a regular stack layout with the orientation set to horizontal or vertical as needed. Then the 'andexpand' options were respected.

Upvotes: 2

Sarah Shelby
Sarah Shelby

Reputation: 451

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

Upvotes: 9

Related Questions