Aracılığıyla paylaş

Xamarin.Forms FlyoutPage

  • Makale

Açılır sayfa genellikle aşağıdaki ekran görüntülerinde gösterildiği gibi öğelerin listesini görüntüler:

Açılır Sayfa Bileşenleri

Öğe listesinin konumu her platformda aynıdır ve öğelerden biri seçildiğinde ilgili ayrıntı sayfasına gider. Buna ek olarak, açılır sayfada etkin ayrıntı sayfasına gitmek için kullanılabilecek bir düğme içeren bir gezinti çubuğu da bulunur:

  • iOS'ta, gezinti çubuğu sayfanın üst kısmında bulunur ve ayrıntı sayfasına gitmek için bir düğme vardır. Buna ek olarak, açılır öğe sola çekilerek etkin ayrıntı sayfasına gidilebilir.
  • Android'de, sayfanın üst kısmında gezinti çubuğu bulunur ve ayrıntı sayfasına gitmek için bir başlık, simge ve bir düğme görüntüler. Simge, Android platformuna [Activity] özgü projede sınıfı süsleyen MainActivity özniteliğinde tanımlanır. Buna ek olarak, açılır sayfa sola çekilerek, ekranın sağ ucundaki ayrıntı sayfasına dokunarak ve ekranın en altındaki Geri düğmesine dokunarak etkin ayrıntı sayfasına gidilebilir.
  • Evrensel Windows Platformu (UWP) üzerinde, gezinti çubuğu sayfanın üst kısmında bulunur ve ayrıntı sayfasına gitmek için bir düğme vardır.

Ayrıntı sayfasında, açılır sayfada seçilen öğeye karşılık gelen veriler görüntülenir ve ayrıntı sayfasının ana bileşenleri aşağıdaki ekran görüntülerinde gösterilir:

Ayrıntı Sayfası Bileşenleri

Ayrıntı sayfasında içeriği platforma bağımlı olan bir gezinti çubuğu bulunur:

  • iOS'ta, gezinti çubuğu sayfanın üst kısmında bulunur ve bir başlık görüntüler ve ayrıntı sayfası örneğinin örnekte sarmalanmış NavigationPage olması koşuluyla açılır sayfaya dönen bir düğme vardır. Buna ek olarak, sağdan ayrıntı sayfası çekilerek açılır sayfaya geri dönülebilir.
  • Android'de sayfanın üst kısmında bir gezinti çubuğu bulunur ve açılır sayfaya dönen bir başlık, simge ve düğme görüntülenir. Simge, Android platformuna [Activity] özgü projede sınıfı süsleyen MainActivity özniteliğinde tanımlanır.
  • UWP'de, gezinti çubuğu sayfanın üst kısmında bulunur ve bir başlık görüntüler ve açılır sayfaya dönen bir düğme vardır.

Açılır sayfa ve ayrıntı sayfaları arasındaki gezinti deneyiminin davranışı platforma bağlıdır:

  • iOS'ta, açılır sayfa soldan kaydırılırken ayrıntı sayfası sağa doğru kaydırılır ve ayrıntı sayfasının sol kısmı görünmeye devam eder.
  • Android'de ayrıntı ve açılır sayfalar birbirleri üzerinde yer alır.
  • UWP'de, özelliği olarak ayarlanmış Popoverolması koşuluyla açılır sayfa, ayrıntı sayfasının sol kısmından FlyoutLayoutBehavior kaydırılır.

iOS ve Android'deki açılır sayfanın dikey modda açılır sayfayla benzer bir genişliğe sahip olması dışında benzer davranışlar yatay modda gözlemlenir, bu nedenle ayrıntı sayfasının daha fazlası görünür.

Gezinti davranışını denetleme hakkında bilgi için bkz . Ayrıntı sayfası düzeni davranışını denetleme.

FlyoutPage oluşturma

AFlyoutPage, açılır öğe ve Detail ayrıntı sayfalarını sırasıyla almak ve ayarlamak için kullanılan türündeki ve özelliklerini PageiçerirFlyout.

Önemli

