Navigation Within a Tab Inside a tabbed Page - xaml

inside one tab i use this code and add button to navigate to another content pageI make a tabbed page in Xamarin Forms And Inside tabbed page I take 4 content page for tab Inside those content page there are some button when I add click event on button . to navigate in another content page . button doesn't fire. Please provide some solution for this problem.
<NavigationPage Title="Home" IconImageSource="HomeGrey.png">
<x:Arguments >
<local:NewHomeScreen Title="Home" ></local:NewHomeScreen>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Pickup" IconImageSource="PickupGrey.png">
<x:Arguments>
<local:PickupPage ></local:PickupPage>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Setting" IconImageSource="settings.png">
<x:Arguments>
<local:NewSetting ></local:NewSetting>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Support" IconImageSource="SupportGrey.png">
<x:Arguments>
<local:SupportPage ></local:SupportPage>
</x:Arguments>
</NavigationPage>

If you want to switch to the next tab of the TabbedPage on clicking button, you can try to use EventHandler to achieve this.
I achieved this function,you can refer to the following code:
FirstPage.xaml.cs      
public partial class FirstPage : ContentPage
      {
public event EventHandler<string> ButtonClickedHandler;
public FirstPage ()
            {
                  InitializeComponent ();
            }
            private void Button_Clicked(object sender, System.EventArgs e)
            {
ButtonClickedHandler?.Invoke(this, "topage2");
}
      }
FirstPage.xaml   
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="TabbedPageWithNavigationPage.FirstPage"
                   IconImageSource="test.png"
                   Title="Today">
      <ContentPage.Content>
            <StackLayout>
                  <Label Text="Today's appointments go here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<Button Text="navigate" Clicked="Button_Clicked"/>
</StackLayout>
      </ContentPage.Content>
</ContentPage>
MainPage.xaml.cs
      
public partial class MainPage : TabbedPage
      {
            public MainPage ()
            {
                  InitializeComponent ();
tabPage1.ButtonClickedHandler += delegate (object obj,string str) {
CurrentPage = tabPage2;
};
}
      }
MainPage.xaml
<?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:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
x:Class="TabbedPageWithNavigationPage.MainPage"
x:Name="tabbedPage"
>
      <local:FirstPage x:Name="tabPage1" />
      <NavigationPage Title="Schedule" IconImageSource="schedule.png" x:Name="tabPage2">
            <x:Arguments>
                  <local:SecondPage />
            </x:Arguments>
      </NavigationPage>
<local:ThirdPage x:Name="tabPage3"/>
</TabbedPage>
Update:
I did a test using your code, but it threw error **System.InvalidCastException:** 'Specified cast is not valid.' . Since the current page is a ContentPage, so you cannot cast it to TabbedPage.
If you want to navigate to another page instead of other tabs, you can try code:
Navigation.PushAsync (new DeliveryDetailPaidPage());

Related

Xamarin forms Add button in TabbedPage

