Практическое руководство. Привязка данных в конструкторе XAML

Статья
01/23/2014

В конструкторе XAML можно задать свойства привязки данных с помощью монтажной панели и окна свойств. Пример в этом разделе показывает, как выполнить привязку данных к элементу управления. В частности процедура показывает, как создать простой класс покупательской корзины, имеющий DependencyProperty с именем ItemCount, а затем привязать свойство ItemCount к свойству Text элемента управления TextBlock.

Создание класса для использования в качестве источника данных

Создайте проект C# или Visual Basic в шаблоне пустого приложения.

Откройте MainPage.xaml.cs (или MainPage.xaml.vb) и добавьте следующий код. В C# добавьте код в пространстве имен projectName (перед последней закрывающей скобкой в файле). В Visual Basic просто добавьте новый класс.

public class ShoppingCart : DependencyObject
{
    public int ItemCount
    {
        get { return (int)GetValue(ItemCountProperty); }
        set { SetValue(ItemCountProperty, value); }
    }

    public static readonly DependencyProperty ItemCountProperty =
         DependencyProperty.Register("ItemCount", typeof(int),
         typeof(ShoppingCart), new PropertyMetadata(0));
}

Public Class ShoppingCart
    Inherits DependencyObject

    Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
        "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
    Public Property ItemCount As Integer
        Get
            ItemCount = CType(GetValue(ItemCountProperty), Integer)
        End Get
        Set(value As Integer)
            SetValue(ItemCountProperty, value)
        End Set
    End Property
End Class

Этот код задает значение 0 как число элементов по умолчанию с помощью объекта PropertyMetadata.

Совет

В Visual Studio можно добавить код заглушки для свойства зависимостей, введя propdp внутри класса ShoppingCart, а затем нажать клавишу TAB.

Выберите Сборка > Собрать решение.

Привязка свойства ItemCount к элементу управления TextBlock

Правой кнопкой мыши щелкните MainPage.xaml и выберите пункт Конструктор представлений.
В окне "Структура документа" выделите корневую панель Grid, которая отображается в окне как [Grid].
Выбрав элемент управления Grid, нажмите кнопку Создать рядом с свойством DataContext в окне свойств.
В диалоговом окне Выбор объекта убедитесь, что флажок Показать все сборки снят, затем выберите ShoppingCart в пространстве имен projectName и нажмите кнопку ОК.

На следующем рисунке показано диалоговое окно Выбор объекта с выбранным элементом ShoppingCart.
В Панели инструментов дважды щелкните элемент управления TextBlock, чтобы добавить его на монтажную панель.
Выбрав элемент управления TextBlock, щелкните метку свойства справа от свойства Text в разделе "Общие" в окне свойств. (Метка свойства выглядит как небольшой квадрат.)
Щелкните Создать привязку данных в итоговом меню.
При выбранном типе привязки Контекст данных, который используется по умолчанию в списке Тип привязки выберите свойство ItemCount в окне Путь, а затем нажмите кнопку ОК.

На следующем рисунке показано диалоговое окно Создать привязку данных с выбранным свойством ItemCount.
Нажмите клавишу F5, чтобы выполнить приложение.

Элемент управления TextBlock должен отображать значение по умолчанию 0 как текст.

См. также

Ссылки

Диалоговое окно "Добавление конвертера значений"

Основные понятия

Создание пользовательского интерфейса с помощью конструктора XAML

Поделиться через