içinde Bağlanabilir Düzenler Xamarin.Forms

Örneği indirme

Bağlanabilir düzenler, sınıfından türetilen herhangi bir düzen sınıfını, bir öğe koleksiyonuna bağlanarak içeriğini oluşturmak için her bir öğenin görünümünü bir ile ayarlama Layout<T> seçeneğiyle DataTemplate etkinleştirir. Bağlanabilir düzenler, aşağıdaki BindableLayout ekli özellikleri ortaya çıkaran sınıfı tarafından sağlanır:

• ItemsSource – düzen tarafından IEnumerable görüntülenecek öğe koleksiyonunu belirtir.
• ItemTemplate – düzen DataTemplate tarafından görüntülenen öğe koleksiyonunda her öğeye uygulanacak öğesini belirtir.
• ItemTemplateSelector – çalışma DataTemplateSelector zamanında bir öğe için seçmek DataTemplate için kullanılacak öğesini belirtir.

Buna ek olarak, BindableLayout sınıfı aşağıdaki bağlanabilir özellikleri ortaya çıkarır:

• EmptyView – özelliği olduğunda veya özelliği tarafından belirtilen koleksiyon olduğunda ya da boş olduğunda stringItemsSource görüntülenecek veya görünümünü nullItemsSourcenull belirtir. null varsayılan değerdir.
• EmptyViewTemplate – özelliği olduğunda veya özelliği tarafından belirtilen koleksiyon olduğunda ya da boş olduğunda DataTemplateItemsSource görüntülenecek olan değeri nullItemsSourcenull belirtir. null varsayılan değerdir.

Bu özelliklerin hepsi sınıfından türetilen , , , ve AbsoluteLayoutFlexLayoutGridRelativeLayoutStackLayout sınıflarını Layout<T> iliştirebilirsiniz.

sınıfı, Layout<T> bir düzenin Xamarin_Forms Layout<T> _Layout_1_Children" data-linktype="absolute-path">koleksiyonu olan bir veri Children koleksiyonunu gösterir. özelliği bir öğe koleksiyonuna ayar olduğunda ve türetilmiş bir sınıfa ekli olduğunda, koleksiyondaki her öğe düzen tarafından görüntülenmek BinableLayout.ItemsSourceLayout<T> için Layout<T>.Children koleksiyona eklenir. Türetilmiş Layout<T> sınıf, temel alınan koleksiyon değişirken alt görünümlerini güncelleştirecek. Düzen döngüsü hakkında daha Xamarin.Forms fazla bilgi için Xamarin.Forms

Bağlanabilir düzenler yalnızca görüntülenecek öğe koleksiyonu küçük olduğunda ve kaydırma ve seçim gerekli değilse kullanılmalıdır. Kaydırarak bir içinde bağlanabilir bir düzen sarmalama sağlanabilir, ancak bu, bağlanabilir düzenlerde UI sanallaştırması ScrollView olmadığı için önerilmez. Kaydırma gerektiğinde, veya gibi kullanıcı arabirimi sanallaştırması içeren kaydırılabilir ListView bir CollectionView görünüm kullanılmalıdır. Bu öneriyi gözlemlemek performans sorunlarına yol açabilir.

Bağlanabilir düzeni verilerle doldurmak

Bağlanabilir düzen, özelliğini uygulayan herhangi bir koleksiyona ayar olarak verilerle doldurulur ve bunu türetilmiş ItemsSourceIEnumerable bir Layout<T> sınıfa iliştirer:

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

Eşdeğer C# kodu şöyledir:

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

Ekli özellik bir düzende ayarlanırken ekli özellik ayarnmasa, koleksiyonda her öğe sınıfı tarafından oluşturulan bir BindableLayout.ItemsSourceBindableLayout.ItemTemplate tarafından IEnumerableLabelBindableLayout görüntülenir.

Öğe görünümünü tanımlama

Bağlanılabilir düzende her öğenin görünümü, bağlı özelliği bir BindableLayout.ItemTemplate olarak ayarlandığı şekilde DataTemplate tanımlanabilir:

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

Eşdeğer C# kodu şöyledir:

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

Bu örnekte, koleksiyonda her TopFollowers öğe içinde tanımlanan bir görünüm tarafından CircleImageDataTemplate görüntülenir:

Veri şablonları hakkında daha fazla bilgi için bkz. Xamarin.Forms Data Templates .

Çalışma zamanında öğe görünümünü seçme

Bağlanılabilir düzende her öğenin görünümü, öğe değerine bağlı olarak çalışma zamanında ekli özelliği olarak BindableLayout.ItemTemplateSelectorDataTemplateSelector ayarlanabilir:

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

Eşdeğer C# kodu şöyledir:

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

