Xamarin.Forms Informační rámeček prostředí

Download Sample Stažení ukázky

Navigační prostředí poskytované Xamarin.Forms prostředím je založené na flyouts a kartách. Informační rámeček je volitelná kořenová nabídka pro aplikaci prostředí a je plně přizpůsobitelná. Je přístupná prostřednictvím ikony nebo potažením prstem ze strany obrazovky. Informační rámeček se skládá z volitelného záhlaví, plovoucí položky, volitelných položek nabídky a volitelného zápatí:

Screenshot of a Shell annotated flyout

Položky informačního rámečku

Do informačního seznamu lze přidat jednu nebo více položek informačního panelu a každá položka informačního panelu je reprezentována FlyoutItem objektem. Každý FlyoutItem objekt by měl být podřízeným objektem odvozené třídy Shell . Pokud hlavička informačního rámečku není k dispozici, zobrazí se položky informačního panelu v horní části informačního rámečku.

Následující příklad vytvoří informační rámeček obsahující dvě položky informačního panelu:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

FlyoutItem.TitleVlastnost typu string definuje název položky informačního rámečku. FlyoutItem.IconVlastnost typu ImageSource definuje ikonu plovoucí položky:

Screenshot of a Shell two page app with flyout items, on iOS and Android

V tomto příkladu ShellContent může být každý objekt k dispozici pouze prostřednictvím položek informačního panelu, a nikoli prostřednictvím karet. To proto, že ve výchozím nastavení se karty zobrazí pouze v případě, že položka informačního rámečku obsahuje více než jednu kartu.

Důležité

V aplikaci prostředí se stránky vytvářejí na vyžádání v reakci na navigaci. K tomu je potřeba použít DataTemplate rozšíření značek k nastavení ContentTemplate vlastnosti každého ShellContent objektu na ContentPage objekt.

Prostředí má implicitní operátory převodu, které umožňují zjednodušit vizuální hierarchii prostředí, aniž by bylo nutné zavádět další zobrazení do vizuálního stromu. To je možné, protože objekt s podtřídami Shell může vždy obsahovat pouze objekty, které mohou vždy obsahovat pouze objekty FlyoutItemTabBarTab , které mohou vždy obsahovat ShellContent objekty. Tyto implicitní operátory převodu lze použít k odebrání FlyoutItemTab objektů a z předchozího příkladu:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

Tento implicitní převod automaticky zalomí každý ShellContent objekt v Tab objektech, které jsou zabaleny do FlyoutItem objektů.

Poznámka

Všechny FlyoutItem objekty v Shell objektu podtříd jsou automaticky přidány do Shell.FlyoutItems kolekce, která definuje seznam položek, které budou zobrazeny v informačním rámečku.

Možnosti zobrazení v informačním rámečku

FlyoutItem.FlyoutDisplayOptionsVlastnost určuje, jak se v informačním rámečku zobrazí položka informačního rámečku a její podřízené položky. Tato vlastnost by měla být nastavena na FlyoutDisplayOptions člen výčtu:

  • AsSingleItemoznačuje, že položka bude viditelná jako jedna položka. Toto je výchozí hodnota FlyoutDisplayOptions Vlastnosti.
  • AsMultipleItemsoznačuje, že položka a její podřízené položky budou viditelné v informačním rámečku jako skupina položek.

Položku informačního panelu pro každý Tab objekt v rámci FlyoutItem lze zobrazit nastavením FlyoutItem.FlyoutDisplayOptions vlastnosti na AsMultipleItems :

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       FlyoutHeaderBehavior="CollapseOnScroll"
       x:Class="Xaminals.AppShell">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />  
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

    <ShellContent Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />    
</Shell>

V tomto příkladu jsou vytvořeny položky informačního panelu pro Tab objekt, který je podřízený FlyoutItem objekt objektu, a ShellContent objekty, které jsou podřízené FlyoutItem objektu. K tomu dochází, protože každý ShellContent objekt, který je podřízený FlyoutItem objekt objektu, je automaticky zabalen do Tab objektu. Kromě toho je vytvořena položka informačního panelu pro finální ShellContent objekt, který je automaticky zabalen do Tab objektu a následně v FlyoutItem objektu.

