.NET MAUI'de Navigasyon ve Data Aktarımı

.NET MAUI (Multi-platform App UI), Microsoft'un geliştirdiği, çeşitli platformlarda (iOS, Android, Windows, macOS) çalışan uygulamalar oluşturmayı sağlayan bir framework'tür. Bu yazıda, .NET MAUI'de sayfalar arası navigasyon ve veri aktarımı konularını ele alacağız. Ayrıca, bazı örnekler vererek nasıl uygulanacağını göstereceğiz. .NET MAUI navigasyon

Navigasyon

.NET MAUI'de sayfalar arası navigasyon, INavigation arayüzü ve NavigationPage sınıfı ile sağlanır. Basit bir örnekle başlayalım.

Ana Sayfa (MainPage.xaml):

<ContentPage xmlns="<http://schemas.microsoft.com/dotnet/2021/maui>"
             xmlns:x="<http://schemas.microsoft.com/winfx/2009/xaml>"
             x:Class="MauiApp.MainPage">

    <StackLayout>
        <Label Text="Ana Sayfa"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand" />

        <Button Text="Detay Sayfasına Git"
                Clicked="OnNavigateButtonClicked"/>
    </StackLayout>
</ContentPage>

Ana Sayfa (MainPage.xaml.cs):

using Microsoft.Maui.Controls;

namespace MauiApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnNavigateButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new DetailPage());
        }
    }
}

Detay Sayfası (DetailPage.xaml):

<ContentPage xmlns="<http://schemas.microsoft.com/dotnet/2021/maui>"
             xmlns:x="<http://schemas.microsoft.com/winfx/2009/xaml>"
             x:Class="MauiApp.DetailPage">

    <StackLayout>
        <Label Text="Detay Sayfası"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Detay Sayfası (DetailPage.xaml.cs):

using Microsoft.Maui.Controls;

namespace MauiApp
{
    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }
    }
}

Bu basit örnekte, ana sayfadaki bir butona tıklayarak DetailPage sayfasına yönlendirme yapıyoruz.

Veri Aktarımı

Navigasyon sırasında sayfalar arasında veri aktarmak oldukça yaygındır. Bunun için, navigasyon metoduna parametre olarak veriyi geçirip, hedef sayfada bu veriyi alabiliriz.

Ana Sayfa (MainPage.xaml.cs):

private async void OnNavigateButtonClicked(object sender, EventArgs e)
{
    var data = "Merhaba, MAUI!";
    await Navigation.PushAsync(new DetailPage(data));
}

Detay Sayfası (DetailPage.xaml.cs):

using Microsoft.Maui.Controls;

namespace MauiApp
{
    public partial class DetailPage : ContentPage
    {
        public DetailPage(string data)
        {
            InitializeComponent();
            DisplayData(data);
        }

        private void DisplayData(string data)
        {
            // Veriyi ekranda gösterme
            var label = new Label
            {
                Text = data,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand
            };
            Content = label;
        }
    }
}

Yukarıdaki örnekte, MainPage'den DetailPage'e string türünde bir veri aktardık ve DetailPage'de bu veriyi ekranda gösterdik.

ViewModel ile Veri Aktarımı

MVVM (Model-View-ViewModel) deseni ile çalışırken, veri aktarımı ve bağlama işlemleri daha düzenli hale gelir. İşte bir örnek:

Ana Sayfa ViewModel (MainPageViewModel.cs):

using System.Windows.Input;
using Microsoft.Maui.Controls;

namespace MauiApp
{
    public class MainPageViewModel
    {
        public ICommand NavigateCommand { get; private set; }

        public MainPageViewModel()
        {
            NavigateCommand = new Command(async () =>
            {
                var data = "Merhaba, MAUI!";
                await Application.Current.MainPage.Navigation.PushAsync(new DetailPage(data));
            });
        }
    }
}

Ana Sayfa (MainPage.xaml.cs):

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}

Ana Sayfa (MainPage.xaml):

<ContentPage xmlns="<http://schemas.microsoft.com/dotnet/2021/maui>"
             xmlns:x="<http://schemas.microsoft.com/winfx/2009/xaml>"
             x:Class="MauiApp.MainPage"
             xmlns:local="clr-namespace:MauiApp">

    <StackLayout>
        <Label Text="Ana Sayfa"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand" />

        <Button Text="Detay Sayfasına Git"
                Command="{Binding NavigateCommand}"/>
    </StackLayout>
</ContentPage>

Bu örnekte, MainPageViewModel içinde bir NavigateCommand komutu tanımladık ve bu komutla sayfa navigasyonu gerçekleştirdik. Böylece veri aktarımını MVVM deseni ile de sağlamış olduk.

Sonuç

.NET MAUI'de navigasyon ve veri aktarımı işlemleri oldukça esnek ve kullanışlıdır. Yukarıdaki örnekler, temel navigasyon işlemleri ve sayfalar arası veri aktarımı konusunda size bir başlangıç noktası sağlayacaktır. Daha karmaşık senaryolar için, MVVM ve veri bağlama özelliklerini daha detaylı inceleyebilirsiniz. .NET MAUI ile platformlar arası uygulama geliştirme sürecinizde başarılar dilerim!