Powiązanie danych i listy

  • 10 min

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

Do tej pory do wyświetlania i edytowania właściwości pojedynczego obiektu użyto tylko powiązania danych. W tej lekcji zastosujesz koncepcje powiązania danych, aby wyświetlić kolekcję obiektów. Aby ułatwić sobie sprawę, te obiekty będą kolorami. Mówiąc dokładniej, będą to wiele wystąpień ColorDescriptor klasy.

1. Tworzenie ColorDescriptor klasy

Utwórzmy klasę reprezentującą kolor. Kliknij prawym przyciskiem myszy DatabindingSample projekt w Eksplorator rozwiązań, wybierz pozycję Dodaj / Klasa, a następnie wprowadź ColorDescriptor jako nazwę klasy. Wybierz pozycję Dodaj , aby utworzyć klasę.

ColorDescriptor zawiera dwie właściwości: sam kolor jako Windows.UI.Color obiekt i nazwę koloru. Ma również konstruktor, który wypełnia te właściwości, metodę ToString() , która wyświetla nazwę koloru i wartości szesnastkowy dla składników kolorów R, G i B. Oto cała ColorDescriptor klasa.

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

Zastąp domyślną zawartość pliku ColorDescriptor.cs poprzednim kodem.

2. Tworzenie strony ColorList.xaml

Aby wyświetlić listę kolorów, użyjemy nowej strony XAML. Kliknij prawym przyciskiem myszy DatabindingSample projekt w Eksplorator rozwiązań, a następnie wybierz polecenie Dodaj/Nowy element. Wybierz pozycję Pusta strona z listy dostępnych elementów, a następnie wprowadź ColorList jako nazwę. Wybierz pozycję Dodaj , aby utworzyć stronę.

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

3. Ustawianie strony uruchamiania

Teraz po uruchomieniu aplikacji zostanie otwarta strona MainPage . Ponieważ będziesz pracować z nowo utworzoną stroną ColorList.xaml, warto mieć ją jako stronę początkową. Aby to się stało, otwórz plik App.xaml.cs i znajdź wiersz, który przechodzi do strony MainPage.

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

Zastąp ciąg MainPage ciąg , ColorLista następnie sprawdź, czy strona ColorList jest uruchamiana po uruchomieniu aplikacji (naciśnij klawisz F5 lub wybierz pozycję Debuguj/ Rozpocznij debugowanie).

4. Tworzenie logiki dla listy kolorów

Będziemy kontynuować wcześniej wprowadzone najlepsze rozwiązanie dotyczące tworzenia oddzielnej logiki dla nowej strony. Dlatego utwórz nową klasę o nazwie ColorListLogic.

Kliknij prawym przyciskiem myszy DatabindingSample projekt w Eksplorator rozwiązań, wybierz pozycję Dodaj / Klasa, a następnie wprowadź ColorListLogic jako nazwę klasy. Wybierz pozycję Dodaj , aby utworzyć klasę, i wklej następujący kod do pliku:

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

        }
    }
}

Klasa ColorListLogic jest bardzo prosta (na razie). Ma właściwość o nazwie LotsOfColors, która jest obiektem ListColorDescriptor . Lista jest wypełniona kilkoma kolorami w konstruktorze klasy. To wszystko.

5. Wyświetlanie kolorów w obiekcie ListBox

Następnym krokiem jest wyświetlenie kolorów w naszej aplikacji. Najpierw udostępnijmy kod ColorListLogic XAML. Otwórz plik ColorList.xaml.csi dodaj go do ColorList klasy :

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

W tym miejscu używamy tej samej składni, co MainPageLogic wcześniej. Tworzy właściwość tylko do pobrania i inicjuje jej wartość do nowo utworzonego ColorListLogic obiektu.

Następnie otwórz plik ColorList.xaml i dodaj następujący kod XAML wewnątrz Grid elementu.

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

Interesującą ItemsSource częścią jest atrybut . Jak sugeruje nazwa, dostarcza źródło elementów wyświetlanych w pliku ListBox. I jest to po prostu powiązane z właściwością ColorListLogicLotsOfColors ".

