Xamarin.Forms Bublinový popisek prostředí

Download Sample Stažení ukázky

Navigační prostředí poskytované shellem Xamarin.Forms je založené na informačních panelech a kartách. Informační okno je volitelná kořenová nabídka pro aplikaci Prostředí a je plně přizpůsobitelná. Je přístupný prostřednictvím ikony nebo potáhnutím prstem ze strany obrazovky. Informační panel se skládá z volitelného záhlaví, položek rozevíracího seznamu, 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 rámečku lze přidat jednu nebo více položek informačního rámečku a každá položka informačního rámečku je reprezentována objektem FlyoutItem . Každý FlyoutItem objekt by měl být podřízeným objektem podtřídy Shell . Když záhlaví informačního rámečku není k dispozici, zobrazí se v horní části informačního rámečku položky.

Následující příklad vytvoří bublinový popisek obsahující dvě kontextové položky:

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

Vlastnost FlyoutItem.Title typu stringdefinuje název položky informačního rámečku. Vlastnost FlyoutItem.Icon typu ImageSourcedefinuje ikonu položky informačního rámečku:

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

V tomto příkladu lze k jednotlivým ShellContent objektům přistupovat pouze prostřednictvím informačních položek, a ne prostřednictvím karet. Je to proto, že ve výchozím nastavení se karty zobrazí jenom v případě, že položka s informačním rámečkem 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. Toho lze dosáhnout pomocí DataTemplate rozšíření značek k nastavení ContentTemplate vlastnosti každého ShellContent objektu ContentPage na objekt.

Shell má implicitní převodní operátory, které umožňují zjednodušenou hierarchii vizuálů prostředí, aniž by do vizuálního stromu zavedla další zobrazení. To je možné, protože podtříděný Shell objekt může obsahovat FlyoutItem pouze objekty nebo TabBar objekt, který může obsahovat Tab pouze objekty, které mohou obsahovat ShellContent pouze objekty. Tyto implicitní převodní operátory lze použít k odebrání FlyoutItem objektů Tab 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 zabalí každý ShellContent objekt do Tab objektů, které jsou zabalené v FlyoutItem objektech.

Poznámka

Všechny FlyoutItem objekty v podtřídě Shell objektu se automaticky přidají do Shell.FlyoutItems kolekce, která definuje seznam položek, které se zobrazí v informačním rámečku.

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

Vlastnost FlyoutItem.FlyoutDisplayOptions konfiguruje, 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 člen výčtu FlyoutDisplayOptions :

  • 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 rámečku pro každý Tab objekt v rámci objektu 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 Tab se pro objekt, který je podřízený FlyoutItem objektem, vytvoří položky s informačním rámečkem a ShellContent objekty, které jsou podřízenými objekty FlyoutItem . K tomu dochází, protože každý ShellContent objekt, který je podřízený objektem FlyoutItem , je automaticky zabalen do objektu Tab . Kromě toho se pro konečný ShellContent objekt vytvoří kontextová položka, která se automaticky zabalí do objektu Tab a pak v objektu FlyoutItem .

Poznámka

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

Výsledkem jsou následující kontextové položky:

Screenshot of flyout containing FlyoutItem objects, on iOS and Android

Definování vzhledu FlyoutItem

Vzhled každého 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>

V tomto příkladu se zobrazí název každého FlyoutItem objektu kurzívou:

Screenshot of templated FlyoutItem objects, on iOS and Android

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

Poznámka

Shell poskytuje Title vlastnosti a FlyoutIcon vlastnosti BindingContext objektu ItemTemplate.

Shell navíc obsahuje tři třídy stylu, které se automaticky použijí na FlyoutItem objekty. Další informace naleznete v tématu Styl FlyoutItem a MenuItem objekty.

Výchozí šablona pro flyoutItems

Výchozí hodnota DataTemplate použitá pro každou z nich FlyoutItem je zobrazená 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 existujícího rozložení informačního rámečku a také se zobrazují vizuální stavy implementované pro položky s informačním rámečkem.

Kromě toho , Grid, Imagea Label elementy mají všechny x:Name hodnoty, a tak lze cílit na Visual State Manager. Další informace naleznete v tématu Nastavení stavu u více prvků.

