How to design a button from bottom of my Grid in Xamarin.forms - xaml

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:

Related

How to set controls in Xamarin Form to get a similar and relative UI in every phone screen sizes?

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:

Replace a FlexLayout with a StackLayout

I have a Grid with two rows in Auto within a CollectionView. In one I have a FlexLayout, in the other a Label. For some strange problem, with these two controls the Label is not displayed and the only way I have found so far is to replace the FlexLayout with a StackLayout.
<DataTemplate>
<yummy:PancakeView CornerRadius="15">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="LightBlue" Offset="10,10"/>
</yummy:PancakeView.Shadow>
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27"/>
<RowDefinition Height="27"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="32"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Margin="4,4,4,7" Source="{Binding Umore}" VerticalOptions="Center"/>
<Label Grid.Row="0" FontFamily="FontM" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center" />
<Label Grid.Row="1" FontFamily="FontM" Grid.Column="1" Text="{Binding Orario}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="LightGray" HeightRequest="10" Progress="1" VerticalOptions="End"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="{Binding ColoreUmore}" HeightRequest="10" Progress="{Binding ProgValore}" VerticalOptions="End"/>
<FlexLayout
Grid.Row="2"
Margin="0,5,10,0"
Grid.Column="1"
BindableLayout.ItemsSource="{Binding IconDiaries}"
Wrap="Wrap"
JustifyContent="Start"
Direction="Row"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid Padding="0,2,3,0">
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<controls:TintedImage Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="2" TintColor="{Binding ColoreUmore}"/>
<Label Grid.Row="0" Grid.Column="1" FontFamily="FontM" Text="{Binding id}" TextColor="{DynamicResource TextColor}" Opacity="0.9" FontSize="13" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<Label Grid.Row="3" Grid.Column="1" FontFamily="FontM" TextColor="{DynamicResource TextColor}" FontSize="16" Text="{Binding Nota}"/>
Result
Is there any way to turn this FlexLayout into a StackLayout and be able to visualize in the same way?
Use * instead of Auto for your FlexLayout row.
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27" />
<RowDefinition Height="27" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- elements -->
</Grid>

Xamarin Forms Center Grid horizontal

I have a problem. I am trying to achieve the following Grid:
To do that, I thought that I should set both the ColumnWidth to Auto and set the HorizontalOptions of the Grid to Center, so the Grid is centred in the middle of the screen creating equal spaces at the left and right side, but no matter what I try, I can't seem to move the columns from the right side. Here is what I have now:
And here is my code:
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" TextColor="White" FontSize="18"/>
<Label Grid.RowSpan="2" Grid.Column="2" Text="-$476.22 (-4.77%)" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Red" FontSize="18" Margin="15,0,0,0"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>
How can I create my wanted result?
Can you try this?
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" Text="-$476.22 (-4.77%)" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>

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>

Both Label in Grid (same column, diff row) move when text changed. Why?

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>