We Keep Coding

Improve WPF performance with many usercontrols

I am building my first WPF application and I ran into some performance issues that I am not sure how to deal with. I have a list of around 500 items that I bind to UserControls using an ItemsControl in a Page. The data gets loaded into memory during the program startup and is displayed when the user opens the page. This already takes a few seconds but can be dealt with, however the data can also be reordered (e.g. ascending, descending) and filtered which takes around 0.6-1.3 seconds every time (depending on reordering method used). It seems to be caused by the UI parsing and layout and I was hoping this could be improved somehow. Here is the performance graph in case that helps.
And here is the code of the Item class and associated UserControl xaml (simplified):
public class Item : INotifyPropertyChanged
{
public String name { get; set; }
public String content { get; set; }
public BitmapImage image { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private Visibility visibility = Visibility.Visible;
protected void OnPropertyChanged(string name)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public void LoadImage()
{
var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.DecodePixelWidth = 48;
bitmap.DecodePixelHeight = 48;
bitmap.UriSource = new Uri(somepath);
bitmap.EndInit();
bitmap.Freeze();
image = bitmap;
}
public Item()
{
LoadImage();
}
}
<UserControl
...
Visibility="{Binding Path=Visibility}">
<Grid Background="White">
<Image x:Name="ItemImage" Source="{Binding Path=image}" Width="64" Height="64"></Image>
<TextBlock x:Name="NameTextBlock" Text="{Binding Path=name}" FontSize="18px"></TextBlock>
<TextBlock x:Name="ContentTextBlock" Text="{Binding Path=content}" FontSize="14px" ></TextBlock>
</Grid>
</UserControl>
And here is the xaml and code of the Page which displays the Usercontrols:
<Page>
<StackPanel x:Name="RootStackPanel">
<Some static content>
<ScrollViewer x:Name="ItemScrollViewer" CanContentScroll="True" VerticalScrollBarVisibility="Auto" Width="auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<ItemsControl x:Name="CustomItemsControl">
</ItemsControl>
</ScrollViewer>
</StackPanel>
</Page>
public partial class ItemsPage : Page
{
public static ItemsPage Instance = new ItemsPage();
public ObservableCollection<Item> collection { get; set; }
// called by a button on the page
private void ReorderItems()
{
// Simplified: Usually more ordering options e.g. OrderByDescending
List<Item> temp = new List<Item>(collection.OrderBy(item => item.name));
collection.Clear();
foreach (Item item in temp)
{
collection.Add(item);
}
}
public ItemsPage()
{
InitializeComponent();
collection = new ObservableCollection<Item>(ItemCollection.GetItems());
// getItems returns the list of items as List<>
FrameworkElementFactory factoryPanel = new FrameworkElementFactory(typeof(VirtualizingStackPanel));
factoryPanel.SetValue(VirtualizingStackPanel.IsItemsHostProperty, true);
factoryPanel.SetValue(VirtualizingStackPanel.IsVirtualizingProperty, true);
factoryPanel.SetValue(VirtualizingStackPanel.VirtualizationModeProperty, VirtualizationMode.Recycling);
ItemsPanelTemplate template = new ItemsPanelTemplate();
template.VisualTree = factoryPanel;
CustomItemsControl.ItemsPanel = template;
FrameworkElementFactory dataTemplateFactory = new FrameworkElementFactory(typeof(ItemUserControl));
DataTemplate dataTemplate = new DataTemplate();
dataTemplate.VisualTree = dataTemplateFactory;
CustomItemsControl.ItemTemplate = dataTemplate;
CustomItemsControl.ItemsSource = collection;
}
}
As can be seen I tried using Virtualization but I am not sure if I am using it correctly since I saw no measurable performance gain. The pictured reordering method is obviously not ideal since I alternatively tried reordering the members of the items instead and calling the PropertyChangedEventHandler on the bound members. This did improve performance by getting rid of the parsing step but still takes 600ms on average per reorder. Are there better methods to do that or should I be trying to simplify my UserControls instead?

When you use a ScrollViewer around ItemsControl Virtualization will not work.
extract ItemsControl from ScrollViewer.

Advanced MVVM scenario in UWP app - How to use a model class for multiple viewmodels?

I have been coding for over 4 years now... and time has come that I need to understand how to use MVVM in a perfect way, in order to be able to accomplish more difficult coding tasks.
More specifically, I would like to know how to use a model object for multiple viewmodels and views.
Sample scenario
Let's have an app that has two views: the first with a list of ItemModel objects (that shows all the objects available) and another one that has a list that only contains the favorites ones.
The ItemModel has an IsFavorite boolean property to determine whether or not it is one.
Until today, I have always accomplished scenarios like this in this way:
ItemModel class (a model-viewmodel class at the same time):
public class ItemModel : BaseBind // This class implements INotifyPropertyChanged
{
public ItemModel()
{
// ...
}
private bool isFavorite;
public Boolean IsFavorite
{
get { return isFavorite; }
set { SetProperty(ref isFavorite, value); OnPropertyChanged(); }
}
// All the model's and viewmodel's properties and functions are stored here...
public void GenericFunc()
{
App.Current.AppViewModel.GenericAppFunc(this);
}
public void FavoriteFunc()
{
App.Current.AppViewModel.FavoriteAppFunc(this);
}
public ItemModel Clone()
{
// Cloning the item with "new" constructor...
}
}
AppViewModel class:
public class AppViewModel
{
public AppViewModel()
{
// Initializing...
}
public ObservableCollection<ItemModel> ItemsList { get; set; }
public ObservableCollection<ItemModel> FavoritesList { get; set; }
public void UpdateFavorites()
{
FavoritesList.Clear();
foreach (var it in ItemsList)
{
if (it.IsFavorite) FavoritesList.Add(it.Clone());
}
}
public void GenericAppFunc(ItemModel item)
{
// ...
}
public void FavoriteAppFunc(ItemModel item)
{
// ...
}
}
First view, with all items listed:
<ListView ItemsSource="{x:Bind ViewModel.ItemsList, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:ItemModel">
<StackPanel>
<TextBlock Text="{x:Bind ItemTitle, Mode=OneWay}"/>
<Button Content="Generic func" Click="{x:Bind GenericFunc}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Second view, with only favorites listed:
<ListView ItemsSource="{x:Bind ViewModel.FavoritesList, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:ItemModel">
<StackPanel>
<TextBlock Text="{x:Bind ItemTitle, Mode=OneWay}"/>
<Button Content="Favorite func" Click="{x:Bind FavoriteFunc}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is my way of doing it all... having two completely independent lists and cloning objects everytime the user navigates to the favorites view.
It works, it always did it... BUT this is definitively NOT a good pattern.
To summarize, this is what I'm doing till now...
...and this is what I would like to achieve:
In order to have lightweight models like this...
public class ItemModel
{
public ItemModel()
{
// ...
}
public Boolean IsFavorite { get; set; }
// Only the model's properties and functions are stored here...
}
...and use it for multiple viewmodels/views.
Best regards and thank you for your attention.

In UWP there is no filtering of data on top of a single data source. While in WPF it was possible to use the same ObservableCollection of items and filter only when binding your views using a CollectionViewSource, it seems like the only solution is having two different collections like you are doing.
There is indeed no Filter property in the CollectionViewSource class for UWP so [...] you will have to filter the source collection itself (or use two different collections like you are already doing).
Surely you can remove the need to call UpdateFavorites() by hooking to the PropertyChanged event of your items and move them from one collection to the other when their IsFavorite property is set, like this:
public AppViewModel()
{
// Subscribing to changes in collection of items
ItemsList .CollectionChanged += ItemList_CollectionChanged;
}
private void ItemList_CollectionChanged(object sender, EventArgs e) {
//Here subscribe/unsubscribe to PropertyChanged event of each item
//as they come and go in the collection
}
private void Item_PropertyChanged(object sender, EventArgs e) {
//Here check IsFavorite property and add/remove the item from the favorites list.
//You can even instantiate another type of viewmodel object specific to favorites items.
}
Regarding the MVVM pattern, I would advice to have a lightweight ItemModel model like you suggest and have a collection of them stored in your model. Then you could have two collections, one with ItemViewMode objects and one with FavoriteItemViewModel objects in your AppViewModel. You could also have a single ItemViewModel class with an IsFavorite property and use triggers and styles to have them display differently.

I don't see a reason to clone.
What would be the problem with:
foreach (var it in ItemsList)
{
//if (it.IsFavorite) FavoritesList.Add(it.Clone());
if (it.IsFavorite) FavoritesList.Add(it);
}
or, just set up the FavoritesList as a filtered version:
public List<Item> FavoritesList => ItemsList.Where(x => x.IsFavorit);
as long as you Notify at the right actions this should work.

Why am I experiencing a memory trouble/leaks in UWP/C# app

I created extension to IOrderedIEnumerable
which looks like this:
internal static ObservableCollection<T> ToObservableCollection<T>(this IOrderedEnumerable<T> list)
{
var observableCollection = new ObservableCollection<T>();
foreach (var p in list)
observableCollection.Add(p);
return observableCollection;
}
Also I have a page which looks like:
private ObservableCollection<BusStopName> _ListOfBusStopNames;
public BusStopsListPage()
{
this.InitializeComponent();
this.SetIsBackFromPageAllowed(true);
_ListOfBusStopNames = Timetable.Instance.BusStopsNames
.OrderBy(p => p.Name)
.ToObservableCollection<BusStopName>();
}
And in this page i have a listview which has binding to _ListOfBusStopNames
Timetable.Instance.BusStopsNames has 2812 entries.
When I'm navigating to this page, application memory is growing up to infinity numbers. It looks like (red line is moment when I navigated to this page):
In memory snapshot we can see that this thing is making this problem:
I don't have any idea what it can be. Do anyone have any idea?
When I change instance constructor to:
public BusStopsListPage()
{
this.InitializeComponent();
this.SetIsBackFromPageAllowed(true);
_ListOfBusStopNames = new ObservableCollection<BusStopName>();
}
everything works nice. Also, when I changed in this constructor manually List ( Timetable.Instance.BusStopsNames ) to ObservableCollection, it works great too.
EDIT
Hm.. i tried to make an example how to reproduce it, and i get to a solution for it. It is very confusing, so if someone can explain why this is happening it will be nice :)
Create UWP APP
Add in MainPage.xaml only this: <Frame Name="MainFrame" />
In code-behind put:this.Loaded += (s, e) => MainFrame.Navigate(typeof(BlankPage1));
Create new blank page with name BlankPage1
In View of BlankPage add this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<ListView ItemsSource="{x:Bind _ListOfTestClasses}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:TestClass">
<Grid>
<TextBlock Text="{x:Bind Name}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
In code-behind put:
public sealed partial class BlankPage1 : Page
{
private List<TestClass> _List;
private ObservableCollection<TestClass> _ListOfTestClasses;
public BlankPage1() {
this.InitializeComponent();
GenerateTestData();
_ListOfTestClasses = _List.OrderBy(p => p.Name).ToObservableCollection<TestClass>();
}
private void GenerateTestData() {
_List = new List<TestClass>();
for(int i = 0; i < 2800; i++)
_List.Add(new TestClass() { Id = i, Name = Guid.NewGuid().ToString() });
}
}
public static class Extension {
public static ObservableCollection<T> ToObservableCollection<T>(this IOrderedEnumerable<T> list) {
var observableCollection = new ObservableCollection<T>();
foreach (var p in list)
observableCollection.Add(p);
return observableCollection;
}
}
public class TestClass {
public int Id { get; set; }
public string Name { get; set; }
}
Run the app
So.. you can see that app is lagging and memory is going taking more and more.. And now.. try to delete in BlankPage1 view StackPanel. And now run the app.

