CODEWITHSUNDEEP
xamlxamarinxamarin.forms
jbtamares
jbtamares

Reputation: 778

Xamarin: Entry with Icon: Text overlapping

enter image description here

So I have this xaml file on my end, what I want is that I want the entry's text not to be behind/overlap with the icon itself.

In order to achieve the icon on the right, I had two columns: One for the entry and one for the icon

I set the Grid.ColumnSpan="2" of the entry and set the icon HorizontalOptions="End" but the text of the entry was behind my icon, how do I prevent this? If more info is needed, do not hesitate to ask me so. Thanks!

EDIT1: Here's the Code

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <Entry Grid.Column="0" Grid.ColumnSpan="2" IsPassword="True"/>
   <Image Source="eye.png" Grid.Column="1" Grid.ColumnSpan="1"/>
</Grid>

Upvotes: 1

Views: 2302

Answers (3)

jbtamares
jbtamares

Reputation: 778

So here's what I did:

Cross-platform xaml file:

<StackLayout Orientation="Horizontal"  Spacing="0">
     <Entry  HorizontalOptions="FillAndExpand" IsPassword="True"/>
     <Image Source="{Binding ImageSource}" 
                           HorizontalOptions="End" Margin="5,0,0,0"
                           HeightRequest="20"
                           WidthRequest="20">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding MaskCommand}"/>
                        </Image.GestureRecognizers>
      </Image>
<StackLayout>

Android Renderer:

Control?.SetBackgroundColor(Android.Graphics.Color.Transparent);

I'll update this after I have tried it on iOS and UWP.

Upvotes: 0

Ziyad Godil
Ziyad Godil

Reputation: 2680

Change your grid width * to Auto 

<Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="Auto"/>
       </Grid.ColumnDefinitions>
       <Entry Grid.Column="0" IsPassword="True"/>
       <Image Grid.Column="1" Source="eye.png" WidthRequest="50" HeightRequest="50" />
    </Grid>

OR

Try stack layout instead of grid

<StackLayout Orientation="Horizontal" Spacing="0">
    <Entry IsPassword="True" HorizontalOptions="FillAndExpand"/>
    <Image Source="eye.png" WidthRequest="50" HeightRequest="50"/>
</StackLayout>

Upvotes: 5

Pavan V Parekh
Pavan V Parekh

Reputation: 1946

Try this:

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <Entry Grid.Column="0" IsPassword="True"/>
   <Image Source="eye.png" Grid.Column="1" />
</Grid>

Upvotes: 0

Related Questions