Jeśli teraz uruchomisz aplikację, będzie ona wyświetlać kolory w programie ListBox! Ale to nie jest zbyt miłe, aby spojrzeć na. Wydaje ListBox się, że wywołano metodę ToString()ColorDescriptors przechowywaną na LotsOfColors liście.

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

6. Zdefiniuj szablon dla elementów

Dobrze byłoby mieć szablon, który pokazuje rzeczywisty kolor przechowywany we ColorDescriptor.Color właściwości i jego nazwę. Coś takiego:

Screenshot of template.

Aby kodować to w języku XAML, możemy umieścić kolor i Rectangle znak TextBlock w obiekcie StackPanel.

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

Jest to jedna z zalet języka XAML i powiązania danych. Prawie każda złożona wizualizacja opiera się na szablonach, które można ponownie zdefiniować. Aby użyć powyższego StackPanel szablonu, musimy umieścić go wewnątrz DataTemplateelementu . Należy DataTemplate zdefiniować element , który jest typem DataTypedanych, do których można zastosować szablon. W naszym przypadku jest ColorDescriptor to klasa . Wygląda więc następująco DataTemplate :

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

Sposób renderowania danych w elemecie ListBox (i wielu innych kontrolkach) jest kontrolowany przez element ItemTemplate, który powinien być ustawiony na DataTemplatewartość . Istnieje wiele sposobów, aby to zrobić. W tej lekcji po prostu zdefiniujemy wewnątrz DataTemplateListBoxelementu , z następującą składnią:

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

Później zobaczysz, jak można ponownie użyć elementu DataTemplate w wielu miejscach, definiując go jako zasób.

Teraz całość ListBox wygląda następująco (jeśli nie wykonano tej czynności, zastąp cały <ListBox> tag następującym kodem XAML):

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

Należy pamiętać, że ponieważ każdy element w ListBox obiekcie odpowiada ColorDescriptor obiektowi, wystarczy zdefiniować powiązania wewnątrz szablonu w kontekście tej klasy. Kompilator sprawdza nawet, czy Logic.LotsOfColors obiekt zawiera ColorDescriptor i które ColorDescriptor.Color istnieją i ColorDescriptor.Name są odpowiedniego typu.

7. Uruchamianie aplikacji

Uruchom aplikację teraz, naciskając klawisz F5 lub wybierając pozycję Debuguj/Rozpocznij debugowanie w menu. Powinna zostać wyświetlona lista kolorów w całej jego chwały.

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

Jeśli uruchamiasz aplikację XAML w trybie debugowania, możesz skorzystać z funkcji edycji XAML na żywo. Nie musisz nawet zatrzymywać aplikacji ani naciskać przycisku Zapisz. Wystarczy zmienić kod XAML, a większość zmian zostanie natychmiast odzwierciedlona w uruchomionej aplikacji. Wypróbuj teraz. Zmień wartości Width i HeightRectangle wewnątrz szablonu danych na 30, zamieniając w ten sposób prostokąty koloru na kwadraty.

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

Jest to nazywane Przeładowywanie na gorąco XAML i może być przydatne do dostrajania układu i animacji w aplikacji.

Podsumowanie

W tej lekcji przedstawiono podstawy wyświetlania wielu elementów w obiekcie ListBox. Istnieją inne mechanizmy kontroli dostępne do podobnych celów, takie jak ItemsControl, ListViewi GridView. Jednak podstawowe zasady są takie same: powiąż listę (IEnumerable, List<>) obiektów z właściwością ItemsSource i zdefiniuj DataTemplates , aby kontrolować sposób wyświetlania i zachowania poszczególnych elementów listy. Można również ponownie zdefiniować układ tych elementów, a nawet wygląd samych kontrolek kontenera (chociaż wykracza to poza zakres tego modułu).

Należy pamiętać, że kod nigdy nie musiał radzić sobie z ListBox samym sobą. Właśnie utworzono kolekcję obiektów biznesowych (ColorDescriptor), a środowisko uruchomieniowe XAML zajęło się rozszerzeniem szablonu dla każdego elementu.

W następnej lekcji pokazano, jak można wybrać elementy z ListBox listy rozwijanej lub oraz zmienić zawartość list z kodu, tak aby dodawanie i usuwanie elementów było odzwierciedlane w interfejsie użytkownika.

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

