Xamarin Forms Android Views Inflate Exception - xamarin

In my forms project, when navigating to the shell page from content page , i am getting Unhandled Exception: Android.Views.InflateException: <Timeout exceeded getting exception details>
. I am using visualstudio 2017 community version.Important thing is there is no error when using visualstudio 2019 community edition.This happened after merging with a sub branch.I have tried deleting bin,obj folders, downgrading xamarin version etc.Nothing found useful.I am stuck at this point.Please help...
AppShell.xaml
<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"
FlyoutBehavior="Flyout"
FlyoutIsPresented="True"
xmlns:local="clr-namespace:WeCareMobility.Views"
Title="WeCareMobility" FlyoutBackgroundColor="DarkBlue"
x:Class="WeCareMobility.AppShell">
<!--Styles and Resources-->
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#002060</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<ShellItem >
<ShellSection>
<ShellContent>
<local:HomePage />
</ShellContent>
</ShellSection>
</ShellItem>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="White" HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="steering_logo.png"/>
<Label Grid.Column="1" Text="Copiloto" FontSize="Large" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center"/>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<Shell.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="Transparent">
<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>
<Button Text="Change language" Clicked="Lan_Btn_Clicked" Style="{StaticResource FlyoutButtonStyle}"/>
<Button Grid.Row="1" Text="Trip History" Clicked="LblTripHis_Tapped" Style="{StaticResource FlyoutButtonStyle}"/>
<Button Grid.Row="2" Text="Select Vehicle" Clicked="SelectVehicleTapped" Style="{StaticResource FlyoutButtonStyle}"/>
<Button Grid.Row="3" Text="Ask a service" Clicked="Service_Tapped" Style="{StaticResource FlyoutButtonStyle}"/>
<Button Grid.Row="4" Text="Bluetooth Connection" Clicked="Connection_Tapped" Style="{StaticResource FlyoutButtonStyle}"/>
<Button Grid.Row="5" Text="Change Password" Clicked="ResetPasswordTapped" Style="{StaticResource FlyoutButtonStyle}"/>
<Button Grid.Row="6" Text="About Us" Clicked="AboutUs_Tapped" Style="{StaticResource FlyoutButtonStyle}"/>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
</Shell>
AppShell.xaml.cs
namespace WeCareMobility
{
public partial class AppShell : Xamarin.Forms.Shell
{
public AppShell()
{
InitializeComponent();
}
}
HomePage.xaml
<ScrollView>
<Label VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Margin="0,30,0,0" FontSize="Medium" FontAttributes="Bold">
<Label.FormattedText>
<FormattedString>
<Span Text="{i18n:Translate Speed}" />
<Span Text="{Binding CurrentSpeed , StringFormat=' : {0:F1} km/h '}" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label Text="{Binding VehicleName}" TextColor="Black" FontAttributes="Bold" FontSize="Medium" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Label.GestureRecognizers>
</Label>
<Frame Grid.Row="1" BackgroundColor="White" CornerRadius="10" HasShadow="True" HorizontalOptions="FillAndExpand">
<Grid Margin="5,5,5,0" ColumnSpacing="10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.ColumnSpan="2" Text="{i18n:Translate Scoring}" FontAttributes="Bold"/>
<Label Grid.Column="2" Text="Month" FontSize="Small" TextColor="SkyBlue" HorizontalOptions="End"/>
<Image Grid.Column="3" Source="triangle.png" HeightRequest="15" WidthRequest="15" HorizontalOptions="Start"/>
<StackLayout Grid.Row="1" Grid.ColumnSpan="4" HorizontalOptions="FillAndExpand" Margin="0,0,0,10">
<!--<chart:SfChart>
<chart:SfChart.Title>
<chart:ChartTitle Text="Project Cost Breakdown"/>
</chart:SfChart.Title>
<chart:SfChart.BindingContext>
<viewmodel:DoughnutSeriesViewModel />
</chart:SfChart.BindingContext>
<chart:SfChart.Legend>
<chart:ChartLegend IconHeight="0" IconWidth="0" DockPosition="Bottom" />
</chart:SfChart.Legend>
<chart:SfChart.Series>
<chart:DoughnutSeries ItemsSource="{Binding DoughnutSeriesData}" XBindingPath="Name" YBindingPath="Value" TrackBorderColor="{Binding TrackColor}" LegendIcon="None" IsVisibleOnLegend="False" DoughnutCoefficient="0.8">
<chart:DoughnutSeries.DataMarker>
<chart:ChartDataMarker ShowLabel="False">
<chart:ChartDataMarker.LabelStyle>
<chart:DataMarkerLabelStyle LabelFormat="##'M'"/>
</chart:ChartDataMarker.LabelStyle>
</chart:ChartDataMarker>
</chart:DoughnutSeries.DataMarker>
<chart:DoughnutSeries.ColorModel>
<chart:ChartColorModel Palette="Natural" />
</chart:DoughnutSeries.ColorModel>
<chart:DoughnutSeries.CenterView>
<Label Text="50" TextColor="Black" FontAttributes="Bold" FontSize="30" FontFamily="Helvetica" HorizontalTextAlignment="Center"/>
</chart:DoughnutSeries.CenterView>
</chart:DoughnutSeries>
</chart:SfChart.Series>
</chart:SfChart>-->
</StackLayout>
<Label Grid.Row="2" Text="Best Grade" FontAttributes="Bold"/>
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="Worst Grade" FontAttributes="Bold"/>
<Label Grid.Row="3" Text="Cornering"/>
<Label Grid.Row="3" Grid.Column="1" Text="Phone Distraction" Grid.ColumnSpan="2"/>
</Grid>
</Frame>
<Frame Grid.Row="2" BackgroundColor="White" CornerRadius="10" HasShadow="True" HorizontalOptions="FillAndExpand">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<!--<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>-->
</Grid.ColumnDefinitions>
<Label Grid.ColumnSpan="9" Text="Current Trip" FontAttributes="Bold"/>
<Image Grid.Row="1" Grid.ColumnSpan="9" Source="wecare_map.png" HorizontalOptions="FillAndExpand"/>
<Label Grid.Row="2" Grid.ColumnSpan="9" Text="Holborn, London UK"/>
<Label Grid.Row="3" Text="Distance" FontSize="12"/>
<Label Grid.Row="3" Grid.Column="1" Text="120" FontSize="12"/>
<Label Grid.Row="3" Grid.Column="2" Text="km" FontAttributes="Bold" FontSize="12"/>
<!--<Label Grid.Row="3" Grid.Column="3" Text="m" TextColor="Transparent" BackgroundColor="Transparent"/>-->
<Label Grid.Row="3" Grid.Column="3" Text="1h02" FontAttributes="Bold" HorizontalOptions="End" FontSize="12"/>
<Label Grid.Row="3" Grid.Column="4" Text="Duration" HorizontalOptions="Start" FontSize="12"/>
<!--<Label Grid.Row="3" Grid.Column="6" Text="m" TextColor="Transparent" BackgroundColor="Transparent" HorizontalOptions="Start"/>-->
<Label Grid.Row="3" Grid.Column="5" Text="3" FontAttributes="Bold" HorizontalOptions="End" FontSize="12"/>
<Image Grid.Row="3" Grid.Column="6" Source="error.png" HeightRequest="15" WidthRequest="15" HorizontalOptions="Start"/>
</Grid>
</Frame>
<Frame Grid.Row="3" BackgroundColor="DarkBlue" CornerRadius="10" HasShadow="True" HorizontalOptions="FillAndExpand">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="Summary" TextColor="White" FontAttributes="Bold"/>
<Label Grid.Column="1" Text="Month" FontSize="Small" TextColor="SkyBlue" HorizontalOptions="End"/>
<Image Grid.Column="2" Source="triangle.png" HeightRequest="15" WidthRequest="15" HorizontalOptions="Start"/>
<!--<flv:FlowListView Grid.Row="2" Grid.ColumnSpan="3" FlowColumnCount="2" SeparatorVisibility="None" HasUnevenRows="True"
FlowItemsSource="{Binding TempList}">
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Frame BackgroundColor="Transparent">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Source="{Binding ImgSource}" HeightRequest="20"/>
<Label Grid.Column="1" Text="{Binding Header}" FontSize="12"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Detail}" FontSize="8"/>
</Grid>
</Frame>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>-->
<!--<flv:FlowListView x:Name="listview" HasUnevenRows="true" FlowColumnCount="2" FlowItemsSource="{Binding TempList}"
BackgroundColor="#ECD2FC">
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Frame HasShadow="True" OutlineColor="Red" Margin="2">
<StackLayout>
<Label Text="Test" FontSize="20" FontAttributes="Bold"/>
</StackLayout>
</Frame>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>-->
<!--<ListView Grid.Row="2" Grid.ColumnSpan="2" ItemsSource="{Binding TempList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Source="{Binding ImgSource}"/>
<Label Grid.Column="1" Text="{Binding Header}"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Detail}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>-->
<FlexLayout Grid.Row="2" Grid.ColumnSpan="2" BindableLayout.ItemsSource="{Binding TempList}"
Wrap="Wrap" Direction="Row" FlowDirection="LeftToRight" JustifyContent="Start" AlignItems="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="Transparent">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Source="{Binding ImgSource}" HeightRequest="22"/>
<Label Grid.Column="1" Text="{Binding Header}" FontSize="13" TextColor="White"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Detail}" FontSize="9" TextColor="White"/>
</Grid>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</Grid>
</Frame>
</Grid>
</ScrollView>
<Frame BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Label Text="Page under Development" HorizontalOptions="CenterAndExpand" FontSize="Medium" TextColor="White"/>
</Frame>
HomePage ViewModel:
public HomePageViewModel(Page page) : base(page)
{
_BeaconList = new List<Features.Home.Beacon>();
TranslateCommand = new Command(translate);
tripstart = false;
if (TripCollection == null)
{
TripCollection = new List<Trip>();
}
}
public override void Init()
{
IsInitialized = true;
if(BeaconPageViewModel.ConnectedVehicle != null)
{
VehicleName = BeaconPageViewModel.ConnectedVehicle;
DetectSpeed();
}
else
{
VehicleName = "No Vehicle";
}
}
private async void DetectSpeed()
{
var sunday = DateTime.Today.AddDays(-(int)DateTime.Today.DayOfWeek);
try
{
var hasPermission = await Utils.CheckPermissions(Permission.Location);
if (!hasPermission)
return;
if (tracking)
{
CrossGeolocator.Current.PositionChanged -= CrossGeolocator_Current_PositionChanged;
CrossGeolocator.Current.PositionError -= CrossGeolocator_Current_PositionError;
}
else
{
CrossGeolocator.Current.PositionChanged += CrossGeolocator_Current_PositionChanged;
CrossGeolocator.Current.PositionError += CrossGeolocator_Current_PositionError;
}
if (CrossGeolocator.Current.IsListening)
{
await CrossGeolocator.Current.StopListeningAsync();
tracking = false;
}
else
{
if (await CrossGeolocator.Current.StartListeningAsync(TimeSpan.FromSeconds(1), 1,
false, new ListenerSettings
{
AllowBackgroundUpdates = true,
DeferLocationUpdates = true,
DeferralDistanceMeters = 1,
DeferralTime = TimeSpan.FromSeconds(1),
ListenForSignificantChanges = true,
PauseLocationUpdatesAutomatically = true
}))
{
tracking = true;
}
}
}
catch (Exception ex)
{
await App.Current.MainPage.DisplayAlert("Uh oh", "Something went wrong, but don't worry we captured for analysis! Thanks.", "OK");
}
}
void CrossGeolocator_Current_PositionChanged(object sender, PositionEventArgs e)
{
ticks++;
tripPoints = new TripPoints();
var position = e.Position;
var speedms = position.Speed;
_kmh = speedms * 3.6;
if (_kmh > 3.00)
{
count++ ;
if (count > 11)
{
if (!tripstart)
{
tripstart = true;
DependencyService.Get<IToast>().LongAlert("Trip started");
DateTime dateAndTime = DateTime.Now;
trip = new Trip();
trip.StartDate = DateTime.Now;
trip.StartTime = dateAndTime.ToString("hh:mm tt");
trip.TripPointList = new List<TripPoints>();
}
CurrentSpeed = _kmh.ToString("N2");
OnPropertyChanged("CurrentSpeed");
App.Current.Properties.Remove("Zerotime");
}
}
else if (_kmh < 1.00)
{
CurrentSpeed = _kmh.ToString("N2");
OnPropertyChanged("CurrentSpeed");
var lasttime = DateTime.Now;
if (App.Current.Properties.ContainsKey("Zerotime"))
{
var zerotime = (DateTime)App.Current.Properties["Zerotime"];
var SecondDifference = (lasttime - zerotime).TotalSeconds;
if (SecondDifference > 119)
{
if (tripstart == true)
{
DependencyService.Get<IToast>().LongAlert("Trip stopped");
tripstart = false;
count = 0;
DateTime dateAndTime = DateTime.Now;
// trip.EndDate = dateAndTime.ToShortDateString();
trip.EndDate = DateTime.Now;
trip.EndTime = dateAndTime.ToString("hh:mm tt");
trip.Distance = TotalDistance;
TripCollection.Add(trip);
}
}
}
else
{
App.Current.Properties["Zerotime"] = DateTime.Now;
}
}
}
Exception Details:
09-14 21:31:00.177 I/MonoDroid( 3357): UNHANDLED EXCEPTION:
09-14 21:31:00.202 I/MonoDroid( 3357): Android.Views.InflateException: Binary XML file line #1: Binary XML file line #1: Error inflating class xamarin.forms.platform.android.appcompat.FormsViewPager ---> Android.Views.InflateException: Binary XML file line #1: Error inflating class xamarin.forms.platform.android.appcompat.FormsViewPager ---> Java.Lang.ClassNotFoundException: Didn't find class "xamarin.forms.platform.android.appcompat.FormsViewPager" on path: DexPathList[[zip file "/system/framework/org.apache.http.legacy.boot.jar", zip file "/data/app/com.WeCare.WeCareMobility-eCFGWA6K-RTib0RvLztsCQ==/base.apk"],nativeLibraryDirectories=[/data/app/com.WeCare.WeCareMobility-eCFGWA6K-RTib0RvLztsCQ==/lib/arm64, /data/app/com.WeCare.WeCareMobility-eCFGWA6K-RTib0RvLztsCQ==/base.apk!/lib/arm64-v8a, /system/lib64]]
Caused by: android.view.InflateException: Binary XML file line #1: Error inflating class xamarin.forms.platform.android.appcompat.FormsViewPager
09-14 21:31:00.371 F/.WeCareMobilit( 3357): java_vm_ext.cc:542] at android.view.View
09-14 21:31:00.372 F/.WeCareMobilit( 3357): java_vm_ext.cc:542] Caused by: java.lang.ClassNotFoundException: Didn't find class "xamarin.forms.platform.android.appcompat.FormsViewPager" on path: DexPathList[[zip file "/system/framework/org.apache.http.legacy.boot.jar", zip file "/data/app/com.WeCare.WeCareMobility-eCFGWA6K-RTib0RvLztsCQ==/base.apk"],nativeLibraryDirectories=[/data/app/com.WeCare.WeCareMobility-eCFGWA6K-RTib0RvLztsCQ==/lib/arm64, /data/app/com.WeCare.WeCareMobility-eCFGWA6K-RTib0RvLztsCQ==/base.apk!/lib/arm64-v8a, /system/lib64]]
09-14 21:31:00.372 F/.WeCareMobilit( 3357): java_vm_ext.cc:542] (Throwable with no stack trace)

