show datePicker in Xamarin.Forms when click Frame Layout - xamarin

I am doing an application using Xamarin.Forms. There I need to show a datePicker when clicks on a Frame layout. For that purpose I have done this.
xaml part
<Frame Margin="15,0,15,5" HasShadow="false" OutlineColor="{StaticResource TextColorBlue}" BackgroundColor="White" x:Name="selectDate" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<DatePicker x:Name="datePicker" IsVisible="false" DateSelected="Handle_DateSelected" TextColor="Maroon" />
<Label Text="Date" FontAttributes="Bold" FontSize="20" HorizontalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<BoxView HorizontalOptions="FillAndExpand" BackgroundColor="Silver" HeightRequest="1" />
<Grid RowSpacing="1" ColumnSpacing="1" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Saturday" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="May" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="20" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="2017" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
</Grid>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Handle_Tapped_DatePicker" />
</Frame.GestureRecognizers>
</Frame>
cs part
void Handle_Tapped_DatePicker(object sender, System.EventArgs e)
{
Debug.WriteLine("Handle_Tapped_DatePicker");
if (datePicker.IsFocused)
{
Debug.WriteLine("Yes, datePicker is focused");
datePicker.Unfocus();
}
datePicker.Focus();
}
void Handle_DateSelected(object sender, Xamarin.Forms.DateChangedEventArgs e)
{
Debug.WriteLine("e.NewDate: " + e.NewDate.ToString());
}
But nothing happening here. The datePicker is not showing. I am testing on iOS simulator. Please help me on this.

Thankfully I got the answer after some searches.
The thing is that, You need to bring the focus of datePicker through the device main UI thread. I have changed my code like this.
Device.BeginInvokeOnMainThread(() =>
{
if (datePicker.IsFocused)
datePicker.Unfocus();
datePicker.Focus();
});

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

CollectionView child added event not firing

I am using Xamarin Forms and CollectionsView.I am adding Frame child rows using SignalR. Child added event is not firing after few child is added.Is it a bug or am i doing something wrong?? I tried with CollectionView_ChildAdded event also.That one also gives this unexpected behavior
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
SelectionMode="None"
ItemsUpdatingScrollMode="KeepScrollOffset"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame x:Name="frame1" BackgroundColor="White" BorderColor="#F0F0F0" Padding="3" Margin="0,0,0,5" HasShadow="False" CornerRadius="10" ChildAdded="frame1_ChildAdded">
<Grid HeightRequest="40" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="lb_TicketNumber" Text="{Binding TicketNumber}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" Margin="20,0" HorizontalTextAlignment="Center" />
<Label Grid.Column="1" Text="{Binding DeskName}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Grid.Column="2" Text="{Binding ServiceNameEng}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center" />
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
below event stops firing after few times.
private void frame1_ChildAdded(object sender, ElementEventArgs e)
{
DisplayAlert("Item added", "OK", "OK");
}

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.

How to add badge count in Navigation bar with TabbedPage In Xamarin forms?

