Zobrazení s možností vazby v Xamarin.Forms

Stažení ukázky

Přivážená rozložení umožňují libovolná třída rozložení, která je odvozena od Layout<T> třídy za účelem generování jejího obsahu vazbou na kolekci položek, s možností nastavit vzhled každé položky pomocí DataTemplate . Rozložení s možností vazby jsou poskytována BindableLayout třídou, která zpřístupňuje následující připojené vlastnosti:

• ItemsSource – Určuje kolekci IEnumerable položek, které se mají zobrazit v rozložení.
• ItemTemplate – Určuje, že se DataTemplate má použít pro každou položku v kolekci položek zobrazených v rozložení.
• ItemTemplateSelector – Určuje DataTemplateSelector , který bude použit pro výběr položky za DataTemplate běhu.

Kromě toho BindableLayout Třída zpřístupňuje následující vlastnosti s možností vazby:

• EmptyView – Určuje string zobrazení nebo, které se zobrazí ItemsSource , když je vlastnost nebo null když je kolekce zadaná ItemsSource vlastností null nebo prázdná. Výchozí hodnota je null.
• EmptyViewTemplate – Určuje DataTemplate , který se zobrazí, když ItemsSource je vlastnost null , nebo když je kolekce zadaná ItemsSource vlastností null nebo prázdná. Výchozí hodnota je null.

Všechny tyto vlastnosti lze připojit ke AbsoluteLayoutFlexLayoutGrid třídám,,, RelativeLayout a StackLayout , které jsou odvozeny z Layout<T> třídy.

Layout<T>Třída zveřejňuje Xamarin_Forms Layout<T> _Layout_1_Children "data-LINKTYPE =" absolutní cesta ">Children kolekce, do které jsou přidány podřízené prvky rozložení. Pokud BinableLayout.ItemsSource je vlastnost nastavena na kolekci položek a připojená k Layout<T> třídě odvozené od třídy, je každá položka v kolekci přidána do Layout<T>.Children kolekce pro zobrazení v rozložení. Layout<T>Třída odvozená pak aktualizuje svá podřízená zobrazení, když se změní podkladová kolekce. Další informace o Xamarin.Forms cyklu rozložení najdete v tématu Xamarin.Forms.

Rozložení s možností vazby by mělo být použito pouze v případě, že kolekce položek, které mají být zobrazeny, je malá a posouvání a výběr není vyžadováno. Posouvání může být k dispozici, když rozbalíte rozložení s možností vazby v ScrollView , to se nedoporučuje, protože není k dispozici virtualizace uživatelského rozhraní pro svázání. Je-li vyžadováno posouvání, je třeba použít rolovací zobrazení, které zahrnuje virtualizaci uživatelského rozhraní, například ListView nebo CollectionView . Nepovedlo se pozorovat toto doporučení může vést k problémům s výkonem.

Naplnit rozložení s možností vazby s daty

Rozložení s možností vazby se naplní daty nastavením jeho ItemsSource vlastnosti na libovolnou kolekci, která implementuje IEnumerable a připojí ji k Layout<T> třídě odvozené:

<Grid BindableLayout.ItemsSource="{Binding Items}" />

Ekvivalentní kód jazyka C#:

IEnumerable<string> items = ...;
var grid = new Grid();
BindableLayout.SetItemsSource(grid, items);

Když BindableLayout.ItemsSource je připojená vlastnost nastavená pro rozložení, ale BindableLayout.ItemTemplate vlastnost Attached není nastavená, všechny položky v IEnumerable kolekci se zobrazí pomocí Label třídy, která je vytvořená BindableLayout třídou.

Definovat vzhled položky

Vzhled každé položky v rozložení s možností vazby lze definovat nastavením BindableLayout.ItemTemplate připojené vlastnosti na DataTemplate :

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal"
             ...>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <controls:CircleImage Source="{Binding}"
                                  Aspect="AspectFill"
                                  WidthRequest="44"
                                  HeightRequest="44"
                                  ... />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Ekvivalentní kód jazyka C#:

