Can you use FlexLayout with the equivalent of a fixed css.gap between objects and have the width and height "hug" the objects inside the FlexLayout?

[mikeysouthwell]

Is it possible to use FlexLayout to create the equivalent of Figma Auto Size with 3 ellipses spaced by a fixed amount each and have the height and width "hug" the FlexLayout (this would give it a width of 26px and a height of 6px in this example and is based on the height and width of the objects in side the FlexLayout)?

As a simple example, this Kebab Menu icon:

This is the 48x48 frame the icon is contained in which is in auto layout (I assume this would be a FlexLayout in MAUI):

{
"property.type": "large",
"node.name": "type-large",
"node.type": "component",
"node.key": "679ec1f49a3b24ed5cb3599ad3fe1cb5c8335f3f",
"component.key": "cbf38c957a0dc45f701ac6833962ed015079117e",
"component.type": "component-set",
"component.name": "kebab-menu",
"css.display": "flex",
"css.width": "48px",
"css.height": "48px",
"css.flexDirection": "column",
"css.justifyContent": "center",
"css.alignItems": "center",
"css.flexShrink": "0",
"autolayout.layoutMode": "vertical",
"autolayout.paddingLeft": "0",
"autolayout.paddingRight": "0",
"autolayout.paddingTop": "0",
"autolayout.paddingBottom": "0",
"autolayout.itemSpacing": "0",
"autolayout.primaryAxisAlignItems": "center",
"autolayout.counterAxisAlignItems": "center"
}

This is the frame the 3 ellipses are in, which again I would assume is in FlexLayout, but I can't figure out how to give it fixed spacing:

{
"node.name": "dots",
"node.type": "frame",
"css.display": "flex",
"css.justifyContent": "center",
"css.alignItems": "center",
"css.gap": "3px",
"css.boxShadow": "0px 0.5px 1px 0px rgba(0, 0, 0, 0.25)",
"autolayout.layoutMode": "horizontal",
"autolayout.paddingLeft": "0",
"autolayout.paddingRight": "0",
"autolayout.paddingTop": "0",
"autolayout.paddingBottom": "0",
"autolayout.itemSpacing": "3",
"autolayout.primaryAxisAlignItems": "center",
"autolayout.counterAxisAlignItems": "center"
}

Each of the dots (ellipses) have these parameters:

{
"node.name": "dot",
"node.type": "vector",
"css.width": "6px",
"css.height": "6px",
"css.fill": "var(--Dark-Gray, #324A49)"
}

[mikeysouthwell]

Apologies, I should have been more specific. Can you do this using XAML? Kind Regards, Mike.

…

On Wed, 14 Feb 2024 at 12:02 pm, Noah Bazer ***@***.***> wrote: You can! The following code can achieve that, using .dot-container as the container class, and .dot as individual dots: .dot-container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 3px; } .dot { display: block; height: 6px; width: 6px; border-radius: 25%; /* You may have to adjust this when changing dot size */ background-color: rgb(39, 45, 45); /* Set this to the color of the dots */ } — Reply to this email directly, view it on GitHub <#20406 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHWLFBCKV65FLCMFAS2J373YTQZMJAVCNFSM6AAAAABC44FJF6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DINRRGE3TO> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mikeysouthwell]

Anyone?

[mikeysouthwell]

Bump*

[mikeysouthwell]

Does anyone know if this is possible or do I need to submit an enhancement request?

[dalux-tke]

Can say that i am sitting with the same problem now in 2026. What could have been solved in one line now is gonna end up taking so much space and weird implementations

[stephenquan]

There are several ways to solve this problem.

Solution 1: Use an SVG inside an Image with AspectFit

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="6" viewBox="0 0 24 6">
    <path d="M 0 3 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h -18"
          fill="#324A49"
          stroke="transparent" />
</svg>

<Image Aspect="AspectFit" HeightRequest="48" Source="three_dots.png" WidthRequest="48" />

Solution 2: Use a Grid with RowDefintions and a Path

<Grid HeightRequest="48" RowDefinitions="9*,6*,9*" WidthRequest="48">
    <Path
        Grid.Row="1"
        Aspect="Fill"
        Data="M 0 3 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h -18"
        Fill="#324A49"
        Stroke="Transparent" />