Poznámka

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

Nahrazení obsahu informačního rámečku

Položky s informačním rámečkem, které představují obsah informačního rámečku, se dají volitelně nahradit vlastním obsahem nastavením Shell.FlyoutContent vlastnosti vázání 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 se kontextový obsah nahradí CollectionView názvem každé položky v kolekci FlyoutItems .

Poznámka

Vlastnost FlyoutItems ve Shell třídě je kolekce položek s informačním rámečkem jen pro čtení.

Případně lze obsah informačního rámečku Shell.FlyoutContentTemplate definovat nastavením vlastnosti bindable 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 můžete volitelně zobrazit nad obsahem informačního rámečku a zápatí informačního rámečku se dá volitelně zobrazit pod obsahem informačního rámečku. Pokud je obsah s informačním rámečkem posuvný, shell se pokusí respektovat chování posouvání v záhlaví informačního rámečku.

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

Třída MenuItemClicked událost a Command vlastnost. Objekty proto umožňují scénáře, MenuItem které provádějí akci v reakci na MenuItem klepnutí.

MenuItem Objekty lze přidat do informačního rámečku, 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 rámečku pod všemi položkami informačního rámečku:

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

Objekt MenuItem spustí pojmenovaný ICommandHelpCommandobjekt, který otevře adresu URL určenou CommandParameter vlastností v systémovém webovém prohlížeči.

Poznámka

Každý BindingContext z nich MenuItem je zděděn z podtříděného Shell objektu.

Definování vzhledu MenuItem

Vzhled každého 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 název objektu MenuItem kurzívou:

Screenshot of templated MenuItem objects, on iOS and Android

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

Poznámka

Shell poskytuje Text vlastnosti a IconImageSource vlastnosti BindingContext objektu MenuItemTemplate. Můžete také použít Title místo Text a Icon místo IconImageSource toho, abyste mohli znovu použít stejnou šablonu pro položky nabídky a kontextové položky.

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

Styl FlyoutItem a MenuItem – objekty

Shell obsahuje tři třídy stylu, které se automaticky aplikují na FlyoutItem objekty a MenuItem na ně. Názvy tříd stylu jsou FlyoutItemLabelStyle, FlyoutItemImageStylea FlyoutItemLayoutStyle.

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

<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 se automaticky použijí na FlyoutItem objekty a MenuItem nebudou muset nastavit jejich StyleClass vlastnosti na názvy tříd stylů.

Kromě toho je možné definovat a aplikovat FlyoutItem vlastní třídy stylů na objekty a MenuItem objekty. Další informace o třídách stylů naleznete v tématu Xamarin.Forms Třídy stylů.

Záhlaví informačního rámečku

Záhlaví informačního rámečku je obsah, který se volitelně zobrazuje v horní části informačního rámečku a jeho vzhled je definován pomocí object vlastnosti s možností vytvoření Shell.FlyoutHeader vazby:

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

Typ FlyoutHeader se zobrazí 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

Případně lze vzhled záhlaví informačního rámečku definovat nastavením Shell.FlyoutHeaderTemplate vlastnosti bindable 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í se záhlaví informačního rámečku opraví v informačním rámečku, zatímco následující obsah se posune, pokud je k dispozici dostatek položek. Toto chování však lze změnit nastavením Shell.FlyoutHeaderBehavior vlastnosti bindable na jeden z členů výčtu FlyoutHeaderBehavior :

  • 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 stále viditelné a beze změny.
  • Scroll – označuje, že záhlaví informačního rámečku se posune mimo zobrazení, protože uživatel posouvá položky.
  • CollapseOnScroll – označuje, že záhlaví informačního rámečku se sbalí jenom na název, protože uživatel posune položky.

Následující příklad ukazuje, jak sbalit záhlaví informačního rámečku při posouvání uživatelů:

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

Zápatí informačního rámečku je obsah, který se volitelně zobrazí v dolní části informačního rámečku a jeho vzhled je definován object pomocí vlastnosti Shell.FlyoutFooter svázatelné:

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

Typ FlyoutFooter se zobrazí 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