Related

Infinite load for CollectionView does not work and RemainingItemsThresholdReached never get fired?

I'm trying to load CollectionView incrementally but RemainingItemsThresholdReached never get fired, I tried to use RemainingItemsThresholdReachedCommand also but no luck.
Here is my code, hope someone can figure out what's going wrong.
<CollectionView x:Name="collectionView" ItemsSource="{Binding Users}" VerticalScrollBarVisibility="Always"
RemainingItemsThreshold="3"
RemainingItemsThresholdReached="LoadMoreAsync" >
<CollectionView.ItemTemplate>
<DataTemplate >
<Border Stroke="White" Background="Black" StrokeThickness="2"
Padding="8" Margin="10">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<StackLayout >
<StackLayout Orientation="Horizontal" Spacing="20" Padding="10">
<Image Source="download.png" HeightRequest="40" WidthRequest="40" />
<Label Text="{Binding UserName}" FontSize="14" FontAttributes="Bold" />
</StackLayout>
<BoxView Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
<Label Padding="7" Text="{Binding Description}"/>
<BoxView Color="Gray" HeightRequest="1" HorizontalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="20" Padding="10">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<ImageButton Grid.Row="0" Grid.Column="0" Source="user.png" HeightRequest="20" WidthRequest="20" />
<ImageButton Grid.Row="0" Grid.Column="1" Source="like.png" HeightRequest="20" WidthRequest="20" />
<ImageButton Grid.Row="0" Grid.Column="2" Source="chat.png" HeightRequest="20" WidthRequest="20" />
</Grid>
</StackLayout>
</StackLayout>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
the backend side:
public void LoadMoreAsync(object sender, EventArgs e)
{
if (IsBusy)
return;
IsBusy = true;
GetUsers(pageNumber, 6);
pageNumber++;
IsBusy = false;
}