Do tej pory do wyświetlania i edytowania właściwości pojedynczego obiektu użyto tylko powiązania danych. W tej lekcji zastosujesz koncepcje powiązania danych, aby wyświetlić kolekcję obiektów. Aby ułatwić sobie sprawę, te obiekty będą kolorami. Mówiąc dokładniej, będą to wiele wystąpień ColorDescriptor klasy.

1. Tworzenie ColorDescriptor klasy

Utwórzmy klasę reprezentującą kolor. Kliknij prawym przyciskiem myszy DatabindingSampleWPF projekt w Eksplorator rozwiązań, wybierz pozycję Dodaj / Klasa, a następnie wprowadź ColorDescriptor jako nazwę klasy. Wybierz pozycję Dodaj , aby utworzyć klasę.

ColorDescriptor zawiera dwie właściwości: sam kolor jako System.Windows.Media.Color obiekt i nazwę koloru. Ma również konstruktor, który ustawia te właściwości, metodę ToString() , która wyświetla nazwę koloru i wartości szesnastkowy dla składników kolorów R, G i B. Oto cała ColorDescriptor klasa.

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

Zastąp domyślną zawartość ColorDescriptor.cs pliku poprzednim kodem.

2. Tworzenie strony ColorList.xaml

Aby wyświetlić listę kolorów, użyjemy nowego pliku XAML. Kliknij prawym przyciskiem myszy DatabindingSampleWPF projekt w Eksplorator rozwiązań, a następnie wybierz polecenie Dodaj/Nowy element. Wybierz pozycję Okno (WPF) z listy dostępnych elementów, a następnie wprowadź ColorList jako nazwę. Wybierz pozycję Dodaj , aby utworzyć stronę.

Screenshot of Add New Item dialog box.

3. Ustawianie startowego pliku XAML

Teraz, jeśli uruchomisz aplikację, zostanie ona otwarta w systemie MainWindow. Ponieważ będziesz pracować z nowo utworzonym ColorList.xamlelementem , warto mieć ten ekran podczas uruchamiania. Aby to się stało, otwórz plik App.xamli znajdź StratupUri atrybut elementu głównego Application .

StartupUri="MainWindow.xaml"

Zastąp ciąg MainWindow ciąg , ColorLista następnie sprawdź, czy lista ColorList jest wyświetlana podczas uruchamiania aplikacji (naciśnij klawisz F5 lub wybierz pozycję Debuguj / Rozpocznij debugowanie).

Screenshot that shows an empty Color List window.

4. Utwórz DataContext listę kolorów

Będziemy kontynuować wcześniej wprowadzone najlepsze rozwiązanie dotyczące tworzenia oddzielnej DataContext klasy dla nowego okna XAML. Dlatego utworzymy nową klasę o nazwie ColorListDataContext.

Kliknij prawym przyciskiem myszy DatabindingSample projekt w Eksplorator rozwiązań, wybierz pozycję Dodaj / Klasa, a następnie wprowadź ColorListDataContext jako nazwę klasy. Wybierz pozycję Dodaj , aby utworzyć klasę, i wklej następujący kod do pliku:

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

Klasa ColorListDataContext jest bardzo prosta (na razie). Ma właściwość o nazwie LotsOfColors, która jest obiektem ListColorDescriptor . Lista jest wypełniona kilkoma kolorami w konstruktorze klasy. To wszystko.

5. Wyświetlanie kolorów w obiekcie ListBox

Następnym krokiem jest wyświetlenie kolorów w naszej aplikacji. Tak jak wcześniej, musimy utworzyć wystąpienie ColorListDataContext klasy w ColorList.xamlpliku i ustawić je jako DataContext dla całego okna. ColorList.xamlOtwórz plik i dodaj go bezpośrednio po tagu<Window ...>:

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

Musisz w tym momencie skompilować kod, aby projektant XAML mógł rozpoznać nowo zdefiniowaną ColorListDataContext klasę.

Następnie skopiuj następujący znacznik XAML wewnątrz tagu <Grid> :

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

