WPF Listbox not populated with items from ObservableCollection - c#

The main-window is listening for plugging in/out USB-devices. If it is an usb-key/disk it collects a file-list from that device and show that list in a second window.
While debugging I can see that the NewUsbFiles observablecollection get's populated with 117 items. I see that the property UsbFile (before calling the showdialog) has 117 items, but nevertheless the listbox is empty.
Any thoughts ?
The method to populate / create that second window:
NewUsbFiles = new ObservableCollection<UsbFile>();
UpdateNewUsbFiles(driveName);
Application.Current.Dispatcher.Invoke(delegate
{
var usbFileSelector = new UsbFileSelector()
{
Owner = this,
UsbFiles = NewUsbFiles
};
usbFileSelector.ShowDialog();
});
The UsbFile-class:
public class UsbFile
{
public string UsbFileName { get; set; }
public string OnTableFileName { get; set; }
public bool Ignored { get; set; } = false;
public UsbFile(string fileName)
{
var fileInfo = new FileInfo(fileName);
UsbFileName = fileInfo.FullName;
OnTableFileName = $"{fileInfo.CreationTime:yyMMddHHmmsss}_{fileInfo.Name}";
}
}
The XAML of the second window :
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:MainWindow="clr-namespace:PartyPictures.WPF.MainWindow" x:Name="wUsbFileSelector"
x:Class="PartyPictures.WPF.UsbFileSelector"
mc:Ignorable="d"
Title="USB" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="ToolWindow" ScrollViewer.VerticalScrollBarVisibility="Auto" SizeToContent="WidthAndHeight">
<StackPanel x:Name="spUsbFileList">
<ListBox x:Name="ImageListbox"
DataContext="{Binding ElementName=wUsbFileSelector}"
ItemsSource="{Binding UsbFiles}"
Background="AliceBlue" ScrollViewer.HorizontalScrollBarVisibility="Disabled" MinWidth="200" MinHeight="200">
</ListBox>
</StackPanel>
</Window>
The code-behind of the second window :
public partial class UsbFileSelector : Window
{
public ObservableCollection<UsbFile> UsbFiles { get; set; } = new ObservableCollection<UsbFile>();
public UsbFileSelector()
{
InitializeComponent();
}
}

Inside the window you can see InitializeComponent method. It creates all of the stuff defined in XAML and applies all bindings. After binding has been appplied with your empty collecton (that you have created with default property value) the binding will not know about any change of that property, that was the right answer.
But implementing INotifyPropertyChanged is more about viewmodel instances, not visual.
I really suggest you use Dependency Property for windows and controls if you want to bind. There are some reasons for that:
Dependency property setter has built-in notify mechanism.
If you bind one DP to another DP, value is shared in between.
After all, it is WPF approach =)
Here is how your window will look like after change
public partial class UsbFileSelector : Window
{
public static readonly DependencyProperty UsbFilesProperty =
DependencyProperty.Register("UsbFiles", typeof(ObservableCollection<UsbFile>), typeof(UsbFileSelector));
public ObservableCollection<UsbFile> UsbFiles
{
get { return (ObservableCollection<UsbFile>) GetValue(UsbFilesProperty); }
set { SetValue(UsbFilesProperty, value); }
}
public UsbFileSelector()
{
InitializeComponent();
}
}
Also I strongly recommend you to use some WPF inspector tool while developing for the WPF, for example, snoop. You can navigate through the controls and properties while app is running and find issues much quickly you can from the code or from stackoverflow =)

In
var usbFileSelector = new UsbFileSelector()
{
Owner = this,
UsbFiles = NewUsbFiles
};
you are assigning a new value to the UsbFiles property without firing a property change notification for that property.
You could either implement INotifyPropertyChanged and fire the PropertyChanged event or make UsbFiles a dependency property.
Or you pass NewUsbFiles as constructor argument and assign it before calling InitializeComponent
public UsbFileSelector(ObservableCollection<UsbFile> usbFiles)
{
UsbFiles = usbFiles;
InitializeComponent();
}
and call it like this:
var usbFileSelector = new UsbFileSelector(NewUsbFiles)
{
Owner = this
};
Note that if you always pass a new collection, using ObservableCollection isn't actually necessary. You never add or remove elements to/from the collection, so there is no need for a change notification.

