How do you bind an observable collection to a listview located in a modal/window?

Question

I have a wpf application that I want to be able to launch a separate window in which I will have a listview bound to an observable collection. However I am unable to get the collection values to appear in the list view. Here is some of the code.

Window (Named WizardView):

(Data context defined like so at top of xaml): d:DataContext="{d:DesignInstance Type=viewModels:MainViewModel}"

    <Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BorderBrush="Black">
        <ListView BorderThickness="0" ItemsSource="{Binding TestModel.FailedTests}">
            <Label Content="Introduction" FontWeight="Bold" />
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Label Content="{Binding }"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Border>

MainViewModel Code:

public class MainViewModel : BaseViewModel
{
    public MainViewModel()
    {
        TestModel = new TestViewModel();
        WizardModel = new WizardViewModel(TestModel);
    }


    private WizardViewModel _wizardModel;
    public WizardViewModel WizardModel
    {
        get
        {
            return _wizardModel;
        }
        set
        {
            _wizardModel = value;
            RaisePropertyChanged();
        }
    }

    private TestViewModel _testViewModel;
    public TestViewModel TestModel
    {
        get
        {
            return _testViewModel;
        }
        set
        {
            _testViewModel = value;
            RaisePropertyChanged();
        }
    }

WizardViewModel Code:

public class WizardViewModel : TestViewModel
{
    internal TestViewModel TestModel;
    public WizardViewModel(TestViewModel testModel)
    {
        TestModel = testModel;

        (TroubleShootCommand is defined in seperate UC, and launches fine)
        TestModel.TroubleShootCommand = new DelegateCommand(Load, CanTroubleShoot);
    }

    public void Load()
    {
     (Sync Root is used because it is running on worker thread. Issue somewhere here?)
        _syncRoot.Send(o =>
        {
            var troubleShootWizard = new WizardView();
            troubleShootWizard.Owner = Application.Current.MainWindow;
            troubleShootWizard.ShowDialog();
        }, null);
    }

Observable Collection in TestViewModel (Initialized in ctor):

    private ObservableCollection<string> _failedTests;
    public ObservableCollection<string> FailedTests
    {
        get { return _failedTests; }
        set
        {
            _failedTests = value;
            RaisePropertyChanged();
        }
    }

Any Help is appreciated, I feel like I have tried everything. I have watched values through the watch window under TestModel.FailedTests in the collection right before and right after launch.

Muhammad Sulaiman · Answer 1 · 2022-09-02T02:55:26.307

0

First,

(Data context defined like so at top of xaml): d:DataContext="{d:DesignInstance Type=viewModels:MainViewModel}"

This is a mistake, this way d: you are defining the DataContext at design time..

You can create the viewmodel inside .xaml this way:

<WizardView.DataContext>
   <viewModels:MainViewModel/>
</WizardView.DataContext>

Using the design time declaration can help in many ways like knowing the viewmodel in case you are creating it and assigning it in C# (or via a IoC mechanism), also it helps tools like IntelliSense and ReSharper to analyze your bindings and warn you if you misspell a property's name in xaml, auto-completion, etc... (more on this can be found here, and here)

Second, if you are assigning the WizardViewModel in your .xaml the same way (i.e. design-time), then you can either do it in your Load() function (add troubleShootWizard.DataContext = this;) or assign it in .xaml the same way I've mentioned before.

edited Sep 02 '22 at 02:55

answered Sep 02 '22 at 01:41

Muhammad Sulaiman

2,399
4
14
28

Hmm, this is definitely the issue, I added the data context like so: var troubleShootWizard = new WizardView() {DataContext = TestModel}; As to have the data context as the same instance of the view model. This however is still not working. Any ideas? – bkarin22 Sep 02 '22 at 02:07
I figured it out by making the observable collection of a class type with a string property and specifying the path in the binding. Thank you for your help, understanding design time declaration was key. – bkarin22 Sep 02 '22 at 02:51
remove `TestModel.` from `ItemsSource="{Binding TestModel.FailedTests}"` – Muhammad Sulaiman Sep 02 '22 at 02:52

How do you bind an observable collection to a listview located in a modal/window?

1 Answers1