ListView görünümü

, Xamarin.FormsListView listedeki her satırın örneklerine ek olarak listenin ViewCell sunumunu özelleştirmenizi sağlar.

Gruplama

Sürekli kaydırma listesinde sunulan büyük veri kümeleri karmaşık hale gelebilir. Gruplamanın etkinleştirilmesi, içeriği daha iyi düzenleyerek ve verilerde gezinmeyi kolaylaştıran platforma özgü denetimleri etkinleştirerek bu durumlarda kullanıcı deneyimini geliştirebilir.

gruplandırma bir ListViewiçin etkinleştirildiğinde, her grup için bir üst bilgi satırı eklenir.

Gruplandırma özelliğini etkinleştirmek için:

• Bir liste listesi oluşturun (grupların listesi, her grup bir öğe listesidir).
• 'ItemsSourceleri ListViewbu listeye ayarlayın.
• IsGroupingEnabled değerini true olarak ayarlayın.
• Grubun başlığı olarak kullanılan grupların özelliğine bağlanacak şekilde ayarlayın GroupDisplayBinding .
• [İsteğe bağlı] Grubun kısa adı olarak kullanılan grupların özelliğine bağlanacak şekilde ayarlayın GroupShortNameBinding . Kısa ad, atlama listeleri (iOS'ta sağ taraftaki sütun) için kullanılır.

Gruplar için bir sınıf oluşturarak başlayın:

public class PageTypeGroup : List<PageModel>
    {
        public string Title { get; set; }
        public string ShortName { get; set; } //will be used for jump lists
        public string Subtitle { get; set; }
        private PageTypeGroup(string title, string shortName)
        {
            Title = title;
            ShortName = shortName;
        }

        public static IList<PageTypeGroup> All { private set; get; }
    }

Yukarıdaki kodda, All bağlama kaynağı olarak ListView'umuza verilecek listedir. Title ve ShortName grup başlıkları için kullanılacak özelliklerdir.

Bu aşamada, All boş bir listedir. Programın başlangıcında listenin doldurulması için statik bir oluşturucu ekleyin:

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alpha", "A"){
                new PageModel("Amelia", "Cedar", new switchCellPage(),""),
                new PageModel("Alfie", "Spruce", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ava", "Pine", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Archie", "Maple", new switchCellPage(), "grapefruit.jpg")
            },
            new PageTypeGroup ("Bravo", "B"){
                new PageModel("Brooke", "Lumia", new switchCellPage(),""),
                new PageModel("Bobby", "Xperia", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Bella", "Desire", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ben", "Chocolate", new switchCellPage(), "grapefruit.jpg")
            }
        };
        All = Groups; //set the publicly accessible list
}

Yukarıdaki kodda, türündeki PageTypeGroupörnekler olan öğelerini Groupsde çağırabilirizAdd. bu yöntem, öğesinden List<PageModel>devralındığından PageTypeGroup mümkündür.

Gruplandırılmış listeyi görüntülemek için XAML aşağıdadır:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoListView.GroupingViewPage"
    <ContentPage.Content>
        <ListView  x:Name="GroupedView"
                   GroupDisplayBinding="{Binding Title}"
                   GroupShortNameBinding="{Binding ShortName}"
                   IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding Subtitle}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Bu XAML aşağıdaki eylemleri gerçekleştirir:

• ShortName Grup sınıfımızda tanımlanan özelliğe ayarlayın GroupShortNameBinding
• Title Grup sınıfımızda tanımlanan özelliğe ayarlayın GroupDisplayBinding
• True olarak ayarla IsGroupingEnabled
• 'ItemsSourceler ListViewgruplandırılmış listeye değiştirildi

Aşağıdaki ekran görüntüsünde elde edilen kullanıcı arabirimi gösterilmektedir:

Gruplandırma özelleştirme

Listede gruplandırma etkinleştirildiyse, grup üst bilgisi de özelleştirilebilir.

satırların ListView nasıl görüntüleneceğini tanımlamak için öğesine ItemTemplate sahip olduğu gibi, ListView öğesinin de bir GroupHeaderTemplatedeğeri vardır.

XAML'de grup üst bilgisini özelleştirme örneği burada gösterilmiştir:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoListView.GroupingViewPage">
    <ContentPage.Content>
        <ListView x:Name="GroupedView"
                  GroupDisplayBinding="{Binding Title}"
                  GroupShortNameBinding="{Binding ShortName}"
                  IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding Subtitle}"
                              TextColor="#f35e20"
                              DetailColor="#503026" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <!-- Group Header Customization-->
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding ShortName}"
                              TextColor="#f35e20"
                              DetailColor="#503026" />
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <!-- End Group Header Customization -->
        </ListView>
    </ContentPage.Content>
</ContentPage>

Üstbilgiler ve altbilgiler

ListView'un, liste öğeleriyle birlikte kaydıran bir üst bilgi ve alt bilgi sunabilmek mümkündür. Üst bilgi ve alt bilgi, metin dizeleri veya daha karmaşık bir düzen olabilir. Bu davranış bölüm gruplarından ayrıdır.

ve/veya Footer string değerini veya Header daha karmaşık bir düzene ayarlayabilirsiniz. Ayrıca, veri bağlamayı destekleyen üst bilgi ve alt bilgi için daha karmaşık düzenler oluşturmanıza olanak sağlayan ve FooterTemplate özellikleri de HeaderTemplate vardır.

