We Keep Coding

WPF Sorting an ObservableCollection de-selects a ComboBox

I have a ComboBox where a user can select what JobType they are working on. The ComboBox has a list of AllJobTypes. The problem stems from when a user adds a new JobType, I add the JobType to the AllJobTypes ObservableCollection, then sort it. When the sorting happens the ComboBox get's de-selected and not really sure why. The JobConfig.SelectedJobType.Name never changes in this process. Is there a way to sort an observable collection where it doesn't break the ComboBox?
public class JobTypeList : ObservableCollection<JobType> {
public void SortJobTypes() {
var sortableList = new List<JobType>(this);
sortableList.Sort((x, y) => x.Name.CompareTo(y.Name));
//this works but it creates a bug in the select for JobTypes
for (int i = 0; i < sortableList.Count; i++) {
this.Move(this.IndexOf(sortableList[i]), i);
}
}
And in the XAML
<ComboBox Grid.Column="0" SelectionChanged="JobTypeComboBox_SelectionChanged"
Name="JobTypeComboBox"
ItemsSource="{Binding Path=AllJobTypes}"
DisplayMemberPath="Name"
SelectedValuePath="Name"
SelectedValue="{Binding
Path=JobConfig.SelectedJobType.Name}" />

Instead of sorting the collection in the view model, you should bind the ComboBox's ItemsSource to a CollectionViewSource, where you can specify a SortDescription:
<Window ...
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
...>
<Window.Resources>
<CollectionViewSource x:Key="cvs" Source="{Binding AllJobTypes}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Name"/>
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
</Window.Resources>
...
<ComboBox ItemsSource="{Binding Source={StaticResource cvs}}"
DisplayMemberPath="Name"
SelectedValuePath="Name"
SelectedValue="{Binding JobConfig.SelectedJobType.Name}"/>
...
</Window>
For further information see How to: Sort and Group Data Using a View in XAML

Here's a version using ItemsSource/SelectedItem. Note that you can add a new item to the list and sort it without losing the currently selected item in the view.
The window
<Window
x:Class="SortingAList.MainWindow"
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:local="clr-namespace:SortingAList"
mc:Ignorable="d"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox
Text="{Binding NewJobType, Delay=1000}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="200" />
<ComboBox
Grid.Row="1"
ItemsSource="{Binding JobTypes}"
SelectedItem="{Binding SelectedJobType}"
DisplayMemberPath="Name"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="200" />
</Grid>
</Window>
The code
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
}
public class Notifier : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void Notify([CallerMemberName]string property = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
}
}
public class ViewModel : Notifier
{
private JobType _selectedJobType;
private string _newJobType;
public JobTypeList JobTypes { get; private set; }
public JobType SelectedJobType { get => _selectedJobType; set { _selectedJobType = value; Notify(); } }
public string NewJobType { get => _newJobType; set { _newJobType = value; Notify(); AddNewJobType(value); } }
public ViewModel()
{
JobTypes = new JobTypeList();
JobTypes.Add(new JobType { Name = "Butcher" });
JobTypes.Add(new JobType { Name = "Baker" });
JobTypes.Add(new JobType { Name = "LED maker" });
}
private void AddNewJobType(string name)
{
if(JobTypes.Any(x => x.Name == name)) return;
JobTypes.Add(new JobType { Name = name });
JobTypes.SortJobTypes();
}
}
public class JobType : Notifier
{
private string _name;
public string Name { get => _name; set { _name = value; Notify(); } }
}
Using your JobTypesList
public class JobTypeList : ObservableCollection<JobType>
{
public void SortJobTypes()
{
var sortableList = new List<JobType>(this);
sortableList.Sort((x, y) => x.Name.CompareTo(y.Name));
//this works but it creates a bug in the select for JobTypes
for(int i = 0; i < sortableList.Count; i++)
{
this.Move(this.IndexOf(sortableList[i]), i);
}
}
}

Databinding controls to properties of ComboBoxItem

