Generating grid dynamically in MVVM pattern

Question

Hi, I am writing a WPF application where where i need to display custom file iformation which consists of field name & its value. I generate a grid rumtime with label & textboxes. I display the field name in label & field value in textbox(i want it to be editable). & each time file selection changes, number of field change & so the grid columns & rows. Right now I am generating this grid in code behind . Is there any way i can do it in XAml with view model.

Answer 1

I'm not sure why you're creating this grid at runtime. You should look into using a standard presentation method such as a <ListBox> with a custom item template. Always look to use declaritive definition of your UI (within the XAML) instead of the codebehind.

I've got a blog post on creating a checked listbox that shows some of the details, but you should be able to find other good examples out there as well.

Answer 2

This is pretty easy to do with an ItemsControl. If you ViewModel exposes a list of metadata objects, say a class like this:

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"));
        }
    }
}

Then, your ViewModel would expose it as an ObservableCollection (so WPF knows when new items are added or removed):

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

Then, your view would use an ItemsControl with an ItemTemplate to display it:

<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>

Note that I'm setting Grid.IsSharedSizeScope to true on the ItemsControl, so the columns will align. If you have a lot of data, you'll probably want to wrap this in a ScrollViewer (or better retemplate the ItemsControl to have one).