Kabuk Gezinti Yöneticisi

Önemli

Bu proje deneysel bir sürümdür. Deneysel Mobil Blazor Bağlamalarını denemenizi ve adresinde https://github.com/xamarin/MobileBlazorBindingsgeri bildirim sağlamanızı umuyoruz.

Mobile Blazor Bağlamalarında gezintiye yönelik birkaç farklı yaklaşım vardır. Master/Detail, TabbedPage, Navigation Page ve Shell gibi Xamarin.Forms gezinti desenlerini temel alır.

Shell Navigation Manager, Blazor geliştiricilerine aşina olmak için tasarlanmıştır. Yollar, parametreler de dahil olmak üzere aynı biçime sahip yönergesi kullanılarak @page eklenir ve gezinti yöneticisine bağımlılık ekleme yoluyla erişilir.

Dahili olarak Xamarin.Forms Kabuğu URI Gezintisi kullanılarak uygulanır. Kabuk üst sekmeler, alt sekmeler, hamburger/açılır öğe, yığın, kalıcı ve URI tabanlı gezinti desteğine sahiptir. Bunların tümü, uygulamanızın neye ihtiyaç duyduğuna bağlı olarak birlikte karıştırılabilir veya yalıtılmış olarak kullanılabilir.

Shell hakkında daha fazla ayrıntı için Xamarin Forms belgelerine bakın. Blazor'da yönlendirmenin ayrıntıları ASP.NET Core belgelerindedir

ShellNavigationManager örneği için Mobile Blazor Bindings deposundaki Xaminals örneğine bakın.

Kurulum

uygulamasını kullanmak ShellNavigationManager için uygulamanızda olarak MainPage bir Shell olması gerekir.

Buradan başlamak için, biri Giriş Sayfası, diğeri de AboutPage olmak üzere iki sekmesi olan basit Shell bir sekme vardır. Bu, adlı AppShell.razorbir dosyada olmalıdır.

<Shell FlyoutBehavior="FlyoutBehavior.Disabled">
    <TabBar>
        <Tab>
            <ShellContent>
                <HomePage />
            </ShellContent>

            <ShellContent>
                <AboutPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

Önemli

ve AboutPage öğesinin HomePageContentPage içinde Shellkullanılacak kök öğesi olması gerekir.

içinde App.cs, uygulamasının AppShell olarak ayarlanması MainPage gerekir. Bu işlem çağrılarak AddComponentgerçekleştirilir. ShellMainPage olarak ayarlandığında arka planda yapılır, böylece yüklenirken yer tutucu olarak da boş ContentPage bir değer ayarlamamız gerekir.

Sayfalarımızda etkinleştirmek ShellNavigationManager ve kullanılabilir hale getirmek için tekil hizmet olarak ekleriz.

Bu size şuna benzer bir App oluşturucu vermelidir:

public App()
{
    AppHost = MobileBlazorBindingsHost.CreateDefaultBuilder()
        .ConfigureServices((hostContext, services) =>
        {
            // Register app-specific services
            //services.AddSingleton<AppState>();
            services.AddSingleton<ShellNavigationManager>();
        })
        .Build();

    MainPage = new ContentPage();
    AppHost.AddComponent<AppShell>(parent: this);
}

Yolları Kaydetme

Yol kaydı, gidebilmek istediğiniz her Razor bileşeninde gerçekleşir. Yollar, yönergesi @page ve ardından bir dize URI'si kullanılarak tanımlanır. Bu URI eğik çizgiyle başlamalıdır.

Örneğin, yolunu içeren bir kişi sayfası aşağıda verilmiştir /contact.

@page "/contact"
<ContentPage>
    <StackLayout>
        <Label Text="Phone Number:"></Label>
        <Label Text="123456"></Label>
    </StackLayout>
</ContentPage>

Gerekirse bir sayfaya birden çok yol yerleştirilebilir.

Not

0.6 Önizleme sürümünden itibaren Kabuk gezintisinin hedefi türünden Page türetilmelidir. 0.6 Önizleme sürümünden önce hedefin sürümünden ContentViewtüretilmiş olması gerekiyordu.

Sayfaya gitme

Sayfalar arasında gezinti, yönergesini kullanarak bileşenlerinizde erişebileceğiniz Kabuk Gezinti Yöneticisi kullanılarak @inject sağlanır. Bir örneğiniz olduğunda, açmak istediğiniz sayfanın URI'siyle çağrırsınız NavigateToAsync() .

Aşağıdaki örnekte, basıldığında öğesine gidilecek olan bir Button sayfa gösterilmektedir ContactPage.

@inject ShellNavigationManager NavigationManager
<ContentPage>
    <StackLayout>
        <Button Text="Contact"
                OnClick="OpenContactPage">
        </Button>
    </StackLayout>
</ContentPage>

@code
{
    async Task OpenContactPage()
    {
        await NavigationManager.NavigateToAsync("/contact");
    }
}

Gezinti parametreleri

Bir sayfaya gidildiğinde genellikle hedef sayfaya veri geçirmek istersiniz. Blazor'da verileri URI'de parametre olarak geçirebilirsiniz.

Bir sayfayı gezinti parametresini kabul edecek şekilde ayarlamak için, sayfaya bir özellik eklemeniz ve özniteliğiyle [Parameter] işaretlemeniz gerekir.

örn.

[Parameter] public string Name { get; set; }

Ardından sayfa için parametre adına sahip, ayrılmış URI'nin / sonunda ile {} çevrelenmiş bir yol eklemeniz gerekir.

Örnek:

@page "/contact/{Name}"

Bir parametreyle bu sayfaya gitmek için, URI'ye geçirmek istediğiniz adı kullanın ve aynı NavigateToAsync işlevi kullanın. Örnek:

await NavigationManager.NavigateToAsync("contact/Dunston");

ContactPage öğesine gidildiğinde, sayfadaki özelliğine erişerek Name değerini Name okuyabilirsiniz.

Gezinti parametreleri, , , stringGuidve DateTimegibi intdizelere kolayca dönüştürülebilen çeşitli .NET türlerinden herhangi biri olabilir. Desteklenen türlerin tüm ayrıntıları Blazor Yönlendirme belgelerinde bulunabilir