Sdílet prostřednictvím

Vytvoření datové vazby

  • Článek

Tento článek popisuje, jak vytvořit vazbu XAML. Příklad používá datový objekt, který představuje zaměstnance ve společnosti. Tento datový objekt je vázán na okno XAML, které používá TextBlock ovládací prvky k výpisu podrobností zaměstnance. Vytvoříte uživatelské rozhraní, které bude vypadat jako na následujícím obrázku:

Okno WPF, které zobrazuje podrobnosti o zaměstnanci, například jméno, příjmení, titul, datum přijetí a plat.

Další informace o datových vazbách najdete v tématu Přehled datových vazeb ve WPF.

Vytvoření datového objektu

V tomto příkladu se zaměstnanec používá jako datový objekt, ke kterému je uživatelské rozhraní vázáno.

  1. Přidejte do projektu novou třídu a pojmenujte ji Employee.

  2. Nahraďte kód následujícím fragmentem kódu:

    using System;
using System.ComponentModel;

namespace ArticleSample
{
    public class Employee : INotifyPropertyChanged
    {
        private decimal _salary;
        public event PropertyChangedEventHandler PropertyChanged;

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Title { get; set; }
        public DateTime HireDate { get; set; }

        public decimal Salary
        {
            get => _salary;
            set
            {
                _salary = value;

                // Support TwoWay binding
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Salary)));
            }
        }
    }
}

    Imports System.ComponentModel

Public Class Employee
    Implements INotifyPropertyChanged

    Private _salary As Decimal
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Public Property FirstName As String
    Public Property LastName As String
    Public Property Title As String
    Public Property HireDate As DateTime

    Public Property Salary As Decimal
        Get
            Return _salary
        End Get
        Set(value As Decimal)
            _salary = value
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(NameOf(Salary)))
        End Set
    End Property

End Class

Datový objekt zaměstnance je jednoduchá třída, která popisuje zaměstnance:

  • Jméno a příjmení zaměstnance.
  • Datum, kdy byl zaměstnanec přijat.
  • Titul společnosti zaměstnance.
  • Kolik příjmů zaměstnanec získá.

Vytvoření vazby k datovému objektu

Následující XAML ukazuje použití Employee třídy jako datového objektu. Vlastnost kořenového elementu DataContext je vázána na statický prostředek deklarovaný v xaml. Jednotlivé ovládací prvky jsou svázány s vlastnostmi objektu Employee.

  1. Přidání nového okna do projektu a jeho pojmenování EmployeeView

  2. Nahraďte XAML následujícím fragmentem kódu:

    Důležité

    Následující fragment kódu je převzat z projektu jazyka C#. Pokud používáte Jazyk Visual Basic, x:Class měl by být deklarován bez ArticleSample oboru názvů. Tady vidíte, jak vypadá verze jazyka Visual Basic.

    <Window x:Class="ArticleSample.EmployeeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ArticleSample"
        Title="" Height="250" Width="300">
    <Window.Resources>
        <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                                HireDate="2022-02-16" Salary="5012.00"
                                                Title="Content Artist" />
    </Window.Resources>
    <StackPanel DataContext="{StaticResource EmployeeExample}">
        <Label FontSize="32">Employee</Label>
        <Border BorderBrush="Gray" BorderThickness="2" />
        <Grid Grid.Row="1" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="First Name:" Grid.Row="0" Margin="0,0,10,0" />
            <TextBlock Text="Last Name:" Grid.Row="1" />
            <TextBlock Text="Title:" Grid.Row="2" />
            <TextBlock Text="Hire Date:" Grid.Row="3" />
            <TextBlock Text="Salary" Grid.Row="4" />

            <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
            <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
            <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
            <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
            <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
        </Grid>
        <Border BorderBrush="Gray" BorderThickness="2" />
        
        <StackPanel Margin="5,10" Orientation="Horizontal">
            <TextBlock Text="Change Salary:" Margin="0,0,10,0" />
            <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
        </StackPanel>
    </StackPanel>
</Window>

Obor názvů kódu neodpovídá oboru názvů projektu, pokud jste nevytvořili projekt s názvem ArticleSample. Pokud jste vytvořili nový projekt, můžete ho zkopírovat aStackPanel vložit Window.Resources () do mainWindow.

Pokud chcete lépe pochopit, jak předchozí XAML používá datovou vazbu, zvažte následující body:

  • Prostředek XAML slouží k vytvoření instance Employee třídy.

    Datový objekt se obvykle předává nebo přidružuje k okně. Tento příklad pevně zakóduje zaměstnance pro demonstrační účely.

    <Window.Resources>
    <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                            HireDate="2022-02-16" Salary="5012.00"
                                            Title="Content Artist" />
</Window.Resources>

  • Kořenový element (StackPanel) má svůj kontext dat nastavený na pevně zakódovanou Employee instanci.

    Podřízené elementy dědí z DataContext nadřazeného objektu, pokud nejsou explicitně nastaveny.

    <StackPanel DataContext="{StaticResource EmployeeExample}">

  • Vlastnosti Employee instance jsou vázány TextBlock na ovládací prvky.

    Nezadá Binding BindingSourcehodnotu , takže DataContext se použije jako zdroj.

    <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
<TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />

  • Ovládací TextBox prvek je vázán s režimem TwoWay , který umožňuje TextBox změnit Employee.Salary vlastnost.

    <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />

Související obsah