C#•16mo ago

❔ Maui Alignment Within HorizontalStackLayout

Simply put, I'm currently attempting to create a kind of header/navbar for my Maui app. However, I am running into an issue where I cannot seem to have an ImageButton left-aligned in this bar, whilst having two Labels right-aligned.

<HorizontalStackLayout HorizontalOptions="Fill" Grid.Row="0">
    <ImageButton WidthRequest="50" Aspect="AspectFit" HorizontalOptions="Start" />
    <Button Text="&#x1F50D;" HorizontalOptions="End" />
    <Button Text="&#x2699;" HorizontalOptions="End" />
</HorizontalStackLayout>

<HorizontalStackLayout HorizontalOptions="Fill" Grid.Row="0">
    <ImageButton WidthRequest="50" Aspect="AspectFit" HorizontalOptions="Start" />
    <Button Text="&#x1F50D;" HorizontalOptions="End" />
    <Button Text="&#x2699;" HorizontalOptions="End" />
</HorizontalStackLayout>

I saw something in the docs about HorizontalOptions being ignored if two layouts are nested in the same direction? This is currently nested in a GridLayout, but I'm not sure that is relevant. I would be vastly appreciative if someone could direct me in how to have those two labels move right. (I have tried putting the labels inside another HorizontalStackLayout, and aligning just that, but it didn't work either, so I am presently unsure if this works at all...) Thanks for any light you can shed, - Blake

5 Replies

Florian Voß•16mo ago

I have just began to learn Maui so my ability to help on this is pretty limited but I will try regardless. have you tried using a <FlexLayout> yet? its like Horizontal and Vertical stack layout both in one but with more features as far as I understood much like flexbox from css or can you maybe wrap those two buttons in another HorizontalStackLayout and put HorizontalOptions="End" on that child StackLayout? no idea if thats possible but might work

AmyOP•16mo ago

Thanks for your recommendation. I tried substituting in FlexLayout for the HorizontalStackLayout, however this seems to have not changed the UI in any way. Perhaps there is an attribute that needs to be set. With regards to your latest suggestion of wrapping the labels, this does not work, as noted in the parentheses of the original question. Although I am not particularly well versed in Maui, I suspect that my last paragraph, excluding the parentheses and signoff, has some relevence to that matter. For the sake of thoroughness, I also attempted to wrap the labels with a flexbox as well, but this also had no effect, with or without the supercedent FlexLayout/HorizontalStackLayout substitution.

Florian Voß•16mo ago

as noted in the parentheses of the original question

excuse me I have overread that. In worst case you could build the headbar with a Grid and use dynamic column sizes with *. But somehow this has to be possible with Stacklayouts, I'm gonna try this later too 😄

AmyOP•16mo ago

Grid is starting to look better and better of an option - but I do agree that surely it must be feasible without. I too shall continue experimenting with various combinations and attributes in the meantime.

Accord•16mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Maui Alignment Within HorizontalStackLayout