, FlyoutPage kök sayfa olacak şekilde tasarlanmıştır ve bunu diğer sayfa türlerinde alt sayfa olarak kullanmak beklenmeyen ve tutarsız davranışlara neden olabilir. Ayrıca, bir açılır sayfasının FlyoutPage her zaman bir ContentPage örnek olması ve ayrıntı sayfasının yalnızca , NavigationPageve ContentPage örnekleriyle TabbedPagedoldurulması önerilir. Bu, tüm platformlarda tutarlı bir kullanıcı deneyimi sağlamaya yardımcı olur.

Aşağıdaki XAML kodu örneği, ve Detail özelliklerini ayarlayan Flyout bir FlyoutPage gösterir:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation;assembly=FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Aşağıdaki kod örneği C# dilinde oluşturulan eşdeğeri FlyoutPage gösterir:

public class MainPageCS : FlyoutPage
{
    FlyoutMenuPageCS flyoutPage;

    public MainPageCS()
    {
        flyoutPage = new FlyoutMenuPageCS();
        Flyout = flyoutPage;
        Detail = new NavigationPage(new ContactsPageCS());
        ...
    }
    ...
}

Flyout özelliği bir ContentPage örneğe ayarlanır. Detail özelliği, bir örneği içeren bir NavigationPageContentPage olarak ayarlanır.

Açılır sayfayı oluşturma

Aşağıdaki XAML kod örneği, özelliği aracılığıyla başvurulan nesnesinin bildirimini FlyoutMenuPageFlyout gösterir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="using:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <StackLayout>
        <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:FlyoutPageItem}">
                    <local:FlyoutPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                    <local:FlyoutPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                    <local:FlyoutPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1" Text="{Binding Title}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Sayfa, özelliğini bir ListView nesne dizisine ayarlayarak ItemsSource XAML'deki verilerle doldurulmuş bir öğeden FlyoutPageItem oluşur. Her FlyoutPageItem bir , IconSourceve TargetType özelliklerini tanımlarTitle.

DataTemplate her öğesini görüntülemek FlyoutPageItemiçin ListView.ItemTemplate özelliğine A atanır. , DataTemplate ve ViewCell öğelerinden Image oluşan bir Labeliçerir. , Image özellik değerini görüntüler IconSource ve Label her FlyoutPageItemiçin özellik değerini görüntülerTitle.

Sayfanın Title ve IconImageSource özellikleri ayarlanmıştır. Simge, ayrıntı sayfasında başlık çubuğu olması koşuluyla görüntülenir. Bu, iOS'ta ayrıntı sayfası örneğini bir NavigationPage örnekte kaydırarak etkinleştirilmelidir.

Not

Sayfanın Flyout özellik kümesi olmalıdır Title , aksi takdirde bir özel durum oluşur.

Aşağıdaki kod örneği, C# dilinde oluşturulan eşdeğer sayfayı gösterir:

public class FlyoutMenuPageCS : ContentPage
{
    ListView listView;
    public ListView ListView { get { return listView; } }

    public FlyoutMenuPageCS()
    {
        var flyoutPageItems = new List<FlyoutPageItem>();
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "Contacts",
            IconSource = "contacts.png",
            TargetType = typeof(ContactsPageCS)
        });
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "TodoList",
            IconSource = "todo.png",
            TargetType = typeof(TodoListPageCS)
        });
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "Reminders",
            IconSource = "reminders.png",
            TargetType = typeof(ReminderPageCS)
        });

        listView = new ListView
        {
            ItemsSource = flyoutPageItems,
            ItemTemplate = new DataTemplate(() =>
            {
                var grid = new Grid { Padding = new Thickness(5, 10) };
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30) });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });

                var image = new Image();
                image.SetBinding(Image.SourceProperty, "IconSource");
                var label = new Label { VerticalOptions = LayoutOptions.FillAndExpand };
                label.SetBinding(Label.TextProperty, "Title");

                grid.Children.Add(image);
                grid.Children.Add(label, 1, 0);

                return new ViewCell { View = grid };
            }),
            SeparatorVisibility = SeparatorVisibility.None
        };

        IconImageSource = "hamburger.png";
        Title = "Personal Organiser";
        Padding = new Thickness(0, 40, 0, 0);
        Content = new StackLayout
        {
            Children = { listView }
        };
    }
}