I have a question. I created the following TabbedPage:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-namespace:MyApp.Views"
mc:Ignorable="d"
x:Class="MyApp.Views.MainPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
BarBackgroundColor="White"
BarTextColor="Black"
android:TabbedPage.BarItemColor="#B2B2B2"
android:TabbedPage.BarSelectedItemColor="#56D7A5"
android:TabbedPage.IsSwipePagingEnabled="False">
<TabbedPage.Children>
<NavigationPage Title="page1" IconImageSource="navbar_page1">
<x:Arguments>
<views:page1 NavigationPage.HasNavigationBar="False" />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="page2" IconImageSource="navbar_page2">
<x:Arguments>
<views:page2 NavigationPage.HasNavigationBar="False" />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="page3" IconImageSource="navbar_page3">
<x:Arguments>
<views:page3 NavigationPage.HasNavigationBar="False" />
</x:Arguments>
</NavigationPage>
</TabbedPage>
Now on every page I have added this custom FabMenu like this:
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="#56D7A5" OpenIcon="openFab_icon" CloseIcon="closeFab_icon"
AbsoluteLayout.LayoutBounds=".95,.95" AbsoluteLayout.LayoutFlags="PositionProportional">
<c:FloatingButton x:Name="btnAddHomework" BGColor="#59E1FF" IconSrc="add_homework_icon" OnClickCommand="{Binding btnAddHomeworkCommand}" />
<c:FloatingButton x:Name="btnAddDeadline" BGColor="#0FF1A0" IconSrc="add_deadline_icon"/>
<c:FloatingButton x:Name="btnAddTest" BGColor="#5988FF" IconSrc="add_test_icon"/>
</c:FloatingMenu>
The problem is that every page has his own FabMenu, so you see it dissapear and reappear on every page, so my question is: Is there some kind of root view that overlays all the tabs in the TabbedPage?
Please let me know how I do that!
Disclaimer
I came up with a way to create the effect wanted using only pure Xamarin.Forms. Read along and pay attention to the tricky parts of the solution.
Abstract
This solution is achieved implementing AbsoluteLayout, CarouselView, IndicatorView and DataTemplateSelector. Xamarin.Forms 4.8 is supposed in what follows. If a lower version is used, please take into account that features like CarouselView or IndicatorView could be in Preview status.
DataTemplateSelector, CarouselView and IndicatorView are used to simulate a TabbedPage, and AbsoluteLayout is used to provide the Overlay.
So, now with the solution:
Create your Views
Here you create a view for each of the pages you want. In this example i want my application to consist of two pages, so i create two views (code behind remains untouched):
View1.xaml
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="overlayTest.View1"
BackgroundColor="Black">
<ContentView.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms 1!"
TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentView.Content>
</ContentView>
View2.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="overlayTest.View2">
<ContentView.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms 2!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentView.Content>
</ContentView>
Create a DataTemplateSelector
This will be used by the CarouselView in order to select one view or the other depending on the current Position.
using System;
using Xamarin.Forms;
namespace overlayTest
{
class MyTemplateSelector : DataTemplateSelector
{
readonly DataTemplate view1, view2;
public MyTemplateSelector()
{
view1 = new DataTemplate(typeof(View1));
view2 = new DataTemplate(typeof(View2));
}
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
String s = item.ToString();
if(s == "1")
{
return view1;
}
return view2;
}
}
}
Create your Main Page
Page1.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:t="clr-namespace:overlayTest"
x:Class="overlayTest.Page1">
<ContentPage.Resources>
<ResourceDictionary>
<t:MyTemplateSelector x:Key="templateSelector"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Padding="0"
Spacing="0">
<CarouselView ItemTemplate="{StaticResource templateSelector}"
IndicatorView="indicatorView">
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>
<IndicatorView x:Name="indicatorView">
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand">
<Frame Margin="10">
<Label/>
</Frame>
</StackLayout>
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>
</StackLayout>
<ContentView
IsVisible="True" VerticalOptions="Start"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Transparent">
<Frame CornerRadius="10"
Margin="20"
VerticalOptions="StartAndExpand"
HorizontalOptions="CenterAndExpand" InputTransparent="False">
<StackLayout Padding="0">
<Label
FontSize="Medium"
TextColor="Black"/>
<StackLayout Orientation="Horizontal"
HorizontalOptions="CenterAndExpand">
<Label Text="I am floating here"/>
<Switch IsToggled="True" />
</StackLayout>
<Button Text="Save"
BackgroundColor="Accent"/>
</StackLayout>
</Frame>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
And in the code behind we set the name of the tabs. Here please put attention in the fact that i am supposing an element tree of a StackLayout -> Frame -> Label. If you change the IndicatorTemplate, you will have to also modify this part of the code!
Page1.xaml.cs
using System.Linq;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace overlayTest
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
indicatorView.PropertyChanged += (s, a) =>
{
if (a.PropertyName == IndicatorView.HeightProperty.PropertyName)
{
var indicators = indicatorView.IndicatorLayout.Children.ToList();
int counter = 0;
foreach(var indicator in indicators)
{
var indicatorBaseStack = (StackLayout)indicator;
var indicatorFrame = (Frame)indicatorBaseStack.Children[0];
var indicatorFrameLabel = (Label)indicatorFrame.Content;
indicatorFrameLabel.Text = counter == 0 ? "View1" : "View2";
counter++;
}
}
};
}
}
}
Finally set that Page to the MainPage property of App:
public App()
{
InitializeComponent();
MainPage = new Page1();
}
The final result looks like this:
As a workaround, you could set ToolbarItem of each ContentPage (or you can define a base ContentPage).
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example Item"
IconImageSource="xxx.png"
Order="Secondary"
Clicked="{Binding xx}"
Priority="0" />
<ToolbarItem Text="Example Item"
IconImageSource="xxx.png"
Order="Secondary"
Priority="1" />
<ToolbarItem Text="Example Item"
IconImageSource="xxx.png"
Order="Secondary"
Priority="2" />
</ContentPage.ToolbarItems>
I recommend creating a BaseContentPage that includes a static FloatingButton. This allows every page to inherit from BaseContentPage and use the same FloatingButton.
Code
BaseContentPage
abstract class BaseContentPage : ContentPage
{
protected static Button Button { get; } = new Button { Text = $"This button was created at {DateTimeOffset.UtcNow}" }.Invoke(button => button.Clicked += HandleButtonClicked);
static async void HandleButtonClicked(object sender, EventArgs e) =>
await Application.Current.MainPage.DisplayAlert("Button Clicked", "This is the same button on both pages", "OK");
}
Example LabelPage
class LabelPage : BaseButtonPage
{
public LabelPage()
{
Title = "LabelPage";
Content = new StackLayout
{
Children =
{
new Label { Text = "Label Page" }.TextCenter().Center(),
Button
}
}
}
}
Example ButtonPage
class ButtonPage : BaseButtonPage
{
public ButtonPage()
{
Title = "ButtonPage";
Content = Button;
}
}
Example App
public class App : Application
{
public App()
{
Device.SetFlags(new[] { "Markup_Experimental" });
MainPage = new TabbedPage
{
Children =
{
new ButtonPage(),
new LabelPage()
}
};
}
}
Sample App
Here is the sample app used to create the attached GIF:
https://github.com/brminnick/TabbedPageButton/

