Veri bağlama ve listeler

  • 10 dakika

Tech logo of U W P and W P F. W P F appears dimmed.

Şimdiye kadar yalnızca tek bir nesnenin özelliklerini görüntülemek ve düzenlemek için veri bağlamayı kullandınız. Bu derste, bir nesne koleksiyonunu görüntülemek için veri bağlama kavramları uygulayacaksınız. İşleri basit hale getirmek için bu nesneler renkler olacaktır. Daha açık belirtmek gerekirse, bunlar sınıfın ColorDescriptor birden çok örneği olacaktır.

1. Sınıfı oluşturma ColorDescriptor

Şimdi bir rengi temsil eden bir sınıf oluşturalım. Çözüm Gezgini'de projeye sağ tıklayınDatabindingSample, Ekle / Sınıf'ı seçin ve sınıf adı olarak girinColorDescriptor. Sınıfı oluşturmak için Ekle'yi seçin.

ColorDescriptor iki özellik içerir: nesne olarak Windows.UI.Color rengin kendisi ve bir renk adı. Ayrıca bu özellikleri dolduran bir oluşturucuya, rengin adını görüntüleyen bir ToString() yönteme ve R, G ve B renk bileşenleri için onaltılık değerlere sahiptir. Sınıfın tamamı ColorDescriptor burada.

using Windows.UI;

namespace DatabindingSample
{
    public class ColorDescriptor : ObservableObject
    {
        public ColorDescriptor(Color color, string name)
        {
            Color = color;
            Name = name;
        }

        public Color Color { get; private set; }

        public string Name { get; private set; }

        public override string ToString()
        {
            return $"{Name} (#{Color.R:X2}{Color.G:X2}{Color.B:X2})";
        }
    }
}

ColorDescriptor.cs dosyasının varsayılan içeriğini önceki kodla değiştirin.

2. ColorList.xaml sayfasını oluşturma

Renk listesini görüntülemek için yeni bir XAML sayfası kullanacağız. Çözüm Gezgini'da projeye sağ tıklayın DatabindingSample ve Ekle / Yeni Öğe'yi seçin. Kullanılabilir öğeler listesinden Boş Sayfa'yı seçin ve ardından ad olarak girinColorList. Sayfayı oluşturmak için Ekle'yi seçin.

Screenshot that shows Blank Page selected under Visual C Sharp, in the Add New Item dialog box.

3. Başlangıç sayfasını ayarlama

Şimdi uygulamayı başlatırsanız MainPage sayfasıyla açılır. Yeni oluşturulan ColorList.xaml sayfasıyla çalışacağınız için, bunun başlangıç sayfası olması iyi olur. Bunu gerçekleştirmek için App.xaml.cs dosyasını açın ve MainPage'e gidebilecek satırı bulun.

rootFrame.Navigate(typeof(MainPage), e.Arguments);