Poznámka

Karty se zobrazí, pokud FlyoutItem obsahuje více než jeden ShellContent objekt.

Výsledkem je následující položky informačního rámečku:

Screenshot of flyout containing FlyoutItem objects, on iOS and Android

Definovat vzhled FlyoutItem

Vzhled každého z nich FlyoutItem lze přizpůsobit nastavením Shell.ItemTemplate připojené vlastnosti na DataTemplate :

<Shell ...>
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

Tento příklad zobrazí název každého FlyoutItem objektu kurzívou:

Screenshot of templated FlyoutItem objects, on iOS and Android

Vzhledem Shell.ItemTemplate k tomu, že je připojená vlastnost, mohou být k určitým objektům připojeny různé šablony FlyoutItem .

Poznámka

Prostředí poskytuje Title vlastnosti a FlyoutIcon pro BindingContextItemTemplate .

Kromě toho prostředí obsahuje tři třídy stylu, které jsou automaticky aplikovány na FlyoutItem objekty. Další informace naleznete v tématu style FlyoutItem a MenuItem Objects.

Výchozí šablona pro FlyoutItems

Výchozí hodnota DataTemplate použitá pro každou FlyoutItem je uvedena níže:

<DataTemplate x:Key="FlyoutTemplate">
    <Grid x:Name="FlyoutItemLayout"
          HeightRequest="{x:OnPlatform Android=50}"
          ColumnSpacing="{x:OnPlatform UWP=0}"
          RowSpacing="{x:OnPlatform UWP=0}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="{x:OnPlatform Android=#F2F2F2, iOS=#F2F2F2}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50, UWP=Auto}" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image x:Name="FlyoutItemImage"
               Source="{Binding FlyoutIcon}"
               VerticalOptions="Center"
               HorizontalOptions="{x:OnPlatform Default=Center, UWP=Start}"
               HeightRequest="{x:OnPlatform Android=24, iOS=22, UWP=16}"
               WidthRequest="{x:OnPlatform Android=24, iOS=22, UWP=16}">
            <Image.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="UWP"
                            Value="12,0,12,0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Image.Margin>
        </Image>
        <Label x:Name="FlyoutItemLabel"
               Grid.Column="1"
               Text="{Binding Title}"
               FontSize="{x:OnPlatform Android=14, iOS=Small}"
               HorizontalOptions="{x:OnPlatform UWP=Start}"
               HorizontalTextAlignment="{x:OnPlatform UWP=Start}"
               FontAttributes="{x:OnPlatform iOS=Bold}"
               VerticalTextAlignment="Center">
            <Label.TextColor>
                <OnPlatform x:TypeArguments="Color">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="#D2000000" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.TextColor>
            <Label.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="20, 0, 0, 0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.Margin>
            <Label.FontFamily>
                <OnPlatform x:TypeArguments="x:String">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="sans-serif-medium" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.FontFamily>
        </Label>
    </Grid>
</DataTemplate>

Tuto šablonu lze použít jako základ pro provádění změn v existujícím rozložení informačního panelu a také pro vizuální stavy, které jsou implementovány pro položky informačního panelu.

Kromě toho GridImageLabel mají elementy, a všechny x:Name hodnoty a tak je možné je cílit pomocí manažera vizuálního stavu. Další informace najdete v tématu Nastavení stavu u více elementů.

Poznámka

Stejnou šablonu lze také použít pro MenuItem objekty.

Nahradit obsah informačního rámečku

Položky informačního panelu, které reprezentují obsah informačního panelu, mohou být volitelně nahrazeny vlastním obsahem nastavením Shell.FlyoutContent vlastnosti BIND na object :

<Shell ...
       x:Name="shell">
    ...
    <Shell.FlyoutContent>
        <CollectionView BindingContext="{x:Reference shell}"
                        IsGrouped="True"
                        ItemsSource="{Binding FlyoutItems}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Title}"
                           TextColor="White"
                           FontSize="Large" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Shell.FlyoutContent>
</Shell>

V tomto příkladu je obsah informačního rámečku nahrazen CollectionView názvem, který zobrazuje název každé položky v FlyoutItems kolekci.

Poznámka

FlyoutItemsVlastnost ve Shell třídě je kolekce plovoucích položek, která je jen pro čtení.

Obsah informačního rámečku lze také definovat nastavením Shell.FlyoutContentTemplate vlastnosti BIND na DataTemplate :

<Shell ...
       x:Name="shell">
    ...
    <Shell.FlyoutContentTemplate>
        <DataTemplate>
            <CollectionView BindingContext="{x:Reference shell}"
                            IsGrouped="True"
                            ItemsSource="{Binding FlyoutItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding Title}"
                               TextColor="White"
                               FontSize="Large" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>
</Shell>

Důležité

Záhlaví informačního rámečku se může volitelně zobrazit nad obsahem informačního seznamu a v informačním rámečku můžete volitelně zobrazit zápatí s plovoucím obsahem. Pokud je obsah vašeho informačního rámečku možné procházet, prostředí se pokusí akceptovat chování posouvání v hlavičce informačního rámečku.

Položky nabídky lze volitelně přidat do informačního panelu a jednotlivé položky nabídky jsou reprezentovány MenuItem objektem. Pozice MenuItem objektů v informačním rámečku je závislá na pořadí deklarace v vizuální hierarchii prostředí. Proto všechny MenuItem objekty deklarované před objekty se FlyoutItem zobrazí před FlyoutItem objekty v informačním rámečku a všechny MenuItem objekty deklarované po FlyoutItem objektů budou zobrazeny za FlyoutItem objekty v informačním rámečku.

MenuItemTřída obsahuje Clicked událost a Command vlastnost. Proto MenuItem objekty umožňují scénáře, které spouštějí akci v reakci na MenuItem klepnutím.

MenuItem do informačního panelu lze přidat objekty, jak je znázorněno v následujícím příkladu:

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />    
</Shell>

Tento příklad přidá MenuItem objekt do informačního panelu pod všemi položkami v informačním rámečku:

Screenshot of flyout containing a MenuItem object, on iOS and Android

MenuItemObjekt spustí ICommand pojmenovaný HelpCommand , který otevře adresu URL určenou CommandParameter vlastností ve webovém prohlížeči systému.

Poznámka

BindingContextKaždá z nich MenuItem je zděděna z Shell objektu podtříd.

Definovat vzhled položky MenuItem

Vzhled každého z nich MenuItem lze přizpůsobit nastavením Shell.MenuItemTemplate připojené vlastnosti na DataTemplate :

<Shell ...>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
</Shell>

Tento příklad připojí DataTemplate ke každému MenuItem objektu a zobrazí název MenuItem objektu kurzívou:

Screenshot of templated MenuItem objects, on iOS and Android

Vzhledem Shell.MenuItemTemplate k tomu, že je připojená vlastnost, mohou být k určitým objektům připojeny různé šablony MenuItem .

Poznámka

Prostředí poskytuje Text vlastnosti a IconImageSource pro BindingContextMenuItemTemplate . Můžete také použít Title místo Text a místo, kde můžete IconIconImageSource znovu použít stejnou šablonu pro položky nabídky a položky informačního panelu.

Výchozí šablonu pro FlyoutItem objekty lze také použít pro MenuItem objekty. Další informace najdete v tématu výchozí šablona pro FlyoutItems.

FlyoutItem stylu a objekty MenuItem

Prostředí obsahuje tři třídy stylu, které jsou automaticky aplikovány FlyoutItem na MenuItem objekty a. Názvy tříd stylu jsou FlyoutItemLabelStyle , FlyoutItemImageStyle a FlyoutItemLayoutStyle .

Následující kód XAML ukazuje příklad definování stylů pro tyto třídy stylu:

<Style TargetType="Label"
       Class="FlyoutItemLabelStyle">
    <Setter Property="TextColor"
            Value="Black" />
    <Setter Property="HeightRequest"
            Value="100" />
</Style>

<Style TargetType="Image"
       Class="FlyoutItemImageStyle">
    <Setter Property="Aspect"
            Value="Fill" />
</Style>

<Style TargetType="Layout"
       Class="FlyoutItemLayoutStyle"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Teal" />
</Style>

Tyto styly budou automaticky použity pro FlyoutItem objekty a MenuItem , aniž by bylo nutné nastavit jejich StyleClass vlastnosti na názvy tříd stylu.

Navíc třídy vlastního stylu lze definovat a použít pro FlyoutItemMenuItem objekty a. Další informace o třídách stylu naleznete v tématu Xamarin.Forms Style Classes .

Nadpis informačního rámečku

Nadpis informačního rámečku je obsah, který se volitelně zobrazuje v horní části informačního rámečku, přičemž jeho vzhled je definován pomocí objektu object , který lze nastavit pomocí Shell.FlyoutHeader vlastnosti BIND:

<Shell ...>
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
</Shell>

FlyoutHeaderTyp je zobrazen v následujícím příkladu:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xaminals.Controls.FlyoutHeader"
             HeightRequest="200">
    <Grid BackgroundColor="Black">
        <Image Aspect="AspectFill"
               Source="xamarinstore.jpg"
               Opacity="0.6" />
        <Label Text="Animals"
               TextColor="White"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </Grid>
</ContentView>

Výsledkem je následující záhlaví informačního rámečku:

Screenshot of the flyout header

Alternativně lze vzhled nadpisu v informačním rámečku definovat nastavením Shell.FlyoutHeaderTemplate vlastnosti BIND na DataTemplate :

<Shell ...>
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black"
                  HeightRequest="200">
                <Image Aspect="AspectFill"
                       Source="xamarinstore.jpg"
                       Opacity="0.6" />
                <Label Text="Animals"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center" />
            </Grid>            
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
</Shell>

Ve výchozím nastavení bude v informačním seznamu opravena hlavička informačního rámečku, zatímco následující obsah se pozastaví, pokud existuje dostatek položek. Toto chování však lze změnit nastavením Shell.FlyoutHeaderBehavior vlastnosti BIND na jeden ze FlyoutHeaderBehavior členů výčtu:

  • Default – označuje, že se použije výchozí chování platformy. Toto je výchozí hodnota FlyoutHeaderBehavior Vlastnosti.
  • Fixed – označuje, že záhlaví informačního rámečku zůstane viditelné a nezůstane beze změny.
  • Scroll – Určuje, že se záhlaví informačního rámečku posouvá mimo zobrazení, protože uživatel posouvá položky.
  • CollapseOnScroll – označuje, že se záhlaví informačního rámečku sbalí jenom na název, protože uživatel posouvá položky.

Následující příklad ukazuje, jak sbalit hlavičku informačního rámečku při posunu uživatele:

<Shell ...
       FlyoutHeaderBehavior="CollapseOnScroll">
    ...
</Shell>

Zápatí v informačním rámečku je obsah, který se volitelně zobrazuje v dolní části informačního rámečku, přičemž jeho vzhled je definovaný pomocí object vlastnosti, kterou lze nastavit s Shell.FlyoutFooter vlastností BIND:

<Shell ...>
    <Shell.FlyoutFooter>
        <controls:FlyoutFooter />
    </Shell.FlyoutFooter>
</Shell>

FlyoutFooterTyp je zobrazen v následujícím příkladu:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="Xaminals.Controls.FlyoutFooter">
    <StackLayout>
        <Label Text="Xaminals"
               TextColor="GhostWhite"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
               TextColor="GhostWhite"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentView>

Výsledkem je následující zápatí informačního rámečku:

Screenshot of the flyout footer

Alternativně lze vzhled zápatí v informačním rámečku definovat nastavením Shell.FlyoutFooterTemplate vlastnosti na DataTemplate :

<Shell ...>
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="Xaminals"
                       TextColor="GhostWhite"
                       FontAttributes="Bold"
                       HorizontalOptions="Center" />
                <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
                       TextColor="GhostWhite"
                       HorizontalOptions="Center" />
            </StackLayout>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
</Shell>

Zápatí v informačním rámečku je pevně nastavené na konec informačního rámečku a může být libovolná výška. Kromě toho zápatí nikdy neskryje žádné položky nabídky.

Šířka a výška informačního rámečku

Šířku a výšku informačního rámečku lze přizpůsobit nastavením Shell.FlyoutWidthShell.FlyoutHeight vlastností a připojených vlastností na double hodnoty:

<Shell ...
       FlyoutWidth="400"
       FlyoutHeight="200">
    ...
</Shell>

To umožňuje scénáře, jako je rozbalení informačního panelu napříč celou obrazovkou, nebo zmenšení výšky informačního rámečku tak, aby se panel karet nekrýval.

Ikona informačního rámečku

Ve výchozím nastavení mají aplikace prostředí ikonu hamburgerovou ", která při stisknutí otevře informační rámeček. Tuto ikonu lze změnit nastavením vlastnosti s možností Shell.FlyoutIcon vazby typu ImageSource na příslušnou ikonu:

<Shell ...
       FlyoutIcon="flyouticon.png">
    ...       
</Shell>

Pozadí informačního panelu

Barva pozadí informačního rámečku se dá nastavit s Shell.FlyoutBackgroundColor vlastností BIND:

<Shell ...
       FlyoutBackgroundColor="AliceBlue">
    ...
</Shell>

Poznámka

Shell.FlyoutBackgroundColorLze také nastavit ze šablony stylů CSS. Další informace naleznete v tématu Xamarin.Forms Shell specific properties.

Případně lze pozadí informačního rámečku určit nastavením Shell.FlyoutBackground vlastnosti BIND na Brush :

<Shell ...
       FlyoutBackground="LightGray">
    ...
</Shell>

V tomto příkladu je pozadí v informačním rámečku vykresleno s světle šedou barvou SolidColorBrush .

Následující příklad ukazuje nastavení pozadí informačního panelu na LinearGradientBrush :

<Shell ...>
    <Shell.FlyoutBackground>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#8A2387"
                          Offset="0.1" />
            <GradientStop Color="#E94057"
                          Offset="0.6" />
            <GradientStop Color="#F27121"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackground>
    ...
</Shell>

Další informace o štětcích naleznete v tématu Xamarin.Forms Brushes .

Obrázek na pozadí informačního rámečku

V informačním rámečku může být volitelný obrázek pozadí, který se zobrazí pod záhlavím informačního panelu a za všemi položkami v informačním rámečku, položky nabídky a zápatí v informačním rámečku. Obrázek pozadí lze zadat nastavením FlyoutBackgroundImage vlastnosti BIND, typu ImageSource , na soubor, vložený prostředek, identifikátor URI nebo datový proud.

Poměr stran obrázku pozadí lze nakonfigurovat nastavením FlyoutBackgroundImageAspect vlastnosti BIND typu Aspect na jeden ze Aspect členů výčtu:

  • AspectFill -ořízne obrázek tak, aby vyplnil zobrazovanou oblast při zachování poměru stran.
  • AspectFit – letterboxes obrázek, pokud je to potřeba, aby se obrázek vešl do oblasti zobrazení, s prázdným místem přidaným na horní nebo dolní nebo postranní plochu v závislosti na tom, jestli je image rozsáhlá nebo vysoká. Toto je výchozí hodnota FlyoutBackgroundImageAspect Vlastnosti.
  • Fill – roztáhne obrázek na zcela a přesně vyplní oblast zobrazení. To může vést k deformaci obrázku.

Následující příklad ukazuje nastavení těchto vlastností:

<Shell ...
       FlyoutBackgroundImage="photo.jpg"
       FlyoutBackgroundImageAspect="AspectFill">
    ...
</Shell>

Výsledkem je obrázek pozadí, který se zobrazuje v informačním rámečku pod hlavičkou informačního rámečku.

Screenshot of a flyout background image

Pozadí informačního panelu

Pozadí informačního rámečku, což je vzhled překryvu v informačním rámečku, lze určit nastavením Shell.FlyoutBackdrop připojené vlastnosti na Brush :

<Shell ...
       FlyoutBackdrop="Silver">
    ...
</Shell>

V tomto příkladu se pozadí informačního panelu vykresluje pomocí stříbra SolidColorBrush .

Důležité

FlyoutBackdropPřipojená vlastnost může být nastavena na libovolný prvek Shell, ale bude použita pouze v případě, že je nastavena Shell na FlyoutItem objekty, nebo TabBar .

Následující příklad ukazuje nastavení pozadí informačního panelu na pozadí LinearGradientBrush :

<Shell ...>
    <Shell.FlyoutBackdrop>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#8A2387"
                          Offset="0.1" />
            <GradientStop Color="#E94057"
                          Offset="0.6" />
            <GradientStop Color="#F27121"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackdrop>
    ...
</Shell>

Další informace o štětcích naleznete v tématu Xamarin.Forms Brushes .

Chování informačního rámečku

K informačnímu rámečku lze přistupovat prostřednictvím ikony hamburgerovou "nebo potažením prstem ze strany obrazovky. Toto chování však lze změnit nastavením Shell.FlyoutBehavior připojené vlastnosti na jeden ze FlyoutBehavior členů výčtu:

  • Disabled – označuje, že tento informační rámeček nemůže otevřít uživatel.
  • Flyout – označuje, že je možné informační rámeček otevřít a zavřít uživatel. Toto je výchozí hodnota FlyoutBehavior Vlastnosti.
  • Locked – označuje, že informační rámeček nemůže být zavřen uživatelem a že nepřekrývá obsah.

Následující příklad ukazuje, jak zakázat informační rámeček:

<Shell ...
       FlyoutBehavior="Disabled">
    ...
</Shell>

Poznámka

FlyoutBehaviorPřipojená vlastnost může být nastavena na ShellFlyoutItemShellContent objekty objektů,, a, aby bylo možné přepsat výchozí chování informačního rámečku.

Informační rámeček svislé posouvání

Ve výchozím nastavení se může informační rámeček posunout svisle, pokud se položky v informačním rámečku nevejdou do informačního rámečku. Toto chování lze změnit nastavením Shell.FlyoutVerticalScrollMode vlastnosti BIND na jeden ze ScrollMode členů výčtu:

  • Disabled – Určuje, že svislé posouvání bude zakázáno.
  • Enabled – označuje, že se povolí svislé posouvání.
  • Auto – označuje, že se povolí svislé posouvání, pokud se položky v informačním rámečku nevejdou do informačního rámečku. Toto je výchozí hodnota FlyoutVerticalScrollMode Vlastnosti.

Následující příklad ukazuje, jak zakázat svislé posouvání:

<Shell ...
       FlyoutVerticalScrollMode="Disabled">
    ...
</Shell>

Pořadí karet FlyoutItem

Ve výchozím nastavení je pořadí ovládacích prvků FlyoutItem objektu stejné, ve kterém jsou uvedeny v jazyce XAML nebo programově přidány do podřízené kolekce. Toto pořadí je pořadí, ve kterém se FlyoutItem objekty budou procházet pomocí klávesnice, a často je to nejlepší pořadí.

Výchozí pořadí ovládacích prvků lze změnit nastavením FlyoutItem.TabIndex vlastnosti, která určuje pořadí, ve kterém FlyoutItem objekty získají fokus, když uživatel prochází položky stisknutím klávesy TAB. Výchozí hodnota vlastnosti je 0 a je možné ji nastavit na libovolnou int hodnotu.

Následující pravidla platí při použití výchozího pořadí ovládacích prvků nebo nastavení TabIndex vlastnosti:

  • FlyoutItem objekty s hodnotou TabIndex 0 se přidávají do pořadí prvků na základě pořadí jejich deklarace v kolekci XAML nebo podřízených kolekcích.
  • FlyoutItem objekty s TabIndex větší než 0 jsou přidány na pořadí prvků na základě jejich TabIndex hodnoty.
  • FlyoutItem objekty s TabIndex menší než 0 jsou přidány do pořadí prvků a zobrazí se před libovolnou nulovou hodnotou.
  • Konflikty v případě TabIndex jsou vyřešeny podle pořadí deklarací.

Po definování pořadí karet se po stisknutí klávesy TAB zacykluje fokus prostřednictvím FlyoutItem objektů ve vzestupném TabIndex pořadí a po dosažení konečného objektu se zalomí kolem začátku.

Kromě nastavení pořadí prvků FlyoutItem objektů může být nutné vyloučit některé objekty z pořadí prvků. Toho lze dosáhnout pomocí FlyoutItem.IsTabStop vlastnosti, která označuje, zda FlyoutItem je součástí navigace na kartě. Jeho výchozí hodnota je true , a pokud je jeho hodnota, ignoruje se v rámci falseFlyoutItem infrastruktury navigace na kartě, bez ohledu na to, jestli TabIndex je nastavená.

FlyoutItem výběr

Při prvním spuštění aplikace prostředí, která používá informační rámeček, bude Shell.CurrentItem vlastnost nastavena na první FlyoutItem objekt v Shell objektu podtříd. Vlastnost však může být nastavena na jinou FlyoutItem , jak je znázorněno v následujícím příkladu:

<Shell ...
       CurrentItem="{x:Reference aboutItem}">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        ...
    </FlyoutItem>
    <ShellContent x:Name="aboutItem"
                  Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>

Tento příklad nastaví CurrentItem vlastnost na ShellContent objekt s názvem aboutItem , který má za následek jeho výběr a zobrazení. V tomto příkladu je použit implicitní převod pro zabalení ShellContent objektu do Tab objektu, který je zabalen v FlyoutItem objektu.

Ekvivalentní kód jazyka C#, s ohledem na ShellContent objekt s názvem aboutItem , je:

CurrentItem = aboutItem;

V tomto příkladu CurrentItem je vlastnost nastavena v Shell třídě podtříd. Alternativně CurrentItem lze vlastnost nastavit v libovolné třídě prostřednictvím Shell.Current statické vlastnosti:

Shell.Current.CurrentItem = aboutItem;

Poznámka

Aplikace může zadat stav, kde výběr položky v informačním rámečku není platná operace. V takových případech je FlyoutItem možné zakázat nastavením IsEnabled vlastnosti na false . Uživatelé tak nebudou moct vybrat položku informačního panelu.

FlyoutItem viditelnost

Ve výchozím nastavení jsou v informačním rámečku zobrazeny položky informačního rámečku. Položka může být ale skrytá v informačním rámečku s FlyoutItemIsVisible vlastností a odebrána z informačního rámečku s IsVisible vlastností:

  • FlyoutItemIsVisibletyp bool Určuje, zda je položka v informačním rámečku skryta, ale je stále dosažitelná pomocí GoToAsync navigační metody. Výchozí hodnota této vlastnosti je true .
  • IsVisibletyp bool Určuje, zda má být položka odebrána z vizuálního stromu, a proto se nezobrazí v informačním rámečku. Výchozí hodnota je true .

Následující příklad ukazuje skrytí položky v informačním rámečku:

<Shell ...>
    <FlyoutItem ...
                FlyoutItemIsVisible="False">
        ...
    </FlyoutItem>
</Shell>

Poznámka

K dispozici je také Shell.FlyoutItemIsVisible připojená vlastnost, která se dá nastavit pro FlyoutItemMenuItem objekty,, a TabShellContent .

Programové otevření a zavření informačního rámečku

Informační rámeček lze programově otevřít a zavřít nastavením Shell.FlyoutIsPresented vlastnosti BIND na boolean hodnotu, která označuje, zda je informační rámeček aktuálně otevřen:

<Shell ...
       FlyoutIsPresented="{Binding IsFlyoutOpen}">
</Shell>

Alternativně to lze provést v kódu:

Shell.Current.FlyoutIsPresented = false;