Someone posted (and deleted the comment) that I should add
DataContext = this;
To
public UsbFileSelector()
{
InitializeComponent();
DataContext = this;
}
Someone else mentioned (that comment too was deleted) that this was not necessary because of the
DataContext="{Binding ElementName=wUsbFileSelector}"
in the XAML.
BUT it turned out that removing the DataContext line from the XAML and setting it to this in code was the sollution. No idea why but that did it.
EDIT just to make clear that this is not a good solution and works only by accident, try the following:
// this works
var usbFileSelector = new UsbFileSelector();
usbFileSelector.Owner = this;
usbFileSelector.UsbFiles = NewUsbFiles;
usbFileSelector.ShowDialog();
// this does not
var usbFileSelector = new UsbFileSelector();
usbFileSelector.Owner = this;
await Task.Delay(10);
usbFileSelector.UsbFiles = NewUsbFiles;
usbFileSelector.ShowDialog();

All the answers already given are correct, the heart of your problem is the
UsbFiles = NewUsbFiles
which causes the binding to "break" - UsbFiles is no longer pointing to the collection that is bound to the Listbox.
Another possible way to solve this would be to simply leave the bound collection alone and just repopulate the contents.
var usbFileSelector = new UsbFileSelector()
{
Owner = this,
UsbFiles.Clear();
foreach (var uf in NewUsbFiles) {
UsbFiles.Add(uf);
}
};

Related

How to change UserControl in background?

I am stuck with a problem where I want to change user control on different events in background. I am new in MVVM but I am bound to use MVVM only to achive this task. Code structure is little complex to me but still I figured that New Employee form is getting shown on button click but in new window but I want that form to be opened in current window's content. Code is given here which I need to modify to open usercontrol.
public Task<bool?> InitModification(CoreViewModel vm)
{
var tcs = new TaskCompletionSource<bool?>();
_dispatcherService.CurrentDispatcher.BeginInvoke(new Action(() =>
{
bool? result = null;
Window activeWindow = null;
for (var i = 0; i < Application.Current.Windows.Count; i++)
{
var win = Application.Current.Windows[i];
if ((win != null) && (win.IsActive))
{
activeWindow = win;
break;
}
}
if (activeWindow != null)
{
var win = new NewEmp(vm) { Owner = activeWindow };
result = win.ShowDialog();
}
tcs.SetResult(result);
}));
return tcs.Task;
}
My answer will not use your code since I don't find it useful to what you want to achieve. My answer will suffice with a suggestion on how you can achieve changing content control with MVVM
The way I go about it is with every MVVM-project I have a "application-shell" that acts as a wrapper for all my other content and through that you can easily change content. This application is a View and a ViewModel like such.
ShellView
<xmlns:ViewModel="clr-namespace:WhereOurViewModelIs.ViewModel">
<!--More XAML code-->
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:MyViewModel}">
<Views:MyView/>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModel:AnotherViewModel}">
<Views:AnotherView/>
</DataTemplate>
</Window.Resources>
<ContentControl Content="{Binding CurrentPage}"/>
ShellViewModel
public class ShellViewModel
{
private BaseViewModel _currentPage{get;set;}
Public BaseViewModel CurrentPage{
get{return _currentPage;}
set{_currentPage = value; OnPropertyChanged();}
}
public ShellViewModel
{
CurrentPage = new MyViewModel();
}
}
Since we don't know how many different pages there is (in theory) we will tell them that need to be a of a type (inherited or an object) of BaseViewModel. This way we don't need to check for every single page and remove redundant code.
Then you set the Datacontext = new ShellViewModel(); in behind code of ShellView.xaml
BaseViewModel
public class BaseViewModel
{
/*This class can contains whatever you want your other ViewModels to be able to do*/
}
Now you need to set up 2 ViewModels with 2 Views just like we did with our shell.
MyViewModel
public class MyViewModel:BaseViewModel
{
/*Contains Properties,methods,private fields. What you want to show on view*/
}
AnotherViewModel
public class AnotherViewModel:BaseViewModel
{
/*Contains Properties,methods,private fields. What you want to show on view*/
}
Now you can set event to your ShellViewModel to change content whenever something happens. Hopefully this can atleast give you some idea how to work with MVVM. Of course you need to set up our ViewModels with properties changed event and other to get everything working, but this is a start for you.
If you find this answer helpful please chose it as an answer since it take some time to make an example like this.

How can I dynamically load two of the same user control on runtime without allowing changes in one control to affect the other?

