Xamarin: Entry with Icon: Text overlapping - xaml

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>

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>

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>

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.

Related

Align Grid Columns evenly in xaml

I have the following ListView -
<StackLayout>
<ListView RowHeight="100" Margin="0,10,2,10">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,4,4,4" Padding="0,4,4,4">
<StackLayout Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="testLogo" HeightRequest="45" WidthRequest="45"/>
<StackLayout Grid.Column="1" Orientation="Vertical" >
<Label Text="test" Font="Bold" VerticalOptions="Center" />
</StackLayout>
<Button Grid.Column="2" Text="Login" HorizontalOptions="EndAndExpand" Margin="10,10,10,10"/>
</Grid>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
This is displaying a columned grid as expected however I cannot float the Button elements to the very right of their respective column.
So currently the display does not look neat in that the buttons position seems to be determined by the string length of the Label elements.
I tried adding VerticalOptions="EndAndExpand" to the Buttons"s however this had no effect.
How can I position the buttons neatly to the far right of their respective columns?
If use Grid as root layout , you can set the width of each Grid item proportionally.
As follow:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
The effect:

How can I not stretch out my image button in XAML

I have these search bars and image buttons using Xamarin Forms, but the image button is getting stretched out, and I don't know how I can fix it with the XAML set up that I have.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0" Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center"/>
<ImageButton Grid.Row="0" Grid.Column="1"
Margin="4,5,4,4"
Command="{Binding Filter}" Source="filter.png" BackgroundColor="Transparent"></ImageButton>
</Grid>
The problem is, that if I set the image button to a specific width, to make it universal among devices, I don't know how to tell XAML to just stretch the search bar up to the image. What can I do?
I have tried with shared code , however it works in my local site . I think difference should be the PNG image . To clearly show the size of the ImageButton, I added a background color to illustrate it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effect as follow :
Here is the PNG image info :
However , I can reproduce your problem with my PNG image . If I set Aspect="Fill" and Width of Column is * as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
Aspect="Fill"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effects :
About Solution , I have found three here :
First , if you can get a standard PNG file as minie , there will no problem .
Second , you can add Aspect="AspectFit" into ImageButton as Jason's suggestion .But that's not enough for your PNG image .You also need to set Width for its Column as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
Aspect="AspectFit"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effect :
Third , based on my reproduced code , adding HorizontalOptions="Center" for ImageButton also can solve it .
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
Aspect="Fill"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effect :
Although the image of three solutions shows the same , however the Bounds of their backgroud Frame is different .
use the Aspect property
<ImageButton Aspect="AspectFit" ...

Xamarin: Button being overlayed by frame

Trying to make a button that will overlay on top of a grid in xaml
<Frame Grid.Row="0" CornerRadius="15" Padding="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="**************3454" HorizontalOptions="Start" TextColor="Black" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="Verify" HorizontalOptions="End" TextColor="#A1A0E1" VerticalOptions="Center"/>
</Grid>
</Frame>
<Button Grid.Row="0" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Red" Command="{Binding VerifyCommand}"/>
However, it ends up looking like this:
underlayed button
Any thoughts on how to make the button go on top?
Place everything inside the Grid and use a Grid.ColumnSpan of 2 on your Frame and Button and of course set your Button's background to Transparent:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Grid.ColumnSpan="2" CornerRadius="15" Padding="15" BorderColor="White"/>
<Label Grid.Column="0" Text="**************3454" HorizontalOptions="Start" TextColor="Black" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="Verify" HorizontalOptions="End" TextColor="#A1A0E1" VerticalOptions="Center"/>
<Button Grid.ColumnSpan="2" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Transparent" Command="{Binding VerifyCommand}"/>
</Grid>

How to Create two button in Bottom of the screen

I want to create two buttons in the bottom of the screen using Xamarin.Forms and XAML like the image below:
I've tried to use a GridView but it's getting padding and space from two buttons.
This is how I've tried so far:
<Grid RowSpacing="0"
ColumnSpacing="0"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="0"
Text="SignUp"
FontSize="Large"/>
<Button Grid.Row="1" Grid.Column="1"
Text="LogIn"
FontSize="Large"/>
</Grid>
Try setting the Padding and Margin properties on the Gridview and Padding on the Buttons to 0. IE,
<GridView Padding="0" Margin="0" ... >
...
<Button Margin="0" ... />
I believe that buttons will not provide the desired design, once it has an inner padding, rounded corners and a mandatory uppercase on text (On Android, at least) that you can't change.
Maybe using expanded labels and gesture Recognizers give you a better fit.
Try this:
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0"
Text="Signup"
TextColor="White"
FontSize="22"
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SignupCommand}"/>
</Label.GestureRecognizers>
</Label>
<Label Grid.Column="1" Grid.Row="0"
Text="Login"
TextColor="White"
FontSize="22"
BackgroundColor="Green"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoginCommand}"/>
</Label.GestureRecognizers>
</Label>
</Grid>

How to add Entry Control inside Grid View in Xamarin Forms?

I am facing problem to add Entry inside Grid View Control. I have a list view which will have data with checkbox and entry. If user selects certain item, he can also add quantity of the item in entry. I am facing issue adding entry in grid view. Entry is only displayed half. Text is not displayed correctly. I am adding Entry in xaml as.
<StackLayout>
<Label Text="Items"></Label>
<ListView x:Name="ItemsListView" RowHeight="60">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}" Grid.ColumnSpan="2" Grid.Row="1" Margin="2" BackgroundColor="Green"></Label>
<common:CheckBox Grid.Column="3" Grid.Row="1" HeightRequest="20" WidthRequest="20"
VerticalOptions="Center" Checked="{Binding isChecked ,Mode=TwoWay}"
CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked"
CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry Grid.Column="3" Grid.Row="1" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Done" HorizontalOptions="CenterAndExpand"
CommandParameter="{Binding .}" Clicked="Button_Clicked"/>
</StackLayout>
I am getting following output.
Control with purple background is my Entry. Text is not displayed correctly. Any help will be appreciated. Thanks in advance.
I have already posted question in Xamarin Forums here.
<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Text="Apple" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="2" VerticalTextAlignment="Center" BackgroundColor="Green" />
<Switch Grid.Row="0" Grid.Column="2" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Brown" />
<Entry Text="CountStr" Grid.Row="0" Grid.Column="3" IsEnabled="false" HorizontalOptions="Center" FontSize="Small" BackgroundColor="Purple"/>
</Grid>
Note: I sub'd in a Switch vs. your 3rd-party Checkbox
use StackLayout like this
<StackLayout Padding="5,0" Orientation="Horizontal">
<Label Text="{Binding Title}" WidthRequest="120" Margin="2" BackgroundColor="Green"/>
<common:CheckBox HeightRequest="20" WidthRequest="20" Checked="{Binding isChecked, Mode=TwoWay}" CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked" CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry WidthRequest="120" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</StackLayout>
you can change the Size using the WidthRequest property and HorizontalOption="FillAndExpand"