Update the Counter in Badge, Xamarin Forms app

I'm using this Plugin.Badge to display cart items count on tabbed view in Xamarin Forms app.
here is my tabbed page xaml code MainPage.xaml
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom"
SelectedTabColor="{StaticResource HighlightText}" BarBackgroundColor="{StaticResource HighlightBg}" UnselectedTabColor="Gray"
xmlns:views="clr-namespace:Projectname.Views" x:Class="Projectname.Views.MainPage" >
<TabbedPage.Children>
<NavigationPage Title="Home" IconImageSource="home.png">
<x:Arguments>
<views:HomePage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Search" IconImageSource="search.png">
<x:Arguments>
<views:AboutPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Cart" IconImageSource="cart.png"
plugin:TabBadge.BadgeText= "{Binding Counter}"
plugin:TabBadge.BadgeColor="Red"
plugin:TabBadge.BadgeTextColor="White" plugin:TabBadge.BadgePosition="PositionTopRight" >
<x:Arguments>
<views:AboutPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Account" IconImageSource="account.png">
<x:Arguments>
<views:AccountPage />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
below is the Code behind in MainPage.xaml.cs
using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Essentials;
using Plugin.Badge.Abstractions;
using System.Collections.ObjectModel;
//using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
namespace Projectname.Views
{
[DesignTimeVisible(false)]
public partial class MainPage : TabbedPage
{
int Counter;
public MainPage()
{
InitializeComponent();
Counter = 2;
}
}
}
In one of the tabbedpage children you can see, the badge is set like
plugin:TabBadge.BadgeText= ""{Binding Counter}"
But is not working.
I want to set the value of the badge counter to the value of variable in the code behind page MainPage.xaml.cs
for that what all changes to be done in the code. Please help me on this.
This will not work. You are creating local variable and not even setting binding context.
First of all I recommend to create ViewModel for example:
public class MainPageViewModel : INotifyPropertyChanged
{
private int counter = 0;
public MainPageViewModel()
{
}
public event PropertyChangedEventHandler PropertyChanged;
public int Counter
{
set { counter = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Counter))); }
get { return counter; }
}
}
Then in your MainPage create binding context to viewmodel
public partial class MainPage : TabbedPage
{
private MainPageViewModel viewModel;
public MainPage()
{
InitializeComponent();
viewModel = new MainPageViewModel();
BindingContext = viewModel;
viewModel.Counter = 2;
}
}

Show both Tab bar and Toolbar in Xamarin forms