Případně lze vzhled zápatí informačního 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í informačního rámečku je pevně zasunuto do dolní části informačního rámečku a může být libovolná výška. Zápatí navíc nikdy nezakrývá žá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.FlyoutWidth vlastností a Shell.FlyoutHeight připojených vlastností k double hodnotám:

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

To umožňuje scénáře, jako je rozbalení informačního rámečku po celé obrazovce nebo zmenšení výšky informačního rámečku, aby se nezkrývají pruh karet.

Ikona informačního rámečku

Ve výchozím nastavení mají aplikace Shell ikonu hamburgeru, která při stisknutí otevře informační panel. Tuto ikonu lze změnit nastavením vlastnosti s možností vazby Shell.FlyoutIcon typu ImageSourcena příslušnou ikonu:

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

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

Barvu pozadí informačního rámečku lze nastavit pomocí Shell.FlyoutBackgroundColor vlastnosti s možností vazby:

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

Poznámka

Shell.FlyoutBackgroundColor se nastavit také ze šablon stylů CSS (Cascading Style Sheet). Další informace najdete v tématu Xamarin.Forms Specifické vlastnosti prostředí.

Alternativně lze pozadí informačního rámečku určit nastavením Shell.FlyoutBackground vlastnosti svázatelné na Brush:

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

V tomto příkladu je pozadí informačního rámečku malované světle šedým SolidColorBrush.

Následující příklad ukazuje nastavení pozadí informačního rámečku 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 kartáčích najdete v tématu Xamarin.Forms Štětce.

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

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

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

  • AspectFill - vystřižuje obrázek tak, aby vyplnil oblast zobrazení při zachování poměru stran.
  • AspectFit - písmena obrázku, pokud je to potřeba, aby se obrázek vešel do oblasti zobrazení, s prázdným místem přidaným do horní nebo dolní nebo boční strany v závislosti na tom, jestli je obrázek široký nebo vysoký. Toto je výchozí hodnota FlyoutBackgroundImageAspect vlastnosti.
  • Fill - roztáhne obrázek úplně a přesně vyplní oblast zobrazení. Výsledkem může být zkreslení obrázku.

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

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

Výsledkem bude obrázek pozadí, který se zobrazí v informačním rámečku pod záhlavím informačního rámečku:

Screenshot of a flyout background image

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

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

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

V tomto příkladu je pozadí informačního rámečku malováno stříbrem SolidColorBrush.

Důležité

Připojenou FlyoutBackdrop vlastnost lze nastavit na libovolném elementu Prostředí, ale použije se pouze v případě, že je nastavena na Shell, FlyoutItemnebo TabBar objekty.

Následující příklad ukazuje nastavení kontextového pozadí na 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 kartáčích najdete v tématu Xamarin.Forms Štětce.

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

K informačnímu panelu se dostanete přes ikonu hamburgeru nebo potáhnutím prstem ze strany obrazovky. Toto chování však lze změnit nastavením Shell.FlyoutBehavior připojené vlastnosti na některý z členů výčtu FlyoutBehavior :

  • Disabled – označuje, že informační oušku nelze otevřít uživatelem.
  • Flyout – označuje, že informační nabídku může uživatel otevřít a zavřít. Toto je výchozí hodnota vlastnosti FlyoutBehavior .
  • Locked – indikuje, že informační nabídka nemůže být uzavřena uživatelem a že se nepřekrývá obsah.

Následující příklad ukazuje, jak zakázat informační nabídku:

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

Poznámka

Připojenou FlyoutBehavior vlastnost lze nastavit na Shellobjekty , , FlyoutItemShellContenta stránky, aby bylo možné přepsat výchozí chování informačního rámečku.

Svislé posouvání s informačním rámečkem

