Xamarin.Forms TabbedPage

Artykuł
11/06/2020

Obiekt Xamarin.FormsTabbedPage składa się z listy kart i większego obszaru szczegółów, z których każda karta ładuje zawartość do obszaru szczegółów. Na poniższych zrzutach ekranu przedstawiono elementy TabbedPage w systemach iOS i Android:

W systemie iOS lista kart jest wyświetlana w dolnej części ekranu, a obszar szczegółów znajduje się powyżej. Każda karta składa się z tytułu i ikony, która powinna być plikiem PNG z kanałem alfa. W orientacji pionowej ikony paska tabulacji są wyświetlane powyżej tytułów kart. W orientacji poziomej ikony i tytuły są wyświetlane obok siebie. Ponadto może być wyświetlany zwykły lub kompaktowy pasek karty, w zależności od urządzenia i orientacji. Jeśli istnieje więcej niż pięć kart, zostanie wyświetlona karta Więcej , która może służyć do uzyskiwania dostępu do dodatkowych kart.

W systemie Android lista kart jest wyświetlana w górnej części ekranu, a obszar szczegółów znajduje się poniżej. Każda karta składa się z tytułu i ikony, która powinna być plikiem PNG z kanałem alfa. Jednak karty można przenosić do dołu ekranu z konkretną platformą. Jeśli istnieje więcej niż pięć kart, a lista kart znajduje się w dolnej części ekranu, zostanie wyświetlona karta Więcej, która może służyć do uzyskiwania dostępu do dodatkowych kart. Aby uzyskać informacje na temat wymagań dotyczących ikon, zobacz Tabs on material.io and Support different pixel densities on developer.android.com (Tabs on material.io and Support different pixel densities on developer.android.com (Karty na material.io i Obsługa różnych gęstości pikseli). Aby uzyskać informacje na temat przenoszenia kart na dół ekranu, zobacz Ustawianie umieszczania i koloru paska narzędzi TabbedPage.

Na platforma uniwersalna systemu Windows (UWP) lista kart jest wyświetlana w górnej części ekranu, a poniżej znajduje się obszar szczegółów. Każda karta składa się z tytułu. Jednak ikony można dodawać do każdej karty z specyficzną dla platformy. Aby uzyskać więcej informacji, zobacz Ikony elementu TabbedPage w systemie Windows.

Napiwek

Skalowalne pliki grafiki wektorowej (SVG) można wyświetlać jako ikony kart na :TabbedPage

Klasa systemu iOS TabbedRenderer ma metodę zastępowalną GetIcon , która może służyć do ładowania ikon kart z określonego źródła. Ponadto w razie potrzeby można podać wybrane i niezaznaczone wersje ikony.
Klasa AppCompat TabbedPageRenderer systemu Android ma metodę zastępowalną SetTabIconImageSource , która może służyć do ładowania ikon kart z niestandardowego Drawableelementu . Alternatywnie pliki SVG można przekonwertować na zasoby do losowania wektorowego, które mogą być automatycznie wyświetlane przez Xamarin.Formsprogram . Aby uzyskać więcej informacji na temat konwertowania plików SVG na zasoby z możliwością rysowania wektorowego, zobacz Dodawanie grafiki wektorów wielogęszczowych na developer.android.com.

Tworzenie elementu TabbedPage

Do utworzenia TabbedPageelementu można użyć dwóch metod:

Wypełnij obiekt TabbedPage kolekcją obiektów podrzędnych Page , takich jak kolekcja ContentPage obiektów. Aby uzyskać więcej informacji, zobacz Wypełnianie elementu TabbedPage kolekcją stron.
Przypisz kolekcję do ItemsSource właściwości i przypisz element DataTemplate do ItemTemplate właściwości , aby zwracać strony dla obiektów w kolekcji. Aby uzyskać więcej informacji, zobacz Wypełnianie elementu TabbedPage szablonem.

W obu podejściach każda TabbedPage strona będzie wyświetlana, gdy użytkownik wybiera każdą kartę.

Ważne

Zaleca się wypełnienie obiektu TabbedPage tylko wystąpieniami NavigationPage i ContentPage . Pomoże to zapewnić spójne środowisko użytkownika na wszystkich platformach.

Ponadto TabbedPage definiuje następujące właściwości:

BarBackgroundColor, typu Color, kolor tła paska karty.
BarTextColor, typu Color, kolor tekstu na pasku karty.
SelectedTabColor, typu Color, kolor karty po jej wybraniu.
UnselectedTabColor, typu Color, kolor karty, gdy jest on niezaznaczony.

Wszystkie te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że można je stylizować, a właściwości mogą być obiektami docelowymi powiązań danych.

Ostrzeżenie

W obiekcie TabbedPagekażdy Page obiekt jest tworzony podczas TabbedPage konstruowania obiektu . Może to prowadzić do złego środowiska użytkownika, szczególnie jeśli TabbedPage jest to strona główna aplikacji. Jednak Xamarin.Forms powłoka umożliwia tworzenie stron za pośrednictwem paska kart na żądanie w odpowiedzi na nawigację. Aby uzyskać więcej informacji, zobacz Xamarin.Forms Powłoka.

Wypełnianie elementu TabbedPage kolekcją stron

Obiekt TabbedPage można wypełnić kolekcją obiektów podrzędnych Page , takich jak kolekcja ContentPage obiektów. Można to osiągnąć przez dodanie Page obiektów do kolekcji TabbedPage.Children . Jest to realizowane w języku XAML w następujący sposób:

<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>

Uwaga

Właściwość Children klasy, z której TabbedPage pochodzi, jest właściwością ContentProperty MultiPage<T>.MultiPage<T> W związku z tym w języku XAML nie jest konieczne jawne przypisanie Page obiektów do Children właściwości .

Równoważny kod języka C# to:

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);
  }
}

