How do I position my .NET Maui Frame at the bottom of the screen?

Viewed 14
<Frame BorderColor="#2f3136"
          CornerRadius="20"
          BackgroundColor="#2f212b"
          Grid.Row="0">
                
               <Editor x:Name="inputBox" 
                       Placeholder="Enter your message (2000 characters max)"
                       TextChanged="inputBox_Changed"
                       Completed="inputBox_Completed"
                       MaxLength="2000"
                       Keyboard="Chat"
                       AutoSize="TextChanges"/>
            
            </Frame>

The Frame sits at the top of the screen, how do I make it do the opposite, and sit at the bottom of the screen instead?

1 Answers

Just as jason said, it would be helpful to know what kind of container it’s enclosed in.

From your code ,we know that you should use Grid out of the Frame. In this condition, we can set the Frame as the last row of the Grid.

And set the other part of the Gird to occupy all the remaining position of the screen.

You can refer to the following code:

<Grid Margin="20,35,20,20"> 
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <StackLayout BackgroundColor="Green" 
                 VerticalOptions="FillAndExpand"  
                 Grid.Row="0">
                   
    </StackLayout>
           
    <Frame BorderColor="#2f3136" 
      CornerRadius="20"
      BackgroundColor="#2f212b" 
           
      HeightRequest="100"
      Grid.Row="1"
      VerticalOptions="End" >
        <Editor x:Name="inputBox" 
                   Placeholder="Enter your message (2000 characters max)"
                   MaxLength="2000"
                   Keyboard="Chat"
                   AutoSize="TextChanges"/>

    </Frame>
</Grid>

Note:

1.Suppose there are two rows, I set the Grid.Row of Frame to 1 and add the following property:

VerticalOptions="End"

2.I set the height of the first row to *

      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
Related