question

AlexJohanson-0792 avatar image
0 Votes"
AlexJohanson-0792 asked AlexJohanson-0792 commented

How to set Entry control over an image?

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):
106713-1.png
<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>


dotnet-xamarin
1.png (289.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
1 Vote"
LeonLu-MSFT answered AlexJohanson-0792 commented

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.

106749-image.png


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

https://docs.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.



image.png (38.9 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I tested Your XAML code. it works fine for 1920*1080 screen size. But when I change the split view resolution to something else (2560*1600) all those settings are disrupted. The Entry gets out of its box.
How can I keep the proportions of every control and their distances from each other the same in every screen size? I want to do this because I don't know the screen size of my users.

0 Votes 0 ·