Show Password icon shortens entry field in xaml form - xaml

Question

I've added a show password icon to my entry field to allow for password peaks. I have included the entry field and the image in the same StackLayout. It works exactly as it should except the entry field line is shortened to accommodate the image on the same horizontal plane. I want the entry line to extend to the edge of the screen and the password image to appear above it.
This is how it displays currently:
Here is the xaml snippet for the password entry field and image contained in a StackLayout
<StackLayout x:Name="passwordStack" Orientation="Horizontal">
<Entry
x:Name="passwordEntry"
HorizontalOptions="FillAndExpand"
IsPassword="True"
VerticalOptions="Center">
</Entry>
<Image
x:Name="passwordEye"
Source="show_password_icon"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30"
HeightRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ShowPassword" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</StackLayout>

Answer 1

Use a Grid instead of an StackLayout:
<Grid>
<Entry
Grid.Row="0"
Grid.Column="0"
x:Name="passwordEntry"
HorizontalOptions="FillAndExpand"
IsPassword="True"
VerticalOptions="Center">
</Entry>
<Image
Grid.Row="0"
Grid.Column="0"
x:Name="passwordEye"
Source="show_password_icon"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30"
HeightRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ShowPassword" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
This way, the Image will overlay the Entry.
A problem about this is that Image will be displayed on top of text if the text is too long. So a better solution would be to build a custom control.