Aracılığıyla paylaş

Xamarin.Forms Sekmeli Sayfa

  • Makale

, Xamarin.FormsTabbedPage her sekmenin ayrıntı alanına içerik yüklemesiyle birlikte bir sekme listesi ve daha büyük bir ayrıntı alanından oluşur. Aşağıdaki ekran görüntüleri iOS ve Android'de bir TabbedPage gösterir:

iOS ve Android'de üç sekme içeren TabbedPage'in ekran görüntüsü

iOS'ta, sekme listesi ekranın alt kısmında görünür ve ayrıntı alanı yukarıdadır. Her sekme, alfa kanalına sahip bir PNG dosyası olması gereken bir başlık ve simgeden oluşur. Dikey yönlendirmede, sekme başlıklarının üzerinde sekme çubuğu simgeleri görünür. Yatay yönde simgeler ve başlıklar yan yana görüntülenir. Ayrıca, cihaza ve yönlendirmeye bağlı olarak normal veya kompakt bir sekme çubuğu görüntülenebilir. Beşten fazla sekme varsa, ek sekmelere erişmek için kullanılabilecek bir Diğer sekmesi görüntülenir.

Android'de, sekme listesi ekranın üst kısmında görünür ve ayrıntı alanı aşağıdadır. Her sekme, alfa kanalına sahip bir PNG dosyası olması gereken bir başlık ve simgeden oluşur. Ancak, sekmeler platforma özgü bir şekilde ekranın en altına taşınabilir. Beşten fazla sekme varsa ve sekme listesi ekranın en altındaysa, ek sekmelere erişmek için kullanılabilecek bir Diğer sekmesi görüntülenir. Simge gereksinimleri hakkında daha fazla bilgi için bkz . material.io sekmeleri ve developer.android.com farklı piksel yoğunluklarını destekleme. Sekmeleri ekranın en altına taşıma hakkında bilgi için bkz . TabbedPage Araç Çubuğu Yerleşimi ve Rengi Ayarlama.

Evrensel Windows Platformu (UWP) üzerinde, ekranın en üstünde sekme listesi görüntülenir ve ayrıntılar alanı aşağıdadır. Her sekme bir başlıktır. Ancak, her sekmeye platforma özgü simgeler eklenebilir. Daha fazla bilgi için bkz . Windows'ta TabbedPage Simgeleri.

İpucu

Ölçeklenebilir Vektör Grafiği (SVG) dosyaları üzerinde TabbedPagesekme simgeleri olarak görüntülenebilir:

  • iOS TabbedRenderer sınıfı, belirtilen kaynaktan sekme simgelerini yüklemek için kullanılabilecek geçersiz kılınabilir GetIcon bir yönteme sahiptir. Ayrıca, gerekirse bir simgenin seçili ve seçilmemiş sürümleri sağlanabilir.
  • Android AppCompat TabbedPageRenderer sınıfı, özel Drawablebir öğesinden sekme simgelerini yüklemek için kullanılabilecek geçersiz kılınabilir SetTabIconImageSource bir yönteme sahiptir. Alternatif olarak, SVG dosyaları tarafından otomatik olarak görüntülenebilen Xamarin.Formsvektör çizilebilir kaynaklara dönüştürülebilir. SVG dosyalarını vektör çizilebilir kaynaklara dönüştürme hakkında daha fazla bilgi için bkz . developer.android.com üzerinde çok yoğunluklu vektör grafikleri ekleme.

Sekmeli Sayfa Oluşturma

oluşturmak TabbedPageiçin iki yaklaşım kullanılabilir:

her iki yaklaşımda TabbedPage da, kullanıcı her sekmeyi seçtiğinde her sayfayı görüntüler.

Önemli

yalnızca ve ContentPage örnekleriyle NavigationPage doldurulması önerilirTabbedPage. Bu, tüm platformlarda tutarlı bir kullanıcı deneyimi sağlamaya yardımcı olur.

Ayrıca, TabbedPage aşağıdaki özellikleri tanımlar:

Bu özelliklerin tümü nesneler tarafından BindableProperty desteklenir, yani bunlar stillendirilebilir ve özellikler veri bağlamalarının hedefleri olabilir.

Uyarı

içinde TabbedPage, her Page nesne oluşturulduğunda oluşturulur TabbedPage . Bu, özellikle uygulamanın kök sayfasıysa TabbedPage kötü bir kullanıcı deneyimine yol açabilir. Ancak Shell, Xamarin.Forms gezintiye yanıt olarak bir sekme çubuğu üzerinden erişilen sayfaların isteğe bağlı olarak oluşturulmasını sağlar. Daha fazla bilgi için bkz Xamarin.Forms . Shell.

TabbedPage'i Sayfa koleksiyonuyla doldurma

, TabbedPage bir nesne koleksiyonu gibi bir alt Page nesne koleksiyonuyla ContentPage doldurulabilir. Bu, nesneleri koleksiyona PageTabbedPage.Children ekleyerek elde edilir. Bu, XAML'de aşağıdaki gibi gerçekleştirilir:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule" IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

Not

Children sınıfından türetilen TabbedPage özelliğiMultiPage<T>, öğesinin ContentProperty özelliğidirMultiPage<T>. Bu nedenle, XAML'de nesneleri özelliğine Children açıkça atamak Page gerekli değildir.

Eşdeğer C# kodu:

public class MainPageCS : TabbedPage
{
  public MainPageCS ()
  {
    NavigationPage navigationPage = new NavigationPage (new SchedulePageCS ());
    navigationPage.IconImageSource = "schedule.png";
    navigationPage.Title = "Schedule";

    Children.Add (new TodayPageCS ());
    Children.Add (navigationPage);
  }
}

