I want to align the label and switch in xamarin forms. I used grid but the label and switch wont align (see image for reference)
Here is my XAML:
<Grid>
<Label Grid.Row="0" Grid.Column="0" Text="Rekorida" StyleClass="lbl-fieldform">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="HelveticaNeueLTPro-Lt.otf#HelveticaNeueLTPro-Lt"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Switch Grid.Row="0" Grid.Column="1" VerticalOptions="Start" x:Name="swRekorida" Toggled="Activity_Toggled"/>
</Grid>
Use this:
<Grid VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Label VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" Text="Rekorida" StyleClass="lbl-fieldform">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="HelveticaNeueLTPro-Lt.otf#HelveticaNeueLTPro-Lt"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Switch Grid.Row="0" Grid.Column="1" VerticalOptions="Center" x:Name="swRekorida" Toggled="Activity_Toggled"/>
</Grid>
Related
I have a xamarin.forms app in which I am using shell. The problem I am facing is when I navigate from shell bottom navigation to any inner page and navigate back to previous page there is a flicker occurring.Please refer the screen record https://drive.google.com/open?id=1861iNlcV7ao6oDUNu7nL4WiyFuWjwXx_.
My Shell Page
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Shell.NavBarIsVisible="False"
xmlns:local="clr-namespace:PaTS.Views"
x:Class="SampleApp.AppShell">
<TabBar>
<Tab Title="Dashboard" Icon="icon_dashboard.png" >
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
<Tab Title="Notifications" Icon="icon_notifications.png">
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
<Tab Title="Account" Icon="icon_user.png">
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
</TabBar>
</Shell>
Dashboard 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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:local="clr-namespace:sample.CustomRender"
mc:Ignorable="d"
BackgroundColor="#004d6f"
Title="Dashboard"
x:Class="sample.Views.Dashboard">
<ContentPage.Content>
<Grid>
<!--<Image Aspect="AspectFill" >
<Image.Source>
<OnIdiom x:TypeArguments="FileImageSource" Tablet="cover.jpg" Phone="loginbackground_phone.jpg" />
</Image.Source>
</Image>-->
<Grid >
<Grid.RowDefinitions >
<RowDefinition Height="0.9*"/>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="#004d6f">
<StackLayout BackgroundColor="Transparent" IsClippedToBounds="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Grid HorizontalOptions="Start" VerticalOptions="Center">
<controls:CircleImage
BorderColor="LightBlue"
BorderThickness="2"
Source="sampleuser.png"
Aspect="AspectFill">
<Image.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="20,30,15,0" />
<On Platform="Android" Value="20,15,15,0" />
</OnPlatform>
</Image.Margin>
<Image.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="60" Phone="30" />
</Image.HeightRequest>
</controls:CircleImage>
<controls:CircleImage
x:Name="UserImage"
BorderColor="LightBlue"
BorderThickness="2"
Source="sampleuser.png"
Aspect="AspectFill">
<Image.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="20,30,15,0" />
<On Platform="Android" Value="20,15,15,0" />
</OnPlatform>
</Image.Margin>
<Image.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="60" Phone="30" />
</Image.HeightRequest>
</controls:CircleImage>
</Grid>
<Label Text="Welcome" HorizontalOptions="Start" VerticalOptions="Center" MaxLines="1" TextColor="White">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="14" Phone="11" />
</Label.FontSize>
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,30,0,0" />
<On Platform="Android" Value="0,15,0,0" />
</OnPlatform>
</Label.Margin>
</Label>
<Label x:Name="UserName" MaxLines="1" Text="User" HorizontalOptions="Start" VerticalOptions="Center" TextColor="LightBlue">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="14" Phone="11" />
</Label.FontSize>
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,30,0,0" />
<On Platform="Android" Value="0,15,0,0" />
</OnPlatform>
</Label.Margin>
</Label>
</StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="icon_xamarin_logo.png" HorizontalOptions="CenterAndExpand" Margin="0,25,0,0">
</Image>
<Label Grid.Row="1" Text="Sample App" TextColor="White" FontSize="30" Margin="10,5,10,5" HorizontalTextAlignment="Center" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Label Grid.Row="2" Text="Sample app details™" TextColor="Snow" FontSize="Medium" Margin="10,5,10,10" HorizontalTextAlignment="Center" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</StackLayout>
</Grid>
<Image Grid.Row="1" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Source="CurvedMask.jpg" Margin="-6,0,-6,-6"></Image>
<StackLayout Grid.Row="2" BackgroundColor="White">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" Margin="15">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="6">
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="Timesheet_Tapped"
NumberOfTapsRequired="1" />
</Frame.GestureRecognizers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_timesheet.png" Grid.Row="0"></Image>
<Label Text="Timesheets" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" CornerRadius="6">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_employee.png" Grid.Row="0"></Image>
<Label Text="Employees" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" CornerRadius="6">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_graph.png" Grid.Row="0"></Image>
<Label Text="Analysis" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" CornerRadius="6">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_info.png" Grid.Row="0"></Image>
<Label Text="Info" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
</Grid>
</Frame>
</StackLayout>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
Page navigation
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Dashboard : ContentPage
{
public Dashboard()
{
InitializeComponent();
}
private async void Timesheet_Tapped(object sender, EventArgs e)
{
await Navigation.PushAsync(new TimesheetList(),true);
}
}
When I navigate to TimesheetList and press back button, It will slide back to dashboard with little flicker. How to resolve this? Any help is appreciated.
I test the code you provided. In the Dashboard page, there is no code you used to for Timesheet_Tapped event.
Try the code below, it works well on my side.
<Image Source="icon_timesheet.png" Grid.Row="0" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Timesheet_Tapped"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
I have the same issue, but in the android emulator Android 9.0 fickering not happend, in my case only Samsung s8, s8+, s9, s9+, s10, s10+ devices.
In this bug report:
https://github.com/xamarin/Xamarin.Forms/issues/8581
That guy finds a workaround, delete animation:
protected override bool OnBackButtonPressed() {
Current.Navigation.PopAsync(false);
return true;
}
I trying to create a UI something just like this (as a reference).
but I am having a trouble to get the design. I used grid but I keep getting this result. I set the Grid row definitions to 80* and 20* and still not getting the result I wanted. My idea is the design to be in percentage rather that set a specific height. If I can't use percentage is there a way to make my UI responsive for different screen size and orientation? Is there a way I can achieve this?
Here is my XAML Code:
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Label StyleClass="brand" Text="TBS">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagetitle" Text="TBS Point of Sale">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button StyleClass="btn" Text="Login" x:Name="btnLogin">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
</OnPlatform>
</Button.FontFamily>
</Button>
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Remove the StackLayout outside of your content Grid. The Grid won't take the whole space of the StackLayout so that it looks the percentage is wrong:
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Label StyleClass="brand" Text="TBS">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagetitle" Text="TBS Point of Sale">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button StyleClass="btn" Text="Login" x:Name="btnLogin">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
</OnPlatform>
</Button.FontFamily>
</Button>
</StackLayout>
</Grid>
</ScrollView>
Moreover, I think the scroll view can be removed too if you don't want your screen to scroll.
Or you can try to add <Grid VerticalOptions="FillAndExpand"> to make your Grid fill full of the StackLayout.
Why is only half of the text being displayed in the labels at the bottom?
This is my xaml. The listview area is 300, and each listview row is 100 (set in <On Platform="Android">100</On>).
Each ViewCell has 4 rows, with each row being 25, for a total of 100 (the listview row height).
So I don't understand why only half of the text at the bottom is displayed, or why the space taken up by row 0 & 1 of column 2 isn't exactly half of the total height.
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" x:Name="MapGrid">
<maps:Map WidthRequest="960" HeightRequest="100"
x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
<StackLayout Grid.Row="1" x:Name="listSection" HeightRequest="300">
<ListView x:Name="ListView_Pets">
<ListView.RowHeight>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="Android">100</On>
</OnPlatform>
</ListView.RowHeight>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Label Text="Name" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
<Label Text="Address" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
<Label Text="Price1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="2"/>
<Label Text="Price2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="2"/>
<Label Text="Tag1" Grid.Row="0" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<Label Text="Tag2" Grid.Row="1" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<StackLayout Grid.Row="3" Grid.Column="0">
<StackLayout Orientation="Horizontal" >
<Label Text="Text1" FontSize="10" VerticalTextAlignment="Start" TextColor="Black" />
<Label Text="Text2" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
<Label Text="Text3" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
</StackLayout>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Here's the screenshot:
This is because of the Grid inside your ViewCell has a RowSpacing and ColumnSpacing defaults. To override this, just set <Grid RowSpacing=0 ColumnSpacing=0>
I have a customized ScrollView as per the requirement which is based on the TLScrollView.
Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.
Now the same code works like a charm on Android but iOS is showing this weird behaviour,
Xaml:
<controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">
<controls:TLScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
<Grid BackgroundColor="White" InputTransparent="true" RowSpacing = "0" ColumnSpacing = "0">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
VerticalOptions="Center" Aspect="AspectFill" />
<Label x:Name="lblRecommendationsName" Margin="0" Text="{Binding CategoryName}"
LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
Grid.Column="0" Style="{StaticResource RecommendationName}">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="OpenSans-Light" />
<On Platform="Android" Value="OpenSans-Light" />
</OnPlatform>
</Label.FontFamily>
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="#000000"></On>
</OnPlatform>
</Label.TextColor>
</Label>
<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>
</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
CommandParameter="{Binding CategoryId}"
/>
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:TLScrollView.ItemTemplate>
</controls:TLScrollView>
First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.
The part of the image that is unclickable is inside the black box everywhere else the click event works well.
It may have nothing to do with this problem but I think "Grid.RowSpan" of BoxView may cause problem.
The Grid have only three rows(0-2 rows) definitions but BoxView specified to merge 1 to 4 rows.
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="45.0*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
BackgroundColor="{StaticResource separator_color}"
Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
</BoxView>
Well, I am not sure what was causing the issue but updating to the latest version of Xamarin.Forms fixed the bug!
I updated to Xamarin.Forms version 4.5.0.396
Feel free to get back if you are facing a similar issue.
I have a xaml, which has a grid with listview and button, and at the
moment of compiling this error appears:
Error: Specified cast is not valid.
I think the problem may be in the listview that is inside the grid, but I have not really been able to find a solution
this is my xaml:
<?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="FCR.App.Views.AdvanceSearchResultPage" Title="AdvanceSearchResultPage" xmlns:extended="clr-namespace:FCR.App.ExtendedClasses;assembly=FCR.App">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 10, 0, 0" WinPhone="20,20,20,20" />
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout VerticalOptions="StartAndExpand">
<ContentView IsVisible="false" x:Name="TitleHC">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="9.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="blue_circle.png" Grid.Column="0" />
<StackLayout Padding="0,4,0,5" VerticalOptions="Fill" Grid.Column="1">
<Label VerticalOptions="CenterAndExpand" TextColor="#0368b1" Text="Histórico de conéxiones" FontSize="20">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>FrutigerLTStd-Cn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-Cn.otf#FrutigerLTStd-Cn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</Grid>
</ContentView>
<ContentView IsVisible="false" x:Name="TitleHM">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="9.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="blue_circle.png" Grid.Column="0" />
<StackLayout Padding="0,4,0,5" VerticalOptions="Fill" Grid.Column="1">
<Label VerticalOptions="CenterAndExpand" TextColor="#0368b1" Text="Histórico de módificaciones" FontSize="20">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>FrutigerLTStd-Cn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-Cn.otf#FrutigerLTStd-Cn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</Grid>
</ContentView>
<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentView x:Name="contentListView" IsVisible="true" Padding="0,10,0,0" BackgroundColor="White" Grid.Row="0">
<ListView x:Name="resultListView" BackgroundColor="White" HasUnevenRows="true" HorizontalOptions="FillAndExpand" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout BackgroundColor="White" Padding="0" Opacity="90">
<ContentView Padding="1,0,1,1" BackgroundColor="Gray">
<Grid
BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*">
</ColumnDefinition>
<ColumnDefinition Width="0.15*">
</ColumnDefinition>
<ColumnDefinition Width="0.15*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Label Margin="-5" Text="{Binding NombreCompleto}" TextColor="Gray" Font="Bold,13" />
<Label Margin="-5"
Text="{Binding OrganizacionMayusculas}" TextColor="Gray" FontSize="13" />
<Label Margin="-5" Text="{Binding Region}" TextColor="Gray" FontSize="13" />
</StackLayout>
<Label Margin="0,0,0,2" Text="Detalle" Grid.Column="1"
Font="Bold, 13" ClassId="{Binding IdContacto}" TextColor="Gray" VerticalOptions="End">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" iOS="8">
<OnPlatform.iOS>FrutigerLTStd-BoldCn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-BoldCn.otf#FrutigerLTStd-BoldCn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerDetail" />
</Label.GestureRecognizers>
</Label>
<Label Margin="0,0,0,2" Text="Borrar" Grid.Column="2"
Font="Bold, 13" ClassId="{Binding IdContacto}" TextColor="Gray" VerticalOptions="End">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" iOS="8">
<OnPlatform.iOS>FrutigerLTStd-BoldCn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-BoldCn.otf#FrutigerLTStd-BoldCn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerDelete" />
</Label.GestureRecognizers>
</Label>
</Grid>
</ContentView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentView>
<StackLayout>
<extended:CustomButton Text="Volver" Grid.Row="1" x:Name="dismissbutton" Clicked="OnDismissButtonClicked" WidthRequest="100" Style="{StaticResource buttonStyle}" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The problem
Generally these sort of error you might find while working with data binding. While we are trying to bind a different type with some controls which the complier is not exactly expecting.
There are few places I could find the binding little odd -
ClassId="{Binding IdContacto}"
I am not sure whether you are binding correctly or not. If I were you I would have removed all the ClassId bindings and then go ahead with build compiling the process.
Also I would try to comment out the OnPlatform code and build/compile/Run the project.
These are some long shots which you may try. After looking at the whole Stacktrace may be we will be able to diagnose more towards the exact issue.