DataTemplate circleImageTemplate = ...;
var stackLayout = new StackLayout();
BindableLayout.SetItemsSource(stackLayout, viewModel.User.TopFollowers);
BindableLayout.SetItemTemplate(stackLayout, circleImageTemplate);

V tomto příkladu se všechny položky v TopFollowers kolekci zobrazí v zobrazení, které CircleImage je definováno v DataTemplate :

Další informace o datových šablonách naleznete v tématu Xamarin.Forms Data Templates .

Zvolit vzhled položky za běhu

Vzhled každé položky v rozložení s možností vazby lze zvolit za běhu v závislosti na hodnotě položky nastavením BindableLayout.ItemTemplateSelector připojené vlastnosti na DataTemplateSelector :

<FlexLayout BindableLayout.ItemsSource="{Binding User.FavoriteTech}"
            BindableLayout.ItemTemplateSelector="{StaticResource TechItemTemplateSelector}"
            ... />

Ekvivalentní kód jazyka C#:

DataTemplateSelector dataTemplateSelector = new TechItemTemplateSelector { ... };
var flexLayout = new FlexLayout();
BindableLayout.SetItemsSource(flexLayout, viewModel.User.FavoriteTech);
BindableLayout.SetItemTemplateSelector(flexLayout, dataTemplateSelector);

V DataTemplateSelector následujícím příkladu je znázorněno použití v ukázkové aplikaci:

public class TechItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate XamarinFormsTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return (string)item == "Xamarin.Forms" ? XamarinFormsTemplate : DefaultTemplate;
    }
}

TechItemTemplateSelectorTřída definuje DefaultTemplate a XamarinFormsTemplateDataTemplate vlastnosti, které jsou nastaveny na různé datové šablony. OnSelectTemplateMetoda vrátí hodnotu XamarinFormsTemplate , která zobrazuje položku v tmavě červeném srdcem, když je položka rovna hodnotě " Xamarin.Forms ". Pokud se položka nerovná " Xamarin.Forms ", OnSelectTemplate vrátí metoda DefaultTemplate , která zobrazí položku pomocí výchozí barvy Label :

Další informace o selektorech datových šablon naleznete v tématu Creating a Xamarin.Forms DataTemplateSelector .

Zobrazit řetězec, pokud nejsou data k dispozici

EmptyViewVlastnost může být nastavena na řetězec, který bude zobrazen v případě, že je vlastnost nastavena na hodnotu nebo Label když je ItemsSourcenull kolekce zadaná ItemsSource vlastností null nebo prázdná. Následující kód XAML ukazuje příklad tohoto scénáře:

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}"
             BindableLayout.EmptyView="No achievements">
    ...
</StackLayout>

Výsledkem je, že pokud je kolekce vázaná na data null , je zobrazena řetězcová sada, která je nastavena jako EmptyView hodnota vlastnosti:

s možností zobrazení prázdného zobrazení v řetězci rozložení s možností vazby v zařízení s prázdným zobrazením

Zobrazení zobrazení, pokud nejsou data k dispozici

EmptyViewVlastnost lze nastavit na zobrazení, které se zobrazí, pokud je vlastnost nastavena na hodnotu nebo ItemsSourcenull v případě, že je kolekce určená ItemsSource vlastností null nebo prázdná. Může se jednat o jedno zobrazení nebo zobrazení, které obsahuje více podřízených zobrazení. Následující příklad XAML ukazuje EmptyView vlastnost nastavenou na zobrazení, které obsahuje více podřízených zobrazení:

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
    <BindableLayout.EmptyView>
        <StackLayout>
            <Label Text="None."
                   FontAttributes="Italic"
                   FontSize="{StaticResource smallTextSize}" />
            <Label Text="Try harder and return later?"
                   FontAttributes="Italic"
                   FontSize="{StaticResource smallTextSize}" />
        </StackLayout>
    </BindableLayout.EmptyView>
    ...
