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

Marc George 171 Reputation points
2022-11-26T22:26:12.423+00:00

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?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,223 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,306 Reputation points Microsoft Vendor
    2022-11-29T07:11:00.643+00:00

    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.

    0 comments No comments