I am trying to have a WPF window with a ComboBox, with which you select an item, and then use TextBoxes below to edit the properties of the currently selected item, eg Name and Age.
How do I do this with Data Binding, ie. to bind the name TextBox to the Name property of the currently selected item in the ComboBox?
My XAML is
<Window x:Class="BindingTest001.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>
<TextBox HorizontalAlignment="Left" Height="23" Margin="10,75,0,0" TextWrapping="Wrap" Text="{Binding Path=CURR.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="497"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="10,103,0,0" TextWrapping="Wrap" Text="{Binding Path=CURR.Age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="120"/>
<ComboBox ItemsSource="{Binding Path=MO}" SelectedValue="{Binding Path=CURR, Mode=TwoWay}" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="497" Name="MyComboBox"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="322,181,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
</Window>
Where my code behind is
public partial class MainWindow : Window
{
ObservableCollection<myObj> mo;
public MainWindow()
{
InitializeComponent();
mo = new ObservableCollection<myObj>();
mo.Add(new myObj("Test1", 2));
var ct = new MainWindowDatacontext(this);
this.DataContext = ct;
this.MyComboBox.SelectedIndex = 0;
}
private class MainWindowDatacontext : INotifyPropertyChanged
{
MainWindow parent;
myObj curr;
public MainWindowDatacontext(MainWindow mainWindow)
{
this.parent = mainWindow;
}
public ObservableCollection<myObj> MO
{
get
{
return parent.mo;
}
}
public myObj CURR
{
get
{
return curr;
}
set
{
this.curr = value;
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void executePropertyChanged(string s)
{
if(PropertyChanged!=null)
{
PropertyChanged(this.parent, new PropertyChangedEventArgs(s));
}
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
mo.Add(new myObj("Test2", 10));
}
}
But the Data Binding only works for the ComboBox- the TextBoxes never bind to anything.
myObj is very simple:
public class myObj : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void propertyChanged(string s)
{
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(s));
}
}
string name;
public string Name
{
get { return name; }
set {
name = value;
propertyChanged("Name");
}
}
int age;
public myObj(string p1, int p2)
{
this.name = p1;
this.age = p2;
}
public int Age
{
get { return age; }
set { age = value;
propertyChanged("Age");
}
}
public override string ToString()
{
return String.Format("{0}, {1}", name, age);
}
}

Because you want to bind to the property of another element in your application you should use Binding.ElementName Property. So Change your TextBox's Binding like this:
Text="{Binding SelectedItem.Name, ElementName=MyComboBox,
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
Text="{Binding SelectedItem.Age, ElementName=MyComboBox,
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

You are using SelectedValue in your ComboBox rather than SelectedItem.
The former is for when you want to select one property out of the object in the ComboBox's ItemsSource rather than the object itself. It's used in conjunction with the SelectedValuePath.
As you want to edit more than one property of the selected item you need to use SelectedItem.

How to set ComboBox selected item in ModelView?

I have static combo box items. My XAML look like this:
<ComboBox x:Name="comboBox" SelectedItem="{Binding MySelectedItem}" HorizontalAlignment="Left" Margin="58,7,0,0" VerticalAlignment="Top" Width="120">
<ComboBoxItem Name="cbi1">Item 1</ComboBoxItem>
<ComboBoxItem Name="cbi2">Item 2</ComboBoxItem>
<ComboBoxItem Name="cbi3">Item 3</ComboBoxItem>
</ComboBox>
Model View:
// How to set initial value here or in constructor?
private ComboBoxItem _mySelectedItem;
public ComboBoxItem MySelectedItem
{
get
{
return _mySelectedItem;
}
set
{
Console.WriteLine("Value = {0}", (value as ComboBoxItem).Name);
}
}
How can I set selected item of combo box having Name? I would like to set selected item in MV constructor, after reading from persistent storage.

What you need to add is the SelectedValuePath="Name" to your combo box. Then in your ViewModel constructor, add your startup Item like this. I made my SelectedDropDown property a string, not sure if you have to have it as a ComboBoxItem in your case.
public MainFormViewModel()
{
SelectedDropDown = "cbi1";
}
private string _SelectedDropDown;
public string SelectedDropDown
{
get { return _SelectedDropDown; }
set { _SelectedDropDown = value; NotifyPropertyChanged("SelectedDropDown"); }
}
Here is the ComboBox Code, tested it and it works fine.
<ComboBox x:Name="comboBox1" HorizontalAlignment="Left" Margin="114,213,0,0" SelectedValuePath="Name" SelectedValue="{Binding SelectedDropDown }" VerticalAlignment="Top" Width="120" Grid.Column="1">
<ComboBoxItem Name="cbi1">Item 1</ComboBoxItem>
<ComboBoxItem Name="cbi2">Item 2</ComboBoxItem>
<ComboBoxItem Name="cbi3">Item 3</ComboBoxItem>
</ComboBox>

You must create your collection from ViewModel in order to use SelectedItem
*.xaml (View)
<ComboBox x:Name="comboBox" SelectedValue="{Binding MySelectedItem, Mode=TwoWay}" ItemsSource="{Binding MyCollection}" Height="25"/>
*.cs (ViewModel)
public class MainViewModel : INotifyPropertyChanged
{
public MainViewModel()
{
for (int i = 0; i < 10; i++)
{
MyCollection.Add("Item " + i);
}
MySelectedItem = "Item 2";
}
private ObservableCollection<string> myCollection = new ObservableCollection<string>();
public ObservableCollection<string> MyCollection
{
get
{
return myCollection;
}
set
{
myCollection = value;
NotifyPropertyChanged("MyCollection");
}
}
private string _mySelectedItem;
public string MySelectedItem
{
get
{
return _mySelectedItem;
}
set
{
_mySelectedItem = value;
NotifyPropertyChanged("MySelectedItem");
}
}
//NotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}

How to bind a combobox's item background color to a grid's background color?

<Grid x:Name="BackgroundGrid" Background="Navy">
<ComboBox x:Name="BackgroundColor" Grid.Row="1" HorizontalAlignment="Right" Height="33" Width="66" VerticalAlignment="Center" Margin="0,34,10,33" PlaceholderText="" BorderThickness="0" SelectionChanged="BackgroundColor_SelectionChanged">
<ComboBoxItem Background="Navy"/>
<ComboBoxItem Background="Red"/>
<ComboBoxItem Background="Yellow"/>
<ComboBoxItem Background="Blue"/>
<ComboBoxItem Background="Green"/>
</ComboBox>
Notice that it's in win8.1, I have searched solutions from internet but I can't use them in win8.1.

I think the most workable approach would be a ViewModel with:
updates on selection of your combo with a TwoWay binding to SelectedItem
the grid that listens to the changes of the SelectedItem of the ViewModel
This would require an extra class for the ItemSource of your combobox, as such
public class BackgroundColorItem : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string propertyName)
{
var localEvent = PropertyChanged;
if (localEvent != null)
{
localEvent.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
private string title;
public string Title
{
get
{
return title;
}
set
{
if (string.Equals(title, value))
{
return;
}
title = value;
RaisePropertyChanged("Title");
}
}
private Brush brush;
public Brush Brush
{
get
{
return brush;
}
set
{
if (Brush.Equals(brush, value))
{
return;
}
brush = value;
RaisePropertyChanged("Brush");
}
}
}
This class can then be used inside the ViewModel to fill the ItemsSource of your combobox, as such:
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string propertyName)
{
var localEvent = PropertyChanged;
if (localEvent != null)
{
localEvent.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
private readonly IList<BackgroundColorItem> items = new ObservableCollection<BackgroundColorItem>();
public IList<BackgroundColorItem> Items
{
get
{
return items;
}
}
private BackgroundColorItem selectedItem;
public BackgroundColorItem SelectedItem
{
get
{
return selectedItem;
}
set
{
if (Object.Equals(selectedItem, value))
{
return;
}
selectedItem = value;
RaisePropertyChanged("SelectedItem");
}
}
public ViewModel()
{
// add the basic items to the ItemCollection during load
Items.Add(new BackgroundColorItem { Title = "Navy", Brush = Brushes.Navy });
Items.Add(new BackgroundColorItem { Title = "Red", Brush = Brushes.Red });
Items.Add(new BackgroundColorItem { Title = "Yellow", Brush = Brushes.Yellow });
Items.Add(new BackgroundColorItem { Title = "Blue", Brush = Brushes.Blue });
Items.Add(new BackgroundColorItem { Title = "Green", Brush = Brushes.Green });
}
And in your XAML, you could add the ViewModel as a resource (if necessary, add a new xmlns tag for it (like my xmlns:local)
And then bind the ItemsSource of the ComboBox to the ViewModel.Items
<Window x:Class="Win8._1Binding.MainWindow"
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:local="clr-namespace:Win8._1Binding"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:ViewModel x:Key="ScreenViewModel" />
</Window.Resources>
<Grid Background="{Binding SelectedItem.Brush,Source={StaticResource ScreenViewModel},Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ComboBox ItemsSource="{Binding Items,Source={StaticResource ScreenViewModel}}" DisplayMemberPath="Title"
SelectedItem="{Binding SelectedItem,Source={StaticResource ScreenViewModel},Mode=TwoWay}">
<ComboBox.Resources>
<Style TargetType="ComboBoxItem">
<Setter Property="Background" Value="{Binding Brush}" />
</Style>
</ComboBox.Resources>
</ComboBox>
</Grid>
</Window>
The DisplayMember Path sets the property that is shown inside your ComboBox, the Style resource inside the ComboBox automatically outfits each ComboBoxItem with the Background color binding on the Brush property of BackgroundColorItem.
This keeps your CodeBehind clean of any extra code, the BackgroundColorItem class you could use at other places in your program, and by changing how the values are added to the Items collection inside the ViewModel you could also implement some loading / saving of values

Selecting all CheckBoxes in ListBox not displayed properly

If I press a button "Check All" all CheckBoxes in a ListBox should be selected and added to a list where all checked items are stored. The problem is that only the visible checkboxes are updated properly.
Here is my CheckBoxListItem class:
public class Cbli : INotifyPropertyChanged
{
private string _name;
private Boolean _isChecked;
public string Name
{
get { return _name; }
set { _name = value; OnPropertyChanged("Name"); }
}
public bool IsChecked
{
get { return _isChecked; }
set { _isChecked = value; OnPropertyChanged("IsChecked"); }
}
public override string ToString()
{
return string.Format("Name: {0}, IsChecked: {1}", _name, _isChecked);
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
XAML:
<Window x:Class="ListBoxBuggy.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:listBoxBuggy="clr-namespace:ListBoxBuggy"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}" WindowStartupLocation="CenterScreen">
<Window.Resources>
<DataTemplate x:Key="CheckBoxListItemTemplateNew" DataType="listBoxBuggy:Cbli">
<CheckBox Name="CheckBox"
IsChecked="{Binding IsChecked}"
Checked="Update"
Unchecked="Update"
FontSize="14">
<TextBlock Text="{Binding Name}" FontSize="14"/>
</CheckBox>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="168"
ItemsSource="{Binding MyItemList}"
ItemTemplate="{StaticResource CheckBoxListItemTemplateNew}"
/>
<ListBox HorizontalAlignment="Left" Height="290" Margin="297,10,0,0" VerticalAlignment="Top" Width="195"
ItemsSource="{Binding CheckedItems}"
/>
<Button Content="Check All" HorizontalAlignment="Left" Margin="173,10,0,0" VerticalAlignment="Top" Width="75" Click="Check_All"/>
<Button Content="Uncheck All" HorizontalAlignment="Left" Margin="173,52,0,0" VerticalAlignment="Top" Width="75" Click="Uncheck_All"/>
</Grid>
</Window>
And the code behind:
public partial class MainWindow : Window
{
public ObservableCollection<Cbli> MyItemList { get; set; }
public ObservableCollection<Cbli> CheckedItems { get; set; }
public MainWindow()
{
// add dummy data
MyItemList = new ObservableCollection<Cbli>();
CheckedItems = new ObservableCollection<Cbli>();
for (int i = 0; i < 20; i++)
{
Cbli cbli = new Cbli
{
Name = "Test " + i,
IsChecked = i < 5 || i > 15
};
MyItemList.Add(cbli);
if (cbli.IsChecked)
CheckedItems.Add(cbli);
}
InitializeComponent();
}
private void Update(object sender, RoutedEventArgs e)
{
CheckBox selectedCheckbox = (CheckBox)sender;
Cbli cbli = (Cbli)selectedCheckbox.DataContext;
if (cbli.IsChecked)
CheckedItems.Add(cbli);
else
CheckedItems.Remove(cbli);
}
private void Check_All(object sender, RoutedEventArgs e)
{
foreach (Cbli cbli in MyItemList)
cbli.IsChecked = true;
}
private void Uncheck_All(object sender, RoutedEventArgs e)
{
foreach (Cbli cbli in MyItemList)
cbli.IsChecked = false;
}
}
After scrolling down, so all 20 items on the left list are visible and clicking then the "check all" button is working pretty well, but I don't know why.
Can someone please tell me what is wrong with that implementation? Checking/unchecking a single CheckBox is working, but the Check/Uncheck all buttons aren't working properly.

The comment from Blam (setting VirtualizingStackPanel.VirtualizationMode="Standard" was nearly the solution.
Add VirtualizingStackPanel.IsVirtualizing="False":
<ListBox HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="168"
ItemsSource="{Binding MyItemList}"
ItemTemplate="{StaticResource CheckBoxListItemTemplateNew}"
VirtualizingStackPanel.IsVirtualizing="False" />
This solved the problem (at least for me)