Привязка данных с использованием коллекции в WPF и XAML. Учебные материалы

Автор: Дхананджай Кумар (Dhananjay Kumar)

Пошаговое руководство для привязки данных с помощью коллекции в WPF и XAML. В этом учебном материале мы собираемся привязать данные из коллекции (LIST) к XAML.

Цель

В этом учебном материале мы собираемся привязать данные из коллекции (LIST) к XAML. Мы собираемся отобразить изображение, имя, возраст и идентификатор электронной почты людей. Результат будет выглядеть примерно так.

 

Шаг 1

Откройте Visual Studio 2008 и создайте новый проект как приложение WPF. Назначьте ему отображаемое имя.

Шаг 2

Добавьте класс бизнес-логики. Щелкните правой кнопкой мыши в решении и добавьте новый класс Person.

Шаг 3

Добавьте следующий код в Person.cs

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 namespace SimpleDataBinding
 {
   class Person
   {
   public string Name { get; set; }
   public int Age { get; set; }
   public string Image { get; set; }
   public string Email { get; set; }
   }
 }

Шаг 4

Добавьте изображением в папку проекта. Щелкните правой кнопкой мыши в обозревателе решений и добавьте существующий элемент. Затем найдите изображение на своем ПК. Добавьте в проект все изображения. Я добавил следующие : Anuska.jpg, Deepika.jpg, Asin.jpg

Шаг 5

Создайте список людей. Убедитесь, что список создается внутри конструктора окна.  Я создаю список лиц следующим образом. Добавьте следующий код в файл Window.xaml.cs.

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 
 namespace Display
 {
   /// <summary>
   /// Логика взаимодействия для Window1.xaml
   /// </summary>
   public partial class Window1 : Window
   {
   public Window1()
   {
   InitializeComponent();
   List<Person> persons = new List<Person>()
   {
   new Person{Name="Anuska Sharama",Age=21,Email="anuska@xyz.com",Image="anuska.jpg"},
   new Person {Name="Asin",Age=26,Email="asin@xyz.com",Image="asin.jpg"},
   new Person{Name="Deepika",Age=25,Email="deepika@xyz.com",Image="deepika.jpg"}
   };
 
   }
   }
 }

Шаг 6

Теперь время написать код XAML и привязать коллекцию людей к списку XAML. Создайте список в XAML следующим образом.

<ListBox x:Name="list1">  
  </ListBox>

Назовите его list1. Затем привяжите этот список list1 к коллекции людей.  Для этого снова вернитесь в файл Windows.xaml.cs и добавьте эту строку кода после создания коллекции людей.

list1.ItemsSource = persons;

Window1.xaml.cs

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
 
 using System.Windows.Data;
 using System.Windows.Documents;
 
 using System.Windows.Input;
 using System.Windows.Media;
 
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
  
 using System.Windows.Shapes;
 namespace Display
  
 {
   /// <summary>
 
   /// Логика взаимодействия для Window1.xaml
   /// </summary>
  
   public partial class Window1 : Window
   {
  
   public Window1()
   {
  
   InitializeComponent();
   List<Person> persons = new List<Person>()
 
   {
   new Person{Name="Anuska Sharama",Age=21,Email="anuska@xyz.com",Image="anuska.jpg"},
   new Person {Name="Asin",Age=26,Email="asin@xyz.com",Image="asin.jpg"},
   new Person{Name="Deepika",Age=25,Email="deepika@xyz.com",Image="deepika.jpg"}
 
   };
   list1.ItemsSource = persons;
 
   }
   }
 
 }

Шаг 7

Теперь добавьте шаблон элемента и шаблон данных в список в xaml-файле.

<ListBox x:Name="list1">
   <ListBox.ItemTemplate>
 
   <DataTemplate>
   <StackPanel Orientation="Horizontal">
 
   </StackPanel>
   </DataTemplate>
 
   </ListBox.ItemTemplate>
 </ListBox>

Шаг 8

Привяжите изображения к списку. Добавьте следующий код

<Image Source="{Binding Image}"  Height="100" Stretch="UniformToFill" />

Если запустить программу в этот момент, в результате должны появиться изображения.

Шаг 9

Теперь добавьте панель стека с вертикальной ориентацией. Затем добавьте три метки для отображения имени, возраста и электронной почты.

<StackPanel Orientation="Vertical">
 
   <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Name}" />
   <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Age}" >
   <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Email}" />
 
 </StackPanel>

Полный Xaml-код будет выглядеть следующим образом.

<Window x:Class="Display.Window1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Title="Window1" Height="300" Width="300">
  
   <Grid>
   <ListBox x:Name="list1">
   <ListBox.ItemTemplate>
   <DataTemplate>
   <StackPanel Orientation="Horizontal">
   <Image Source="{Binding Image}"  Height="100" Stretch="UniformToFill" />
 
   <StackPanel Orientation="Vertical">
   <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Name}" />
   <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Age}" />
   <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Email}" />
   </StackPanel>
    </StackPanel>  
 
   </DataTemplate>
   </ListBox.ItemTemplate>
 
   </ListBox>
   </Grid>
  
 </Window>

Шаг 10 

Выполните код, чтобы получить нужный результат.