Question

I have a window that uses a viewmodel. This screen contains 2 listviews on a screen. The first listview binds to a propery on my viewmodel called projects. This property returns a model as follows

class ProjectsModel
{
    public string ProjectName { get; set; }
    public ObservableCollection<ProjectModel> ProjectDetails { get; set; }
}

In this class the ProjectModel looks like the following

public class ProjectModel
{
    public string ProjectName { get; set; }
    public string ProjectId { get; set; }
    public string ProjectFileId { get; set; }
    public string ProjectSource { get; set; }
    public string ClientCode { get; set; }
    public string JobNumber { get; set; }
}

The first listview shows projectname as i expect but I would like it so that when I click on any of the items, the second listview should display its details of the projectdetails property. It almost appears to work has it shows the first items childrean but I beleive that its not being informed that the selected item of the first listview has changed. Ho can I do this? Any ideas would be appreciated becuase Ive been pulling my hair out for hours now!

This is the xaml

<Window x:Class="TranslationProjectBrowser.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:TranslationProjectBrowser.ViewModels"
    xmlns:local="clr-namespace:TranslationProjectBrowser.Models"
    Title="MainWindow" Height="373" Width="452" Background="LightGray">
<Window.DataContext>
    <vm:ProjectBrowserViewModel></vm:ProjectBrowserViewModel>
</Window.DataContext>
<Window.Resources>
    <ObjectDataProvider x:Key="projectList" ObjectType="{x:Type vm:ProjectBrowserViewModel}" />
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource projectList}}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="176*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="176*" />
        <RowDefinition Height="254*" />
    </Grid.RowDefinitions>
    <DockPanel LastChildFill="True" >
        <TextBlock DockPanel.Dock="Top" Text="Projects" Margin="5,2"></TextBlock>
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
        <TextBox Name="ProjectName" Width="140" Margin="5,2" Height="18" FontFamily="Calibri" FontSize="10"></TextBox>
        <Button Height="18" Width="45" HorizontalAlignment="Left" Margin="0,2" FontSize="10" Content="Add" Command="{Binding Path=AddProject}" CommandParameter="{Binding ElementName=ProjectName, Path=Text}"></Button>
        <TextBlock Text="{Binding Path=ErrorText}" VerticalAlignment="Center" Margin="6,2" Foreground="DarkRed"></TextBlock>
        </StackPanel>
        <ListView Name="project" HorizontalAlignment="Stretch" Margin="2" ItemsSource="{Binding Path=Projects}" IsSynchronizedWithCurrentItem="True">
            <ListView.View>
                <GridView>
                    <GridViewColumn DisplayMemberBinding="{Binding Path=ProjectName}" Header="Name" Width="200" />
                </GridView>
            </ListView.View>
        </ListView>
    </DockPanel>
    <DockPanel LastChildFill="True" Grid.Row="1" >
        <TextBlock DockPanel.Dock="Top" Text="Project Files" Margin="5,2"></TextBlock>
        <ListView  HorizontalAlignment="Stretch" Margin="2" ItemsSource="{Binding Path=Projects/ProjectDetails}" IsSynchronizedWithCurrentItem="True" >
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=ProjectName}"  Width="200" />
                    <GridViewColumn Header="Job Number" DisplayMemberBinding="{Binding Path=JobNumber}" Width="100" />
                </GridView>
            </ListView.View>
        </ListView>
    </DockPanel>
</Grid>

Answer 1

Your view models should (at least) implement INotifyPropertyChanged. This is how WPF will know when your selction (or other properties) change and the binding needs to be updated.

So you should have something like this:

class ProjectsModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(String PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
        }
    }

    public string ProjectName 
    { 
        get
        {
            return _projectName;
        }
        set
        {
            _projectName = value;
            NotifyPropertyChanged("ProjectName");
        }       
    }
    public ObservableCollection<ProjectModel> ProjectDetails 
    { 
        get
        {
            return _projectDetails;
        }
        set
        {
            _projectDetails = value;
            NotifyPropertyChanged("ProjectDetails");
        }
    }
}

In future versions of the .NET framework this gets a lot easier with the “caller info” attributes (http://www.thomaslevesque.com/2012/06/13/using-c-5-caller-info-attributes-when-targeting-earlier-versions-of-the-net-framework/). But as of today this is usually how it’s done.

UPDATE

Ok, so based on your comment you need to bind your ListView’s SelectedItem property to a property on your view model. You can then Bind your second ListView to that property as well. Something like this:

<ListView ... SelectedItem="{Binding Path=FirstListViewSelectedItem, Mode=TwoWay}" .. >

And then your second list view would be sometihng like this:

<ListView ... ItemsSource="{Binding Path=FirstListViewSelectedItem.ProjectDetails, Mode=OneWay" .. />