Xaml Xamarin:带有图标的条目：文本重叠

因此，我有这个xaml文件，我想要的是，我希望条目的文本不在图标后面/与图标本身重叠

为了获得右边的图标，我有两列：一列是条目，一列是图标

我设置了条目的

Grid.ColumnSpan=“2”

，并设置了图标

HorizontalOptions=“End”

，但是条目的文本在我的图标后面，我如何防止这种情况？如果需要更多信息，请毫不犹豫地询问我。谢谢

编辑1：这是密码

<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>

试试这个：

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

试试这个：

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

---

将网格宽度*更改为自动

<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>

或 尝试堆栈布局而不是网格

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

---

将网格宽度*更改为自动

<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>

或 尝试堆栈布局而不是网格

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

以下是我所做的：

跨平台xaml文件：

<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>

在iOS和UWP上试用后，我会更新它。

所以我做了以下几点：

跨平台xaml文件：

<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>

---

---

在iOS和UWP上试用后，我将更新此内容。

在此处添加您已试用的代码。我无法理解您的确切意思，但我猜您试图将图标重叠在条目上。你试过Absolutelayout吗？@batmaci我有一个条目和一个图标。我想将图标与条目重叠，但不完全是条目的内容。就像我随图片发布的内容一样，你可以看到条目的内容在图标后面，我不希望发生这种情况。条目有填充吗？@ZiyadGodil更新了我的帖子。好吧，我相信你正在尝试做一些类似于经典的“显示密码”条目的事情。在这里添加你尝试过的代码。我不明白你的确切意思，但我猜你试图在条目上重叠图标。你试过Absolutelayout吗？@batmaci我有一个条目和一个图标。我想将图标与条目重叠，但不完全是条目的内容。就像我随图片发布的内容一样，你可以看到条目的内容在图标后面，我不希望发生这种情况。条目有填充吗？@ZiyadGodil更新了我的帖子。好吧，我相信你正在尝试做一些类似于经典的“显示密码”条目的事情。虽然这样做有效，但为了使图像有边框，我在其下方添加了一个boxview，但是，当单击图像时，它的结果会闪烁。我想让条目（与图像重叠）继承条目边界的原因，你不明白。你的意思是图像在单击时闪烁吗？是的，它确实闪烁，图像下方的边框在单击时闪烁。单击时是否在图像上添加动画效果？嗯，实际上不是动画，但图像会更改为其他内容。虽然这可行，但为了使图像具有边框，我在其下方添加了一个boxview，其结果单击图像时，图像会闪烁。我想让条目（与图像重叠）继承条目边界的原因，你不明白。你的意思是单击时图像会闪烁吗？是的，它会闪烁，单击时图像下方的边框会闪烁。单击时是否在图像上添加动画效果？嗯，实际上不是动画，但图像会更改为其他内容。