在TextBlocks中显示模型数据

本文关键字:模型 数据 显示 TextBlocks | 更新日期: 2023-09-27 18:07:14

我需要显示数据从ViewModel在简单的网格,其中包含标签和textBlock的数据。我试图将数据绑定到网格,并使用ElementName将网格的DataContext与textBlocks绑定。

书ViewModel:

namespace Books.ViewModels
{
    public class BookViewModel : IViewModel, INotifyPropertyChanged
    {
        private Book book = new Book();
        private ICommand AddCommand;
        private ICommand RemoveCommand;
        private ICommand ChangeCommand;
        public event PropertyChangedEventHandler PropertyChanged;
        public BookViewModel()
        {
            //initialize commands;
        }
        public string Name
        {
            get { return book.Name; }
            set { book.Name = value; }
        }
        public string Authors
        {
            get
            {
                return string.Join(", ", book.Authors.Select(x => x.Name));
            }
            set
            {
                //need to implemented
            }
        }
        public string ISBN
        {
            get { return book.ISBN; }
            set { book.ISBN = value; }
        }
        public int Pages
        {
            get { return book.Pages; }
            set { book.Pages = value; }
        }
        public string Tags
        {
            get
            {
                return string.Join(", ", book.Tags);
            }
            set
            {
                //not implemented
            }
        }
        public int PublicationYear
        {
            get { return book.PublicationYear; }
            set { book.PublicationYear = value; }
        }
        public string House
        {
            get
            {
                return book.House.Name;
            }
            set
            {
                //not implemented 
            }
        }
        public ICommand AddClick
        {
            get
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Add"));
                return AddCommand;
            }
        }
        public ICommand RemoveClick
        {
            get
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Remove"));
                return RemoveCommand;
            }
        }
        public ICommand ChangeClick
        {
            get
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Change"));
                return ChangeCommand;
            }
        }
    }
}

grid:

<Grid x:Name="bookGrid"
              Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <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>
            <Label Grid.Row="0" Grid.Column="0" Content="Title:"/>
            <Label Grid.Row="1" Grid.Column="0" Content="Author(s):"/>
            <Label Grid.Row="2" Grid.Column="0" Content="ISBN:"/>
            <Label Grid.Row="3" Grid.Column="0" Content="Pages:"/>
            <Label Grid.Row="4" Grid.Column="0" Content="Tags:"/>
            <Label Grid.Row="5" Grid.Column="0" Content="Publication Year:"/>
            <Label Grid.Row="6" Grid.Column="0" Content="Publication House:"/>
            <TextBlock Grid.Column="1" Grid.Row="0" Margin="3" Text="{Binding ElementName=bookGrid, Path=Name}"/>
            <TextBlock Grid.Column="1" Grid.Row="1" Margin="3" Text="{Binding ElementName=bookGrid, Path=Authors}"/>
            <TextBlock Grid.Column="1" Grid.Row="2" Margin="3" Text="{Binding ElementName=bookGrid, Path=ISBN}"/>
            <TextBlock Grid.Column="1" Grid.Row="3" Margin="3" Text="{Binding ElementName=bookGrid, Path=Pages}"/>
            <TextBlock Grid.Column="1" Grid.Row="4" Margin="3" Text="{Binding ElementName=bookGrid, Path=Tags}"/>
            <TextBlock Grid.Column="1" Grid.Row="5" Margin="3" Text="{Binding ElementName=bookGrid, Path=PublicationYear}"/>
            <TextBlock Grid.Column="1" Grid.Row="6" Margin="3" Text="{Binding ElementName=bookGrid, Path=House}"/>
        </Grid>

背后的代码:

bookGrid.DataContext = Manager.books.First();

在TextBlocks中显示模型数据

只需将TextBlock绑定更改为:

<TextBlock Grid.Column="1" Grid.Row="0" Margin="3" Text="{Binding Name}"/>

在视图模型中添加一个通知器方法:

public void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
{
    if (this.PropertyChanged != null)
    {
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

并在每次属性更改后调用此方法,如:

public string Name
{
    get { return book.Name; }
    set
    {
        book.Name = value;
        this.NotifyPropertyChanged();
    }
}