W tym przykładzie TabbedPage obiekt jest wypełniany dwoma Page obiektami. Pierwszy element podrzędny jest obiektem ContentPage , a drugie podrzędne jest obiektem NavigationPage zawierającym ContentPage obiekt.

Na poniższych zrzutach ekranu przedstawiono ContentPage obiekt w obiekcie TabbedPage:

Wybranie innej karty powoduje wyświetlenie ContentPage obiektu reprezentującego kartę:

Na karcie ContentPage Harmonogram obiekt jest opakowany w NavigationPage obiekt.

Ostrzeżenie

NavigationPage Chociaż element można umieścić w obiekcie TabbedPage, nie zaleca się umieszczania obiektu TabbedPage w obiekcie NavigationPage. Jest to spowodowane tym, UITabBarController że w systemie iOS zawsze działa jako otoka dla .UINavigationController Aby uzyskać więcej informacji, zobacz Połączone interfejsy kontrolera widoku w bibliotece deweloperów systemu iOS.

Nawigowanie po karcie

Nawigację można wykonać na karcie, pod warunkiem, że ContentPage obiekt jest owinięty w NavigationPage obiekcie. Jest to realizowane przez wywołanie PushAsync metody we Navigation właściwości ContentPage obiektu:

await Navigation.PushAsync (new UpcomingAppointmentsPage ());

Strona, do która jest przechodzina, jest określana jako argument metody PushAsync . W tym przykładzie UpcomingAppointmentsPage strona jest wypychana do stosu nawigacji, gdzie staje się aktywną stroną:

Aby uzyskać więcej informacji na temat przeprowadzania NavigationPage nawigacji przy użyciu klasy, zobacz Nawigacja hierarchiczna.

Wypełnianie elementu TabbedPage szablonem

Obiekt TabbedPage można wypełnić stronami, przypisując kolekcję danych do ItemsSource właściwości, a następnie przypisując element DataTemplate do ItemTemplate właściwości, która szablonuje dane jako Page obiekty. Jest to realizowane w języku XAML w następujący sposób:

<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>

Równoważny kod języka C# to:

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;
  }
}

W tym przykładzie każda karta składa się z ContentPage obiektu, który używa Image obiektów i Label do wyświetlania danych dla karty:

Wybranie innej karty powoduje wyświetlenie ContentPage obiektu reprezentującego kartę.

Udostępnij za pośrednictwem

Xamarin.Forms TabbedPage

Tworzenie elementu TabbedPage

Wypełnianie elementu TabbedPage kolekcją stron

Nawigowanie po karcie

Wypełnianie elementu TabbedPage szablonem

Dodatkowe zasoby

Udostępnij za pośrednictwem

Xamarin.Forms TabbedPage

Tworzenie elementu TabbedPage

Wypełnianie elementu TabbedPage kolekcją stron

Nawigowanie po karcie

Wypełnianie elementu TabbedPage szablonem

Pokrewne łącza

Dodatkowe zasoby