Nested ListView not binding correctly

Question

I am working on the XAML for a list of products that each contain a list of attributes. I have the XAML functioning when I put in static text, but when I try and use the objects properties, nothing shows up.

Here is my XAML:

<ListView ItemsSource="{Binding Products}">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition />
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Name}" FontSize="32" Margin="5" />
                        <GridView Grid.Column="1" ItemsSource="{Binding Attributes}">
                            <GridView.ItemContainerStyle>
                                <Style TargetType="GridViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                </Style>
                            </GridView.ItemContainerStyle>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Key}" Foreground="White" Height="Auto"/>
                                        <TextBlock Text="{Binding Value}" Foreground="White" Height="Auto"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>

                        <Grid Grid.Column="2">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <TextBlock Text="Here is some selling point about product 1." FontSize="14" Margin="5" />
                            <StackPanel Grid.Row="1" Orientation="Horizontal">
                                <TextBlock Margin="5" FontSize="14" Text="1/4 oz: $150" />
                                <TextBlock Margin="5" FontSize="14" Text="1/2 oz: $250" />
                                <TextBlock Margin="5" FontSize="14" Text="1 oz: $450" />
                            </StackPanel>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <Style TargetType="ListView">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
            </Style>
        </ListView>

And here is my object definition:

public class Product
{

    public string Name { get; set; }

    public string SellingPoint { get; set; }

    public List<KeyValuePair<string, string>> Attributes { get; set; }

    public Scale Scale { get; set; }

    public UnitOfMeasure UoM { get; set; }
}

I originally just tried to use a Dictionary for the Attributes, but found out there was no XAML binding for a dictionary. Another post suggested I use the List> instead. I know I am binding to the property fine because, when I use the static text, the correct number of attributes show up for the mock object I created (2 KeyValuePairs for each product).

Answer 1

Maybe it is not what you are asking for but you can create own class for attributes such as:

public class Attribute
{
  public string Name {get;set;}
  public string Value {get;set;}
}

And then you can use List<Attribute> as a property in Product class instead of List<KeyValuePair<string, string>>.

Your XAML will look like:

<GridView Grid.Column="1" ItemsSource="{Binding Attributes}">
                            <GridView.ItemContainerStyle>
                                <Style TargetType="GridViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                </Style>
                            </GridView.ItemContainerStyle>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Name}" Foreground="White" Height="Auto"/>
                                        <TextBlock Text="{Binding Value}" Foreground="White" Height="Auto"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>