Changing BackgroundColor of Button within Xamarin CollectionView changes the BackgroundColor of every 8th button down. why?

I have a Xamarin CollectionView That uses a Button (Button x:Name="PNameButton") to Change the Background color of the button.
When the Button is clicked the background color changes... However - So does every 8th Button in the CollectionView. Its as if the CollectionView renders new data every 8 or so items, and that new first button gets the changed color property. How do I fix this? Code Follows:
<CollectionView x:Name="PairingsCollectionView" SelectionMode="Multiple" Margin="20,5,20,5" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="0" Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="35" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Grid.Row="0" Margin="0" Color="#333130"/>
<Button x:Name="PNameButton" Margin="0" Padding="0,0,0,0" Grid.Column="0" BackgroundColor="{Binding UseColor}" Text="{Binding PDisplayName}" FontSize="Small" TextColor="Black"
HorizontalOptions="Start" VerticalOptions="Center" Clicked="Button_Clicked" />
<BoxView Grid.Column="1" Grid.Row="0" Color="#333130" Margin="0"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="1" TextColor="White" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center" >
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding PDays, StringFormat='{0}Dy'}"/>
<Span Text=" "/>
<Span Text="{Binding PDay}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<BoxView Grid.Row="0" Grid.Column="2" Margin="0" Color="#333130"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="2" Text="{Binding PCredit, StringFormat='{0}'}" TextColor="#F57BFA" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="3" Color="#333130" Margin="0"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="3" Text="{Binding PFlightTime, StringFormat='{0}'}" TextColor="White" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="4" Color="#333130" Margin="0"/>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="4" Text="{Binding PRegionType, StringFormat='{0}'}" TextColor="White" FontSize="Small" HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="5" Color="#333130" Margin="0"/>
<CheckBox x:Name="IsSelectedCheckbox" Grid.Row="0" Grid.Column="5" IsChecked="{Binding PIsSelected}" VerticalOptions="Center"/>
<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Color="LightGray"></BoxView>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Text="{Binding PDateModified}" TextColor="Black" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Color="LightGray" ></BoxView>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Text="{Binding PLayovers}"
TextColor="Coral" FontAttributes="Bold" FontSize="17" HorizontalOptions="Start" VerticalOptions="Center" Margin="5,0,0,0" />
<WebView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="#333130"
MinimumHeightRequest="150" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HeightRequest="{Binding PWebViewHeight}" >
<WebView.Source>
<HtmlWebViewSource Html="{Binding PAllText}"/>
</WebView.Source>
</WebView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And in the Code Behind:
private void Button_Clicked(object sender, EventArgs e)
{
try
{
string ChkVal = "";
bool compareBool = false;
bool currentState = false;
Color buttonColer;
string ColorHexVal;
int i = 0;
var thisButton = sender as Button;
buttonColer = thisButton.BackgroundColor;
ColorHexVal = buttonColer.ToHex();
if (buttonColer != Color.FromHex("#F7F75A"))
{
currentState = true;
}
else
{
currentState = false;
}
var PairingItem = ((Button)sender).Parent.BindingContext as Pairings;
compareBool = App.DatabaseNA.GetIsSelected(PairingItem.PID);
if (!compareBool == true)
{
thisButton.BackgroundColor = Color.FromHex("#46AE3C");
}
else
{
thisButton.BackgroundColor = Color.FromHex("#F7F75A");
}
}
catch (Exception ex)
{
DisplayAlert("Alert", ex.InnerException.ToString(), "OK"); //await
}
}
Again - Thank You!!!
The code works great and sets the Background color of the button... The problem is - It sets the Background Color of every Button about 8 items down.
Thanks