Aşağıdaki ekran görüntüleri, her platformdaki açılır sayfayı gösterir:

Açılır Sayfa Örneği

Ayrıntı sayfasını oluşturma ve görüntüleme

ÖrneğiFlyoutMenuPage, örneğin olayı işlemek için bir olay işleyicisi kaydedebilmesi MainPageFlyoutPage için örneğini ItemSelected kullanıma sunan ListView bir özellik içerirListView. Bu, örneğin özelliğini seçili ListView öğeyi temsil eden sayfaya ayarlamasını Detail sağlarMainPage. Aşağıdaki kod örneği olay işleyicisini gösterir:

public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        ...
        flyoutPage.listView.ItemSelected += OnItemSelected;
    }

    void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as FlyoutPageItem;
        if (item != null)
        {
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
            flyoutPage.listView.SelectedItem = null;
            IsPresented = false;
        }
    }
}

OnItemSelected yöntemi aşağıdaki eylemleri gerçekleştirir:

  • örneğinden ListView öğesini alır SelectedItem ve olmaması koşuluylanull, ayrıntı sayfasını özelliğinde TargetTypeFlyoutPageItemdepolanan sayfa türünün yeni bir örneğine ayarlar. Üzerindeki özelliği FlyoutMenuPage aracılığıyla IconImageSource başvurulan simgenin iOS'taki ayrıntı sayfasında gösterildiğinden emin olmak için sayfa türü bir NavigationPage örneğe sarmalanır.
  • öğesindeki ListView seçili öğe, bir sonraki FlyoutMenuPage sunuda öğelerin hiçbirinin ListView seçilmeyeceği şekilde ayarlanırnull.
  • Ayrıntı sayfası, özelliği falseolarak ayarlanarak FlyoutPage.IsPresented kullanıcıya sunulur. Bu özellik açılır öğe veya ayrıntı sayfasının sunulup sunulmayacağını denetler. Açılır sayfayı görüntülemek ve ayrıntı sayfasını görüntülemek için false olarak ayarlanmalıdırtrue.

Aşağıdaki ekran görüntüleri, açılır sayfada seçildikten sonra gösterilen ayrıntı sayfasını gösterir ContactPage :

Ayrıntı Sayfası Örneği

Ayrıntı sayfası düzeni davranışını denetleme

FlyoutPage Açılır öğe ve ayrıntı sayfalarını yönetme şekli, uygulamanın telefon veya tablette çalışıp çalışmadığına, cihazın yönüne ve özelliğin FlyoutLayoutBehavior değerine bağlıdır. Bu özellik, ayrıntı sayfasının nasıl görüntüleneceğini belirler. Olası değerler şunlardır:

  • Default – Sayfalar platform varsayılanı kullanılarak görüntülenir.
  • Popover – Ayrıntı sayfası açılır sayfayı kapsar veya kısmen kapsar.
  • Split – Açılır sayfa solda, ayrıntı sayfası ise sağda görüntülenir.
  • SplitOnLandscape – Cihaz yatay yöndeyken bölünmüş ekran kullanılır.
  • SplitOnPortrait – Cihaz dikey yöndeyken bölünmüş ekran kullanılır.

Aşağıdaki XAML kod örneğinde özelliğinin FlyoutLayoutBehaviorFlyoutPagenasıl ayarlanacağı gösterilmektedir:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="FlyoutPageNavigation.MainPage"
            FlyoutLayoutBehavior="Popover">
  ...
</FlyoutPage>

Aşağıdaki kod örneği C# dilinde oluşturulan eşdeğeri FlyoutPage gösterir:

public class MainPageCS : FlyoutPage
{
    FlyoutMenuPageCS flyoutPage;

    public MainPageCS()
    {
        ...
        FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;
    }
}

Önemli

özelliğinin FlyoutLayoutBehavior değeri yalnızca tabletlerde veya masaüstünde çalışan uygulamaları etkiler. Telefonlarda çalışan uygulamaların her zaman davranışı vardır Popover .