星期日, 4月 22, 2018

[XF] NavigationPage - 傳遞資料

NavigationPage 轉換 Page 時,可以透過兩種方式來傳遞資料
  • 建構子
  • BindingContext
App.xaml.cs
using Xamarin.Forms;

namespace NaviData
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}
Contact Class
namespace NaviData
{
    public class Contact
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Occupation { get; set; }
        public string Country { get; set; }
    }
}

MainPage.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:local="clr-namespace:NaviData"
             x:Class="NaviData.MainPage"
             Title="資料傳遞練習">

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Button x:Name="btnConstructor" Text="透過建構式傳遞資料" Clicked="BtnConstructor_Clicked"></Button>
        <Button x:Name="btnBindingContext" Text="透過 BindingContext 傳遞資料" Clicked="BtnBindingContext_Clicked"></Button>
    </StackLayout>
</ContentPage>
MainPage.xaml.cs
namespace NaviData
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void BtnBindingContext_Clicked(object sender, EventArgs e)
        {
            var contact = new Contact
            {
                Name = "Jane Doe",
                Age = 30,
                Occupation = "Developer",
                Country = "USA"
            };

            var page = new ByBindingContext();
            page.BindingContext = contact;
            await Navigation.PushAsync(page);
        }

        private async void BtnConstructor_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new ByConstructor(DateTime.Now.ToString("u")));
        }
    }
}
[XF] NavigationPage - 傳遞資料-1

ByConstructor.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="NaviData.ByConstructor"
             Title="透過建構式傳遞資料">
    <ContentPage.Content>
        <StackLayout>
            <Label 
                x:Name="lblDate"
                Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
ByConstructor.xaml.cs
namespace NaviData
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ByConstructor : ContentPage
    {
        public ByConstructor(string date)
        {
            InitializeComponent();
            lblDate.Text = date;
        }
    }
}
[XF] NavigationPage - 傳遞資料-2

ByBindingContext.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="NaviData.ByBindingContext"
             Title="透過 BindingContext 傳遞資料">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" />
                <Label Text="{Binding Name}"/>
            </StackLayout>

            <StackLayout Orientation="Horizontal">
                <Label Text="Age:" />
                <Label Text="{Binding Age}"/>
            </StackLayout>

            <StackLayout Orientation="Horizontal">
                <Label Text="Occupation:" />
                <Label Text="{Binding Occupation}"/>
            </StackLayout>

            <StackLayout Orientation="Horizontal">
                <Label Text="Country:" />
                <Label Text="{Binding Country}"/>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
[XF] NavigationPage - 傳遞資料-3

沒有留言:

張貼留言