This is a common problem. The issue is the misuse of panels in XAML. A Grid will stretch to fit its container's boundaries and cascade this to its children. A StackPanel will only cascade the size of the opposing orientation.
For example, when you have <StackPanel Orientation="Vertical"/>, all children will receive the width of the parent Grid, but not the height. Because the orientation is vertical, the height will be infinite to allow the panel to stack its children based on their requested heights.
When you have <StackPanel Orientation="Horizontal"/>, all children will receive the height of the parent Grid, but not the width. Same reason as above. It needs to stack horizontally.
So..., when you have a <ListView/> inside a <StackPanel/>:
<StackPanel>
<ListView>...</ListView>
</StackPanel>
The StackPanel is telling the ListView to render its size with height = infinity. And therefore, all 2,800 items in your ListView are actually being rendered, not virtualized.
You have to avoid putting ListViews in StackPanels when the orientations are the same.
This should work:
<Grid>
<StackPanel Orientation="Horizontal">
<ListView>...</ListView>
</StackPanel>
</Grid>
... but it's silly.

Nested ObservableCollection data binding in WPF

I am very new to WPF and trying to create a self learning application using WPF.
I am struggling to understand concepts like data binding,data templates,ItemControls to a full extent.
I am trying to create a learn page with the following requirements in mind.
1) The page can have more than one question.A scroll bar should be displayed once the
questions fills up the whole page.
2) The format of the choices vary based on the question type.
3) the user shall be able to select the answer for the question.
I am facing problem with binding nested ObservableCollection and displaying the content as for the above requirements.
Can someone help in how to create a page as shown below and how to use INotifyPropertyChanged along XMAL to do the nested binding.
Here is the basic code I am trying to use to use display the questions and answers.
namespace Learn
{
public enum QuestionType
{
OppositeMeanings,
LinkWords
//todo
}
public class Question
{
public Question()
{
Choices = new ObservableCollection<Choice>();
}
public string Name { set; get; }
public string Instruction { set; get; }
public string Clue { set; get; }
public ObservableCollection<Choice> Choices { set; get; }
public QuestionType Qtype { set; get; }
public Answer Ans { set; get; }
public int Marks { set; get; }
}
}
namespace Learn
{
public class Choice
{
public string Name { get; set; }
public bool isChecked { get; set; }
}
}
namespace Learn
{
public class NestedItemsViewModel
{
public NestedItemsViewModel()
{
Questions = new ObservableCollection<Question>();
for (int i = 0; i < 10; i++)
{
Question qn = new Question();
qn.Name = "Qn" + i;
for (int j = 0; j < 4; j++)
{
Choice ch = new Choice();
ch.Name = "Choice" + j;
qn.Choices.Add(ch);
}
Questions.Add(qn);
}
}
public ObservableCollection<Question> Questions { get; set; }
}
public partial class LearnPage : UserControl
{
public LearnPage()
{
InitializeComponent();
this.DataContext = new NestedItemsViewModel();
}
}
}