Örnek DataTemplateSelector uygulamada kullanılan aşağıdaki örnekte gösterilmiştir:

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

TechItemTemplateSelectorsınıfı, DefaultTemplate farklı veri XamarinFormsTemplateDataTemplate şablonlarına ayarlanmış ve özelliklerini tanımlar. yöntemi, öğe "'ye eşit olduğunda yanında bir kalp ile koyu kırmızı OnSelectTemplate renkli bir öğe görüntüleyen öğesini XamarinFormsTemplateXamarin.Forms döndürür. Öğe " " " değerine eşit değilse, yöntemi bir öğesinin varsayılan rengini kullanarak Xamarin.FormsOnSelectTemplate görüntüleyen öğesini DefaultTemplateLabel döndürür:

Bağlanabilir

Veri şablonu seçicileri hakkında daha fazla bilgi için bkz. Creating a Xamarin.Forms DataTemplateSelector .

Veriler kullanılamasa bir dize görüntüleme

özelliği, özelliği olduğunda veya özelliği tarafından belirtilen koleksiyon olduğunda ya da boş olduğunda görüntülenecek EmptyViewLabel bir ItemsSourcenullItemsSource dizeye null ayarlandırabilirsiniz. Aşağıdaki XAML bu senaryonun bir örneğini gösterir:

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

Sonuç olarak, veriye bağlı koleksiyon null olduğunda, özellik değeri olarak ayarlanmış EmptyView dize görüntülenir:

bağlanabilir düzen dizesi boş görünümünün ekran görüntüsü Bağlanabilir

Veriler kullanılamasa görünümleri görüntüleme

özelliği, özellik olduğunda veya özellik tarafından belirtilen koleksiyon olduğunda ya da boş olduğunda görüntülenecek EmptyViewItemsSource bir nullItemsSource görünüme null ayarlandırabilirsiniz. Bu tek bir görünüm veya birden çok alt görünüm içeren bir görünüm olabilir. Aşağıdaki XAML örneği, birden EmptyView çok alt görünüm içeren bir görünüme ayarlanmış özelliği gösterir:

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

Sonuç olarak, veriye bağlı koleksiyon null olduğunda ve alt görünümleri StackLayout görüntülenir.

birden çok görünüme sahip bağlanabilir düzen boş görünümünün ekran görüntüsü Bağlanabilir

Benzer şekilde, özelliği olduğunda veya özelliği tarafından belirtilen koleksiyon olduğunda ya da boş olduğunda görüntülenecek olan bir EmptyViewTemplateDataTemplate olarak ItemsSourcenullItemsSourcenull ayarlandırabilirsiniz. tek DataTemplate bir görünüm veya birden çok alt görünüm içeren bir görünüm içerebilir. Buna ek olarak, BindingContextEmptyViewTemplate , 'den BindingContext devralınmış BindableLayout olur. Aşağıdaki XAML örneği, tek EmptyViewTemplate bir görünüm içeren bir DataTemplate özelliğine ayarlanmış özelliğini gösterir:

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

Sonuç olarak, veriye bağlı koleksiyon olduğunda null , Label içinde DataTemplate görüntülenir:

bağlanabilir düzen boş görünüm şablonunun

Çalışma zamanında EmptyView seçme

Veriler kullanılamasa EmptyView olarak görüntülenecek görünümler, içinde nesne ContentView olarak ResourceDictionary tanımlanabilir. Daha EmptyView sonra özelliği, çalışma zamanında bazı iş ContentView mantığına göre belirli bir değerine ayarlanmış olabilir. Aşağıdaki XAML bu senaryonun bir örneğini gösterir:

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

XAML, özellik değeri olarak hangi nesnenin ayar olacağını denetleyen nesne ile sayfa ContentViewResourceDictionarySwitchContentView düzeyindeki iki EmptyView nesneyi tanımlar. geçişli Switch olduğunda, olay OnEmptyViewSwitchToggled işleyicisi yöntemini ToggleEmptyView yürütür:

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

yöntemi, ToggleEmptyViewEmptyView Xamarin_Forms stackLayoutContentViewResourceDictionaryToggleEmptyView _Switch_IsToggled" data-linktype="absolute-path">Switch.IsToggled özelliğinin değerine göre nesnesinin özelliğini içinde depolanan iki nesneden biri olarak ayarlar. Ardından, veriye bağlı koleksiyon null olduğunda ContentView nesne özelliği EmptyView görüntülendiğinde ayarlanır:

zamanında boş görünüm seçimi ekranve Android'de Bağlanabilir düzen boş görünüm çalışma zamanı

İlgili bağlantılar

• Bağlanabilir Düzen Demosu (örnek)
• Özel Düzen Oluşturma
• Xamarin.Forms Data Templates
• Creating a Xamarin.Forms DataTemplateSelector