Xamarin.Forms
Xamarin.Forms में नेविगेशन

नैविगेशनपेज प्रवाह

using System;
using Xamarin.Forms;

namespace NavigationApp
{    
    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new FirstPage());
        }
    }

    public class FirstPage : ContentPage
    {
        Label FirstPageLabel { get; set; } = new Label();

        Button FirstPageButton { get; set; } = new Button();

        public FirstPage()
        {
            Title = "First page";

            FirstPageLabel.Text = "This is the first page";
            FirstPageButton.Text = "Navigate to the second page";
            FirstPageButton.Clicked += OnFirstPageButtonClicked;

            var content = new StackLayout();
            content.Children.Add(FirstPageLabel);
            content.Children.Add(FirstPageButton);

            Content = content;
        }

        async void OnFirstPageButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage(), true);
        }
    }

    public class SecondPage : ContentPage
    {
        Label SecondPageLabel { get; set; } = new Label();

        public SecondPage()
        {
            Title = "Second page";

            SecondPageLabel.Text = "This is the second page";

            Content = SecondPageLabel;
        }
    }
}    

नैविगेशनपेज एक्सएएमएल के साथ

App.xaml.cs फ़ाइल (App.xaml फ़ाइल डिफ़ॉल्ट है, इसलिए छोड़ दी गई है)

using Xamrin.Forms

namespace NavigationApp
{
    public partial class App : Application
    {
        public static INavigation GlobalNavigation { get; private set; }

        public App()
        {
            InitializeComponent();
            var rootPage = new NavigationPage(new FirstPage());

            GlobalNavigation = rootPage.Navigation;

            MainPage = rootPage;
        }
    }
}

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="NavigationApp.FirstPage"
    Title="First page">
    <ContentPage.Content>
        <StackLayout>
            <Label
                Text="This is the first page" />
            <Button
                Text="Click to navigate to a new page" 
                Clicked="GoToSecondPageButtonClicked"/>
            <Button
                Text="Click to open the new page as modal" 
                Clicked="OpenGlobalModalPageButtonClicked"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

कुछ मामलों में आपको वर्तमान नेविगेशन में नहीं बल्कि वैश्विक एक में नया पृष्ठ खोलने की आवश्यकता है। उदाहरण के लिए, यदि आपके वर्तमान पृष्ठ में नीचे मेनू है, तो यह तब दिखाई देगा जब आप नए पृष्ठ को वर्तमान नेविगेशन में धकेलेंगे। यदि आपको नीचे मेनू और अन्य वर्तमान पृष्ठ की सामग्री को छिपाते हुए पूरे दृश्य सामग्री के ऊपर पृष्ठ को खोलने की आवश्यकता है, तो आपको नए पृष्ठ को वैश्विक नेविगेशन में मोडल के रूप में धकेलना होगा। App.GlobalNavigation संपत्ति और नीचे दिए गए उदाहरण देखें।

FirstPage.xaml.cs फ़ाइल

using System;
using Xamarin.Forms;

namespace NavigationApp
{
    public partial class FirstPage : ContentPage
    {
        public FirstPage()
        {
            InitializeComponent();
        }

        async void GoToSecondPageButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage(), true);
        }

        async void OpenGlobalModalPageButtonClicked(object sender, EventArgs e)
        {
            await App.GlobalNavigation.PushModalAsync(new SecondPage(), true);
        }
    }
}

SecondPage.xaml फ़ाइल (xaml.cs फ़ाइल डिफ़ॉल्ट है, इसलिए छोड़ दी गई है)

<?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="NavigationApp.SecondPage"
    Title="Second page">
    <ContentPage.Content>
        <Label
            Text="This is the second page" />
    </ContentPage.Content>
</ContentPage>

XAML के साथ पदानुक्रमित नेविगेशन

डिफ़ॉल्ट रूप से, नेविगेशन पैटर्न पृष्ठों के ढेर की तरह काम करता है, पिछले पृष्ठों पर नवीनतम पृष्ठों को बुलाता है। इसके लिए आपको नेविगेशनपेज ऑब्जेक्ट का उपयोग करना होगा।

नए पृष्ठ पुश करना

...
public class App : Application 
{
    public App() 
    {
        MainPage = new NavigationPage(new Page1());
    }
}
...

Page1.xaml

...
<ContentPage.Content>
    <StackLayout>
        <Label Text="Page 1" />
        <Button Text="Go to page 2" Clicked="GoToNextPage" />
    </StackLayout>
</ContentPage.Content>
...