</StackLayout>

Výsledkem je, že pokud je kolekce vázaná na data null , StackLayout zobrazí se a jejich podřízená zobrazení.

Náhled prázdného zobrazení rozložení s možností vazby s prázdného zobrazení– s možností vazby

Podobně EmptyViewTemplate lze nastavit na hodnotu DataTemplate , která se zobrazí, když ItemsSource je vlastnost null nebo když je kolekce zadaná ItemsSource vlastností null nebo prázdná. DataTemplateMůže obsahovat jedno zobrazení nebo zobrazení obsahující více podřízených zobrazení. Kromě toho bude z rozhraní BindingContextEmptyViewTemplate zděděn z BindingContextBindableLayout . Následující příklad XAML ukazuje EmptyViewTemplate vlastnost nastavenou na DataTemplate , která obsahuje jedno zobrazení:

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
    <BindableLayout.EmptyViewTemplate>
        <DataTemplate>
            <Label Text="{Binding Source={x:Reference usernameLabel}, Path=Text, StringFormat='{0} has no achievements.'}" />
        </DataTemplate>
    </BindableLayout.EmptyViewTemplate>
    ...
</StackLayout>

Výsledkem je, že pokud je kolekce vázaných na data null , Label zobrazí se v části DataTemplate :

Prázdná šablona zobrazení zobrazení je k pro svázání

Zvolit EmptyView za běhu

Zobrazení, která se zobrazí jako EmptyView v případě nedostupnosti dat, lze definovat jako ContentView objekty v ResourceDictionary . EmptyViewVlastnost může být poté nastavena na určitou hodnotu na ContentView základě některé obchodní logiky za běhu. Následující kód XAML ukazuje příklad tohoto scénáře:

<ContentPage ...>
    <ContentPage.Resources>
        ...    
        <ContentView x:Key="BasicEmptyView">
            <StackLayout>
                <Label Text="No achievements."
                       FontSize="14" />
            </StackLayout>
        </ContentView>
        <ContentView x:Key="AdvancedEmptyView">
            <StackLayout>
                <Label Text="None."
                       FontAttributes="Italic"
                       FontSize="14" />
                <Label Text="Try harder and return later?"
                       FontAttributes="Italic"
                       FontSize="14" />
            </StackLayout>
        </ContentView>
    </ContentPage.Resources>

    <StackLayout>
        ...
        <Switch Toggled="OnEmptyViewSwitchToggled" />

        <StackLayout x:Name="stackLayout"
                     BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
            ...
        </StackLayout>
    </StackLayout>
</ContentPage>

Jazyk XAML definuje dva ContentView objekty na úrovni stránky ResourceDictionary s Switch objektem, který řídí, který ContentView objekt bude nastaven jako EmptyView hodnota vlastnosti. Když Switch je přepínací, OnEmptyViewSwitchToggled obslužná rutina události spustí ToggleEmptyView metodu:

void ToggleEmptyView(bool isToggled)
{
    object view = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
    BindableLayout.SetEmptyView(stackLayout, view);
}

ToggleEmptyViewMetoda nastaví EmptyView vlastnost stackLayout objektu na jeden ze dvou ContentView objektů uložených v ResourceDictionary , na základě hodnoty Xamarin_Forms ToggleEmptyView _Switch_IsToggled "data-LINKTYPE =" absolutní cesta ">Switch.IsToggled vlastnost. Když je kolekce vázané na data, je nullContentView zobrazena sada objektů nastavená jako EmptyView vlastnost:

Možnost v režimu runtime s možností zobrazení prázdného zobrazenís

Související odkazy

• Ukázka zobrazení s možností vazby (ukázka)
• Vytvoření vlastního rozložení
• Xamarin.Forms Data Templates
• Creating a Xamarin.Forms DataTemplateSelector