değerini ile ColorListdeğiştirin MainPage ve uygulamayı başlattığınızda ColorList sayfasının başlatıldığını doğrulayın (F5 tuşuna basın veya Hata Ayıkla / Hata Ayıklamayı Başlat'ı seçin).

4. Renk listesi için mantık oluşturma

Yeni sayfa için ayrı bir mantık oluşturmak için daha önce kullanıma sunulan en iyi yönteme devam edeceğiz. Bu nedenle devam edin ve adlı ColorListLogicyeni bir sınıf oluşturun.

Çözüm Gezgini'da projeye sağ tıklayınDatabindingSample, Ekle / Sınıf'ı seçin ve ardından sınıfın adı olarak girinColorListLogic. Sınıfı oluşturmak için Ekle'yi seçin ve aşağıdakini dosyaya yapıştırın:

using System.Collections.Generic;
using System.Collections.ObjectModel;

using Windows.UI;

namespace DatabindingSample
{
    public class ColorListLogic : ObservableObject
    {
        public List<ColorDescriptor> LotsOfColors { get; private set; }

        public ColorListLogic()
        {
            LotsOfColors = new List<ColorDescriptor>
            {
               new ColorDescriptor(Colors.Red, "red"),
               new ColorDescriptor(Colors.White, "white"),
               new ColorDescriptor(Colors.Green, "green"),
               new ColorDescriptor(Colors.Yellow, "yellow"),
               new ColorDescriptor(Colors.Blue, "blue"),
               new ColorDescriptor(Colors.Black, "black")
            };

        }
    }
}

ColorListLogic Sınıfı çok basittir (şimdilik). Nesnelerden oluşan ColorDescriptor adlı bir List özelliği LotsOfColorsvardır. Liste, sınıfın oluşturucusunda bazı renklerle doldurulur. İşte bu kadar.

5. Renkleri bir ListBox

Sonraki adım, uygulamalarımızda renkleri görüntülemektir. İlk olarak, öğesini XAML'den erişilebilir hale getirelim ColorListLogic . öğesini açın ColorList.xaml.csve bunu sınıfına ColorList ekleyin:

public ColorListLogic Logic { get; } = new ColorListLogic();

Burada daha önce kullandığımız MainPageLogic söz diziminin aynısını kullanıyoruz. Bir get-only özelliği oluşturur ve değerini yeni oluşturulan ColorListLogic bir nesneye başlatır.

Ardından ColorList.xaml dosyasını açın ve öğesinin içine aşağıdaki XAML'yi Grid ekleyin.

<ListBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"/>

Buradaki ilginç bölüm özniteliğidir ItemsSource . Adından da anlaşılacağı gibi, içinde ListBoxgörüntülenen öğelerin kaynağını sağlar. Ve sadece 'nin LotsOfColors mülkiyetine ColorListLogicbağlıdır.

Uygulamayı şimdi çalıştırırsanız, renkleri bir ListBox! Ama bakmak pek hoş değil. , ListBox listede depolanan LotsOfColors s yöntemini ColorDescriptorçağırmış ToString() gibi görünüyor.

Screenshot that shows the Data binding Sample window, with yellow selected.

6. Öğeler için şablon tanımlama

Özelliğinde ColorDescriptor.Color depolanan gerçek rengi ve adını gösteren bir şablon olması iyi olur. Şuna benzer bir şey:

Screenshot of template.

Bunu XAML'de kodlayarak içine bir renkli Rectangle ve bir TextBlockStackPanelekleyebiliriz.

<StackPanel Orientation="Horizontal">
    <Rectangle Width="80" Height="20">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="blue" Margin="20, 10, 0, 10"/>
</StackPanel>

Bu, XAML ve veri bağlamanın güçlü yönlerinden biridir. Neredeyse tüm karmaşık görseller, yeniden tanımlayabileceğiniz şablonları temel alır. Öncekini StackPanel şablon olarak kullanmak için bunu içine DataTemplatekoymamız gerekir. Bir DataTemplate öğesinin, şablonun uygulanabileceği veri türü olan bir DataTypetanımlaması gerekir. Bizim durumumuzda, ColorDescriptor bu sınıf. Bu nedenle, DataTemplate şuna benzer:

<DataTemplate x:DataType="local:ColorDescriptor">
    <!-- template content comes here -->
</DataTemplate>

Bir verinin ListBox (ve diğer birçok denetimin) nasıl işlendiği, olarak ayarlanması DataTemplategereken kendi ItemTemplatetarafından denetlenmektedir. Bunu yapmanın birden çok yolu vardır. Bu derste, içindekini DataTemplateListBoxaşağıdaki söz dizimiyle tanımlayacağız:

<ListBox ...>
    <ListBox.ItemsSource>
        <DataTemplate ...>
            ...
        </DataTemplate>
    </ListBox.ItemsSource>
</ListBox>

Daha sonra, kaynak olarak tanımlayarak bir DataTemplate öğesinin birden çok yerde nasıl yeniden kullanılabilir olduğunu göreceksiniz.

Şimdi bütün ListBox şu şekilde görünür (takip etmediyseniz, etiketin tamamını <ListBox> aşağıdaki XAML ile değiştirin):

<ListBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top">
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="local:ColorDescriptor">
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" 
                           Height="20">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{x:Bind Color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="{x:Bind Name}" 
                           Margin="20, 10, 0, 10"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

içindeki ListBox her öğe bir ColorDescriptor nesneye karşılık geldiği için, yalnızca bu sınıf bağlamında şablonun içindeki bağlamaları tanımlamanız gerektiğini unutmayın. Derleyici, nesneleri içerdiğini Logic.LotsOfColorsColorDescriptor ve var olup ColorDescriptor.ColorColorDescriptor.Name olmadığını ve doğru türde olup olmadığını bile denetler.

7. Uygulamayı çalıştırma

F5 tuşuna basarak veya menüden Hata Ayıkla / Hata Ayıklamayı Başlat'ı seçerek uygulamayı şimdi çalıştırın. Renk listesini tüm görkemiyle görmelisiniz.

Screenshot that shows the Data binding Sample window, with a list of six colors next to rectangles representing the color.

Bir XAML uygulamasını hata ayıklama modunda başlatırsanız canlı XAML düzenlemeden yararlanabilirsiniz. Uygulamayı durdurmanız veya kaydet'e basmanız bile gerekmez. Yalnızca XAML'yi değiştirdiğinizde yaptığınız değişikliklerin çoğu çalışan uygulamaya anında yansıtılır. Hemen Deneyin. Width Veri şablonunun Rectangle içindeki ve Height değerlerini 30 olarak değiştirerek renk dikdörtgenlerini karelere dönüştürüyor.

Screenshot that shows the Data binding Sample window, with a list of six colors next to squares representing the color.

Buna XAML Çalışırken Yeniden Yükleme adı verilir ve uygulamanızdaki düzen ve animasyonlarda ince ayarlamalar yapmak için yararlı olabilir.

Özet

Bu ders, içinde ListBoxbirden çok öğe görüntülemenin temellerini gösterdi. Benzer amaçlarla kullanılabilecek , ListViewve GridViewgibi ItemsControlbaşka denetimler de vardır. Ancak temel ilkeler aynıdır: nesne listenizi (IEnumerable, List<>) özelliğine ItemsSource bağlayın ve tek tek liste öğelerinin nasıl görüntüleneceğini ve nasıl davranılacağını denetlemek için tanımlayın DataTemplates . Ayrıca, bu öğelerin düzenini ve hatta kapsayıcı denetimlerinin görünümünü de yeniden tanımlayabilirsiniz (ancak bu, bu modülün kapsamı dışındadır).

Kodun kendisiyle hiçbir zaman ilgilenmek ListBox zorunda olmadığını unutmayın. Yeni bir iş nesneleri koleksiyonu (ColorDescriptor ) oluşturdu ve XAML çalışma zamanı şablonun her öğe için genişletilmesiyle ilgilendi.

Sonraki derste, bir ListBox veya bir açılan listeden öğeleri seçme ve öğeleri ekleme ve kaldırmanın kullanıcı arabirimine yansıtılması için koddaki listelerin içeriğini nasıl değiştirebileceğiniz gösterilmektedir.

Tech logo of U W P and W P F. U W P appears dimmed.

Şimdiye kadar yalnızca tek bir nesnenin özelliklerini görüntülemek ve düzenlemek için veri bağlamayı kullandınız. Bu derste, bir nesne koleksiyonunu görüntülemek için veri bağlama kavramları uygulayacaksınız. İşleri basit hale getirmek için bu nesneler renkler olacaktır. Daha açık belirtmek gerekirse, bunlar bir ColorDescriptor sınıfın birden çok örneği olacaktır.

1. Sınıfı oluşturma ColorDescriptor

Şimdi bir rengi temsil etmek için sınıfını oluşturalım. Çözüm Gezgini'de projeye sağ tıklayınDatabindingSampleWPF, Ekle / Sınıf'ı seçin ve sınıf adı olarak girinColorDescriptor. Sınıfı oluşturmak için Ekle'yi seçin.

ColorDescriptor iki özellik içerir: nesne olarak System.Windows.Media.Color rengin kendisi ve bir renk adı. Ayrıca bu özellikleri ayarlayan bir oluşturucu, rengin adını görüntüleyen bir ToString() yöntem ve R, G ve B renk bileşenleri için onaltılık değerlere sahiptir. Sınıfın tamamı ColorDescriptor burada.

using System.Windows.Media;

namespace DatabindingSampleWPF
{
    public class ColorDescriptor : ObservableObject
    {
        public ColorDescriptor(Color color, string name)
        {
            Color = color;
            Name = name;
        }

        public Color Color { get; private set; }

        public string Name { get; private set; }

        public override string ToString()
        {
            return $"{Name} (#{Color.R:X2}{Color.G:X2}{Color.B:X2})";
        }
    }
}

Dosyanın varsayılan içeriğini ColorDescriptor.cs önceki kodla değiştirin.

2. ColorList.xaml sayfasını oluşturma

Renk listesini görüntülemek için yeni bir XAML dosyası kullanacağız. Çözüm Gezgini'da projeye sağ tıklayın DatabindingSampleWPF ve Ekle / Yeni Öğe'yi seçin. Kullanılabilir öğeler listesinden Pencere (WPF) öğesini seçin ve ardından ad olarak girinColorList. Sayfayı oluşturmak için Ekle'yi seçin.

Screenshot of Add New Item dialog box.

3. Başlangıç XAML dosyasını ayarlama

Şimdi uygulamayı başlatırsanız MainWindow ile açılır. Yeni oluşturulan ColorList.xamlile çalışacağınız için bu ekranın başlangıçta olması iyi olur. Bunu gerçekleştirmek için öğesini açın App.xamlve kök Application öğesinin özniteliğini bulunStratupUri.

StartupUri="MainWindow.xaml"

değerini ile ColorListdeğiştirin MainWindow ve uygulamayı başlattığınızda ColorList değerinin gösterildiğini doğrulayın (F5 tuşuna basın veya Hata Ayıkla / Hata Ayıklamayı Başlat'ı seçin).

Screenshot that shows an empty Color List window.

4. Renk listesi için öğesini oluşturun DataContext

Yeni XAML penceresi için ayrı DataContext bir sınıf oluşturmak için daha önce kullanıma sunulan en iyi yönteme devam edeceğiz. Bu nedenle devam edip adlı ColorListDataContextyeni bir sınıf oluşturacağız.

Çözüm Gezgini'da projeye sağ tıklayınDatabindingSample, Ekle / Sınıf'ı seçin ve ardından sınıfın adı olarak girinColorListDataContext. Sınıfı oluşturmak için Ekle'yi seçin ve aşağıdakini dosyaya yapıştırın:

using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.Windows.Media;

namespace DatabindingSampleWPF
{
    public class ColorListDataContext: ObservableObject
    {
        public List<ColorDescriptor> LotsOfColors { get; private set; }

        public ColorListDataContext()
        {
            LotsOfColors = new List<ColorDescriptor>
            {
               new ColorDescriptor(Colors.Red, "red"),
               new ColorDescriptor(Colors.White, "white"),
               new ColorDescriptor(Colors.Green, "green"),
               new ColorDescriptor(Colors.Yellow, "yellow"),
               new ColorDescriptor(Colors.Blue, "blue"),
               new ColorDescriptor(Colors.Black, "black")
            };
        }
    }
}

ColorListDataContext Sınıfı çok basittir (şimdilik). Nesnelerden oluşan ColorDescriptor adlı bir List özelliği LotsOfColorsvardır. Liste, sınıfın oluşturucusunda bazı renklerle doldurulur. İşte bu kadar.

5. Renkleri bir ListBox

Sonraki adım, uygulamalarımızda renkleri görüntülemektir. Daha önce olduğu gibi, içinde ColorList.xamlsınıfının bir örneğini ColorListDataContext oluşturmamız ve bunu tüm pencere için olarak DataContext ayarlamamız gerekir. öğesini açın ColorList.xamlve bunu etiketin <Window ...> hemen arkasına ekleyin:

<Window.DataContext>
    <local:ColorListDataContext/>
</Window.DataContext>

XAML tasarımcısının yeni tanımlanan ColorListDataContext sınıfı çözümleyebilmesi için kodu bu noktada derlemeniz gerekir.

Ardından, etiketin içine aşağıdaki XAML işaretlemesini <Grid> kopyalayın:

<ListBox ItemsSource="{Binding LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"/>

Buradaki ilginç bölüm özniteliğidir ItemsSource . Adından da anlaşılacağı gibi, içinde ListBoxgörüntülenen öğelerin kaynağını sağlar. Ve sadece 'nin LotsOfColors mülkiyetine ColorListDataContextbağlıdır.

Uygulamayı şimdi çalıştırırsanız, renkleri bir ListBox! Ama bakmak pek hoş değil. , ListBox listede depolanan LotsOfColors s yöntemini ColorDescriptorçağırmış ToString() gibi görünüyor.

Screenshot that shows the Color List window with six colors listed.

6. Öğeler için şablon tanımlama

Özelliğinde ve adında depolanan ColorDescriptor.Color gerçek rengi gösteren bir şablon olması iyi olur. Şuna benzer bir şey:

Screenshot fo template.

Bunu XAML'de kodlayarak içine bir renkli Rectangle ve bir TextBlockStackPanelekleyebiliriz.

<StackPanel Orientation="Horizontal">
    <Rectangle Width="80" Height="20">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="blue" Margin="20, 10, 0, 10"/>
</StackPanel>

Bu, XAML ve veri bağlamanın güçlü yönlerinden biridir. Neredeyse tüm karmaşık görseller, yeniden tanımlayabileceğiniz şablonları temel alır. Yukarıdakini StackPanel şablon olarak kullanmak için öğesinin DataTemplateiçine koymamız gerekir:

<DataTemplate>
    <!-- template content comes here -->
</DataTemplate>

Verilerin bir ListBox (ve daha birçok denetim) içinde nasıl işlendiği, yukarıdakine DataTemplate ayarlanması gereken kendi ItemTemplatetarafından denetlenmektedir. Bunu yapmanın birden çok yolu vardır. Bu derste, içindekini DataTemplateListBoxaşağıdaki söz dizimiyle tanımlayacağız:

<ListBox ...>
    <ListBox.ItemsSource>
        <DataTemplate ...>
            ...
        </DataTemplate>
    </ListBox.ItemsSource>
</ListBox>

Daha sonra, kaynak olarak tanımlayarak bir DataTemplate öğesinin birden çok yerde nasıl yeniden kullanılabilir olduğunu göreceksiniz.

Şimdi, tüm ListBox için işaretleme şöyle görünür (takip etmediyseniz, öğenin tamamını <ListBox> aşağıdaki XAML ile değiştirin):

<ListBox ItemsSource="{Binding LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" 
                           Height="20">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding Color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="{Binding Name}" 
                           Margin="20, 10, 0, 10"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

içindeki ListBox her öğe bir ColorDescriptor nesneye karşılık geldiği için, yalnızca bu sınıf bağlamında şablonun içindeki bağlamaları tanımlamanız gerektiğini unutmayın.

7. Uygulamayı çalıştırma

Visual Studio'da renk listesini hemen görmeniz gerekir. Emin olmak için, F5 tuşuna basarak veya menüden Hata Ayıkla / Hata Ayıklamayı Başlat'ı seçerek uygulamayı şimdi çalıştırın.

Screenshot that shows the Color List window, with six colors listed next to rectangles representing the color.

Bir XAML uygulamasını hata ayıklama modunda başlatırsanız canlı XAML düzenlemeden yararlanabilirsiniz. Uygulamayı durdurmanız veya kaydet'e basmanız bile gerekmez. Yalnızca XAML'yi değiştirdiğinizde yaptığınız değişikliklerin çoğu çalışan uygulamaya anında yansıtılır. Hemen Deneyin. Width Veri şablonunun Rectangle içindeki ve Height değerlerini 30 olarak değiştirerek renk dikdörtgenlerini karelere dönüştürüyor.

Screenshot that shows the Color List window, with six colors listed next to squares representing the color.

Buna XAML Çalışırken Yeniden Yükleme adı verilir ve uygulamanızdaki düzen ve animasyonlarda ince ayarlamalar yapmak için yararlı olabilir.

Özet

Bu derste, içinde ListBoxbirden çok öğe görüntülemenin temelleri izlendi. Benzer amaçlarla kullanılabilecek , ListViewve GridViewgibi ItemsControlbaşka denetimler de vardır. Ancak temel ilkeler aynıdır: nesne listenizi (IEnumerable, List<>) özelliğine ItemsSource bağlayın ve tek tek liste öğelerinin nasıl görüntüleneceğini ve nasıl davranılacağını denetlemek için bir DataTemplate tanımlayın. Ayrıca, bu öğelerin düzenini ve hatta kapsayıcı denetimlerinin görünümünü de yeniden tanımlayabilirsiniz (ancak bu, bu modülün kapsamı dışındadır).

Mantıksal kodun denetim hakkında hiçbir zaman bilgisi ListBox olmadığını unutmayın. Yeni bir iş nesneleri koleksiyonu ()ColorDescriptor oluşturdu ve XAML çalışma zamanı her öğe için şablonun işlenmesini işledi.

Sonraki derste, bir ListBox veya ComboBoxöğesinden öğe seçme ve öğeleri ekleme ve kaldırma işleminin kullanıcı arabirimine yansıtılması için koddaki listelerin içeriğini nasıl değiştirebileceğiniz gösterilmektedir.