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>
Related
I want to make a UI like this:
This UI should correspond to different phone screen sizes.
I started to write this XAML code:
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame BackgroundColor="Transparent"/>
</Grid>
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10"/>
</Grid>
<Grid Grid.Row="1" Padding="0,40,0,0">
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10"/>
</Grid>
</Grid>
<Entry Grid.Row="0" Grid.Column="1" MaxLength="30" Placeholder="User Name:" ClearButtonVisibility="WhileEditing"/>
<Entry Grid.Row="1" Grid.Column="1" MaxLength="30" Placeholder="Password:" ClearButtonVisibility="WhileEditing" IsPassword="True"/>
<Image Source="User.png" Scale="0.6"/>
<Image Source="Lock.png" Scale="0.6"/>
<Button Text="Login"/>
</StackLayout>
I know that Those images must be in the Grid node above. But I cannot set those Entry and user/pass logos correctly. Those buttons are images in the resource folder.
Please help me to set a UI similar to this image.
One grid is enough, you can remove one.
You can refer to the following code:
<StackLayout BackgroundColor="#1E90FF" Orientation="Vertical">
<Grid Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="0" Grid.ColumnSpan="2" />
<Entry Grid.Row="0" Grid.Column="0" MaxLength="30" Placeholder="User Name:" ClearButtonVisibility="WhileEditing" />
<Image Source="head.png" Scale="0.6" Grid.Row="0" Grid.Column="1"/>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="1" Grid.ColumnSpan="2"/>
<Entry Grid.Row="1" Grid.Column="0" MaxLength="30" Placeholder="Password:" ClearButtonVisibility="WhileEditing" IsPassword="True"/>
<Image Source="Lock.png" Scale="0.6" Grid.Row="1" Grid.Column="1"/>
</Grid>
<Button Text="Login"/>
</StackLayout>
The result is:
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" ...
I have the following image below which I have tried to design in XAML- Xamarin forms.
The xaml code is as follows:
<ListView x:Name="myList" HasUnevenRows="true" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#edeeef" BorderColor="#edeeef">
<Frame.Content>
<Frame OutlineColor="Transparent" BackgroundColor="White">
<Frame.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding ItemName}"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"/>
<Label Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)" FontSize="11" HorizontalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal">
<Button Text="OBD" />
<Button Text="CUS" />
</StackLayout>
</StackLayout>
<BoxView
VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
HeightRequest="5"
Color="Blue"
Grid.Row="0"
Grid.Column="1"/>
<ffsvg:SvgCachedImage
Aspect="AspectFit"
VerticalOptions="Center"
Source="Bin.png"
Grid.Column="2"
Grid.Row="0"
/>
</Grid>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The issue that I am having is that I am unable to draw the vertical right line separating the content and the square red box on the right.
When I am adding the image, it is adding extra padding on the bottom.
Can someone please help me to align the components properly as in the image above in XamarinForms? Thanks.
Your design is quite messed up and should be cleaned up
Within the ViewCell, you have two nested Frames, which causes the main issue: There is a padding on the inner Frame that and on the outer one, which prevent the separator to take the full height
A nested Grid and StackLayout is most likely not necessary and definitely detrimental for your performance
Suggestions:
Remove the outer Frame and add a Margin to the inner one
Set the Padding of the inner frame to 0
Remove the StackLayout wrapped in the Grid and add the controls to the Grid
Add the Grid.RowSpan and Grid.ColumnSpan for controls that take more height/width in the Grid
Your XAML within the ViewCell will look like this:
<Frame Padding="0"
Margin="5"
BorderColor="Transparent"
BackgroundColor="White"
CornerRadius="10">
<Grid ColumnSpacing="0" RowSpacing="5" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="ItemName"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"
Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="2"
Margin="10,10,10,0" />
<Label Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)"
FontSize="11"
HorizontalOptions="StartAndExpand"
Margin="10,0,0,0" />
<Button Text="OBD"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="0"
Margin="10,0,5,10" />
<Button Text="CUS"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="1"
Margin="0,0,10,10" />
<BoxView VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
Color="LightPink"
Margin="0"
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="3" />
<Image Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="End"
Source="http://lorempixel.com/output/abstract-q-c-200-200.jpg"
Grid.Column="3"
Grid.Row="0"
Grid.RowSpan="3"
Margin="10"/>
</Grid>
</Frame>
And eventually the design looks like that (There is still space for tweaking, but basically that's it. I've changed the colors a bit for better visibility):
Follow this Code.
<Grid Grid.Row="3" Padding="{StaticResource Padding15050}">
<ListView x:Name="ListViewFood" ItemsSource="{Binding FoodList}" HasUnevenRows="True" ItemSelected="OnSelection" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="{StaticResource Padding510}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Controls:Label x:Name="LabelName" Grid.Row="0" Text = "{Binding Name}" Font="17" TextColor="{StaticResource Black}"/>
<Controls:Label x:Name="LabelDescription" Grid.Row="1" Text = "{Binding Description}" Font="15" />
<Controls:Label x:Name="LabelPrice" Grid.Row="2" Text = "{Binding Price}" Font="15" TextColor="{StaticResource YetiBlue}"/>
</Grid>
<Grid Grid.Column="1">
<Controls:RectangleButton Text="Add" Font="Bold,15" VerticalOptions="Start" HorizontalOptions="EndAndExpand" CommandParameter="{Binding Id}" Clicked="RectangleButton_Clicked"/>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Design like this.
If you want to add a separate line, you just need to add a BoxView in your xaml with WidthRequest=1.
I always use this solution for separating content.
In your case I would suggest to delete HeightRequest in your BoxView.
I have a grid view and I want to add a button in bottom of my screen
I have used following code:
[![enter image description here][1]][1]
<Grid>[![enter image description here][2]][2]
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="88*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" BackgroundColor="White">
<Grid Grid.Column="1" Grid.Row="0" BackgroundColor="White">
<Grid Grid.Row="1" BackgroundColor="#f24245" HorizontalOptions="FillAndExpand">
<Button Text="Lookupjshgkdfjghkdjfghdkjfhgdlfkjghfk" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="Large" BackgroundColor="#f24245"/>
</Grid>
</Grid>
[1]: https://i.stack.imgur.com/vsEn9.png
[2]: https://i.stack.imgur.com/TazCg.png
Please Add Grid.ColumnSpan="2" Like,
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="88*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" BackgroundColor="White">
<!--Place you code Here-->
</Grid>
<Grid Grid.Column="1" Grid.Row="0" BackgroundColor="White">
<!--Place you code Here-->
</Grid>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f24245" HorizontalOptions="FillAndExpand">
<Button Text="Lookupjshgkdfjghkdjfghdkjfhgdlfkjghfk" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="Large" BackgroundColor="#f24245"/>
</Grid>
</Grid>
Use VerticalOptions="End"
Example:
<Grid Padding="20" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="0.7*" />
<RowDefinition Height="0.3*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- row 0 -->
<Image Grid.Row="0" Source="icon-76.png" WidthRequest="150" HeightRequest="150" />
<!-- row 1 -->
<StackLayout Grid.Row="2" VerticalOptions="End">
<Button Margin="0,5,0,5" Text="Button at the bottom" BackgroundColor="#4a4acd" TextColor="White" FontAttributes="Bold" />
</StackLayout>
</Grid>
This will give you the following view:
Video showing the simulator: https://youtu.be/3ajany0iaCw
The codes:
<Grid HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Switch Grid.Column="0"
HorizontalOptions="Center"
IsToggled="{Binding SwitchToggled}"/>
<Label Grid.Column="1"
HorizontalOptions="Center"
Text="{Binding SwitchToggled,
Converter={StaticResource Key=boolToStrConv}}"/>
<Switch Grid.Column="0" Grid.Row="1"
HorizontalOptions="Center"
x:Name="switch2"/>
<Label Grid.Column="1" Grid.Row="1"
HorizontalOptions="Center"
Text="{Binding Source={x:Reference switch2},
Path=IsToggled,
Converter={StaticResource Key=boolToStrConv}}"/>
</Grid>
My expectation is that no matter how the Label's text length is changed, it would both be centered - considering that both of them has a HorizontalOptions Center.
Why did this happened and how do I fix this?
You need to look at the container that is grid is within and the fact that you are centering (floating) your grid within that container.
Assign a background color to your grid and a different one to its container and you will see that its size depends upon what it is contains since you are * (star) its size and the grid itself is "floating" in the center of its container, change the contents of the grid, the size of the grid changes:
<Grid VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
<Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
<Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>
Lock the grid to fill its parent's width (via StartAndExpand in my example) and changing your label's text content will not cause your toggle's start position to move...
<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
<Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
<Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>