I'm developing an app for my Bachelor's degree for creating and managing archaeological Field Guides. One functionality should enable the user to create new Field Guides in-app. A Field guide should consist of general infos (title, author, etc.) and multiple entries for artifact-types.
I want to realize that by having one ContentPage with two views - one for the book-info, one for a list of entries. The user should be able to switch between the two views.
To achieve that I created both as ContentViews, included them into the Parent-XAML and bound their IsVisible-attributes to individual booleans in the ViewModel. Strangely "NewBookInfo" throws an exeption on initialization, while "NewBookEntryList" works just fine. I couldn't find a solution on google and am kinda grasping at straws right now...
<ColumnDefinition Width="100/3*" /> results in runtime exception in InitializeComponent():
System.FormatException
Message=One of the identified items was in an invalid format.
Source=Xamarin.Forms.Core
StackTrace:
at Xamarin.Forms.GridLengthTypeConverter.ConvertFromInvariantString(String value)
...
My Parent-Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FieldGuide.Views"
x:Class="FieldGuide.AddBook">
<StackLayout Spacing="1" VerticalOptions="Fill">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="New Guide" FontAttributes="Bold" FontSize="30"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Grid.Row="0" Grid.Column="0" />
<ImageButton Source="Return_klein.png" Grid.Row="0" Grid.Column="1" Command="{Binding ReturnCommand}"/>
<ImageButton Source="Hamburger_Icon_klein.png" Grid.Row="0" Grid.Column="2" Command="{Binding MenuCommand}"/>
</Grid>
<!--BackgroundColor="Transparent" bei Buttons einfügen-->
<local:NewBookInfo VerticalOptions="FillAndExpand" IsVisible="{Binding BookInfoVisible}"/>
<local:NewBookEntryList VerticalOptions="FillAndExpand" IsVisible="{Binding BookEntriesVisible}"/>
</StackLayout>
</ContentPage>
NewBookInfo.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FieldGuide.Views.NewBookInfo">
<ContentView.Content>
<StackLayout>
<Grid Margin="10, 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="70*"/>
</Grid.ColumnDefinitions>
<Label Text="Title" FontSize="20"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Grid.Row="0" Grid.Column="0"/>
<Label Text="Author" FontSize="20"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Grid.Row="1" Grid.Column="0"/>
<Label Text="Tags" FontSize="20"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Grid.Row="2" Grid.Column="0"/>
<Entry Grid.Row="0" Grid.Column="1"/>
<Entry Grid.Row="1" Grid.Column="1"/>
<Entry Placeholder="Separate with Comma" Grid.Row="2" Grid.Column="1"/>
</Grid>
<Grid VerticalOptions="EndAndExpand" Margin="10, 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100/3*"/>
<ColumnDefinition Width="100/3*"/>
<ColumnDefinition Width="100/3*"/>
</Grid.ColumnDefinitions>
<Button Text="Save" Grid.Row="0" Grid.Column="0"
Command="{Binding SaveBook}"/>
<Button Text="Entries" Grid.Row="0" Grid.Column="1"
Command="{Binding NewEntry}"/>
<Button Text="Discard" Grid.Row="0" Grid.Column="2"
Command="{Binding DiscardBook}"/>
</Grid>
</StackLayout>
</ContentView.Content>
</ContentView>
For comparison NewBookEntryList.xaml (ListView is not yet finished)
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FieldGuide.Views.NewBookEntryList">
<ContentView.Content>
<StackLayout>
<ListView x:Name="FileSystem" ItemsSource="{Binding Entries}" SelectedItem="{Binding SelectedEntry}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" Margin="10" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid VerticalOptions="EndAndExpand" Margin="10, 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button Text="Book Info" Grid.Row="0" Grid.Column="0"
Command="{Binding SaveBook}"/>
<Button Text="New Entry" Grid.Row="0" Grid.Column="1"
Command="{Binding NewEntry}"/>
</Grid>
</StackLayout>
</ContentView.Content>
</ContentView>
This is how I wish it to be in the end.
The problem was in the width-declaration of the last grid in NewBookInfo.xaml.But the error wasn't flagged by the built-in error-detection in VS.
Instead of
<ColumnDefinition Width="100/3*"/>
I just replaced it with
<ColumnDefinition Width="33*"/>
Thanks to #Jason, for providing help in the comments.
Related
I have a Xamarin Forms project and I'm trying to show frame shadow just like this
But instead it shows like this, the shadow is only appearing on the corners
I can't get it to show everywhere like the first picture
Here is my code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:AppCrijoya.ViewModels"
xmlns:model="clr-namespace:AppCrijoya.Models"
x:Class="AppCrijoya.Views.InvoicePage"
x:DataType="viewmodels:InvoiceViewModel"
Title="Facturas">
<!--<ContentPage.BindingContext>
<viewmodels:InvoiceViewModel />
</ContentPage.BindingContext>-->
<ContentPage.Content>
<StackLayout BackgroundColor="White">
<CollectionView x:Name="ListViewCart"
ItemsSource="{Binding ListCart}"
SelectionMode = "Single"
SelectedItem="{Binding CartSelected}"
SelectionChangedCommand="{Binding ShowAlertCommand}"
SelectionChangedCommandParameter="{Binding CartSelected, Source={RelativeSource Self}}"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Invoice">
<Frame Margin="2" CornerRadius="30" HasShadow="True">
<Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="160" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Nombre del Cliente:" VerticalOptions="Start"/>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}" VerticalOptions="Start"/>
<Image Source="arrow_dropdown.png" HeightRequest="20" WidthRequest="20" Grid.Row="0" Grid.Column="3" VerticalOptions="End"/>
<Label Grid.Row="1" Grid.Column="0" Text="Fecha Compra:" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Date}" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="0" Text="Monto Total:" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Total, Mode=TwoWay, StringFormat='{0:N2}€'}" VerticalOptions="Start"/>
<Label Grid.Row="3" Grid.ColumnSpan="3" Text="Detalle Compra" VerticalOptions="Start"/>
<BoxView Grid.Row="4" Grid.ColumnSpan="3" Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
<Label Grid.Row="5" Grid.Column="0" Text="Nombre" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="1" Text="Monto" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="2" Text="Cantidad" VerticalOptions="Start" TextColor="#9C2424"/>
<StackLayout Grid.Row="6" Grid.ColumnSpan="3" Margin="0" Padding="0">
<CollectionView x:Name="ListViewOrders"
ItemsSource="{Binding ListOrders}"
SelectionMode = "None"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:CrOrder">
<Grid RowSpacing="0" ColumnSpacing="0" Margin="0" MinimumHeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Reference}" TextColor="Black" VerticalOptions="Center" FontSize="12" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Price, StringFormat='{0:N2}€'}" TextColor="Black" VerticalOptions="End" FontSize="12" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Quantity}" TextColor="Black" VerticalOptions="End" FontSize="12"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
What can I do to show the shadow all around the frame? Please help and thanks.
EDIT
This is what I have with Margin=2 on Frame
Margin=50
Padding=50
Just to show how it behaves
At first, you can create a new frame in your project to check if the cause is the renderer or not. Such as:
<Frame Margin="20" CornerRadius="10" HasShadow="True">
<Label Text="TestShaw" HorizontalOptions="Center"/>
</Frame>
If the shadow shows correctly, the cause maybe the layout or the margin of your frame. So you can change the values of it.
If the shadow shows incorrectly too, you may need to use a custom renderer for the frame. Such as:
[assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
namespace App36.Droid
{
public class MyFrameRenderer : Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
{
public MyFrameRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
CardElevation = 50;
SetOutlineSpotShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
SetOutlineAmbientShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
}
}
}
But in my project, both of them shows correctly. So if you need more information, you can check the link following.
Link: Xamarin forms Shadow on Frame in Android
And here is the frame in my project:
If the platform is ios for your project, please check this case:Forms frame isn't the same on iOS
I create Xamarin Forms applications with the possibility of chat and i have problem with my chatPage. My code looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Chat.ChatRoomPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<RefreshView
IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"
Command="{Binding RefreshCommand}"
Grid.Row="0">
<CollectionView
x:Name="CollectionViewMessages"
ItemsSource="{Binding MessagesList}"
BackgroundColor="{ DynamicResource BasePageColor }">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="auto, auto">
<Grid IsVisible="{Binding IsOwnerMessage}">
<template:ChatRightMessageItemTemplate />
</Grid>
<Grid
Grid.Row="1"
IsVisible="{Binding IsOwnerMessage, Converter={converters:BooleanConverter}}">
<template:ChatLeftMessageItemTemplate />
</Grid>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<!-- Loading gif -->
<ActivityIndicator
Grid.Row="0"
IsRunning="{Binding IsBusy}"
HorizontalOptions="Center"
VerticalOptions="Start"
TranslationY="40"
InputTransparent="True"/>
</Grid>
<!--- Message Writing -->
<Grid
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Margin="20,10,20,10"
ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Comment -->
<Editor
Grid.Column="0"
x:Name="entry"
AutoSize="TextChanges"
Margin="0,0,5,2"
FontSize="14"
Text="{Binding Message}"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"/>
<!-- Send button -->
<Image
Grid.Column="2"
Source="SendMessageButton.png"
HorizontalOptions="End"
VerticalOptions="End"
WidthRequest="23"
HeightRequest="20"
Margin="0,0,0,10">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SendMessageCommand}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Grid>
</Grid>
</ContentPage>
the effect of this is this:
This work well on Android but on iOS nope. After clicking something on the keyboard, the field for typing escapes below it and we cannot see what we are typing. In addition, when you switch the keyboard to emoji, its size changes and you cannot see what you are typing. The input field problem is solved if you use scrollview, but then the collectionview fills the entire screen and the input field is outside of it. How to solve this problem so that autosize and emoji work properly on iOS?
The VerticalOptions="End" in my Xamarin Forms doesn't stick the items to the end of the page (which is what it should do right?), I even tried using an absolute layout with the relative position set to 1, but that didn't move the items to the end either.
Here is my Xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
x:Class="CouchTo5kTracker.HomePage">
<ContentPage.Content>
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="350"/>
</Grid.RowDefinitions>
<AbsoluteLayout x:Name="AbsoluteLayoutProgress" Grid.Row="0" HorizontalOptions="FillAndExpand">
<skia:SKCanvasView x:Name="canvasView" PaintSurface="OnCanvasViewPaintSurface" AbsoluteLayout.LayoutBounds="0, 0" AbsoluteLayout.LayoutFlags="XProportional"/>
<Label x:Name="WeekCounter" Text="3/5" FontSize="90" AbsoluteLayout.LayoutBounds="0.5, 100, 150, 150" AbsoluteLayout.LayoutFlags="XProportional"/>
<Label x:Name="WeekLabel" Text="Week" FontSize="30" AbsoluteLayout.LayoutBounds="0.5, 220, 80, 50" AbsoluteLayout.LayoutFlags="XProportional"/>
</AbsoluteLayout>
<StackLayout Grid.Row="1">
<Grid x:Name="RunGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.75*"/>
<ColumnDefinition Width="1.25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Grid.GestureRecognizers>
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="#1476D2" Padding="10,5,5,5" Margin="8,0,1,5">
<Label Text="Next Run" VerticalOptions="Center" FontSize="15" FontAttributes="Bold"/>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="#1476D2" Padding="10,5,5,5" Margin="1,0,8,5">
<Label Text="Date" VerticalOptions="Center" FontSize="15" FontAttributes="Bold"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="#F7F7F7" Padding="10,5,5,5" Margin="8,0,0,5">
<Label x:Name="NextRunLabel" Text="Next Run: Week 4, Run 3" VerticalOptions="Center" FontSize="15"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="#F7F7F7" Padding="10,5,5,5" Margin="1,0,8,5">
<Label x:Name="NextRunDateLabel" Text="12/04" VerticalOptions="Center" FontSize="15"/>
</Frame>
</Grid>
<Grid VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Frame Grid.Column="0" Grid.Row="0" VerticalOptions="End"></Frame>
<Frame Grid.Column="1" Grid.Row="0" VerticalOptions="End"></Frame>
</Grid>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
Altering the heirarchy resuts in very unexpected positioning, at the moment I just want to place the two frames at the end of the page. The App is a Xamarin Shell.
I have my view that when I open the keyboard of my cell phone it totally moves with everything and my top bar, what I need from my app that contains a chat is that the top bar is fixed and that only when the keyboard is opened do the messages move.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:common="clr-namespace:HomieApp.Views.Common;assembly=HomieApp"
xmlns:app="clr-namespace:HomieApp;assembly=HomieApp"
xmlns:helpers="clr-namespace:HomieApp.Helpers;assembly=HomieApp"
xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="HomieApp.Views.Servicio.ChatPage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="leftChatTemplate">
<ViewCell>
<common:ChatLeftMessageItemTemplate />
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="rightChatTemplate">
<ViewCell>
<common:ChatRightMessageItemTemplate />
</ViewCell>
</DataTemplate>
<helpers:ChatDataTemplateSelector x:Key="chatDataTemplateSelector"
LeftChatTemplate="{StaticResource leftChatTemplate}"
RightChatTemplate="{StaticResource rightChatTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<common:MainLabelNavigation
Grid.Row="0"
HorizontalOptions="FillAndExpand"
x:Name="bar"
IsVisibleMenu="True"
Clicked="Bar_OnClicked"></common:MainLabelNavigation>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView
x:Name="ListViewMensajes"
Grid.Row="1"
ItemsSource="{Binding Mensajes}"
SeparatorVisibility="None"
SeparatorColor="Transparent"
HasUnevenRows="True"
ItemTapped="OnItemTapped"
ItemTemplate="{StaticResource chatDataTemplateSelector}">
</ListView>
<!--- BUTTONS CONTAINER -->
<Grid
x:Name="ContainerSend"
Grid.Row="2"
ColumnSpacing="5"
Padding="0"
MinimumHeightRequest="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="55"/>
</Grid.RowDefinitions>
<app:GradientButton Grid.Row="0" Grid.Column="0"
Margin="0,0,0,0"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
Command="{Binding EnviarVideoCommand}"
ButtonType="Gray"
Text="Tomar Video"/>
<app:GradientButton Grid.Row="0" Grid.Column="1"
Margin="0,0,0,0"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
Command="{Binding EnviarImagenCommand}"
ButtonType="Gray"
Text="Tomar Foto"/>
<StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
Margin="0,0,0,15"
BackgroundColor="{ DynamicResource TranslucidOrange }"
Orientation="Horizontal">
<!--- ENTRY -->
<Entry
HorizontalOptions="FillAndExpand"
FontSize="14"
Placeholder="Escribe tu mensaje..."
Text="{Binding Path=Mensaje, Mode=TwoWay}"/>
<!--- SEND BUTTON -->
<app:FontAwesomeIcon
x:Name="SendButton"
HorizontalOptions="End"
Margin="10,0"
Text="{ x:Static app:Icon.FAPlay }"
FontSize="20"
TextColor="{StaticResource BorderTextColor}"
Style="{ StaticResource FontIcon }"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"/>
</StackLayout>
</Grid>
<app:CustomActivityIndicator
IsVisible="{Binding IsLoading}"
Grid.Row="0" Grid.RowSpan="3"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</Grid>
</Grid>
</ContentPage>
I already try changing the views in various ways, but since I am new to the development of applications in Xamarin I still do not understand or understand the view they handle very well.
I'm learning Xamarin's layout and facing the below code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp.Validators"
x:Class="MyApp.MainPage">
<StackLayout HorizontalOptions="Fill" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Entry x:Name="Username" Grid.Row="0" Placeholder="Username" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:UsernameValidatorBehavior></local:UsernameValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Password" Grid.Row="1" Keyboard="Numeric" Placeholder="Password" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:PasswordValidatorBehavior></local:PasswordValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Email" Grid.Row="2" Placeholder="Email" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:EmailValidatorBehavior></local:EmailValidatorBehavior>
</Entry.Behaviors>
</Entry>
</Grid>
<Grid VerticalOptions="End" Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"></ColumnDefinition>
<ColumnDefinition Width="5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="Submit" Grid.Row="0" Grid.Column="0" Text="Submit" Clicked="OnButtonClicked"></Button>
<Button x:Name="Cancel" Grid.Row="0" Grid.Column="1" Text="Cancel" Clicked="Cancel_Clicked"></Button>
</Grid>
</Grid>
</StackLayout>
</ContentPage>
My question is that I tried using
<Grid VerticalOptions="End" Grid.Row="1" Grid.Column="0">
to make two buttons locating at the bottom of the screen, but it shows in the middle of the screen instead. How to solve this problem?
UPDATE1
I modified the Grid and now the xaml is the below:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp.Validators"
x:Class="MyApp.MainPage">
<StackLayout HorizontalOptions="Fill" >
<Grid VerticalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Entry x:Name="Username" Grid.Row="0" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:UsernameValidatorBehavior></local:UsernameValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Password" Grid.Row="1" Grid.ColumnSpan="2" Keyboard="Numeric" Placeholder="Password" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:PasswordValidatorBehavior></local:PasswordValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Email" Grid.Row="2" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:EmailValidatorBehavior></local:EmailValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Button x:Name="Submit" Grid.Row="3" Grid.Column="0" VerticalOptions="End" Text="Submit" Clicked="OnButtonClicked"></Button>
<Button x:Name="Cancel" Grid.Row="3" Grid.Column="1"
VerticalOptions="End" Text="Cancel" Clicked="Cancel_Clicked"></Button>
</Grid>
</StackLayout>
</ContentPage>
Right now there is only one Grid with 4 rows and 2 columns. I added
VerticalOptions="End" inside two buttons.
But buttons are still not at the bottom of the screen and what is more, it is even getting worse.
The below code will work perfeclty for you, add VerticalOptions="FillAndExpand" to Grid and provide percentage height.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp.Validators"
x:Class="MyApp.MainPage">
<StackLayout HorizontalOptions="Fill">
<Grid VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="7*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Entry x:Name="Username" Grid.Row="0" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:UsernameValidatorBehavior></local:UsernameValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Password" Grid.Row="1" Grid.ColumnSpan="2" Keyboard="Numeric" Placeholder="Password" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:PasswordValidatorBehavior></local:PasswordValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Email" Grid.Row="2" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:EmailValidatorBehavior></local:EmailValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Button x:Name="Submit" Grid.Row="3" Grid.Column="0" VerticalOptions="EndAndExpand" Text="Submit" Clicked="OnButtonClicked"></Button>
<Button x:Name="Cancel" Grid.Row="3" Grid.Column="1"
VerticalOptions="EndAndExpand" Text="Cancel" Clicked="Cancel_Clicked"></Button>
</Grid>
</StackLayout>
</ContentPage>