WPF XAML Bind Grid

Question

I have a custom user control that is based on a Grid control. I have a ViewModel that exposes this as a property. I would like the XAML on the view to bind to this. I am sure this must be easy but I am quite new to WPF. How is this achieved?

Many thanks in advance

(Edited to add more info)

Example of view without binding to ViewModel. Note that I have a custom grid that contains a number of custom stack panels which contains a number of custom headered content controls. These are determined during the ViewModel load.

<MyCustomGrid:CustomGrid>
   <MyCustomGrid:CustomStackPanel>
      <MyCustomGrid:CustomHeaderedContentControl/>
   </MyCustomGrid:CustomStackPanel>
   <MyCustomGrid:CustomStackPanel>
      <MyCustomGrid:CustomHeaderedContentControl/>
   </MyCustomGrid:CustomStackPanel>
</MyCustomGrid:CustomGrid>

ViewModel simply contains a List which contains a List etc. Note that the CustomGrid is a list as there can be more than one, but only one with a specific property will be bound.

Answer 1

I am still not sure exactly what you want to achieve, but I'll have a go anyway and maybe we can iterate to a solution from there.

Judging from your XAML above you have several custom controls. You mentioned the top level is based on Grid. Is Grid as in the control, or as the ItemPanelTemplate for an ItemsControl?

I get a somewhat feeling that you want to data bind your viewmodel's content, and for that you need to base your custom controls on ItemsControl. Correct me if I am wrong on this.

Something like this (as mentionded, this is assuming MyCustomGrid as an ItemsControl:

<UserControl Name="MyCustomGrid">
            <ItemsControl ItemsSource="{Binding Path=MyStackPanelsCollection}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="{x:Type MyCustomGrid:MyCustomStackPanel}">
                        <Setter Property="Grid.Row" Value="{Binding Path=GridRow}" />
                        <Setter Property="Grid.Column" Value="{Binding Path=GridColumn}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="{x:Type MyCustomGrid:MyCustomStackPanelViewModel}">
                        <ContentPresenter Content="{Binding Path=MySerializedObjectTurnedInToControl}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </UserControl>

If that is not the case, as in you bind your CustomStackPanel etc directly to one named property in your viewmodel, it could look something like:

<MyCustomGrid:CustomGrid DataContext="{Binding Path=ViewModel}">
   <MyCustomGrid:CustomStackPanel DataContext="{Binding Path=MyFirstStackPanelViewModel}">

...

Sorry if I misunderstand still, I could very well be missing something obvious.

Answer 2

Basic steps

1. Set the DataContext of the User Control (or the control/window that contains your user control) to some model type instance, with a Data property that is a ObservableCollection<SomeDataType>.

2. Bind the ListView's ItemSource to the Data property.

3. Bind the GridViewColumn's DisplayMemberBinding property to properties of SomeDataType.

Thus you will have something like this:

<ListView SelectionMode="Single"
          HorizontalAlignment="Stretch"
          ItemsSource="{Binding Data}">
    <ListView.View>
        <GridView >
            <GridViewColumn Header="Name of Prop2"
                            DisplayMemberBinding="{Binding Path=Prop1}" />
            <GridViewColumn Header="Name of Prop2"
                            DisplayMemberBinding="{Binding Path=Prop2}" />
            <GridViewColumn Header="Name of Prop3"
                            DisplayMemberBinding="{Binding Path=Prop3}" />
        </GridView>
    </ListView.View>
</ListView>

You can bind to other types, and have control over formatting etc., but this is the simple case.