Grid View or ListView Binding or Rendering of Coll

Question

A complete new bee in XAML and WPF shifted from MVC 1 week back

Requirement:

Display Customer Name and all corresponding Brands

1 Customer can have Many Brands

Issue

Unable to display the corresponding brands

Reference

Similar SO Thread

Code

public partial class MainWindow : Window
{

    public MainWindow()
    {
        DataContext = new MyDeviceList();
        InitializeComponent();
    }
}

public class MyDeviceList
{
    Entities ent = new Entities();
    public ObservableCollection<myCustomers> Customers { get; set; }

    public void GetCustomersBrand()
    {
        var custall = (from c in ent.Customers
                    select new myCustomers{ name = c.Name, brands = c.Brands.ToList() }).ToList();

        Customers = new ObservableCollection<myCustomers>(custall);

    }

    public MyDeviceList()
    {
        GetCustomersBrand();
    }
}

//just a dummy class
public class Brand
{
    public string Name { get; set; }
    public int Customerid { get; set; }
}


public class myCustomers
{
    public string name { get; set; }
    public List<Brand> brands { get; set; }
}   

XAML

<Window x:Class="DeviceListCreate.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:DeviceListCreate"
    Title="MainWindow" WindowState="Maximized">

<Window.Resources>
    <DataTemplate x:Key="GroupTemplate" DataType="{x:Type my:myCustomers}">
        <ItemsControl ItemsSource="{Binding brands}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding name}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </DataTemplate>
</Window.Resources>
<Grid>

    <ItemsControl ItemsSource="{Binding Customers}" Name="tStack" Grid.Column="0" Margin="33,10,42,10">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding name}"/>                      
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Kindly guide which direction I should be heading now

Thanks in advance

Answer 1

When constructing a UI like this, you just have to build it up part by part. Concentrating on each part individually makes the whole task more manageable. Try this:

<Grid>
    <ItemsControl ItemsSource="{Binding Customers}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
                    Padding="5" Margin="5">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding name}" Margin="5" />
                        <ItemsControl ItemsSource="{Binding brands}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <CheckBox Content="{Binding name}" Margin="5" />
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>