You initial attempt gets you 80% of the way there. Hopefully, my answer will get you a little closer.
To start with, INotifyPropertyChanged is an interface an object supports to notify the Xaml engine that data has been modified and the user interface needs to be updated to show the change. You only need to do this on standard clr properties.
So if your data traffic is all one way, from the ui to the model, then there is no need for you to implement INotifyPropertyChanged.
I have created an example that uses the code you supplied, I have modified it and created a view to display it. The ViewModel and the data classes are as follows
public enum QuestionType
{
OppositeMeanings,
LinkWords
}
public class Instruction
{
public string Name { get; set; }
public ObservableCollection<Question> Questions { get; set; }
}
public class Question : INotifyPropertyChanged
{
private Choice selectedChoice;
private string instruction;
public Question()
{
Choices = new ObservableCollection<Choice>();
}
public string Name { set; get; }
public bool IsInstruction { get { return !string.IsNullOrEmpty(Instruction); } }
public string Instruction
{
get { return instruction; }
set
{
if (value != instruction)
{
instruction = value;
OnPropertyChanged();
OnPropertyChanged("IsInstruction");
}
}
}
public string Clue { set; get; }
public ObservableCollection<Choice> Choices { set; get; }
public QuestionType Qtype { set; get; }
public Choice SelectedChoice
{
get { return selectedChoice; }
set
{
if (value != selectedChoice)
{
selectedChoice = value;
OnPropertyChanged();
}
}
}
public int Marks { set; get; }
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class Choice
{
public string Name { get; set; }
public bool IsCorrect { get; set; }
}
public class NestedItemsViewModel
{
public NestedItemsViewModel()
{
Questions = new ObservableCollection<Question>();
for (var h = 0; h <= 1; h++)
{
Questions.Add(new Question() { Instruction = string.Format("Instruction {0}", h) });
for (int i = 1; i < 5; i++)
{
Question qn = new Question() { Name = "Qn" + ((4 * h) + i) };
for (int j = 0; j < 4; j++)
{
qn.Choices.Add(new Choice() { Name = "Choice" + j, IsCorrect = j == i - 1 });
}
Questions.Add(qn);
}
}
}
public ObservableCollection<Question> Questions { get; set; }
internal void SelectChoice(int questionIndex, int choiceIndex)
{
var question = this.Questions[questionIndex];
question.SelectedChoice = question.Choices[choiceIndex];
}
}
Notice that Answer has been changed to a SelectedChoice. This may not be what you require but it made the example a little easier. i have also implemented the INotifyPropertyChanged pattern on the SelectedChoice so I can set the SelectedChoice from code (notably from a call to SelectChoice).
The main windows code behind instantiates the ViewModel and handles a button event to set a choice from code behind (purely to show INotifyPropertyChanged working).
public partial class MainWindow : Window
{
public MainWindow()
{
ViewModel = new NestedItemsViewModel();
InitializeComponent();
}
public NestedItemsViewModel ViewModel { get; set; }
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
ViewModel.SelectChoice(3, 3);
}
}
The Xaml is
<Window x:Class="StackOverflow._20984156.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:learn="clr-namespace:StackOverflow._20984156"
DataContext="{Binding RelativeSource={RelativeSource Self}, Path=ViewModel}"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<learn:SelectedItemIsCorrectToBooleanConverter x:Key="SelectedCheckedToBoolean" />
<Style x:Key="ChoiceRadioButtonStyle" TargetType="{x:Type RadioButton}" BasedOn="{StaticResource {x:Type RadioButton}}">
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource SelectedCheckedToBoolean}">
<Binding Path="IsCorrect" />
<Binding RelativeSource="{RelativeSource Self}" Path="IsChecked" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="Background" Value="Green"></Setter>
</DataTrigger>
<DataTrigger Value="False">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource SelectedCheckedToBoolean}">
<Binding Path="IsCorrect" />
<Binding RelativeSource="{RelativeSource Self}" Path="IsChecked" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="Background" Value="Red"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="InstructionTemplate" DataType="{x:Type learn:Question}">
<TextBlock Text="{Binding Path=Instruction}" />
</DataTemplate>
<DataTemplate x:Key="QuestionTemplate" DataType="{x:Type learn:Question}">
<StackPanel Margin="10 0">
<TextBlock Text="{Binding Path=Name}" />
<ListBox ItemsSource="{Binding Path=Choices}" SelectedItem="{Binding Path=SelectedChoice}" HorizontalAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type learn:Choice}">
<RadioButton Content="{Binding Path=Name}" IsChecked="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Margin="10 1"
Style="{StaticResource ChoiceRadioButtonStyle}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</Window.Resources>
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom">
<Button Content="Select Question 3 choice 3" Click="ButtonBase_OnClick" />
</StackPanel>
<ItemsControl ItemsSource="{Binding Path=Questions}">
<ItemsControl.ItemTemplateSelector>
<learn:QuestionTemplateSelector QuestionTemplate="{StaticResource QuestionTemplate}" InstructionTemplate="{StaticResource InstructionTemplate}" />
</ItemsControl.ItemTemplateSelector>
</ItemsControl>
</DockPanel>
</Window>
Note: My learn namespace is different from yours so if you use this code, you will need to modify it to your namespace.
So, the primary ListBox display a list of Questions. Each item in the ListBox (each Question) is rendered using a DataTemplate. Similarly, in the DataTemplate, a ListBox is used to display the choices and a DataTemplate is used to render each choice as a radio button.
Points of interest.
Each choice is bound to the IsSelected property of the ListBoxItem it belongs to. It may not appear in the xaml but there will be a ListBoxItem for each choice. The IsSelected property is kept in sync with the SelectedItem property of the ListBox (by the ListBox) and that is bound to the SelectedChoice in your question.
The choice ListBox has an ItemsPanel. This allows you to use the layout strategy of a different type of panel to layout the items of the ListBox. In this case, a horizontal StackPanel.
I have added a button to set the choice of question 3 to 3 in the viewmodel. This will show you INotifyPropertyChanged working. If you remove the OnPropertyChanged call from the setter of the SelectedChoice property, the view will not reflect the change.
The example above does not handle the Instruction Type.
To handle instructions, I would either
Insert the instruction as a question and change the question DataTemplate so it does not display the choices for an instruction; or
Create a collection of Instructions in the view model where the Instruction type has a collection of questions (the view model would no longer have a collection of questions).
The Instruction class would be something like
public class Instruction
{
public string Name { get; set; }
public ObservableCollection<Question> Questions { get; set; }
}
Addition based on comment regarding timer expiration and multiple pages.
The comments here are aimed at giving you enough information to know what to search for.
INotifyPropertyChanged
If in doubt, implement INotifyPropertyChanged. My comment above was to let you know why you use it. If you have data already displayed that will be manipulated from code, then you must implement INotifyPropertyChanged.
The ObservableCollection object is awesome for handling the manipulation of lists from code. Not only does it implement INotifyPropertyChanged, but it also implements INotifyCollectionChanged, both of these interfaces ensure that if the collection changes, the xaml engine knows about it and displays the changes. Note that if you modify a property of an object in the collection, it will be up to you to notify the Xaml engine of the change by implementing INotifyPropertyChanged on the object. The ObservableCollection is awesome, not omnipercipient.
Paging
For your scenario, paging is simple. Store the complete list of questions somewhere (memory, database, file). When you go to page 1, query the store for those questions and populate the ObservableCollection with those questions. When you go to page 2, query the store for page 2 questions, CLEAR the ObservableCollection and re populate. If you instantiate the ObservableCollection once and then clear and repopulate it while paging, the ListBox refresh will be handled for you.
Timers
Timers are pretty resource intensive from a windows point of view and as such, should be used sparingly. There are a number of timers in .net you can use. I tend to play with System.Threading.Timer or System.Timers.Timer. Both of these invoke the timer callback on a thread other than the DispatcherThread, which allows you to do work without affecting the UI responsiveness. However, if during the work you need to modify the UI, you will need to Dispatcher.Invoke or Dispatcher.BeginInvoke to get back on the Dispatcher thread. BeginInvoke is asynchronous and therefore, should not hang the thread while it waits for the DispatcherThread to become idle.
Addition based on comment regarding separation of data templates.
I added an IsInstruction to the Question object (I did not implement a Instruction class). This shows an example of raising the PropertyChanged event from property A (Instruction) for Property B (IsInstruction).
I moved the DataTemplate from the list box to the Window.Resources and gave it a key. I also created a second DataTemplate for the instruction items.
I created a DataTemplateSelector to choose which DataTemplate to use. DataTemplateSelectors are good when you need to select a DataTemplate as the Data is being loaded. Consider it a OneTime selector. If you required the DataTemplate to change during the scope of the data it is rendering, then you should use a trigger. The code for the selector is
public class QuestionTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
DataTemplate template = null;
var question = item as Question;
if (question != null)
{
template = question.IsInstruction ? InstructionTemplate : QuestionTemplate;
if (template == null)
{
template = base.SelectTemplate(item, container);
}
}
else
{
template = base.SelectTemplate(item, container);
}
return template;
}
public DataTemplate QuestionTemplate { get; set; }
public DataTemplate InstructionTemplate { get; set; }
}
The selector is bound to the ItemTemplateSelector of the ItemsControl.
Finally, I converted the ListBox into an ItemsControl. The ItemsControl has most of the functionality of a ListBox (the ListBox control is derived from an ItemsControl) but it lacks the Selected functionality. It will make your questions seem more like a page of questions than a list.
NOTE: Although I only added the code of the DataTemplateSelector to the addition, I updated the code snipits throughout the rest of the answer to work with the new DataTemplateSelector.
Addition based on comment regarding setting the background for right and wrong answers
Setting the background dynamically based on values in the model requires a trigger, in this case, multiple triggers.
I have updated the Choice object to include an IsCorrect and during the creation of the questions in the ViewModel, I have assigned IsCorrect on one of the Choices for each answer.
I have also updated the MainWindow to include style triggers on the RadioButton. There are a few points to not about triggers
1. The style or the RadioButton sets the backgound when the mouse is over. A fix would require recreating the style of the RadioButton.
1. Since the trigger is based on 2 values, we can either create another property on the model to combine the 2 properties, or use MultiBinding and a MultValueConverter. I have used the MultiBinding and the MultiValueConverter is as follows.
public class SelectedItemIsCorrectToBooleanConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var boolValues = values.OfType<bool>().ToList();
var isCorrectValue = boolValues[0];
var isSelected = boolValues[1];
if (isSelected)
{
return isCorrectValue;
}
return DependencyProperty.UnsetValue;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
I hope this helps