I'm having trouble re-using a user control in WPF and I hope you can help.
On runtime, I am creating new instances of this user control to appear in a WPF grid. The user control consists of a text box and a list box, where user input in the text box filters the results in the list box. Say for this example that I create two of this same user control dynamically at runtime which share the same ViewModel. However, when I run the application, if I enter something in the second user control text box, it reflects in the listbox of BOTH of the user controls. I only want it to reflect in its own listbox.
Here is the picture of the issue on the front end. The highlighted input is reflected in both list boxes but shouldn't:
Here is the User Control XAML:
<UserControl x:Class="SCM_AllergyRecModule.SearchAndSelectView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<StackPanel Width="150">
<TextBox x:Name="Filter" Text="{Binding Path=Filter, UpdateSourceTrigger=PropertyChanged}"/>
<ListBox Height="50"
ItemsSource="{Binding Path=Allergens}"
IsSynchronizedWithCurrentItem="True"
SelectedItem="{Binding Path=SelectedAllergen}">
</ListBox>
</StackPanel>
And the ViewModel for the User Control:
namespace SCM_AllergyRecModule
{
public class SearchAndSelectViewModel
{
private ICollectionView allergens;
private string selectedAllergen;
private string filter = "";
public string Filter
{
get
{
return this.filter.ToUpperInvariant();
}
set
{
if (this.filter != value)
{
this.filter = value;
this.Allergens.Refresh();
}
}
}
private bool ContainsFilter(object item)
{
var product = item as string;
if (product == null)
{
return false;
}
if (string.IsNullOrEmpty(this.Filter))
{
return true;
}
if (product.ToUpperInvariant().Contains(this.Filter))
{
return true;
}
return false;
}
public SearchAndSelectViewModel()
{
this.allergens = CollectionViewSource.GetDefaultView(MainWindow.scmAllergens);
this.allergens.Filter = ContainsFilter;
}
public ICollectionView Allergens
{
get
{
return this.allergens;
}
}
public string SelectedAllergen
{
get
{
return this.selectedAllergen;
}
set
{
if (this.selectedAllergen != value)
{
this.selectedAllergen = value;
}
}
}
}
}
Here is the dynamic loading of the User Control on runtime in the Main Window (please ignore the naming for now):
SearchAndSelectView ssvAllergenSearch = new SearchAndSelectView();
ssvAllergenSearch.DataContext = new SearchAndSelectViewModel();
controlName = "ssvAllergenSearch" + (rowCounter.ToString() + allergenColumn.ToString());
ssvAllergenSearch.Name = controlName;
this.RegisterName(controlName, cmbAllscriptsCategory);
Grid.SetRow(ssvAllergenSearch, rowCounter);
Grid.SetColumn(ssvAllergenSearch, allergenColumn);
DynamicGrid.Children.Add(ssvAllergenSearch);
I believe this is the offending line:
this.allergens = CollectionViewSource.GetDefaultView(MainWindow.scmAllergens);
I assume you only have one instance of MainWindow, and thereby only one instance of scmAllergens. By calling CollectionViewSource.GetDefaultView, you are getting the same CollectionViewSource both times. Manually create a new instance instead:
var cvs = new CollectionViewSource();
cvs.Source = MainWindow.scmAllergens;
this.allergens = cvs.View;
If they're sharing the same viewmodel, that's your issue. Your controls are being bound by DataContext to the same source, so the targets link back to the same instance which causes a change in one to change the other via two-way bindings. Instantiate separate models for each and your problem will be solved. Building the control as a concrete control (where the code-behind is also the viewmodel) eliminates this problem and is the MVVM best practice in most cases.

Binding an ObservableCollection to ListBox (Easy case?)