I want to add navigation bar in cart icon with badge count.
I have added cart icon in navigation bar using toolbar item. and also created badge count circle view using plugin. if i am giving margin to set that badge icon to toolbar item it is hide behind tabbed page.
It is not displaying on cart icon.
Please help me out this.
As per above image i want to set badge count with tabbed page.
Below is my XAML Code.
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lang="clr-namespace:Conekto"
xmlns:controls="clr-namespace:Conekto.Controls;"
x:Class="ProjectName.Pages.SalePage">
<TabbedPage.Children>
<ContentPage Title="{lang:Translate PRODUCTLIST}">
<Grid Margin="10,10,10,0" BackgroundColor="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="charge 15,123" Style="{StaticResource primaryButton}" />
<SearchBar x:Name="txtSearch" Grid.Row="1" Grid.Column="0" TextChanged="MySearchBarOnTextChanged" Placeholder="{lang:Translate Search}" SearchCommand="{Binding SearchCommand, Mode=TwoWay}" CancelButtonColor="Blue" Text="{Binding SearchText, Mode=TwoWay}" Style="{StaticResource labelgreycolour}" WidthRequest="50" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<StackLayout Grid.Row="2" Grid.Column="0" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<ListView x:Name="listView" ItemsSource="{Binding ProductList}" HasUnevenRows="True" IsPullToRefreshEnabled="true" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" ItemAppearing="listView_ItemAppearing" ItemSelected="listView_ItemSelected" SelectedItem="{Binding listView_ItemSelected, Mode=TwoWay}" BackgroundColor="White" HorizontalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="0,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="40*" />
</Grid.ColumnDefinitions>
<Image Source="add" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Aspect="AspectFit" HeightRequest="30" WidthRequest="30" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.AddProductCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Grid.Row="0" Grid.Column="1" VerticalOptions="CenterAndExpand" VerticalTextAlignment="End" Text="{Binding ProductName,Mode=TwoWay}" Style="{StaticResource entrylogin}" />
<Label Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" VerticalTextAlignment="End" Text="{Binding Cost,Mode=TwoWay,StringFormat='XOF {0}'}" Style="{StaticResource listViewsublabel}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
<controls:FloatingActionButton Margin="0,0,20,20" Grid.Row="0" x:Name="FABCart" HorizontalOptions="End" VerticalOptions="End" WidthRequest="60" HeightRequest="60" Image="cart" ButtonColor="#09999A" Clicked="FabCart_Clicked" />
<controls:BadgeView Margin="0,0,32,52" Grid.Row="0" Text="{Binding TotalCartItem, Mode=TwoWay}" BadgeColor="White" HorizontalOptions="End" VerticalOptions="End" />
</Grid>
</ContentPage>
<ContentPage Title="{lang:Translate KEYPAD}">
<ContentPage.BackgroundColor>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.Platforms>
<On Platform="iOS" Value="Black" />
<On Platform="Android" Value="#eee" />
</OnPlatform.Platforms>
</OnPlatform>
</ContentPage.BackgroundColor>
<Grid x:Name="controlGrid" Margin="0,0,0,0" Padding="0,0,0,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnSpacing>
<OnPlatform x:TypeArguments="x:Double">
<OnPlatform.Platforms>
<On Platform="iOS" Value="1" />
<On Platform="Android" Value="0" />
</OnPlatform.Platforms>
</OnPlatform>
</Grid.ColumnSpacing>
<Grid.RowSpacing>
<OnPlatform x:TypeArguments="x:Double">
<OnPlatform.Platforms>
<On Platform="iOS" Value="1" />
<On Platform="Android" Value="0" />
</OnPlatform.Platforms>
</OnPlatform>
</Grid.RowSpacing>
<Grid.RowDefinitions>
<RowDefinition Height="74" />
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="charge 15,123" Margin="12,12,12,12" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource primaryButton}" />
<Label Text="Add note" FontSize="10" Grid.Column="0" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="End" TextColor="Black" />
<Label x:Name="lblVal" Margin="0,0,16,0" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="End" VerticalTextAlignment="Center" TextColor="Black" FontSize="30" Grid.ColumnSpan="2" VerticalOptions="End" />
<Button Clicked="Button_Clicked" Text ="7" Grid.Row="2" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "8" Grid.Row="2" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "9" Grid.Row="2" Grid.Column="2" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "4" Grid.Row="3" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "5" Grid.Row="3" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "6" Grid.Row="3" Grid.Column="2" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "1" Grid.Row="4" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "2" Grid.Row="4" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "3" Grid.Row="4" Grid.Column="2" Style="{StaticResource plainButton}" />
<Button Clicked="ButtonClear_Clicked" Text = "C" Grid.Row="5" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "0" Grid.Row="5" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "+" Grid.Row="5" Grid.Column="2" Style="{StaticResource plainButton}" />
</Grid>
</ContentPage>
<ContentPage Title="{lang:Translate SCAN}">
</ContentPage>
</TabbedPage.Children>
And in .cs Page code i am adding cart icon in toolbar item.
ToolbarItems.Add(new ToolbarItem("Add Product", "floating", async () =>
{
//var page = new ContentPage();
//var result = await page.DisplayAlert("Title", "Message", "Accept", "Cancel");
await Navigation.PushAsync(new CreateProductPage() { Title = Helper.GetResxNameByValue("CreateProduct") });
//Debug.WriteLine("success: {0}", result);
}));
As per design i have added cart button as floating button. Please do not consider that.
To add badge on toolbar item you can hide the default tool bar by using NavigationPage.SetHasNavigationBar(this, false); then you can create your own tool bar with button having badge counter and hamburger to show and hide side menu.
On page in which hamburger button is clicked:
private void Button_Clicked(object sender, System.EventArgs e)
{
MessagingCenter.Send(this, "presnt");
}
On MasterDetail page:
MessagingCenter.Subscribe<YourPage>(this, "presnt", (sender) =>
{
IsPresented = true;
});
Also, Before making IsPresented=true, check for sliding menu is not all-ready presented.
you can check https://github.com/LeslieCorrea/Xamarin-Forms-Shopping-Cart this link for more information. But by using this method in android may make the nav bar appear below tabs, so you may need to create tabs using buttons.
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Label FontAttributes="Bold" TextColor="Black" FontSize="Medium" Text="Female Category" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Label>
<AbsoluteLayout Margin="0,0,5,0" HorizontalOptions="EndAndExpand">
<Frame BackgroundColor="White" BorderColor="Black" CornerRadius="50" WidthRequest="40"
Padding="0"
Margin="0,10,0,10">
<ImageButton Source="add_to_basket.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked" Padding="5"/>
</Frame>
<Frame BackgroundColor="Red" HeightRequest="30" BorderColor="Black" WidthRequest="20" CornerRadius="50" Padding="0,0,0,-10" Margin="25,5,0,0">
<Label HorizontalOptions="CenterAndExpand" Text="53" TextColor="White" />
</Frame>
</AbsoluteLayout>
</StackLayout>
</NavigationPage.TitleView>

Resources