Interesującą ItemsSource częścią jest atrybut . Jak sugeruje nazwa, dostarcza źródło elementów wyświetlanych w pliku ListBox. I jest to po prostu powiązane z właściwością ColorListDataContextLotsOfColors ".

Jeśli teraz uruchomisz aplikację, będzie ona wyświetlać kolory w programie ListBox! Ale to nie jest zbyt miłe, aby spojrzeć na. Wydaje ListBox się, że wywołano metodę ToString()ColorDescriptors przechowywaną na LotsOfColors liście.

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

6. Zdefiniuj szablon dla elementów

Warto mieć szablon, który pokazuje rzeczywisty kolor przechowywany we ColorDescriptor.Color właściwości i jego nazwie. Coś takiego:

Screenshot fo template.

Aby kodować to w języku XAML, możemy umieścić kolor i Rectangle znak TextBlock w obiekcie StackPanel.

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

Jest to jedna z zalet języka XAML i powiązania danych. Prawie każda złożona wizualizacja opiera się na szablonach, które można ponownie zdefiniować. Aby użyć powyższego StackPanel szablonu, musimy umieścić go wewnątrz elementu DataTemplate:

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

Sposób renderowania danych w elemecie ListBox (i wielu innych kontrolkach) jest kontrolowany przez element ItemTemplate, który powinien zostać ustawiony na DataTemplate powyższe. Istnieje wiele sposobów, aby to zrobić. W tej lekcji po prostu zdefiniujemy wewnątrz DataTemplateListBoxelementu , z następującą składnią:

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

Później zobaczysz, jak można ponownie użyć elementu DataTemplate w wielu miejscach, definiując go jako zasób.

Teraz znaczniki dla całego ListBox kodu wyglądają następująco (jeśli nie wykonano tej czynności, zastąp cały <ListBox> element następującym kodem XAML):

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

Należy pamiętać, że ponieważ każdy element w ListBox obiekcie odpowiada ColorDescriptor obiektowi, wystarczy zdefiniować powiązania wewnątrz szablonu w kontekście tej klasy.

7. Uruchamianie aplikacji

Powinna zostać natychmiast wyświetlona lista kolorów w programie Visual Studio. Aby upewnić się, że uruchom aplikację teraz, naciskając klawisz F5 lub wybierając pozycję Debuguj/Rozpocznij debugowanie w menu.

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

Jeśli uruchamiasz aplikację XAML w trybie debugowania, możesz skorzystać z funkcji edycji XAML na żywo. Nie musisz nawet zatrzymywać aplikacji ani naciskać przycisku Zapisz. Wystarczy zmienić kod XAML, a większość zmian zostanie natychmiast odzwierciedlona w uruchomionej aplikacji. Wypróbuj teraz. Zmień wartości Width i HeightRectangle wewnątrz szablonu danych na 30, zamieniając w ten sposób prostokąty koloru na kwadraty.

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

Jest to nazywane Przeładowywanie na gorąco XAML i może być przydatne do dostrajania układu i animacji w aplikacji.

Podsumowanie

W tej lekcji przedstawiono podstawy wyświetlania wielu elementów w obiekcie ListBox. Istnieją inne mechanizmy kontroli dostępne do podobnych celów, takie jak ItemsControl, ListViewi GridView. Jednak podstawowe zasady są takie same: powiąż listę (IEnumerable, List<>) obiektów z ItemsSource właściwością i zdefiniuj element , DataTemplate aby kontrolować sposób wyświetlania i zachowania poszczególnych elementów listy. Można również ponownie zdefiniować układ tych elementów, a nawet wygląd samych kontrolek kontenera (chociaż wykracza to poza zakres tego modułu).

Należy pamiętać, że kod logiki nigdy nie wiedział o kontrolce ListBox . Właśnie utworzono kolekcję obiektów biznesowych (ColorDescriptor), a środowisko uruchomieniowe XAML obsługiwało renderowanie szablonu dla każdego elementu.

W następnej lekcji pokazano, jak można wybrać elementy z elementu ListBox lub ComboBox, i zmienić zawartość list z kodu, tak aby dodawanie i usuwanie elementów zostało odzwierciedlone w interfejsie użytkownika.