I am really struggling to understand binding. I know there are loads of other threads with much the same title as this one, but they're all trying to do something more complex than I am, and all the answers assume a whole pile of stuff that I just don't get :(
I'm trying to display a dynamically updated message log. I've defined a Message class:
public class Message
{
public DateTime Timestamp { get; private set; }
public string Value { get; private set; }
public int Severity { get; private set; }
public Message(string value, int severity)
{
Timestamp = DateTime.Now;
Value = value;
Severity = severity;
}
}
I've defined a MessageLog class as simply:
public class MessageLog: ObservableCollection<Message>
{
public MessageLog(): base()
{ }
}
In my MainWindow constructor I have a Log property:
public MessageLog Log { get; private set; }
In the MainWindow constructor I initialise Log:
public MainWindow()
{
InitializeComponent();
DataContext = this;
Log = new Model.MessageLog();
// and so on
}
In the XAML for the main window I have:
<ListBox Name="MessagePanel" Height="100" ItemsSource="{Binding MessageLog}" IsEnabled="False"/>
Now if I add Message instances to the MessageLog I expected to see them appear in the ListBox. They don't. What have I missed?
Thanks in advance (and if you can point me somewhere that explains bindings clearly -- especially the view that XAML has of the code and where it can look for things -- then many more thanks on top. At the moment I'm using Matthew McDonald's "Pro WPF 4.5 in C#" and I'm just not getting it.)
Change your constructor:
public MainWindow()
{
InitializeComponent();
DataContext = this;
Log = new Model.MessageLog();
}
to this:
public MainWindow()
{
InitializeComponent();
Log = new Model.MessageLog(); // <- This line before setting the DataContext
DataContext = this;
}
Explanation:
Setting properties after having set the DataContext requires your class to implement INotifyPropertyChanged and raise change notifications after properties are set.
Since you're setting the DataContext before setting the property, the value of this.Log is null at the time of DataBinding, and WPF is never notified that it ever changed.
That being said, you don't usually put Data inside UI Elements (such as Window). The accepted and recommended approach to WPF is MVVM, where you usually create a ViewModel and set that as the Window's DataContext:
public class MyViewModel
{
public MessageLog Log {get;set;}
public MyViewModel()
{
Log = new MessageLog();
}
}
Window Constructor:
public MainWindow
{
DataContext = new MyViewModel();
}
Your collection property name is Log which is what you should be binding to in ItemsSource property; and if you have not done a typo in your question then you are binding wrongly to MessageLog, and change Binding as below:
<ListBox Name="MessagePanel" Height="100" ItemsSource="{Binding Log}" IsEnabled="False"/>
For more information and learning on Data Binding in WPF (4.5), see MSDN Data Binding Overview
The datacontext of the view must be the viewmodel.

ListBox of dead simple MVVM application stays empty - what am I missing?

The XAML of my window looks like this:
<Window x:Class="Binding1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Cronjobs" Height="350" Width="525">
<Grid>
<ListBox HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch" ItemsSource="{Binding Cronjobs}" />
</Grid>
</Window>
As visible I bind the ListBox's ItemsSource to the Cronjobs property of the current DataContext. The DataContext is set to an instance of the ViewModel below in the constructor of the code-behind:
public partial class MainWindow : Window
{
private CronjobViewModel cronjobViewModel;
public MainWindow()
{
InitializeComponent();
this.cronjobViewModel = new CronjobViewModel();
this.DataContext = cronjobViewModel;
}
}
The ViewModel looks like this:
class CronjobViewModel : DependencyObject
{
public ObservableCollection<Cronjob> Cronjobs;
public CronjobViewModel( )
{
this.Cronjobs = new ObservableCollection<Cronjob>();
this.Cronjobs.Add( new Cronjob() );
this.Cronjobs.Add( new Cronjob() );
}
}
For quick and simple debugging I manually add some items to the collection for now. That Cronjob class is the actual model which is nothing more than a class with some simple string properties, cut down to the essential part:
class Cronjob {
private string name;
public string Name { get { return this.name; } set { this.name = value; } }
public Cronjob( ) { this.Name = "Herp"; }
}
I am mainly experienced in web development and new to the combination of WPF and MVVM. I spent nearly 10 hours figuring this out now but still do not see the cause. I also tried the DataGrid. I watched the first half of Jason Dolingers Video about MVVM about three times and took a close look on how did it, but it does not work for me, even though I understood the abstract concept of MVVM. I am pretty sure I just unintendedly omitted something in the XAML which should be there, but messing around with display property names and item templates did not help (according to what I found here and there around the internet they are not even necessary). Does anybody see the error in this code?
Sorry for the large code dump, I formatted the "boring" parts in a more compact way.
It's because Cronjobs is a field and you cannot bind to fields. Try changing it into property:
public ObservableCollection<Cronjob> Cronjobs { get; set; }
This should work ;)
public class CronjobViewModel
{
public ObservableCollection<Cronjob> Cronjobs { get; private set; }
public CronjobViewModel()
{
this.Cronjobs = new ObservableCollection<Cronjob>();
this.Cronjobs.Add(new Cronjob());
this.Cronjobs.Add(new Cronjob());
}
}

Changing CollectionViewSource Source in a MVVM world

Edited: I created a new VS2010 WPF appilication with just 3 files MainWindow.xaml, MainWindow.xaml.cs, and MainWindowViewModel.cs (Listed Below). If someone feels really helpful you can recreate the problem in seconds (copy/paste). When you run the app the DataGrid will display string "OldCollection" which is wrong. If you change the ItemsSource binding to MyCollection it displays "NewCollection" which is correct.
Full Description:
At first I had a DataGrid with its ItemsSource bound to MyCollection. I have/need a method UpdateCollection that assigns a new ObservableCollection<> to MyCollection. With the addition of NotifyPropertyChange to MyCollection the UI updates.
Next it became necessary to introduce a CollectionViewSource to enable grouping. With the UI bound to MyCollectionView, calls to UpdateCollection now have no effect. The debugger confirms that MyCollectionView always contains the initial MyCollection. How can I get my NewCollection to be reflected in the View? I have tried View.Refresh(), Binding CollectionViewSource, and countless other strategies.
Note: Primarily others are concerned with the changes to Collection items not updating the view (grouping/sorting) without calling Refresh. My problem is I am assigning a brand new collection to CollectionViewSource and the view/UI never changes.
// MainWindow.xaml
<Window x:Class="CollectionView.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DataGrid Name="grid" ItemsSource="{Binding MyCollectionView}" />
</Grid>
</Window>
//MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
namespace CollectionView
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel();
}
}
}
//MainWindowViewModel.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Collections.ObjectModel;
using System.Windows.Data;
using System.ComponentModel;
namespace CollectionView
{
class MainWindowViewModel : INotifyPropertyChanged
{
public MainWindowViewModel()
{
MyCollection = new ObservableCollection<MyObject>() { new MyObject() { TestString = "OldCollection" } };
MyCollectionViewSource = new CollectionViewSource();
// Bind CollectionViewSource.Source to MyCollection
Binding MyBind = new Binding() { Source = MyCollection };
BindingOperations.SetBinding(MyCollectionViewSource, CollectionViewSource.SourceProperty, MyBind);
// The DataGrid is bound to this ICollectionView
MyCollectionView = MyCollectionViewSource.View;
// This assignment here to demonstrate that View/UI does not update to show "NewCollection"
MyCollection = new ObservableCollection<MyObject>() { new MyObject() { TestString = "NewCollection" } };
}
// Collection Property
// NotifyPropertyChanged added specifically to notify of MyCollection re-assignment
ObservableCollection<MyObject> _MyCollection;
public ObservableCollection<MyObject> MyCollection
{
get { return _MyCollection; }
set
{
if (value != _MyCollection)
{
_MyCollection = value;
NotifyPropertyChanged("MyCollection");
}
}
}
public CollectionViewSource MyCollectionViewSource { get; private set; }
public ICollectionView MyCollectionView { get; private set; }
// Method updates MyCollection itself (Called via ICommand from another ViewModel)
public void UpdateCollection(ObservableCollection<MyObject> NewCollection)
{
MyCollection = NewCollection;
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
class MyObject
{
public string TestString { get; set; }
}
}
Thanks,
I would choose one of the two following solutions.
First, you could take your ObservableCollection and create an ICollectionView (grouping, sorting) once. Instead of replacing the ObservableCollection you can use .Clear() and add the items from the new Collection. This has the additional bonus of not breaking your grouping and sorting.
Second approach: whenever you replace your ObservableCollection you have to create a new ICollectionView for sorting and grouping.
this._view = (ICollectionView)CollectionViewSource.GetDefaultView(this.MyCollection);
You can simply bind to your collection if you take the DefaultView
<DataGrid Name="grid" ItemsSource="{Binding MyCollection}" />
and you can throw away your CollectionViewSource code binding stuff.
The problem is definitely the fact that you aren't binding the source to your MyCollection property, you're assigning it once and it never gets updated again.
You should be doing something like the following:
MyCollectionViewSource = new CollectionViewSource();
Binding binding = new Binding();
binding.Source = MyCollection;
BindingOperations.SetBinding( MyCollectionViewSource ,
CollectionViewSource.SourceProperty,
binding );
I apologize if the above doesn't work right away without tweaking - this is usually the type of thing I set up in xaml, because it's much easier there.
<CollectionViewSource Source="{Binding MyCollection}" />
See Also: How do I change the binding of a CollectionView.Source?
The fact that the binding isn't working is incredibly weird. I encountered the exact same problem with the Xceed DataGridCollectionViewSource - but I just assumed it was because Xceed was screwed up.
My solution was to actually create a brand new DataGridCollectionViewSource every time the underlying collection was replaced and to reconfigure it programatically, and then update the myDataGrid.Source property to point to the new DataGridCollectionViewSource. That workaround certainly will work, but that completely defeats the purpose of bindings, which should be working:
void MyViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
//Xceed DataGridCollectionView are terrible and do not update when the bound table changes, so we need to replace them each change.
if (e.PropertyName == "MyCollection")
{
DataGridCollectionView GridView = new DataGridCollectionView(MyViewModel.MyCollection.DefaultView);
GridView.SortDescriptions.Add(new SortDescription("DataSetID", ListSortDirection.Ascending));
uiMyCollectionGrid.ItemsSource = GridView;
}
}
Maybe this brute force solution can solve your problem? I understand if you don't even want to consider this yet since it's so dirty.

Categories

Resources