显示密码图标以xaml格式缩短输入字段

Question

我在输入字段中添加了一个显示密码图标，以允许密码峰值。我将输入字段和图像包含在同一StackLayout中。它的工作原理与应该的完全一样，只是缩短了输入场线以将图像容纳在同一水平面上。我希望输入行延伸到屏幕边缘，并在其上方显示密码图像。

这是当前显示的方式：

这是StackLayout中包含的密码输入字段和图像的xaml代码段

<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

使用Grid代替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>

这样，Image将覆盖Entry。

与此有关的一个问题是，如果文本太长，Image将显示在文本顶部。因此，更好的解决方案是构建自定义控件。