How to Get a Reference to a ViewModel

All, I have a custom DataGridView control which overrides the DataGidView's OnItemsSourceChanged event. Inside this event I need to get a reference to a data set in the relevant ViewModel. Code is
public class ResourceDataGrid : DataGrid
{
protected override void OnItemsSourceChanged(
System.Collections.IEnumerable oldValue,
System.Collections.IEnumerable newValue)
{
if (Equals(newValue, oldValue))
return;
base.OnItemsSourceChanged(oldValue, newValue);
ResourceCore.ResourceManager manager = ResourceCore.ResourceManager.Instance();
ResourceDataViewModel resourceDataViewModel = ?? // How do I get my ResourceDataViewModel
List<string> l = manger.GetDataFor(resourceDataViewModel);
...
}
}
On the marked line I want to know how to get a reference to ResourceDataViewModel resourceDataViewModel. The reson is that i have multiple tabs each tab contains a data grid and ascociated ViewModel, the ViewModel holds some data that I need to retrieve [via the ResourceManager] (or is there another, better way?).
The question is, from the above event, how can I get the ascociated ResourceDataViewModel?
Thanks for your time.

Get the DataContext and cast it to the view-model type:
var viewModel = this.DataContext as ResourceDataViewModel

Put a static reference to it on your app, when the VM is created place its reference on the static and access it as needed.

