Dial Pad On Xamarin Forms - xamarin

I want to add a phone dialer key inside content page Layout not launch the Phone Dial outside application.
I used Xamarin essential but its launch Device Phone Dialer out side application page

You may have to design it by yourself. Below are just rough codes for the UI design and blank logic just to give you an idea of how it can be done.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Entry x:Name="phoneNumber" Grid.Row="0" Grid.ColumnSpan="3" />
<Button Grid.Row="1" Grid.Column="0" Text="1" Clicked="Button_Clicked" />
<Button Grid.Row="1" Grid.Column="1" Text="2" Clicked="Button_Clicked" />
<Button Grid.Row="1" Grid.Column="2" Text="3" Clicked="Button_Clicked" />
<Button Grid.Row="2" Grid.Column="0" Text="4" Clicked="Button_Clicked" />
<Button Grid.Row="2" Grid.Column="1" Text="5" Clicked="Button_Clicked" />
<Button Grid.Row="2" Grid.Column="2" Text="6" Clicked="Button_Clicked" />
<Button Grid.Row="3" Grid.Column="0" Text="7" Clicked="Button_Clicked" />
<Button Grid.Row="3" Grid.Column="1" Text="8" Clicked="Button_Clicked" />
<Button Grid.Row="3" Grid.Column="2" Text="9" Clicked="Button_Clicked" />
<Button Grid.Row="4" Grid.Column="1" Text="0" Clicked="Button_Clicked" />
<Button Grid.Row="5" Grid.ColumnSpan="3" Text="Call" Clicked="Button_Clicked_1" />
</Grid>
The UI would look like below.
Your code-behind should be something like below.
private void Button_Clicked(object sender, EventArgs e)
{
var enteredNumber = (sender as Button).Text;
this.phoneNumber.Text += enteredNumber;
}
private void Button_Clicked_1(object sender, EventArgs e)
{
//Logic to make a call
}
Refer to the below link on how to make a call programmatically.
https://stackoverflow.com/a/37551969/2536167
I hope that helps.

Related

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>

Spawn Images on certain position Xamarin Forms

Hello Xamarin community!
I just started with Xamarin Forms and wanted to create a simple app, which helps counting on a card game.
The points should be visualized in this image and should look like the following one:
In the first row there should be a horizontal line every fifth line and on the second line there should be a horizontal line every second line.
Here is how it looks like when i manually add the lines and add a backgroundcolor for visualization:
Here is the View:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
<RowDefinition Height="8*" />
<RowDefinition Height="8*" />
<RowDefinition Height="*" />
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Entry Text="{Binding Team1.Name}" Grid.Column="0" Grid.Row="0" />
<Label Text="150" Grid.Column="0" Grid.Row="1" />
<Entry Text="{Binding Team2.Name}" Grid.Column="1" Grid.Row="0" />
<Label Text="129" Grid.Column="1" Grid.Row="1" />
<Image Source="Schlange.png"
Aspect="Fill"
BackgroundColor="#"
Grid.ColumnSpan="2"
Grid.Row="2"
Grid.RowSpan="3" />
<Image Scale="0.5" BackgroundColor="Gray" Source="Strich1.png" Grid.Column="0" Grid.Row="2" Margin="0,0,0,0"/>
<Image BackgroundColor="Blue" Source="Strich1.png"/>
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="2" />
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="3" />
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="4" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="2" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="3" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="4" />
<Label Text="1" Grid.Column="0" Grid.Row="5"></Label>
<Label Text="-1" Grid.Column="1" Grid.Row="5"></Label>
<Entry Grid.Column="0" Grid.Row="6"></Entry>
<Entry Grid.Column="1" Grid.Row="6"></Entry>
<Button Text="Runde!" Grid.Row="7" Grid.ColumnSpan="2" />
</Grid>
My Question would be how to spawn Images on certain positions? Is this even possible with a grid? What happens to mobile phones with different resolution?
Thanks in advance and don't hesitate to ask if needed.

Xamarin Forms Remove space from Entry

I have a problem. I created a register page, with labels that show an error like "Username already exists". But the space between the Label and the Entry is a little bit too much. Here is an image of how it is now:
Now all of that is in a Grid, but the RowHeights are set to Auto, so this is the smallest size that the entry could get. The label, however, must be far more to the top (closer to the Username Entry).
Here is my code:
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="90" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Grid.Row="1" Grid.Column="0" x:Name="imgUsernameStatus" Margin="5"/>
<Entry Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="#bababa" FontSize="16" x:Name="txtUsername" TextColor="White" Unfocused="OnUsernameUnfocused" TextChanged="OnUsernameTextChanged" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="Username already exists" TextColor="Red" FontSize="11" x:Name="txtUsernameError" IsVisible="False" />
<Image Grid.Row="3" Grid.Column="0" x:Name="imgEmailStatus" Margin="5"/>
<Entry Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="#bababa" FontSize="16" x:Name="txtEmail" TextColor="White" TextChanged="OnEmailTextChanged" />
</Grid>
How can I do that?
Default value for RowSpacing is 6 unit
Set RowSpacing="0"
<Grid VerticalOptions="CenterAndExpand"
RowSpacing="0">
<!--Your Content-->
</Grid>

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>

show datePicker in Xamarin.Forms when click Frame Layout

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();
});

Resources