Динамическое создание сетки в шаблоне MVVM

Question

Я пишу приложение WPF, где мне нужно отобразить пользовательскую информацию о файле, которая состоит из имени поля и его значения.Я генерирую сетку времени с меткой и текстовыми полями.Я отображаю имя поля в метке и значение поля в текстовом поле (я хочу, чтобы оно было редактируемым).& каждый раз, когда изменяется выбор файла, количество полей изменяется и поэтому столбцы сетки и строки.Прямо сейчас я генерирую эту сетку в коде позади.Есть ли способ сделать это в XAml с моделью представления.

Answer 1

Это довольно легко сделать с ItemsControl.Если ваша ViewModel предоставляет список объектов метаданных, скажем, такой класс:

public class FileMetaData : INotifyPropertyChanged
{
    private string name;
    private string value;

    public event PropertyChangedEventHandler PropertyChanged = (o, e) => { };

    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Name"));
        }
    }

    public string Value
    {
        get { return value; }
        set
        {
            this.value = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Value"));
        }
    }
}

Затем ваша ViewModel представит его как ObservableCollection (поэтому WPF знает, когда новые элементы добавляются или удаляются):

public class MyViewModel
{
   ... 
   public ObservableCollection<FileMetaData> Files { get; private set; }
   ...
}

Тогда ваше представление будет использовать ItemsControl с ItemTemplate для его отображения:

<ItemsControl ItemsSource="{Binding Files}" Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="one" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="two" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" />
                <TextBox Grid.Column="1" Text="{Binding Value}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Обратите внимание, что я устанавливаю Grid.IsSharedSizeScope в true наItemsControl, поэтому столбцы будут выровнены.Если у вас много данных, вы, вероятно, захотите обернуть их в ScrollViewer (или лучше пересмотреть ItemsControl, чтобы получить их).

Answer 2

Я не уверен, почему вы создаете эту сетку во время выполнения.Вы должны изучить использование стандартного метода представления, такого как <ListBox> с пользовательским шаблоном элемента.Всегда старайтесь использовать декларативное определение вашего пользовательского интерфейса (в XAML) вместо кода.

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