Removing spacing between Xamarin.Forms Grid Cells

I am struggling with removing spacing between grid cells. I have tried using ColumnSpacing="0" and RowSpacing = "0",however it does not make grid spaceless.
<?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="XamarinPradmenys.CalculatorPage">
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,0.25" AbsoluteLayout.LayoutFlags="All" >
<Label x:Name="live" FontSize="20"/>
<Label x:Name="rez" FontSize="15"/>
</StackLayout>
<Grid RowSpacing="0" ColumnSpacing="0" AbsoluteLayout.LayoutBounds="0,1,1,0.75" AbsoluteLayout.LayoutFlags="All">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Text="mc" />
<Button Grid.Column="1" Grid.Row="0" Text="m+"/>
<Button Grid.Column="2" Grid.Row="0" Text="m-"/>
<Button Grid.Column="3" Grid.Row="0" Text="mr"/>
<Button Grid.Column="0" Grid.Row="1" Text="C"/>
<Button Grid.Column="1" Grid.Row="1" Text="/"/>
<Button Grid.Column="2" Grid.Row="1" Text="X"/>
<Button Grid.Column="3" Grid.Row="1" Text="Del"/>
<Button Grid.Column="0" Grid.Row="2" Text="7"/>
<Button Grid.Column="1" Grid.Row="2" Text="8"/>
<Button Grid.Column="2" Grid.Row="2" Text="9"/>
<Button Grid.Column="3" Grid.Row="2" Text="-"/>
<Button Grid.Column="0" Grid.Row="3" Text="4"/>
<Button Grid.Column="1" Grid.Row="3" Text="5"/>
<Button Grid.Column="2" Grid.Row="3" Text="6"/>
<Button Grid.Column="3" Grid.Row="3" Text="+"/>
<Button Grid.Column="0" Grid.Row="4" Text="1"/>
<Button Grid.Column="1" Grid.Row="4" Text="2"/>
<Button Grid.Column="2" Grid.Row="4" Text="3"/>
<Button Grid.Column="3" Grid.Row="4" Grid.RowSpan="2" Text="="/>
<Button Grid.Column="0" Grid.Row="5" Text="%" />
<Button Grid.Column="1" Grid.Row="5" Text="0"/>
<Button Grid.Column="2" Grid.Row="5" Text=","/>
</Grid>
</AbsoluteLayout>
</ContentPage>
That I get is:
As you can see there are spaces between every row and column. Do you have any suggestions?
Do you have anything what could help me?
Because material design, each button has shadows but if you add a background colour, you'll see its true size :
Code
<Page.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#d6d7d7" />
</Style>
</Page.Resources>
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,0.25" AbsoluteLayout.LayoutFlags="All">
<Label x:Name="live" FontSize="20" />
<Label x:Name="rez" FontSize="15" />
</StackLayout>
<Grid
AbsoluteLayout.LayoutBounds="0,1,1,0.75"
AbsoluteLayout.LayoutFlags="All"
ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Grid.Row="0"
Grid.Column="0"
Text="mc" />
<Button
Grid.Row="0"
Grid.Column="1"
Text="m+" />
<Button
Grid.Row="0"
Grid.Column="2"
Text="m-" />
<Button
Grid.Row="0"
Grid.Column="3"
Text="mr" />
<Button
Grid.Row="1"
Grid.Column="0"
Text="C" />
<Button
Grid.Row="1"
Grid.Column="1"
Text="/" />
<Button
Grid.Row="1"
Grid.Column="2"
Text="X" />
<Button
Grid.Row="1"
Grid.Column="3"
Text="Del" />
<Button
Grid.Row="2"
Grid.Column="0"
Text="7" />
<Button
Grid.Row="2"
Grid.Column="1"
Text="8" />
<Button
Grid.Row="2"
Grid.Column="2"
Text="9" />
<Button
Grid.Row="2"
Grid.Column="3"
Text="-" />
<Button
Grid.Row="3"
Grid.Column="0"
Text="4" />
<Button
Grid.Row="3"
Grid.Column="1"
Text="5" />
<Button
Grid.Row="3"
Grid.Column="2"
Text="6" />
<Button
Grid.Row="3"
Grid.Column="3"
Text="+" />
<Button
Grid.Row="4"
Grid.Column="0"
Text="1" />
<Button
Grid.Row="4"
Grid.Column="1"
Text="2" />
<Button
Grid.Row="4"
Grid.Column="2"
Text="3" />
<Button
Grid.Row="4"
Grid.RowSpan="2"
Grid.Column="3"
Text="=" />
<Button
Grid.Row="5"
Grid.Column="0"
Text="%" />
<Button
Grid.Row="5"
Grid.Column="1"
Text="0" />
<Button
Grid.Row="5"
Grid.Column="2"
Text="," />
</Grid>
</AbsoluteLayout>
You could do this via custom renderer.
MyButton.cs
public class MyButton : Button
{
}
MyButtonRenderer.cs
[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]
namespace XamarinDemo.Droid
{
public class MyButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
public MyButtonRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Background = null;
Control.SetBackgroundColor(Android.Graphics.Color.Gray);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == "BackgroundColor")
{
Control.SetBackgroundColor(Android.Graphics.Color.Gray);
}
}
}
}
Xaml
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,0.25" AbsoluteLayout.LayoutFlags="All">
<Label x:Name="live" FontSize="20" />
<Label x:Name="rez" FontSize="15" />
</StackLayout>
<Grid
AbsoluteLayout.LayoutBounds="0,1,1,0.75"
AbsoluteLayout.LayoutFlags="All"
ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<local:MyButton
Grid.Row="0"
Grid.Column="0"
Text="mc" />
<local:MyButton
Grid.Row="0"
Grid.Column="1"
Text="m+" />
<local:MyButton
Grid.Row="0"
Grid.Column="2"
Text="m-" />
<local:MyButton
Grid.Row="0"
Grid.Column="3"
Text="mr" />
<local:MyButton
Grid.Row="1"
Grid.Column="0"
Text="C" />
<local:MyButton
Grid.Row="1"
Grid.Column="1"
Text="/" />
<local:MyButton
Grid.Row="1"
Grid.Column="2"
Text="X" />
<local:MyButton
Grid.Row="1"
Grid.Column="3"
Text="Del" />
<local:MyButton
Grid.Row="2"
Grid.Column="0"
Text="7" />
<local:MyButton
Grid.Row="2"
Grid.Column="1"
Text="8" />
<local:MyButton
Grid.Row="2"
Grid.Column="2"
Text="9" />
<local:MyButton
Grid.Row="2"
Grid.Column="3"
Text="-" />
<local:MyButton
Grid.Row="3"
Grid.Column="0"
Text="4" />
<local:MyButton
Grid.Row="3"
Grid.Column="1"
Text="5" />
<local:MyButton
Grid.Row="3"
Grid.Column="2"
Text="6" />
<local:MyButton
Grid.Row="3"
Grid.Column="3"
Text="+" />
<local:MyButton
Grid.Row="4"
Grid.Column="0"
Text="1" />
<local:MyButton
Grid.Row="4"
Grid.Column="1"
Text="2" />
<local:MyButton
Grid.Row="4"
Grid.Column="2"
Text="3" />
<local:MyButton
Grid.Row="4"
Grid.RowSpan="2"
Grid.Column="3"
Text="=" />
<local:MyButton
Grid.Row="5"
Grid.Column="0"
Text="%" />
<local:MyButton
Grid.Row="5"
Grid.Column="1"
Text="0" />
<local:MyButton
Grid.Row="5"
Grid.Column="2"
Text="," />
</Grid>
</AbsoluteLayout>