Ve výchozím nastavení lze informační oušku posunout svisle, když se položky informačního rámečku nevejdou do informačního rámečku. Toto chování lze změnit nastavením Shell.FlyoutVerticalScrollMode vlastnosti bindable na některý z členů výčtu ScrollMode :

  • Disabled – označuje, že svislé posouvání bude zakázané.
  • Enabled – označuje, že bude povolené svislé posouvání.
  • Auto – označuje, že svislé posouvání bude povolené, pokud se položky informačního 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í tabulátoru FlyoutItem objektů stejné pořadí, ve kterém jsou uvedené v XAML, nebo programově přidané do podřízené kolekce. Toto pořadí je pořadí, ve kterém FlyoutItem budou objekty procházet pomocí klávesnice, a často toto výchozí pořadí je nejlepší pořadí.

Výchozí pořadí tabulátoru FlyoutItem.TabIndex lze změnit nastavením vlastnosti, která označuje pořadí, ve kterém FlyoutItem se objekty dostanou fokus, když uživatel prochází položkami stisknutím klávesy Tab. Výchozí hodnota vlastnosti je 0 a lze ji nastavit na libovolnou int hodnotu.

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

  • FlyoutItem objekty se stejnou TabIndex hodnotou 0 se přidají do pořadí tabulátoru na základě jejich pořadí deklarace v kolekcích XAML nebo podřízených kolekcích.
  • FlyoutItem objekty s TabIndex více než 0 se přidají do pořadí tabulátoru na základě jejich TabIndex hodnoty.
  • FlyoutItem objekty s TabIndex méně než 0 se přidají do pořadí tabulátoru a zobrazí se před libovolnou nulovou hodnotou.
  • Konflikty na a TabIndex jsou vyřešeny pořadím deklarací.

Po definování pořadí tabulátoru se stisknutím klávesy Tab přemístí fokus mezi FlyoutItem objekty ve vzestupném TabIndex pořadí a obtékáním na začátek po dosažení konečného objektu.

Kromě nastavení pořadí ovládacích FlyoutItem prvků objektů může být nutné vyloučit některé objekty z pořadí ovládacích prvků. Toho lze dosáhnout pomocí FlyoutItem.IsTabStop vlastnosti, která označuje, jestli FlyoutItem je součástí navigace na kartách. Jeho výchozí hodnota je truea když je falseFlyoutItem její hodnota ignorována infrastrukturou navigace tabulátorem bez ohledu na to, jestli je nastavená TabIndex .

Výběr informačního rámečku

Při prvním spuštění aplikace Shell, která používá informační nabídku, Shell.CurrentItem bude vlastnost nastavena na první FlyoutItem objekt v podtřídě objektu Shell . 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ý vede k jeho výběru a zobrazení. V tomto příkladu se implicitní převod používá k zabalení ShellContent objektu do objektu Tab , který je zabalený do objektu FlyoutItem .

Ekvivalentní kód jazyka C# vzhledem k objektu ShellContent s názvem aboutItem:

CurrentItem = aboutItem;

V tomto příkladu CurrentItem je vlastnost nastavena v podtříděné Shell tří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, kdy výběr položky informačního rámečku není platná operace. V takových případech FlyoutItem může být zakázána nastavením jeho IsEnabled vlastnosti na false. Tím zabráníte tomu, aby uživatelé mohli vybrat položku informačního rámečku.

Viditelnost flyoutItem

Položky informačního rámečku jsou ve výchozím nastavení viditelné v informačním rámečku. Položka však může být skryta v informačním rámečku s FlyoutItemIsVisible vlastností a odebrána z informačního rámečku IsVisible s vlastností:

  • FlyoutItemIsVisible, typu bool, označuje, jestli je položka skrytá v informačním rámečku, ale stále je dosažitelná pomocí GoToAsync navigační metody. Výchozí hodnota této vlastnosti je true.
  • IsVisible, typu booloznačuje, jestli má být položka odebrána ze stromu vizuálu, 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

Existuje také připojená vlastnost, která může být nastavena Shell.FlyoutItemIsVisible na FlyoutItem, MenuItem, Taba ShellContent objekty.

Otevření a zavření informačního rámečku prostřednictvím kódu programu

Informační okno lze programově otevřít a zavřít nastavením Shell.FlyoutIsPresented vlastnosti s možností vazby na boolean hodnotu, která označuje, jestli je informační okno aktuálně otevřené:

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

Alternativně to můžete provést v kódu:

Shell.Current.FlyoutIsPresented = false;