How to set Entry control over an image?

Question

Hi,
I want to set an Entry over an image that plays an input box role. I tried this XAML code but I couldn't set its correct position over the first rectangle (image):

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
<RowDefinition Height="300"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="Rectangle2.png" Grid.Row="0" Margin="2,10,0,0"/>
<Image Source="Rectangle2.png" Grid.Row="1" Margin="2,-300,0,0" />
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0" Margin="25,0,0,0" Placeholder="User Name:" PlaceholderColor="DimGray" MaxLength="30" ClearButtonVisibility="WhileEditing" TextColor="Black" />
</Grid>

    </Grid>  

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Please change your RowDefinition Height="300" to <RowDefinition Height="*"/> . because your set the height too big, then Entry can not over Image.

Here is my edited code.

   <StackLayout>  
           <Grid Margin="0,100,0,0">  
               <Grid.RowDefinitions >  
                   <RowDefinition Height="*"/>  
                   <RowDefinition Height="*"/>  
                   <RowDefinition Height="Auto"/>  
                   <RowDefinition Height="Auto"/>  
                   <RowDefinition Height="Auto"/>  
               </Grid.RowDefinitions>  
                
               <!---->  
               <Image Source="Rectangle2.png" Grid.Row="0" HorizontalOptions="FillAndExpand"  Margin="2,0,0,0"/>  
                
               <Image Source="Rectangle2.png" Grid.Row="1" Margin="2,0,0,0" />  
     
     
     
               <Grid Grid.Row="0" Padding="25,0,0,0" >  
                   <Grid.ColumnDefinitions>  
                       <ColumnDefinition Width="350"/>  
                   </Grid.ColumnDefinitions>  
                   <Grid.RowDefinitions>  
                       <RowDefinition Height="60"/>  
                   </Grid.RowDefinitions>  
                   <Entry  Grid.Row="0" Placeholder="User Name:" PlaceholderColor="DimGray" MaxLength="30"  ClearButtonVisibility="WhileEditing" TextColor="Black" />  
               </Grid>  
           </Grid>  
     
       </StackLayout>  

Here is code running screenshot.

Here is an article about Gird, you can refer to it.

https://learn.microsoft.com/en-us/xamarin/get-started/tutorials/grid/?tabs=vswin

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.