ListView Item doesn't expand-collapse height in Xamarin Forms

I have a List View. In ListView I have ListViewCell. ListViewCell have expand-Collapse functionality. There are few problems in expand collapse behaviours.
1- If I expand first item, it works fine. But If I expand second item first and expand first item, it first item goes behind. See Case-1 in screen shot.
2- If I click on list view item, it show in gray color for a second. I want to stop this. It should not change and color when user click on any cell. Case-2
3- If I expand first item and collapse it again. It collapse but it keep white space between second and first item.
I have noticed this behavior. Above issue resolve if I scroll down and up. Well, in ideal case, user doesn't scroll up and down after every operation :D
Note: I have Entry, DatePicker and Buttons in ListViewCell. User must be able to input in it.
Here is my code. I have also attached screen shot. Please suggest
Main Page List View
<ListView x:Name="WorkHistoryListView"
ItemsSource="{Binding WorkHistoryList}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
SeparatorVisibility="None"
ItemTapped="OnListViewItemTapped"
Margin="10"
HasUnevenRows = "true"
IsPullToRefreshEnabled="False">
<ListView.ItemTemplate>
<DataTemplate>
<localview:WorkHistoryViewCell />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
WorkHistoryViewCell.xaml
<StackLayout Margin="0" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!-- Blue heading-->
<StackLayout Margin="0" Padding="0" Grid.Row="0" BackgroundColor="#367fa9">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Padding="15" RowSpacing="10" Margin="0" BackgroundColor="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label Text="{Binding Name}" HorizontalOptions="Center" Grid.Column="0" Grid.Row="0"/>
<Label Text="{Binding Date}" HorizontalOptions="Center" Grid.Column="1" Grid.Row="1"/>
<Label Text="+" HorizontalOptions="End" VerticalOptions="Center" Grid.Column="2" x:Name="LabelCollapse" Grid.Row="0" Grid.RowSpan="2" FontFamily="Roboto">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="LabelOpenCommand"/>
</Label.GestureRecognizers>
</Label>
</Grid>
</StackLayout>
<StackLayout Margin="0" Padding="0" Grid.Row="1" x:Name="FrameVisible">
<Frame Margin="0" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="White" OutlineColor="Gray">
<StackLayout Margin="0" VerticalOptions="Fill" Padding="20" IsVisible="{Binding IsWeekly}">
<Grid>
<Grid.Resources>
<ResourceDictionary>
<local:InvertBooleanConverter x:Key="invertBooleanConverter" />
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontFamily" Value="Roboto"/>
<Setter Property="TextColor" Value="White"/>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="EditLog.png" Grid.Column="1" Grid.Row="0" HorizontalOptions="End" VerticalOptions="Center"
HeightRequest="24">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnImageViewItemTapped"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Date" Grid.Column="0" Grid.Row="0" Style="{StaticResource LabelStyle}"
TextColor="Black" FontFamily="Roboto" Margin="0" />
<local:ExtendedDatePicker TextColor="LightGray" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1"
IsEnabled="False" Date="{Binding Date}" BackgroundColor="White">
<DatePicker.Format>dd/MM/yyyy</DatePicker.Format>
</local:ExtendedDatePicker>
<Label Text="Pay" Grid.Column="0" Grid.Row="2" Style="{StaticResource LabelStyle}"
TextColor="Black" FontFamily="Roboto" Margin="0,10,0,0" />
<local:CustomEntry Grid.Column="0" Grid.Row="3" Margin="0,10,0,0" WidthRequest="150" Text="{Binding Pay}"
Style="{StaticResource LabelStyle}" TextColor="Black" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
<Button Text="Submit" BorderRadius="18" TextColor="White" Command="{Binding SubmitWeeklyCommand}" Grid.Column="0" Grid.Row="4" FontFamily="Roboto"/>
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</StackLayout>
WorkHistoryViewCell.xaml.cs //Command to expand collapse
private void LabelOpenCommand(object sender,TappedEventArgs e)
{
if (LabelCollapse.Text == "+")
{
FrameVisible.IsVisible = false;
LabelCollapse.Text = "-";
FrameVisible.IsVisible = true;
}
else
{
FrameVisible.IsVisible = true;
LabelCollapse.Text = "+";
FrameVisible.IsVisible = false;
}
}
Screenshot
It happens 'cause the cell's height is calculated only on the first rendering. After that, the changes affect just the inner layout view.
Try call ForceUpdateSize(); at the end of your current TappedCommand's logic. It'll force the entire cell to recalculate its bounds.
The code should look like:
private void LabelOpenCommand(object sender,TappedEventArgs e)
{
if (LabelCollapse.Text == "+")
{
FrameVisible.IsVisible = false;
LabelCollapse.Text = "-";
FrameVisible.IsVisible = true;
}
else
{
FrameVisible.IsVisible = true;
LabelCollapse.Text = "+";
FrameVisible.IsVisible = false;
}
ForceUpdateSize
}
I hope it helps.