Page1.xaml.cs

...
public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
    }
    
    protected async void GoToNextPage(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Page2());
    }
}
...

Page2.xaml

...
<ContentPage.Content>
    <StackLayout>
        <Label Text="Page 2" />
        <Button Text="Go to Page 3" Clicked="GoToNextPage" />
    </StackLayout>
</ContentPage.Content>
...

Page2.xaml.cs

...
public partial class Page2 : ContentPage
{
    public Page2()
    {
        InitializeComponent();
    }
    
    protected async void GoToNextPage(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Page3());
    }
}
...

पेजिंग करना

आम तौर पर उपयोगकर्ता पृष्ठों को वापस करने के लिए बैक बटन का उपयोग करता है, लेकिन कभी-कभी आपको इस प्रोग्राम को नियंत्रित करने की आवश्यकता होती है, इसलिए आपको पिछले पृष्ठ पर जाने के लिए नेविगेशनपीज.पोएस्पिंस्क () को कॉल करने की आवश्यकता होती है या नेविगेशनपीज.पॉपटूटासिंस्क () , भीख मांगने पर वापस जाने के लिए, इस तरह ...

Page3.xaml

...
<ContentPage.Content>
    <StackLayout>
        <Label Text="Page 3" />
        <Button Text="Go to previous page" Clicked="GoToPreviousPage" />
        <Button Text="Go to beginning" Clicked="GoToStartPage" />
    </StackLayout>
</ContentPage.Content>
...

Page3.xaml.cs

...
public partial class Page3 : ContentPage
{
    public Page3()
    {
        InitializeComponent();
    }
    
    protected async void GoToPreviousPage(object sender, EventArgs e)
    {
        await Navigation.PopAsync();
    }

    protected async void GoToStartPage(object sender, EventArgs e)
    {
        await Navigation.PopToRootAsync();
    }
}
...

XAML के साथ मोडल नेविगेशन

मोडल पेज तीन तरीकों से बनाए जा सकते हैं:

• पूर्ण स्क्रीन पृष्ठों के लिए नेविगेशनपेज ऑब्जेक्ट से
• अलर्ट और अधिसूचना के लिए
• एक्शनशीट के लिए जो पॉप-अप मेनू हैं

पूर्ण स्क्रीन मोडल

...
// to open
await Navigation.PushModalAsync(new ModalPage());
// to close
await Navigation.PopModalAsync();
...

अलर्ट / पुष्टि और सूचनाएं

...
// alert
await DisplayAlert("Alert title", "Alert text", "Ok button text");
// confirmation
var booleanAnswer = await DisplayAlert("Confirm?", "Confirmation text", "Yes", "No");
...

ActionSheets

...
var selectedOption = await DisplayActionSheet("Options", "Cancel", "Destroy", "Option 1", "Option 2", "Option 3");
...

मास्टर डिटेल रूट पेज

public class App : Application
{
    internal static NavigationPage NavPage;

    public App ()
    {
        // The root page of your application
        MainPage = new RootPage();
    }
}
public class RootPage : MasterDetailPage
{
    public RootPage()
    {
        var menuPage = new MenuPage();
        menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
        Master = menuPage;
        App.NavPage = new NavigationPage(new HomePage());
        Detail = App.NavPage;
    }
    protected override async void OnAppearing()
    {
        base.OnAppearing();
    }
    void NavigateTo(MenuItem menuItem)
    {
        Page displayPage = (Page)Activator.CreateInstance(menuItem.TargetType);
        Detail = new NavigationPage(displayPage);
        IsPresented = false;
    }
}

मास्टर विस्तार नेविगेशन

नीचे दिए गए कोड से पता चलता है कि जब ऐप मास्टरडेलपेज संदर्भ में है, तो अतुल्यकालिक नेविगेशन कैसे करें।

public async Task NavigateMasterDetail(Page page)
{
        if (page == null)
            {
                return;
            }

        var masterDetail = App.Current.MainPage as MasterDetailPage;

        if (masterDetail == null || masterDetail.Detail == null)
            return;         

        var navigationPage = masterDetail.Detail as NavigationPage;
        if (navigationPage == null)
        {
            masterDetail.Detail = new NavigationPage(page);
            masterDetail.IsPresented = false;
            return;
        }

        await navigationPage.Navigation.PushAsync(page);

        navigationPage.Navigation.RemovePage(navigationPage.Navigation.NavigationStack[navigationPage.Navigation.NavigationStack.Count - 2]);
        masterDetail.IsPresented = false;
    }