We Keep Coding

How to update UI from List inside ObservableCollection?

I have ObservableCollection of DeviceInformation which is added in MainWindowViewModel and linked with DataContext.
public partial class MainWindow : Window
{
MainWindowViewModel viewModel = new MainWindowViewModel();
public MainWindow()
{
InitializeComponent();
this.DataContext = viewModel;
}
}
Here is the MainWindowViewModel:
public class MainWindowViewModel : ViewModelBase
{
private ObservableCollection<DeviceInformation> allDeviceInfo = new ObservableCollection<DeviceInformation>();
public MainWindowViewModel()
{
// here some of the commands
}
public ObservableCollection<DeviceInformation> AllDeviceInfo
{
get { return allDeviceInfo; }
set
{
allDeviceInfo = value;
this.RaisePropertyChanged(nameof(AllDeviceInfo));
}
}
}
The RaisePropertyChanged is done with implementing ViewModelBase which looks like this:
public abstract class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler? PropertyChanged;
protected void RaisePropertyChanged(string propertyName)
{
this.RaisePropertyChanged(new PropertyChangedEventArgs(propertyName));
}
protected virtual void RaisePropertyChanged(PropertyChangedEventArgs e)
{
var handler = this.PropertyChanged;
if (handler != null)
{
handler(this, e);
}
}
}
Inside my DeviceInformation I have a List of SyntaxMessages:
public class DeviceInformation : ViewModelBase
{
private List<SyntaxMessages> list = new List<SyntaxMessages>();
private string test = "";
public List<SyntaxMessages> ComConsoleMessages{
get { return list; } // get method
set
{
list = value;
RaisePropertyChanged(nameof(ComConsoleMessages));
} // set method
}
public string Test{
get { return test; } // get method
set
{
test = value;
RaisePropertyChanged(nameof(Test));
} // set method
}
}
This is how the SyntaxMessages looks:
public class SyntaxMessages : ViewModelBase
{
#region private values
private string message = "";
private string status = "";
private string color = "Transparent";
#endregion
#region Public values
public string Message {
get { return message; }
set
{
message = value;
RaisePropertyChanged(nameof(Message));
}
}
public string Status {
get { return status; }
set
{
status = value;
RaisePropertyChanged(nameof(Status));
}
}
public string Color {
get { return color; }
set
{
color = value;
RaisePropertyChanged(nameof(Color));
}
}
#endregion
}
So when I running my program and connecting device to it will collect and add information the the DeviceInformation and this will be added to ObervableCollection of DeviceInformation. This will update my MainTabControl by adding new tab and binding many strings like "Test" (there is more then one) to the TextBoxes, and also update the SubTabControl which is inside the main one. Inside both of the TabItems inside SubTabControl I also have a ListView to which I want link the List of SyntaxMessages this looks like this:
<ListView
Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="5"
MinHeight="40"
Padding="0"
Margin="2"
ItemsSource="{Binding ComConsoleMessages, UpdateSourceTrigger=PropertyChanged}">
<ListView.View>
<GridView
AllowsColumnReorder="False">
<GridViewColumn
DisplayMemberBinding="{Binding Message}"
Header="Message" />
<GridViewColumn
Header="Status">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Status}" Foreground="{Binding Color}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Problem
All works fine except a ListView. When I add some SyntaxMessages to the List of SyntaxMessages called ComConsoleMessages then I have to switch between SubTabControl tabs(SubTabItem1/2) to see ListView updated. I want to update ListView every single time when new message is added to the List of SyntaxMessages which is inside DeviceInfromation which is indside ObservableCollection of DeviceInfromations that is linked via MainWindowViewMode to the window DataContext.
Here is the view:

Set up a binding between two properties in code behind

In my view, I have a ListBox with some templated items that contain buttons.
<ListBox x:Name="MyListBox" ItemTemplate="{DynamicResource DataTemplate1}"
ItemsSource="{Binding MyItems}">
</ListBox>
And the template for generated items:
<DataTemplate x:Key="DataTemplate1">
<StackPanel Orientation="Horizontal">
<Button Width="50" Click="Button_Click" />
</StackPanel>
</DataTemplate>
When user clicks a button on one of those ListBox items, I want to send the index of that ListBox item to my ViewModel.
So figured to use Binding as it seems to be the way in MVVM. But I'm struggling to set up a binding in code between two properties.
My View code is as follows:
public partial class ItemView : UserControl
{
ViewModel.ItemViewModel VM;
public ItemView()
{
InitializeComponent();
VM = new ViewModel.ItemViewModel();
this.DataContext = VM;
}
private int clickedItemIndex;
public int ClickedItemIndex { get => clickedItemIndex; set => clickedItemIndex = value; }
private void Button_Click(object sender, RoutedEventArgs e)
{
var ClickedItem = (sender as FrameworkElement).DataContext;
ClickedItemIndex = MyListBox.Items.IndexOf(ClickedItem);
}
}
I get the index and set it to ClickedItemIndex property,
I also have property in my ViewModel:
public int SomeInt { get; set; }
Now how do I set up a binding between these two properties?
I'm quite new to MVVM and still learning it. So, maybe this not the correct approach. But I need to have a way for each individual listbox item to be able to call upon an effect in more global viewmodel. For example, if I wanted to have a "Remove" button on each of the listbox items, I would somehow need to send the index to the viewmodel and call the removeItem method with index as the parameter. Or is there a better way to do similar things?