</Grid>

Solution 3: Use an AbsoluteLayout with LayoutBounds and LayoutFlags

<AbsoluteLayout HeightRequest="48" WidthRequest="48">
    <Path
        AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 0.25"
        AbsoluteLayout.LayoutFlags="All"
        Aspect="Fill"
        Data="M 0 3 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h -18"
        Fill="#324A49"
        Stroke="Transparent" />
</AbsoluteLayout>

Solution 4: Use a custom AspectFitView component that sizes its content based on an aspect ratio

<local:AspectFitView AspectRatio="4" HeightRequest="48" WidthRequest="48">
    <Path
        Aspect="Fill"
        Data="M 0 3 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h -18"
        Fill="#324A49"
        Stroke="Transparent" />
</local:AspectFitView>

Here's the AspectFitView component, built using CommunityToolkit.Maui 14.0 and the new [BindableProperty] source generator.

public partial class AspectFitView : ContentView
{
	[BindableProperty(PropertyChangedMethodName = nameof(OnAspectRatioChanged))]
	public partial double AspectRatio { get; set; } = 1.0;
	public Rect ContentSize
		=> (Width <= 0 || Height <= 0 || AspectRatio <= 0)
		? Rect.Zero
		: (Width > Height * AspectRatio)
				? new Rect(0, 0, Height * AspectRatio, Height)
				: new Rect(0, 0, Width, Width / AspectRatio);
	static void OnAspectRatioChanged(BindableObject bindable, object oldValue, object newValue)
		=> ((AspectFitView)bindable).OnPropertyChanged(nameof(ContentSize));
	public AspectFitView()
	{
		ControlTemplate = new(() =>
		{
			var cp = new ContentPresenter();
			cp.SetBinding(WidthRequestProperty, static (AspectFitView a) => a.ContentSize.Width, source: this);
			cp.SetBinding(HeightRequestProperty, static (AspectFitView a) => a.ContentSize.Height, source: this);
			return cp;
		});
		SizeChanged += (s, e) => OnPropertyChanged(nameof(ContentSize));
	}
}

References:

• https://github.com/CommunityToolkit/Maui/releases/tag/14.0.0
• 14.0.0: Introducing Bindable Property Source Generators! CommunityToolkit/Maui#3054
• https://codetraveler.io/2026/01/29/introducing-bindable-property-source-generators/

[dalux-tke]

I like how creative you got with your solutions, Stephen!
But it also shows how ridiculous it is that Maui can't solve this more simply and you have to make custom SVGs etc. to solve something like that

[stephenquan]

I came up with more solutions based on the theme of iconography:

Solution 5 : Update the SVG viewBox to include the 24x24 frame

<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="
    M 0 0 24 24 0 0
    v 12
    a 3 3 0 0 0 6 0
    a 3 3 0 0 0 -6 0
    h 9
    a 3 3 0 0 0 6 0
    a 3 3 0 0 0 -6 0
    h 9
    a 3 3 0 0 0 6 0
    a 3 3 0 0 0 -6 0
    h -18
    v -12
    "/>
</svg>

<Image Aspect="AspectFit" HeightRequest="48" Source="three_dots.png" WidthRequest="48" />

Solution 6 : Use Path.Data with Aspect="Uniform"

<Path
    Aspect="Uniform"
    Data="M 0 0 24 24 0 0 v 12 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h 9 a 3 3 0 0 0 6 0 a 3 3 0 0 0 -6 0 h -18 v -12"
    Fill="#324A49"
    HeightRequest="48"
    Stroke="Transparent"
    WidthRequest="48" />

Solution 7 : Convert the SVG to a TTF icon font

See my StackOverflow answer: https://stackoverflow.com/a/77429861/881441

[stephenquan]

Here's a non SVG solution

Solution 8 : Nested Grid

<Grid HeightRequest="48" RowDefinitions="9*,6*,9*" WidthRequest="48">
    <Grid Grid.Row="1" ColumnDefinitions="6*,3*,6*,3*,6*">
        <Ellipse Fill="#324A49" />
        <Ellipse Grid.Column="2" Fill="#324A49" />
        <Ellipse Grid.Column="4" Fill="#324A49" />
    </Grid>
</Grid>

[dalux-tke]

haha you keep going! I like this one !