.NET MAUI Kabuğu ile sekme gezintisi uygulama
Sekme gezintisi, bir sekme şeridinin (dokunılabilir denetimler satırı) ekranın en üstünde veya altında kalıcı olarak görüntülendiği bir gezinti düzenidir. Sekme gezintisi, kullanıcının çok sayfalı bir uygulamadaki sayfalar arasında seçim yapmak için bir mekanizma sağlar.
Bu ünitede, sekme gezintisi uygulayan bir uygulama oluşturmayı öğreneceksiniz.
Sekme gezintisi nedir?
Sekme gezintisi kullanan bir uygulamada, her sekme uygulamanın belirli bir bölümünü veya sayfasını temsil eder. Kullanıcılar, uygulamadaki içerik arasında gezinmek için sekme şeridindeki sekmeleri seçer. Örnek olarak, aşağıdaki çizimde iOS Saat uygulamasında sekme gezintisi kullanımı gösterilmektedir. Sayfanın tabanında vurgulanan simgeler, farklı görünümler arasında geçiş yapmanızı sağlar. Bu simgeler sekmelere karşılık gelir ve görünümler sekmeli sayfalardır:
Sekme şeridi her zaman görünür olduğundan, sekme gezintisi kullanıcıların bir uygulamadaki içerik arasında hızla geçiş yapmasını sağlar. Sekme gezintisi, bir uygulamanın kullanıcının sık kullanabilecekleri çeşitli bölümleri olduğunda idealdir. Saat uygulamaları mükemmel bir örnek. Saat, alarm ve kronometre bölümleri sık sık kullanılmaktadır.
Mobil cihazlarda, sekme şeridi genellikle sınırlı alana sahiptir ve cihaz boyutuna ve yönüne bağlı olarak yalnızca sabit sayıda sekme görüntüleyebilir. Öneri, yalnızca üç-dört sekme kullanmaktır. Daha fazla sekme eklerseniz, tüm cihazlardaki tüm sekmeleri göstermek için yeterli alanınız olması garanti edilmemektedir. .NET MAUI tarafından desteklenen işletim sistemleri taşma alanına izin verir. Bu alan, ekrana sığmayan sekmelere erişmek için daha fazla alan sağlar. Ancak, bu taşma sekmelerine gitmek için kullanıcı tarafından ek adımlar gerekir. Bu bölümler daha az bulunabilir.
Dörtten fazla sekmeye ihtiyacınız varsa, açılır öğe gezintisi gibi başka bir gezinti düzeni kullanmayı göz önünde bulundurun. Ayrıca, verileriniz doğal, ana ayrıntı hiyerarşisi oluşturuyorsa sekme gezintisi en iyi seçenek değildir. Bu gibi durumlarda yığın gezintisini göz önünde bulundurmanız gerekir.
.NET MAUI uygulamasında sekme gezintisi
.NET MAUI kabuk uygulamasında sekme gezintisi uygulamak için nesnesini kullanırsınız TabBar . TabBar nesnesi bir sekme kümesi görüntüler ve kullanıcı bir sekme seçtiğinde görüntülenen içeriği otomatik olarak değiştirir. Aşağıdaki çizimde kullanıcı arabirimi alanları gösterilmektedir.
.NET MAUI Shell uygulamasında sekmeleri kullanmak için sınıfının alt öğesi olarak sınıfının bir örneğini TabBar Shell oluşturun. Ardından öğesine TabBarnesneler ekleyinTab. nesnesinin Tab içinde, bir ShellContent nesne bir ContentPage nesne olarak ayarlanmalıdır.
Sekmeli Sayfa Oluşturma
Sınıfın Shell alt öğesi olarak bir TabBar örnek oluşturabilirsiniz. gerektiğinde öğesine nesneleri alt öğe TabBar olarak ekleyinTab. nesnesinin Tab içinde, bir ShellContent nesne bir ContentPage nesne olarak ayarlanmalıdır.
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<TabBar>
<Tab Title="Moon Phase"
Icon="moon.png">
<ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</Tab>
<Tab Title="Sunrise"
Icon="sun.png">
<ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
</Tab>
</TabBar>
</Shell>
Açılır menü içindeki sekmeler
Açılır öğe, bir veya daha fazla sekme görüntüleyen bir sekme çubuğu içeren bir sayfa açabilir.
Bu tasarımı uygulamak için, içinde görüntülenmesini istediğiniz her sekme için bir <ShellContent> öğe <FlyoutItem> ekleyin.
sekmenin Title başlığını ve simgesini denetlemek için ve Icon <ShellContent> öğesini ayarlayın.
<FlyoutItem Title="Astronomy" Icon="moon.png">
<ShellContent Title="Moon Phase" Icon="moon.png"
ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
<ShellContent Title="Sunrise" Icon="sun.png"
ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>
<FlyoutItem Title="About" Icon="question.png">
<ShellContent
ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>