I'm a beginner in mobile app development and I'm developing an android app using Xamarin forms for a project.
it has 3 tabbed pages.
each page needs some actions to be done when a user clicks on something.
since there are few actions in one tab to be clicked and actions are different for each tab, I want to show both toolbar and tab bar at the same time just like "Whatsapp" shows in there interface.
I have 3 pages named Farm, Treatments, and Autopsy.
all 3 pages are showing as tabbed pages in the tabbedPageContainer XAML.
this is the tabbedPageContainer XAML Code
<TabbedPage 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"
x:Class="TabbedForms.TabbedPages.TabbedPageContainer"
xmlns:pages="clr-namespace:TabbedForms.TabbedPages"
>
<pages:page_Farm />
<pages:Page_Treatments/>
<pages:Page_Autopsy/>
</TabbedPage>
and this TabbedPageContainer is my Main page.
What I have so far is something like this
but what I want is something like this
how can I achieve this in Xamarin forms XAML?
This is the App.XAML
using System;
using TabbedForms.TabbedPages;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TabbedForms
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new TabbedPageContainer();
//Background color
//MainPage.SetValue(NavigationPage.BarBackgroundColorProperty, Color.Black);
//Title color
// MainPage.SetValue(NavigationPage.BarTextColorProperty, Color.White);
}
protected override void OnStart()
{
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
I'm using VS 2019 Enterprise edition and testing on android 8.1
App.Xaml:
public App()
{
InitializeComponent();
MainPage = new NavigationPage( new TabbedPage1());
}
Tab page:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:page="clr-namespace:XamarinControls"
x:Class="XamarinControls.TabbedPage1">
<!--Pages can be added as references or inline-->
<page:Page4 Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="Tab 3" />
</TabbedPage>
Content Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
NavigationPage.HasNavigationBar="True"
x:Class="XamarinControls.Page4">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add" Priority="0"/>
<ToolbarItem Text="Noti" Priority="1"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
It worked for me.
You could put the child ContentPage of the Tabbed in a NavigationPage like
<TabbedPage.Children>
<NavigationPage Title="xxx" IconImageSource="xxx">
<x:Arguments>
<views:ItemsPage1 />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="xxx" IconImageSource="xxx">
<x:Arguments>
<views:ItemsPage2 />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>

Is it possible to popUp a lottie animation View while an async Task is request

I have created a content view , and inside this content view I've insert a lottie animation :
I'm trying to make it a common animation view so I can use it to multiple async Task
LoadingAnimation.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="Fit_Plans.Views.Common.LoadingAnimation">
<ContentView.Content>
<StackLayout>
<lottie:AnimationView
Grid.Column="0"
Margin="-20"
x:Name="LoadingAnimationView"
Animation="loading_animation.json"
AutoPlay="false"
HeightRequest="160"
WidthRequest="160"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"/>
</StackLayout>
</ContentView.Content>
</ContentView>
Now in my SomeView.Xaml.cs
async protected override void OnAppearing()
{
Product produits = new Product();
if(getListProduit ==null || getListProduit.Count<=0)
{
getListProduit = await produits.loadMenuAsync(api, siteUrl);
PopulateProductsLists(getListProduit);
}
base.OnAppearing();
}
You can notice that I have a await asynch task :
getListProduit = await produits.loadMenuAsync(api, siteUrl);
Is it possible to make my lottie animation pop-up the animation.jason , and when the task is done close the popup? Or , what would be the best way to do such thing?
If you want to show lottie animation in a popup, I encourage you to use the great Rg.Plugins.Popup library. You can get it from nuget and then create a popup page in which you should add your lottie animation (the same as you did above). This way you'll be able to reuse this popup animation page.
XAML of your popup page would look similar to this:
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="MyProject.MyPopupPage">
<!--You can set an animation in the xaml file or in the csharp code behind-->
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<!--You can use any elements here which are extended from Xamarin.Forms.View-->
<lottie:AnimationView
Grid.Column="0"
Margin="-20"
x:Name="LoadingAnimationView"
Animation="loading_animation.json"
AutoPlay="true"
HeightRequest="160"
WidthRequest="160"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"/>
</pages:PopupPage>
Here you can find the code to use your new popup page.

Xamarin Forms - Show Cancel button in toolbar items instead of Back (iOS)

I want to change the standard Back button in the NavigationBar on iOS to a Cancel button like the "New contact" screen in iOS.
I am using Xamarin Forms.
EDIT:
XAML of modal
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xrm.Mca.Views.MyModalView">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="Cancel" Text="Cancel" ></ToolbarItem>
<ToolbarItem x:Name="Save" Text="Save" ></ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Details">
<EntryCell Label="Name" Placeholder="Entry your name" />
<EntryCell Label="Age" Placeholder="Entry your age" />
</TableSection>
</TableRoot>
</TableView>
</ContentPage.Content>
</ContentPage>
Code-behind in the prior screen to open modal
async Task OpenModal()
{
var page = new NavigationPage(new MyModalView ());
await App.Current.Navigation.PushModalAsync (page);
}
The standard convention of accomplishing your request is to push a Modal and use ToolBarItems. You can find an example of applying a ToolBarItem to your page on the Xamarin Forums.
Let me know if you need a more concrete example.
UPDATED WITH EXAMPLE
The two ToolbarItems would like like so:
var cancelItem = new ToolbarItem
{
Text = "Cancel"
};
var doneItem = new ToolbarItem
{
Text = "Done"
};
Now you can add these to your view:
this.ToolbarItems.Add(cancelItem);
this.ToolbarItems.Add(doneItem);
You can even bind the CommandProperty:
doneItem.SetBinding(MenuItem.CommandProperty, "DoneClicked");
Or simply handle the event when the user taps the item:
doneItem.Clicked += (object sender, System.EventArgs e) =>
{
// Perform action
};
Remember to wrap your Modal in a NavigationPage, as the ToolbarItems otherwise will not appear.
Hope this helps.
Do the following in the constructor of the page doing the navigation push. This will work for all pages pushed on to the stack.
NavigationPage.SetBackButtonTitle(this, "Cancel");
Where this is the ContentPage (or any type of page) of course