Temel bir üst bilgi/alt bilgi oluşturmak için, Üstbilgi veya Altbilgi özelliklerini görüntülemek istediğiniz metne ayarlamanız gerekir. Kod:

ListView HeaderList = new ListView()
{
    Header = "Header",
    Footer = "Footer"
};

XAML'de:

<ListView x:Name="HeaderList" 
          Header="Header"
          Footer="Footer">
    ...
</ListView>

Özelleştirilmiş üst bilgi ve alt bilgi oluşturmak için Üst Bilgi ve Alt Bilgi görünümlerini tanımlayın:

<ListView.Header>
    <StackLayout Orientation="Horizontal">
        <Label Text="Header"
               TextColor="Olive"
               BackgroundColor="Red" />
    </StackLayout>
</ListView.Header>
<ListView.Footer>
    <StackLayout Orientation="Horizontal">
        <Label Text="Footer"
               TextColor="Gray"
               BackgroundColor="Blue" />
    </StackLayout>
</ListView.Footer>

Kaydırma çubuğu görünürlüğü

sınıfı, ListView yatay veya dikey kaydırma çubuğunun ne zaman görünür olduğunu gösteren bir ScrollBarVisibility değer alan veya ayarlayan ve VerticalScrollBarVisibility özelliklerine sahiptirHorizontalScrollBarVisibility. Her iki özellik de aşağıdaki değerlere ayarlanabilir:

• Defaultplatform için varsayılan kaydırma çubuğu davranışını gösterir ve ve VerticalScrollBarVisibility özellikleri için HorizontalScrollBarVisibility varsayılan değerdir.
• Always , içerik görünüme sığsa bile kaydırma çubuklarının görünür olacağını gösterir.
• Never , içerik görünüme sığmasa bile kaydırma çubuklarının görünmeyeceklerini gösterir.

Satır ayırıcıları

Ayırıcı çizgiler, iOS ve Android'de varsayılan olarak öğeler arasında ListView görüntülenir. iOS ve Android'de ayırıcı çizgileri gizlemeyi tercih ediyorsanız ListView'unuzda özelliğini ayarlayın SeparatorVisibility . seçenekleri SeparatorVisibility şunlardır:

• Varsayılan : iOS ve Android'de ayırıcı bir çizgi gösterir.
• Yok - Ayırıcıyı tüm platformlarda gizler.

Varsayılan Görünürlük:

C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="Default" />

Hiçbiri:

C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="None" />

Ayırıcı çizginin rengini özelliği aracılığıyla SeparatorColor da ayarlayabilirsiniz:

C#:

SeparatorDemoListView.SeparatorColor = Color.Green;

XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorColor="Green" />

Not

yüklendikten sonra Android'de bu özelliklerden ListView birinin ayarlanması büyük bir performans cezasına neden olabilir.

Satır yüksekliği

ListView'daki tüm satırlar varsayılan olarak aynı yüksekliğe sahiptir. ListView,bu davranışı değiştirmek için kullanılabilecek iki özelliğe sahiptir:

• HasUnevenRows – true/false değeri olarak ayarlanırsa truesatırların yükseklikleri değişir. varsayılan değeridir false.
• RowHeight – olduğunda HasUnevenRows falseher satırın yüksekliğini ayarlar.

özelliğini ListViewüzerinde ayarlayarak tüm satırların RowHeight yüksekliğini ayarlayabilirsiniz.

Özel sabit satır yüksekliği

C#:

RowHeightDemoListView.RowHeight = 100;

XAML:

<ListView x:Name="RowHeightDemoListView" RowHeight="100" />

Eşit olmayan satırlar

Tek tek satırların farklı yüksekliklere sahip olmasını istiyorsanız özelliğini olarak trueayarlayabilirsinizHasUnevenRows. Yükseklikler tarafından Xamarin.Formsotomatik olarak hesaplanacağından, satır yüksekliklerinin olarak ayarlandıktan sonra HasUnevenRows el ile ayarlanması truegerekmez.

C#:

RowHeightDemoListView.HasUnevenRows = true;

XAML:

<ListView x:Name="RowHeightDemoListView" HasUnevenRows="true" />

Çalışma zamanında satırları yeniden boyutlandırma

Özelliği olarak ayarlanmış trueolması koşuluylaHasUnevenRows, tek tek ListView satırlar çalışma zamanında program aracılığıyla yeniden boyutlandırılabilir. Cell.ForceUpdateSize yöntemi, aşağıdaki kod örneğinde gösterildiği gibi, şu anda görünür olmasa bile hücrenin boyutunu güncelleştirir:

void OnImageTapped (object sender, EventArgs args)
{
    var image = sender as Image;
    var viewCell = image.Parent.Parent as ViewCell;

    if (image.HeightRequest < 250) {
        image.HeightRequest = image.Height + 100;
        viewCell.ForceUpdateSize ();
    }
}

Olay OnImageTapped işleyicisi, dokunmakta olan hücredeki bir Image öğesine yanıt olarak yürütülür ve hücrede görüntülenen boyutunu Image artırarak kolayca görüntülenmesini sağlar.

Uyarı

Çalışma zamanı satırını yeniden boyutlandırmanın aşırı kullanılaması performans düşüşlerine neden olabilir.

İlgili bağlantılar

• 1.4 sürüm notları
• 1.3 sürüm notları