I have a sample app created just for this scenario. I know it seems a lot of code at first glance. Copy this code in your project, that will help debug and get a hang of it(MVVM, databinding, commands and so on).
usercontrol.xaml
<UserControl x:Class="WpfApplication1.UserControl1"
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"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.Resources>
<DataTemplate DataType="{x:Type local:Model}">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Name}"/>
<Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.UpdateCommand}"
CommandParameter="{Binding}"
Content="Update"/>
<Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.RemoveCommand}"
CommandParameter="{Binding}"
Content="Remove"/>
</StackPanel>
</DataTemplate>
</Grid.Resources>
<ListBox ItemsSource="{Binding Models}">
</ListBox>
</Grid>
usercontrol.cs
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
DataContext = new ViewModel();
}
}
View model
public class ViewModel : INotifyPropertyChanged
{
private Models _Models;
public Models Models
{
get { return _Models; }
set { _Models = value;
PropertyChanged(this, new PropertyChangedEventArgs(nameof(Models)));
}
}
public ViewModel()
{
Models = new Models();
UpdateCommand = new Command(o => true, UpdateItem);
RemoveCommand = new Command(o => true, RemoveItem);
}
void RemoveItem(object item)
{
Model m = (item as Model);
Models.Remove(m);
}
void UpdateItem(object item)
{
Model m = (item as Model);
m.Name = m.Name + " updated";
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
public ICommand UpdateCommand { get; private set; }
public ICommand RemoveCommand { get; private set; }
}
Icommand implementation
public class Command : ICommand
{
private readonly Func<object, bool> _canExe;
private readonly Action<object> _exe;
public Command(Func<object,bool> canExecute,Action<object> execute)
{
_canExe = canExecute;
_exe = execute;
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
public bool CanExecute(object parameter)
{
return _canExe(parameter);
}
public void Execute(object parameter)
{
_exe(parameter);
}
}
Model and a collection of models
public class Models : ObservableCollection<Model>
{
public Models()
{
Add(new Model ());
Add(new Model ());
Add(new Model ());
Add(new Model ());
}
}
public class Model : INotifyPropertyChanged
{
static int count = 0;
public Model()
{
Name = "Model "+ ++count;
}
private string _Name;
public string Name
{
get { return _Name; }
set { _Name = value;
PropertyChanged(this, new PropertyChangedEventArgs(nameof(Name)));
}
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

You don't need to use a Button in order to select the item. When you click/tap on the item it will get automatically selected.
Then simply bind ListBox.SelectedIndex to your view model property SomeInt and it will update on every selection.
Data binding overview in WPF
You can also get the item itself by binding ListBox.SelectedItem to your view model.
You can handle new values by invoking a handler from the property's set method:
ViewModel.cs
class ViewModel : INotifyPropertyChanged
{
private int currentItemIndex;
public int CurrentItemIndex
{
get => this.currentItemIndex;
set
{
this.currentItemIndex = value;
OnPropertyChanged();
// Handle property changes
OnCurrentItemIndexChanged();
}
}
private MyItem currentItem;
public MyItem CurrentItem
{
get => this.currentItem;
set
{
this.currentItem = value;
OnPropertyChanged();
}
}
protected virtual void OnCurrentItemIndexChanged()
{
// Handle the new this.CurrentItemIndex value
}
// Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
ItemView .xaml
<UserControl>
<UserControl.DataContext>
<ViewModel />
</UserControl.DataContext>
<ListBox ItemsSource="{Binding MyItems}"
SelectedIndex="{Binding CurrentItemIndex}"
SelectedItem="{Binding CurrentItem}" />
</UserControl>

Databind itemsource of DataGridComboBoxColumn to collection in view model does not work

What I am trying to do here is databind the Itemsource of a DataGridComboBoxColumn to a collection of strings declared as property of my item view model.
The Datagrid itself is bound to another viewmodel which has a collection of viewModels that represent the rows on the datagrid.
All my other bindings work properly. The collection is also filled, but the combobox remains empty.
XAML:
<Window.Resources>
<ResourceDictionary>
<local:GeneralDataGridViewModel x:Key="generalDataGridVm"/>
</ResourceDictionary>
</Window.Resources>
<Grid>
<DataGrid DataContext="{StaticResource generalDataGridVm}"
ItemsSource="{Binding Collection}">
<DataGrid.Columns>
<DataGridComboBoxColumn x:Name="chbCodes"
Header="Code"
ItemsSource="{Binding Path=DataContext.Collection, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
C# ItemViewModel:
public class ItemViewModel : INotifyPropertyChanged
{
private ObservableCollection<string> _collection;
public ObservableCollection<string> Collection
{
get
{
return _collection;
}
}
public Model Model { get; set; }
public string Code
{
get { return Model.Code; }
set { Model.Code = value; }
}
public ItemViewModel()
{
}
public ItemViewModel(Model model)
{
Model = model;
_collection = new ObservableCollection<string>();
_collection.Add(model.Code);
Model.PropertyChanged += Model_PropertyChanged;
}
public void Model_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
}
}
c# DataGridViewModel:
public class GeneralDataGridViewModel
{
private ObservableCollection<ItemViewModel> _collection;
public ObservableCollection<ItemViewModel> Collection
{
get { return _collection; }
set
{
_collection = value;
NotifyPropertyChanged("Collection");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
public GeneralDataGridViewModel()
: base()
{
_collection = new ObservableCollection<ItemViewModel>();
}
public GeneralDataGridViewModel(List<Model> models)
{
_collection = new ObservableCollection<ItemViewModel>((from m in models
select new ItemViewModel(m)).ToList());
}
}
C# Model:
public class Model: INotifyPropertyChanged
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(String property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
public override string ToString()
{
return Code;
}
}

The code you have posted does not compile, but looking at it the issue might be with the data context, which you are setting to a static resource. If you are going to do this, the view model must be in your resource dictionary. The bindings in XAML are fine, see below for an example of this working:
XAML:
<Window.Resources>
<ResourceDictionary>
<local:GeneralDataGridViewModel x:Key="generalDataGridVm"/>
</ResourceDictionary>
</Window.Resources>
<StackPanel Orientation="Vertical">
<DataGrid DataContext="{StaticResource generalDataGridVm}" Name="DataGrid1" ItemsSource="{Binding Collection}">
<DataGrid.Columns>
<DataGridComboBoxColumn x:Name="chbCodes"
Header="Code"
ItemsSource="{Binding Path=DataContext.Collection, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
</DataGrid.Columns>
</DataGrid>
</StackPanel>
By declaring generalDataGridVm in XAML, the constructor is called in XAML, let's assume that construction supplies the values for the collection:
public GeneralDataGridViewModel() : base()
{
_collection = new ObservableCollection<ItemViewModel>();
_collection.Add(new ItemViewModel(new Model("code1")));
_collection.Add(new ItemViewModel(new Model("code2")));
_collection.Add(new ItemViewModel(new Model("code3")));
_collection.Add(new ItemViewModel(new Model("code4")));
}
With this code, it results in a populated list:
So I think you just need to make sure that you are declaring your view model properly (I would suggest not creating this in XAML unless there is some good reason).
Then ensure that the collection is kept up to date properly in that particular instance of your view model.

How to update a List when binded to a ListView

I have a ListView which binds each list view item to a Class A which has a List
<Page
DataContext="{Binding MainViewModel , Source={StaticResource Locator}}"
>
<ListView ItemsSource="{Binding A.List}" >
<ListView.ItemTemplate>
....
</ListView.ItemTemplate>
</ListView>
</Page>
And in my ViewModel, I have the class 'A' and it has a property List
public class MainViewModel : ViewModelBase {
private A _a;
public A A {
get {
return _a;
}
}
}
public class A
{
private IList<IList> _lists;
IList<int> List {
get {
return _lists;
};
set {
_lists = value;
RaisePropertyChanged("List");
}
}
In the set() method I has called 'RaisePropertyChanged()' whenever the List is set.
But when I run it, the ListView content does not get update.
Should I raise RaisePropertyChanged("List") or RaisePropertyChanged("A.List") (like what I put in {Binding A.List] in my xaml? In my case, I set the List to another instance of a List.

Try this see if it works.
public class A : INotifyPropertyChanged
{
private IList<int> _lists;
IList<int> List {
get {
return _lists;
};
set {
_lists = value;
OnPropertyChanged("List");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

TextBlock doesn't show Text even after Binding

I wanted to add a list of text to ListBox as soon as the user press the Button..Each ListItem contains TextBlock to which am binding the data..
But the TextBlock is not showing the text! Though I could see the Background color of each Item being inserted!
<StackPanel>
<Button Content="CLICK" Click="Button_Click"></Button>
<ListBox x:Name="dataList" Foreground="Red" Background="Blue">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Feed}" FontSize="28"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
My code behind looks like
public partial class MainPage : UserControl
{
ObservableCollection<Data> data;
public MainPage()
{
InitializeComponent();
data = new ObservableCollection<Data>();
dataList.ItemsSource = data;
}
class Data :INotifyPropertyChanged
{
public Data(String s)
{
Feed = s;
}
private string _feed;
public String Feed
{
get { return _feed; }
set { _feed = value; NotifyPropertyChanged("Feed"); }
}
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
data.Add(new Data("News1"));
data.Add(new Data("News2"));
data.Add(new Data("News2"));
}
}
Thanks..

Your class Data needs to be public else it would have private access specifier by default..
So it should be
public class Data.....
Everything else seems to be ok..