Programmatically modification of CarouselView - xamarin

I have a CarouselView inside a ScrollView. To control the height I calculate it and modify it programmatically. It almost works, but the problem however is that it only works when the height is increased not when the height is decreased.
CarouselView
<CarouselView x:Name="cv" HeightRequest="8" ItemsSource="{Binding Challenge.ChallengeParts}" VerticalOptions="Center" ItemTemplate="{StaticResource ChallengePartTemplate}" Position="{Binding PageCarouselPosition}" Grid.Row="0" Grid.Column="1"></CarouselView>```
DataTemplate
<DataTemplate x:Key="ChallengePartTemplate">
<StackLayout BackgroundColor="LimeGreen" VerticalOptions="Center">
<Grid x:Name="rulesGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="toggleShowRules" Grid.Column="0" Grid.Row="0">
<Label x:Name="showRulesText" Text="Vis regler fra video" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference thisPage}, Path=BindingContext.ToggleShowRulesTappedCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<Label Text="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules,Converter={StaticResource CaretConverter}}" FontFamily="{StaticResource FontAwesomeSolid}" Grid.Column="1" Grid.Row="0" HorizontalTextAlignment="End" />
</Grid>
<StackLayout x:Name="showRulesStack" IsVisible="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules}">
<Grid Margin="20, 0, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Antal spillere-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout x:Name="numPlayersText" Spacing="0" Grid.Column="1" Grid.Row="0">
<Label Text="Antal spillere:" FontAttributes="Bold" FontSize="Micro" />
<Label Text="{Binding NumPlayers}" FontSize="Micro" />
</StackLayout>
<!--Nødvendigt udstyr-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="1">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout Spacing="0" Grid.Column="1" Grid.Row="1">
<Label Text="Nødvendigt udstyr:" FontAttributes="Bold" FontSize="Micro" />
<StackLayout BindableLayout.ItemsSource="{Binding NeededAccesories}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" FontSize="Micro" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
<!--Regler-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="2">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2">
<Label Text="Regler:" FontAttributes="Bold" FontSize="Micro" />
<StackLayout BindableLayout.ItemsSource="{Binding Rules}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" FontSize="Micro" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid>
</StackLayout>
</StackLayout>
</DataTemplate>
Code behind
var cvVisibleViews = cv.VisibleViews;
if(cvVisibleViews.Count > 0)
{
var rulesStack = cvVisibleViews[0].FindByName<StackLayout>("showRulesStack");
var toggleShowRules = cvVisibleViews[0].FindByName<StackLayout>("toggleShowRules");
var showRulesText = cvVisibleViews[0].FindByName<Label>("showRulesText");
double height = 0;
height = height + toggleShowRules.Height;
height = height + showRulesText.Height;
if (rulesStack.IsVisible && rulesStack.Height > -1)
{
height = height + rulesStack.Height;
}
cv.HeightRequest = height;
}
It seems like the new height of the CarouselView is measured from the center of it. Like the content is placed outside above the CarouselView
Any idea to realign the content inside the resized CarouselView?
Thanks a lot!

Related

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

Xamarin, How can i contain the first batch of list of rows and columns with a border, like group them together?

I've been trying to put border on these text and the only way i can is taking off grid on every row so now it has borders but then the grid frame is off. I can't differentiate which part is from row1 or the beginning of list.
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" >
<ListView.ItemTemplate>
<!-- from the post.cs -->
<DataTemplate>
<ViewCell >
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions > <!-- 8 rows -->
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<!-- endrow1 -->
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- endrow1 -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
what i want
If you want to separate out your item as like group than you can use SeparatorColor and its visibility.
Instead of 2 boxview you can also use one grid as wrapper and using ColumnSpacing and RowSpacing.
<ListView x:Name="postListView" SeparatorVisibility="Default" HasUnevenRows="True" ItemsSource="{Binding Items}" SeparatorColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" Padding="1,2,1,0">
<Grid HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Yes, you can use BoxView to achieve this function, try the following code :
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" ColumnSpacing="2" RowSpacing="0" BackgroundColor="Black">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<!-- thin separator -->
<BoxView Color="Black" Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- thick separator -->
<BoxView Color="Black" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
The effect is as follows:
use a BoxView overlaid on your Grid to simulate a separator
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<! thin separator -->
<BoxView Color="Black" Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<! thick separator -->
<BoxView Color="Black" Grid.Row="2" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>

Xamarin forms create table

I need to create a table, using list view in xamarin forms. I am able to create list view with five columns. But I can't able to give header for the columns and lines. If anyone know how to create the table structure with headers please help me. Thanks in advance.
This is my source code for table[Header and Listview]
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Padding="40,10,10,40" Spacing="0">
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
<StackLayout Orientation="Horizontal" Spacing="40">
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<controls:CheckBox></controls:CheckBox>
<Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
<Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
</StackLayout>
<StackLayout Padding="40,10,10,40" HeightRequest="200" Grid.Row="1" Spacing="0">
<ListView ItemsSource="{Binding ChildRecords}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<!-- <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>-->
<StackLayout Orientation="Horizontal">
<BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
<Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
</StackLayout>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15"/>
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Typically what I like to do is create a Grid above the ListView for a Header, and then create ViewCells containing Grids within the ListView with the same column widths.
As an example:
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="Heading 1" />
<Label Grid.Column="1" Text="Heading 2" />
<Label Grid.Column="2" Text="Heading 3" />
</Grid>
<ListView ItemsSource="{}" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="0" Text="{Binding data1}" />
<Label Grid.Column="1" Margin="0" Text="{Binding data2}" />
<Label Grid.Column="2" Margin="0" Text="{Binding data3}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Note also the ListView comes with a Header, which is useful if you want the header to scroll with the items in the ListView. Have a look at this documentation: Customizing ListView Appearance
If you want a quick/professional looking way, you can try Synfucion DataGrid custom control for Xamarin. They are free to use if your company earn less than 1 millions.
you can use Grid for that purpose make the first row of the grid as the header, you can easily change the style on the header only. Here is the sample yo create 3 rows and two column
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ContentPage.Content>
<ScrollView VerticalOptions="Fill" HorizontalOptions="Fill">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" RowSpacing="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="Entry Name" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Column="1" Text="Entry Date" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="2" Text="Enty Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="3" Text="Transaction Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Column="4" Text="Cashflow " BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="5" Text="Particular" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="6" Text="VoucherNumber" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="7" Text="LedgerFolio" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="8" Text="Amount" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="9" Text="PurchaseInvoice" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="10" Text="Credit Or Debit" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<ListView x:Name="ContentListview" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="11" HorizontalScrollBarVisibility="Default" VerticalScrollBarVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Label Grid.Column="0" Text="{Binding EntryName}" TextColor="Black" />
<Label Grid.Column="1" Text="{Binding EntryDate}" TextColor="Black" />
<Label Grid.Column="2" Text="{Binding EntyType}" TextColor="Black" />
<Label Grid.Column="3" Text="{Binding TransactionType}" TextColor="Black" />
<Label Grid.Column="4" Text="{Binding Cashflow}" TextColor="Black" />
<Label Grid.Column="5" Text="{Binding Particular}" TextColor="Black" />
<Label Grid.Column="6" Text="{Binding VoucherNumber}" TextColor="Black" />
<Label Grid.Column="7" Text="{Binding LedgerFolio}" TextColor="Black" />
<Label Grid.Column="8" Text="{Binding Amount}" TextColor="Black" />
<Label Grid.Column="9" Text="{Binding PurchaseInvoice}" TextColor="Black" />
<Label Grid.Column="10" Text="{Binding CreditOrDebit}" TextColor="Black" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ScrollView>
</ContentPage.Content>
This is what I did, and the picture below is its outcome.Xamarin form result. Sorry, cannot show my code behind.

Xamarin.Forms: calculating listview height wrong?

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>

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