WPF Binding second ListBox in relation to selected item in first ListBox

Viewed 73

I'm new to WPF and MVVM ... i created a class WorkstationItem

public class WorkstationItem
{
    public WorkstationItem() { }

    public string Name { get; set; }
    public string OS { get; set; }
    public List<UpdateItem> Updates { get; set; }
}

UpdateItem is another class:

public class UpdateItem
{
    public UpdateItem() { }

    public string Title { get; set; }
    public string KB { get; set; }
}

I create some dummy data:

private List<WorkstationItem> workstations = new List<WorkstationItem>();
workstations.Add(new WorkstationItem
{
    Name = "PC01",
    OS = "Windows Server 2019",
    Updates = new List<UpdateItem>{

    new UpdateItem { Title = "Test", KB = "KB123123" },
    new UpdateItem { Title = "Test2", KB = "KB123123" }
    }
});
workstations.Add(new WorkstationItem
{
    Name = "PC02",
    OS = "Windows Server 2016",
    Updates = new List<UpdateItem>{

    new UpdateItem { Title = "Test5", KB = "KB123123" },
    new UpdateItem { Title = "Test3", KB = "KB123123" }
    }
});

Now i show the workstations in a listbox:

<ListBox x:Name="lbPCs" ItemsSource="{Binding WorkstationItemList}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                </Grid.RowDefinitions>

                <StackPanel Grid.Column="0">
                    <TextBlock Text="{Binding Name}" FontSize="12" FontWeight="Bold" />
                    <TextBlock Text="{Binding OS}" FontSize="9" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ViewModel:

public ObservableCollection<WorkstationItem> WorkstationItemList { get; set; }

WorkstationManager workstationmanager = WorkstationManager.GetInstance();
WorkstationItemList = new ObservableCollection<WorkstationItem>();

foreach (var k in workstationmanager.GetUpdatelist())
{
    WorkstationItemList.Add(k);
}

This is working fine ... but how can i show the List<UpdateItem> Updates in another list in relation to the selected workstation?

So i select a workstation in list1 and want to show the related updates in list2?

Thanks in advance!

1 Answers

Basically add another ListBox or ItemsControl that refers to SelectedItem of the existing ListBox and bind to the SelectedItem's Updates collection; roughly like (untested):

<ListBox ItemsSource="{Binding ElementName=lbPCs, Path=SelectedItem.Updates}">
   <ListBox .ItemTemplate>
      <DataTemplate> 
         <StackPanel Orientation="Horizontal">
            <!-- TODO improve alignment+layout -->
            <TextBlock Text="{Binding KB}" />
            <TextBlock Text="{Binding Title}" />
         </StackPanel>
      </DataTemplate>
   <ListBox .ItemTemplate>
</ListBox>

In case you want to do something more complex with the selected item but to display its Updates, it might be more appropriate to bind the SelectedItem of lbPCs to some new ViewModel property and to bind the new ListBox' itemsource to that VM property's Updates collection.

Related