Bu örnekte , TabbedPage iki Page nesneyle doldurulur. İlk alt öğe bir ContentPage nesne, ikinci alt ise nesne içeren bir ContentPage nesnedirNavigationPage.

Aşağıdaki ekran görüntüleri, içindeki bir ContentPageTabbedPagenesneyi gösterir:

iOS ve Android'de üç sekme içeren TabbedPage'in ekran görüntüsü

Başka bir sekme seçildiğinde, sekmeyi ContentPage temsil eden nesne görüntülenir:

iOS ve Android'de sekmeler içeren TabbedPage'in ekran görüntüsü

Zamanlama sekmesinde, ContentPage nesne bir NavigationPage nesne içinde sarmalanır.

Uyarı

bir NavigationPage içine yerleştirilebilir TabbedPage, ancak içine bir TabbedPage yerleştirilmesi NavigationPageönerilmez. Bunun nedeni, iOS'ta her UITabBarController zaman için bir sarmalayıcı işlevi görüyor olmasıdır UINavigationController. Daha fazla bilgi için bkz . iOS Geliştirici Kitaplığı'nda Birleşik Görünüm Denetleyicisi Arabirimleri .

Gezinti, nesnenin bir nesneye sarmalanması koşuluyla ContentPage bir NavigationPage sekme içinde gerçekleştirilebilir. Bu, nesnesinin PushAsync özelliğinde NavigationContentPage yöntemini çağırarak gerçekleştirilir:

await Navigation.PushAsync (new UpcomingAppointmentsPage ());

Gidilen sayfa, yöntemin bağımsız değişkeni PushAsync olarak belirtilir. Bu örnekte, UpcomingAppointmentsPage sayfa gezinti yığınına gönderilir ve burada etkin sayfa olur:

iOS ve Android'de sekme içinde gezinti ekran görüntüsü

sınıfını NavigationPage kullanarak gezinti gerçekleştirme hakkında daha fazla bilgi için bkz . Hiyerarşik Gezinti.

TabbedPage'i şablonla doldurma

özelliğine TabbedPage bir veri ItemsSource koleksiyonu atanarak ve verileri nesne olarak Page şablonlayan özelliğine ItemTemplate bir DataTemplate atanarak sayfalarla doldurulabilir. Bu, XAML'de aşağıdaki gibi gerçekleştirilir:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
            x:Class="TabbedPageDemo.TabbedPageDemoPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}">            
  <TabbedPage.Resources>
    <ResourceDictionary>
      <local:NonNullToBooleanConverter x:Key="booleanConverter" />
    </ResourceDictionary>
  </TabbedPage.Resources>
  <TabbedPage.ItemTemplate>
    <DataTemplate>
      <ContentPage Title="{Binding Name}" IconImageSource="monkeyicon.png">
        <StackLayout Padding="5, 25">
          <Label Text="{Binding Name}" Font="Bold,Large" HorizontalOptions="Center" />
          <Image Source="{Binding PhotoUrl}" WidthRequest="200" HeightRequest="200" />
          <StackLayout Padding="50, 10">
            <StackLayout Orientation="Horizontal">
              <Label Text="Family:" HorizontalOptions="FillAndExpand" />
              <Label Text="{Binding Family}" Font="Bold,Medium" />
            </StackLayout>
            ...
          </StackLayout>
        </StackLayout>
      </ContentPage>
    </DataTemplate>
  </TabbedPage.ItemTemplate>
</TabbedPage>

Eşdeğer C# kodu:

public class TabbedPageDemoPageCS : TabbedPage
{
  public TabbedPageDemoPageCS ()
  {
    var booleanConverter = new NonNullToBooleanConverter ();

    ItemTemplate = new DataTemplate (() =>
    {
      var nameLabel = new Label
      {
        FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
        FontAttributes = FontAttributes.Bold,
        HorizontalOptions = LayoutOptions.Center
      };
      nameLabel.SetBinding (Label.TextProperty, "Name");

      var image = new Image { WidthRequest = 200, HeightRequest = 200 };
      image.SetBinding (Image.SourceProperty, "PhotoUrl");

      var familyLabel = new Label
      {
        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
        FontAttributes = FontAttributes.Bold
      };
      familyLabel.SetBinding (Label.TextProperty, "Family");
      ...

      var contentPage = new ContentPage
      {
        IconImageSource = "monkeyicon.png",
        Content = new StackLayout {
          Padding = new Thickness (5, 25),
          Children =
          {
            nameLabel,
            image,
            new StackLayout
            {
              Padding = new Thickness (50, 10),
              Children =
              {
                new StackLayout
                {
                  Orientation = StackOrientation.Horizontal,
                  Children =
                  {
                    new Label { Text = "Family:", HorizontalOptions = LayoutOptions.FillAndExpand },
                    familyLabel
                  }
                },
                // ...
              }
            }
          }
        }
      };
      contentPage.SetBinding (TitleProperty, "Name");
      return contentPage;
    });
    ItemsSource = MonkeyDataModel.All;
  }
}

Bu örnekte, her sekme, kullanan bir ContentPage nesneden Image ve Label sekmenin verilerini görüntülemek için nesnelerden oluşur:

iOS ve Android'de şablonlu Bir TabbedPage'in ekran görüntüsü

Başka bir sekme seçildiğinde, sekmeyi ContentPage temsil eden nesne görüntülenir.