How to Make a Maui Entry Control Fit Inside a Grid Row/Column?

Question

I have a Grid with three columns. I have an Entry control assigned to the middle column. The execution results have the control starting from the left side of the column but extending to the right side of the third column, not ending at right side of the second column.

Using separately the [Entry].Layout(rect) function or the [Entry].Layout(rect) function using the same dimensions as the column followed by a ForceLayout(), does not change the results. Using them together also doesn't change the results.

Interesting though, using the Width parameter in the XAML reduces the control to 5 characters in size regardless of the value given.

            <Grid x:Name="Content3" Grid.Row="5" Grid.Column="1" Opacity="100" Margin="0" Padding= "0" IsVisible="True" >  
                <Grid.RowDefinitions>  
                    <RowDefinition Height="*"/>  
                </Grid.RowDefinitions>  
                <Grid.ColumnDefinitions>  
                    <ColumnDefinition Width="*" />  
                </Grid.ColumnDefinitions>  
                <Entry x:Name="InputX" HorizontalTextAlignment="Center" BackgroundColor="WhiteSmoke" Placeholder="Properly formatted identity" TextChanged="Entry_TextChanged" Completed="Entry_Completed" IsVisible="True"/>  
            </Grid>  

            Rect rect = new Rect(0, 0, GridX.CenterColumnWidth, Row5.Height.Value);  
            InputX.Frame = rect;  
            InputX.Layout(rect);  

What's missing?

Answer 1

Hello,
I'm confused about the current behavior you meet ( The execution results have the control starting from the left side of the column but extending to the right side of the third column, not ending at right side of the second column), and I still can't reproduce your issue. Do you mean the width of the left and right columns will become wider as the entry changes? If so, you can set a fix width for the second column.
I test with the following code:

   <AbsoluteLayout>  

<!--LayoutRoot is the root grid where all page content is placed-->  
<Grid x:Name="LayoutRoot" Opacity="100" Margin="0" Padding="0" IsVisible="True" >  
 
  <Grid.ColumnDefinitions>  
    <ColumnDefinition x:Name="Col0" Width="*">  
    </ColumnDefinition>  
    <ColumnDefinition x:Name="Col1" Width="300" >  
    </ColumnDefinition>  
    <ColumnDefinition x:Name="Col2" Width="*" >  
    </ColumnDefinition>  
  </Grid.ColumnDefinitions>  
 
  <Grid.RowDefinitions>  
    <RowDefinition x:Name="Row0">  
    </RowDefinition>  
    <!--<RowDefinition x:Name="Row1">  
    </RowDefinition>  
    <RowDefinition x:Name="Row2">  
    </RowDefinition>-->  
  </Grid.RowDefinitions>  

     <StackLayout  Grid.Row="0" Grid.Column="0" BackgroundColor="Yellow">  
         <Label Text="1111"></Label>  

     </StackLayout>  


  <Grid x:Name="Spacer1" Grid.Row="0" Grid.Column="1" Opacity="100" Margin="0" Padding= "0" IsVisible="True" >  
    <Grid.RowDefinitions>  
      <RowDefinition Height="*"/>  
    </Grid.RowDefinitions>  
    <Grid.ColumnDefinitions>  
      <ColumnDefinition Width="*" />  
    </Grid.ColumnDefinitions>  
       
     <Entry HorizontalTextAlignment="Center" BackgroundColor="WhiteSmoke" Placeholder="identity" ></Entry>  
  </Grid>  
     <StackLayout Grid.Row="0" Grid.Column="2" BackgroundColor="Green">  

         <Label Text="3333"></Label>  
     </StackLayout>  

</Grid>  
  </AbsoluteLayout>  

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.