CODEWITHSUNDEEP
maui
Álvaro García
Álvaro García

Reputation: 19396

How could I put one button at the left and the second button at the right in a MAUI application?

In a MAUI page, I am trying to put one button aligned to the left and the second button to the right. But I am not able to do it.

I am trying this:

<StackLayout>
    <HorizontalStackLayout BackgroundColor="Yellow">
        <Button HorizontalOptions="Start"
                Command="{Binding ResgistrarEntradaCommand}"
                ImageSource="cronoa.svg"/>

        <Button HorizontalOptions="End"
                Command="{Binding ResgistrarSalidaCommand}"
                ImageSource="cronob.svg"/>
    </HorizontalStackLayout>
</StackLayout>

With the background, I can see the that the HorizontlStackLayOut fill all the screen from left to right, but the buttons are not in the left.

According to the documentation, https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/horizontalstacklayout?view=net-maui-7.0, I think I should to get the expected behavior.

How could I place one button to the left and the second to the right?

EDIT: this is how it looks now:

enter image description here

EDIT 2: I have tried in this way, as recommended in a comment, using a StackLayout with HorizontalOptions as Fill:

<StackLayout BackgroundColor="Yellow" Orientation="Horizontal"
              VerticalOptions="Start" HorizontalOptions="Fill">
    
    <Button HorizontalOptions="Start" VerticalOptions="Start"
                Command="{Binding ResgistrarEntradaCommand}"
                ImageSource="cronoa.svg"/>

    <Button HorizontalOptions="End" VerticalOptions="Start"
                Command="{Binding ResgistrarSalidaCommand}"
                ImageSource="cronob.svg"/>
</StackLayout>

I get the same result.

enter image description here

If I dont set the orientation of the StackLayout, then I get this result:

enter image description here

In this case I get one button to the left and another to the right, but I would like to have the same in the same row.

EDIT 3:

This is with a grid:

<Grid HorizontalOptions="Fill" BackgroundColor="Yellow" VerticalOptions="Start">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>

    <Button HorizontalOptions="Start" VerticalOptions="Start"
                Command="{Binding ResgistrarEntradaCommand}"
                ImageSource="cronoa.svg"/>

    <Button HorizontalOptions="End" VerticalOptions="Start"
                Command="{Binding ResgistrarSalidaCommand}"
                ImageSource="cronob.svg"/>
</Grid>

enter image description here

Thanks.

Upvotes: 1

Views: 2220

Answers (1)

Jason
Jason

Reputation: 89169

your Grid attempt was a good start, but you are not specifying a Column value so both buttons are placed in the same Column

<Grid HorizontalOptions="Fill" BackgroundColor="Yellow" VerticalOptions="Start">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Start"
                Command="{Binding ResgistrarEntradaCommand}"
                ImageSource="cronoa.svg"/>

    <Button Grid.Column="1" HorizontalOptions="End" VerticalOptions="Start"
                Command="{Binding ResgistrarSalidaCommand}"
                ImageSource="cronob.svg"/>
</Grid>

Upvotes: 4

Related Questions