You ask if there is a better way... In my experience if you find yourself subclassing a UI element in WPF there ususally is.
You can get away from embedding business logic (the choice of which data to display in the grid), by databinding your entire tab control to a view model.
To demonstrate - here is a very simple example. This is my XAML for the window hosting the tab control:
<Window x:Class="WpfApplication1.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>
<TabControl ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding TabName}"></Setter>
</Style>
</TabControl.ItemContainerStyle>
<TabControl.ContentTemplate>
<DataTemplate>
<Grid>
<DataGrid ItemsSource="{Binding TabData}"></DataGrid>
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
The data context of my window is a TabsViewModel (I am using the NotificationObject that can be found in the PRISM NuGet Package):
public class TabsViewModel: NotificationObject
{
public TabsViewModel()
{
Tabs = new[]
{
new TabViewModel("TAB1", "Data 1 Tab 1", "Data 2 Tab1"),
new TabViewModel("TAB2", "Data 1 Tab 2", "Data 2 Tab2"),
};
}
private TabViewModel _selectedTab;
public TabViewModel SelectedTab
{
get { return _selectedTab; }
set
{
if (Equals(value, _selectedTab)) return;
_selectedTab = value;
RaisePropertyChanged(() => SelectedTab);
}
}
public IEnumerable<TabViewModel> Tabs { get; set; }
}
public class TabViewModel
{
public TabViewModel(string tabName, params string[] data)
{
TabName = tabName;
TabData = data.Select(d => new RowData(){Property1 = d}).ToArray();
}
public string TabName { get; set; }
public RowData[] TabData { get; set; }
}
public class RowData
{
public string Property1 { get; set; }
}
This is obviously an over simplified case, but it means that if there is any business logic about precisely what data to show in each tab, this can reside in one of the view models, as opposed to the code behind. This gives you all the 'separation of concerns' benefits that MVVM is designed to encourage...