DrawerLayout: How to make this Custom Layout

I want to make these in a DrawerLayout but unable to find the right approach.
WANT THESE LAYOUTS
and
I have tried and been thinking about this. Should I use
1 - List
Problem: How to add separator and group things.
2 - List + Grid
3 - TableView
I am posting code below. I am not experienced and don't think its the right approach. Give me some directions Please.
CODE
<ListView.Header>
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.jpg" Aspect="AspectFill" />
<StackLayout Padding="11,110,0,20" >
<Label Text="AppName" TextColor="White" FontSize="Medium" Style="{DynamicResource SubtitleStyle}"/>
</StackLayout>
</Grid>
</Grid>
</ListView.Header>
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local:MasterPageItem Title="All Tasks" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:ContactsPage}" Color="Black" />
<local:MasterPageItem Title="Today" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:TodoListPage}" Color="Black"/>
<local:MasterPageItem Title="Completed" IconSource="ic_check_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Green"/>
<local:MasterPageItem Title="InComplete" IconSource="ic_close_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Red"/>
<local:MasterPageItem Title="My List" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Black"/>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="{Binding Title}" TextColor="{Binding Color}" FontSize="Medium" VerticalOptions="Center"/>
<Label Grid.Column="2" Text="5" TextColor="Black" FontSize="Medium" VerticalOptions="Center"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<BoxView VerticalOptions="Center" HorizontalOptions="FillAndExpand" HeightRequest="1" Color="#5b5d68"></BoxView>
<Grid Padding="5,10" BackgroundColor="#e8e8e8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="ic_date_range_black_48dp.png" VerticalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="0" Text="Create List" TextColor="Gray" FontSize="Medium" VerticalOptions="Center"/>
<Image Grid.Column="0" Grid.Row="1" Source="ic_date_range_black_48dp.png" VerticalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="1" Text="Settings" TextColor="Gray" FontSize="Medium" VerticalOptions="Center"/>
</Grid>
</StackLayout>
RESULT
Thanks
I think you need to set the ItemsSource of listview in code.
For example:
public ListView ListView;
public MasterPage1()
{
InitializeComponent();
ListView = ItemListview;
List<List<MasterPageItem>> masterPageItemGroup = new List<List<MasterPageItem>>(){
new List<MasterPageItem>(){
new MasterPageItem() { Title = "All Tasks", IconSource = "ic_date_range_black_48dp.png", Color = "Black" }
},
new List<MasterPageItem>(){
new MasterPageItem() { Title="Today", IconSource="ic_date_range_black_48dp.png", Color="Black" },
new MasterPageItem() { Title = "Completed", IconSource = "ic_check_black_48dp.png", Color = "Green" },
new MasterPageItem() { Title = "InComplete", IconSource = "ic_close_black_48dp.png", Color = "Red" },
},
new List<MasterPageItem>(){
new MasterPageItem() { Title="My List", IconSource="ic_date_range_black_48dp.png" , Color="Black" }
},
};
ListView.ItemsSource = masterPageItemGroup;
}
Then set IsGroupingEnabled value to true in xaml. And if you want to hide group header, you also need to set HasUnevenRows to true and use the ListView.GroupHeaderTemplate. In the GroupHeaderTemplate create a ViewCell and set Height to 0.
Here is the xaml:
<ListView x:Name="ItemListview" IsGroupingEnabled="true" HasUnevenRows="True">
<ListView.Header>
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.jpg" Aspect="AspectFill" />
<StackLayout Padding="11,110,0,20" >
<Label Text="AppName" TextColor="White" FontSize="Medium" Style="{DynamicResource SubtitleStyle}"/>
</StackLayout>
</Grid>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="{Binding Title}" TextColor="{Binding Color}" FontSize="Medium" VerticalOptions="Center"/>
<Label Grid.Column="2" Text="5" TextColor="Black" FontSize="Medium" VerticalOptions="Center"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="0">
<Grid/>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
</ListView>
The result is:
Update:
How can I remove/hide line above All Tasks?. This shouldn't be there.
It seems that it could not be removed. But the is a workaround. If you remove the <RowDefinition Height="*" /> in your ListView.Header, the line will be hidden by bg.jpg.
The result:

Resources