How to separate Entry and Image using Grid within a Frame? - xaml

Question

I'm making an Entry that has an Image on the right inside it.
The problem I have is that the text is placed behind the Image, what I want to do is that the text is cut off when it reaches the Image, separate the entry from the Image. I am using a Frame and inside it, a Grid. I have tried to put right margin to Entry but the Image is scrolling out. To do the Entry I am using the NuGet: Xamarin.Forms.Visual.Material
This is my code:
<StackLayout>
<Frame BackgroundColor="Transparent" HasShadow="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Entry
x:Name="entrycontrol"
BackgroundColor="{Binding Source={x:Reference ValidateView}, Path=BGColor}"
HeightRequest="60"
Visual="Material"
WidthRequest="{Binding Source={x:Reference ValidateView}, Path=Width}" />
<Image
x:Name="ImageRight"
Grid.Column="0"
Margin="0,0,5,0"
HeightRequest="25"
HorizontalOptions="End" />
</Grid>
</Frame>
</StackLayout>
The Source of the Image I establish it in the code behind.

Answer 1

Your main issue is that you are overlaying your Image on top of the Entry control. You need to specify a Grid.Column="1" so it uses the right hand column. A detailed explanation of how a Grid layout works can be found on Microsofts site
I would suggest that you do not need to bind the WidthRequest property for the Entry control. Plus I would swap your column definitions around. Auto means the column will grow in size, * means it will stretch to a size based on what other columns have been defined.
To summarise you want something like:
<StackLayout>
<Frame BackgroundColor="Transparent" HasShadow="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" /> <!-- swapped -->
<ColumnDefinition Width="Auto" /> <!-- swapped -->
</Grid.ColumnDefinitions>
<Entry x:Name="entrycontrol"
BackgroundColor="{Binding Source={x:Reference ValidateView}, Path=BGColor}"
HeightRequest="60"
Visual="Material" />
<Image x:Name="ImageRight"
Grid.Column="1"
Margin="0,0,5,0"
HeightRequest="25"
HorizontalOptions="End" />
</Grid>
</Frame>
</StackLayout>
Better yet if you have a fixed image size then you can simply set your ColumnDefinition to that size.