Декларативная привязка ObservableCollection в UWP — Пошаговое руководство

Привязка ObservableCollection в UWP декларативно: Пошаговое руководство

Сегодня мы рассмотрим, как можно удобно и эффективно связать данные из коллекций с элементами пользовательского интерфейса в приложениях. Эта задача часто возникает при создании динамически обновляемых интерфейсов, где данные могут изменяться в реальном времени. Для этого мы используем коллекции, позволяющие удобно управлять данными и их отображением.

• Шаг 1: Подготовка данных

Для начала создадим класс, который будет представлять отдельный элемент коллекции. Например, это может быть класс сотрудника с полями FirstName, LastName, HireDate и Weight.

namespace MyApp.Models
{
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime HireDate { get; set; }
public double Weight { get; set; }
}
}

• Шаг 2: Создание ObservableCollection

Теперь создадим коллекцию, которая будет содержать объекты нашего класса Employee. Мы будем использовать ObservableCollection, чтобы автоматически отслеживать изменения в коллекции.

using System.Collections.ObjectModel;
using MyApp.Models;
namespace MyApp.ViewModels
{
public class MainViewModel
{
public ObservableCollection Employees { get; set; }
public MainViewModel()
{
Employees = new ObservableCollection
{
new Employee { FirstName = "John", LastName = "Doe", HireDate = DateTime.Now, Weight = 75.5 },
new Employee { FirstName = "Jane", LastName = "Smith", HireDate = DateTime.Now, Weight = 65.3 }
};
}
}
}

• Шаг 3: Привязка коллекции к элементам интерфейса

На этом этапе мы связываем нашу коллекцию с элементами интерфейса. Используем элемент ListView для отображения списка сотрудников. В XAML объявим привязку с использованием пространства имен и контекста данных.

<Page
x:Class="MyApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
DataContext="{Binding MainViewModel, Source={StaticResource Locator}}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{Binding Employees}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding FirstName}" />
<TextBlock Text="{Binding LastName}" />
<TextBlock Text="{Binding HireDate, StringFormat='{}{0:dd/MM/yyyy}'}" />
<TextBlock Text="{Binding Weight}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>

• Шаг 4: Реализация команд и событий

Для интерактивности можно добавить команды, которые будут выполнять определенные действия, такие как добавление или удаление элементов из коллекции. Для этого создадим команды в модели представления и свяжем их с элементами интерфейса.

using System;
using System.Windows.Input;
namespace MyApp.ViewModels
{
public class RelayCommand : ICommand
{
private readonly Action