We Keep Coding

Binding and changing a listView dynamically using MVVM

I have an object consisting of a string and a string of arrays. I'm binding the string to a comboBox but what I want to also do is bind the array of that object to a listview and have it change dynamically depending on combox box value. The values in the array aren't populating, only the dataType of the array. I'm not married to using a listview but I thought it would be easiest.
Model -
namespace DataBinding_WPF.Model
{
public class ExampleModel { }
public class Example : INotifyPropertyChanged
{
private string _name;
private string[] _ids;
public string Name
{
get => _name;
set
{
if (_name != value)
{
_name = value;
RaisePropertyChanged("Name");
}
}
}
public string[] IDs
{
get => _ids;
set
{
if (_ids != value)
{
_ids = value;
RaisePropertyChanged("IDs");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new
PropertyChangedEventArgs(property));
}
}
}
ViewModel -
namespace DataBinding_WPF.ViewModel
{
public class ExampleViewModel
{
public ObservableCollection<Example> Examples
{
get;
set;
}
public void LoadExample()
{
ObservableCollection<Example> examples = new ObservableCollection<Example>();
examples.Add(new Example { Name = "Mark", IDs = new string[] { "123", "456" }});
examples.Add(new Example { Name = "Sally", IDs = new string[] { "789","101112" }});
Examples = examples;
}
}
}
XAML -
<Grid>
<StackPanel HorizontalAlignment = "Left" >
<ComboBox HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="120"
ItemsSource="{Binding Path=Examples}"
SelectedItem="{Binding Path=Name, Mode=TwoWay}"
DisplayMemberPath="Name"/>
<ListView x:Name="myListView"
ItemsSource="{Binding Path=Examples}"
SelectedValue="{Binding Path=IDs}"
Height="200" Margin="0,50,0,0"
Width="Auto"
VerticalAlignment="Top"
Background="AliceBlue">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox
Name="myCheckBox"
IsChecked="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListViewItem}}"
Margin="5, 0"/>
<TextBlock Text= "{Binding Path=IDs}" FontWeight="Bold" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>

If you want to show in ListBox the Ids of selected item in comboBox.
You need to add SelectedItem property to your VM which also must implement INotifyPropertyChanged interface.
namespace DataBinding_WPF.ViewModel
{
public class ExampleViewModel : INotifyPropertyChanged
{
public ObservableCollection<Example> Examples
{
get;
set;
}
// SelectedItem in the ComboBox
// SelectedItem.Ids will be ItemsSource for the ListBox
private Example _selectedItem;
public Example SelectedItem
{
get => _selectedItem;
set {
_selectedItem = value;
OnPropertyChanged(nameof(SelectedItem));
}
}
// SelectedId in ListView
private string _selectedId;
public string SelectedId
{
get => _selectedId;
set {
_selectedId= value;
OnPropertyChanged(nameof(SelectedId));
}
}
public void LoadExample()
{
ObservableCollection<Example> examples = new ObservableCollection<Example>();
examples.Add(new Example { Name = "Mark", IDs = new string[] { "123", "456" }});
examples.Add(new Example { Name = "Sally", IDs = new string[] { "789","101112" }});
Examples = examples;
}
}
}
XAML
<Grid>
<StackPanel HorizontalAlignment = "Left" >
<ComboBox HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="120"
ItemsSource="{Binding Path=Examples}"
SelectedItem="{Binding SelectedItem}"
DisplayMemberPath="Name"/>
<ListView x:Name="myListView"
ItemsSource="{Binding SelectedItem.Ids}"
SelectedItem="{Binding SelectedId}"
Height="200" Margin="0,50,0,0"
Width="Auto"
VerticalAlignment="Top"
Background="AliceBlue">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox
Name="myCheckBox"
IsChecked="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListViewItem}}"
Margin="5, 0"/>
<TextBlock Text= "{Binding}" FontWeight="Bold" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>

There could several solutions to your case but most common and proprietary way is to use ValueConverter.
For this example i'll assume you have grid in the Window control. You need to add static resource:
<Window.Resources>
<local:ArrayValueConverter x:Key="arrayConverter"/>
</Window.Resources>
Then in your ListView's DataTemplate add Converter:
<TextBlock Text= "{Binding Path=IDs, Converter={StaticResource arrayConverter}}" FontWeight="Bold" />
ValueConverter himself:
public class ArrayValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is string[] arr) {
return string.Join(',', arr);
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}

Access and edit Image inside Button on Button click in code behind

I have a Listview built like this:
<ListView x:Name="listprimi" RelativePanel.Below="primi" ItemsSource="{x:Bind obs_prims2}" HorizontalAlignment="Center" VerticalAlignment="Center">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Tag="{Binding id}" Grid.Column="0" Padding="0" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" Background="White" Click="selectMeal0">
<Image Name="sel0" Width="80" Height="80" Source="Images/ic_uncheck.png" RelativePanel.AlignLeftWithPanel="True" />
</Button>
<Image Width="120" Height="120" Margin="30,0,0,0" Source="{Binding idImg}" RelativePanel.AlignLeftWithPanel="True" />
<TextBlock Text="{Binding descr}" RelativePanel.AlignHorizontalCenterWithPanel="True" Height="100" Name="namemeal" Padding="60,15" Foreground="Gray" FontSize="26.7"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I would like to change the image named "sel0" which is inside the button when the button is clicked. I have set the code behind function selectMeal0 but I have no idea on how to do it.
In addition I would also like to change the images of all the other elements of the list in the same function.
I have tried something like this but it doesn't work.
UPDATE:
This is the class
public class Pasto : INotifyPropertyChanged
{
public string id { get; set; }
public string descr { get; set; }
public ImageSource idImg { get; set; }
private ImageSource imgChecked;
public ImageSource ImgChecked {
get { return imgChecked; }
set
{
if (imgChecked != value)
{
imgChecked = value;
OnPropertyChanged("ImgChecked");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
I've changed the ListView like this:
<ListView x:Name="listprimi" RelativePanel.Below="primi" ItemsSource="{x:Bind obs_prims2}" HorizontalAlignment="Center" VerticalAlignment="Center">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Tag="{Binding id}" Grid.Column="0" Padding="0" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" Background="White" Click="selectMeal0">
<Image Name="sel0" Width="80" Height="80" Source="{Binding ImgChecked}" RelativePanel.AlignLeftWithPanel="True" />
</Button>
<Image Width="120" Height="120" Margin="30,0,0,0" Source="{Binding idImg}" RelativePanel.AlignLeftWithPanel="True" />
<TextBlock Text="{Binding descr}" RelativePanel.AlignHorizontalCenterWithPanel="True" Height="100" Name="namemeal" Padding="60,15" Foreground="Gray" FontSize="26.7"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so that the image I'd like to edit is ImageChecked in the class.
The function selectMeal should change all the images to "unchecked" and then the selected item's image to "checked".

in selectMeal0, you get access to the sender object, which is a Button in this case. The Button have Content property, which in turn containts the Image. At this point you can do anything to the Image.
BUT
you can also bind the source of the image to a property of your model. And make change to the model to update the image.

In order to change Image inside your DataTemplate of your ListView, you should change the necessary item from your collection on button click:
So, you have a collection obs_prims2 as ItemsSource for ListView. Then you need to take the the one item from your collection obs_prims2. For example:
var item=obs_prims2.FirstOrDefault();
then set new Image address:
item.idImg="C:/1.png";
Moreover, your Model class should implement INotifyPropertyChanged interface to show any changes. For example:
public class Book : INotifyPropertyChanged
{
private string title;
public string Title {
get { return title; }
set {
title = value;
OnPropertyChanged("Title");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(String info)
{
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
Update:
To get an item that you want, then you can get item by index, like that
Person person = Persons[1];. For example:
private void FillDataGridByTypeCollection()
{
Persons.Add(new Person() { Id = 1, Name = "Ben" });
Persons.Add(new Person() { Id = 1, Name = "Joseph" });
Persons.Add(new Person() { Id = 1, Name = "Jon" });
Persons.Add(new Person() { Id = 1, Name = "Magnus Montin" });
Persons.Add(new Person() { Id = 1, Name = "Andy" });
Person person = Persons[1];
}
private ObservableCollection<Person> persons = new ObservableCollection<Person>();
public ObservableCollection<Person> Persons
{
get { return persons; }
set { persons = value; }
}
Model:
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
}

WPF C# datagrid combobox on new row won't update datasource (updated!)

This is an example exhibiting the behaviour I'm having trouble with. I have a datagrid which is bound to an observable collection of records in a viewmodel. In the datagrid I have a DataGridTemplateColumn holding a combobox which is populated from a list in the viewmodel. The datagrid also contains text columns. There are some textboxes at the bottom of the window to show the record contents.
<Window x:Class="Customer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Customer"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:SelectedRowConverter x:Key="selectedRowConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<DataGrid x:Name="dgCustomers" AutoGenerateColumns="False"
ItemsSource="{Binding customers}" SelectedItem="{Binding SelectedRow,
Converter={StaticResource selectedRowConverter}, Mode=TwoWay}"
CanUserAddRows="True" Grid.Row="0" SelectionChanged="dgCustomers_SelectionChanged">
<DataGrid.Columns>
<DataGridTemplateColumn Width="Auto" Header="Country">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox x:Name="cmbCountry" ItemsSource="{Binding DataContext.countries,
RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
DisplayMemberPath="name" SelectedValuePath="name" Margin="5"
SelectedItem="{Binding DataContext.SelectedCountry,
RelativeSource={RelativeSource AncestorType={x:Type Window}}, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}" SelectionChanged="cmbCountry_SelectionChanged" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Name" Binding="{Binding name}" Width="1*"/>
<DataGridTextColumn Header="Phone" Binding="{Binding phone}" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
<Grid x:Name="grdDisplay" DataContext="{Binding ElementName=dgCustomers}" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="2" Content="Country:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Label Grid.Column="4" Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<BulletDecorator Grid.Column="0">
<BulletDecorator.Bullet>
<Label Content="Name:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtId" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.name}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="1">
<BulletDecorator.Bullet>
<Label Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtCode" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.countryCode}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="2">
<BulletDecorator.Bullet>
<Label Content="Phone:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtPhone" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.phone}" Margin="5,5,5,5"/>
</BulletDecorator>
</Grid>
</Grid>
</Window>
Initially there are no records so the datagrid is empty and shows just one line containing the combobox. If the user enters data into the text columns first then a record is added to the collection and the combobox value can be added to the record. However, if the user selects the combobox value first, then the value disappears when another column is selected. How do I get the combobox data added to the record if it is selected first?
Codebehind:
public partial class MainWindow : Window
{
public GridModel gridModel { get; set; }
public MainWindow()
{
InitializeComponent();
gridModel = new GridModel();
//dgCustomers.DataContext = gridModel;
this.DataContext = gridModel;
}
private void cmbCountry_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBox c = sender as ComboBox;
Debug.Print("ComboBox selection changed, index is " + c.SelectedIndex + ", selected item is " + c.SelectedItem);
}
}
The Record class:
public class Record : ViewModelBase
{
private string _name;
public string name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("name");
}
}
private string _phone;
public string phone
{
get { return _phone; }
set
{
_phone = value;
OnPropertyChanged("phone");
}
}
private int _countryCode;
public int countryCode
{
get { return _countryCode; }
set
{
_countryCode = value;
OnPropertyChanged("countryCode");
}
}
}
Country class:
public class Country : ViewModelBase
{
private string _name;
public string name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("name");
}
}
private int _id;
public int id
{
get { return _id; }
set
{
_id = value;
OnPropertyChanged("id");
}
}
private int _code;
public int code
{
get { return _code; }
set
{
_code = value;
OnPropertyChanged("code");
}
}
public override string ToString()
{
return _name;
}
}
GridModel:
public class GridModel : ViewModelBase
{
public ObservableCollection<Record> customers { get; set; }
public List<Country> countries { get; set; }
public GridModel()
{
customers = new ObservableCollection<Record>();
countries = new List<Country> { new Country { id = 1, name = "England", code = 44 }, new Country { id = 2, name = "Germany", code = 49 },
new Country { id = 3, name = "US", code = 1}, new Country { id = 4, name = "Canada", code = 11 }};
}
private Country _selectedCountry;
public Country SelectedCountry
{
get
{
return _selectedCountry;
}
set
{
_selectedCountry = value;
_selectedRow.countryCode = _selectedCountry.code;
OnPropertyChanged("SelectedRow");
}
}
private Record _selectedRow;
public Record SelectedRow
{
get
{
return _selectedRow;
}
set
{
_selectedRow = value;
Debug.Print("Datagrid selection changed");
OnPropertyChanged("SelectedRow");
}
}
}
Converters:
class Converters
{
}
public class SelectedRowConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is Record)
return value;
return new Customer.Record();
}
}
ViewModelBase:
public class ViewModelBase : INotifyPropertyChanged
{
public ViewModelBase()
{
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}

The behaviour you are seeing is as expected. The reason behind it is that the ComboBox ItemsSource as well as SelectedItem both are bound to Properties of the Window's DataContext while the other columns are bound to your DataGrid's ItemsSource. Hence when you modify the columns other than the dropdown the data is added to the observable collection.
What you can do is after a value is selected from the drop down you need to add a record yourself (possibly by calling a function from your SelectedCountry property)
EDIT
Based on your code I made a working model making as little changes as possible to your existing code. I could not use the converter as I did not have the details of the class Customer
Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Button HorizontalAlignment="Right" Content="Add User" Margin="0,2,2,2" Command="{Binding AddUserCommand}"/>
<DataGrid x:Name="dgCustomers"
AutoGenerateColumns="False"
ItemsSource="{Binding customers}"
SelectedItem="{Binding SelectedRow}"
SelectionUnit="FullRow"
CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTemplateColumn Width="Auto" Header="Country">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Focusable="False"
ItemsSource="{Binding DataContext.countries, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
DisplayMemberPath="name"
SelectedValuePath="code"
SelectedValue="{Binding countryCode, UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Name" Binding="{Binding name, UpdateSourceTrigger=PropertyChanged}" Width="1*"/>
<DataGridTextColumn Header="Phone" Binding="{Binding phone, UpdateSourceTrigger=PropertyChanged}" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
<Grid x:Name="grdDisplay" DataContext="{Binding ElementName=dgCustomers}" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="2" Content="Country:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Label Grid.Column="4" Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<BulletDecorator Grid.Column="0">
<BulletDecorator.Bullet>
<Label Content="Name:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtId" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.name}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="1">
<BulletDecorator.Bullet>
<Label Content="Code:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtCode" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.countryCode}" Margin="5,5,5,5"/>
</BulletDecorator>
<BulletDecorator Grid.Column="2">
<BulletDecorator.Bullet>
<Label Content="Phone:" VerticalAlignment="Center" HorizontalAlignment="Right"/>
</BulletDecorator.Bullet>
<TextBox x:Name="txtPhone" Text="{Binding ElementName=dgCustomers, Path=SelectedItem.phone}" Margin="5,5,5,5"/>
</BulletDecorator>
</Grid>
</Grid>
Your GridModel class
public class GridModel : ViewModelBase
{
public ObservableCollection<Record> customers { get; set; }
public ObservableCollection<Country> countries
{
get;
private set;
}
public GridModel()
{
customers = new ObservableCollection<Record> { };
AddUserCommand = new RelayCommand(AddNewUser);
countries = new ObservableCollection<Country>
{
new Country { id = 1, name = "England", code = 44 },
new Country { id = 2, name = "Germany", code = 49 },
new Country { id = 3, name = "US", code = 1},
new Country { id = 4, name = "Canada", code = 11 }
};
}
private void AddNewUser()
{
customers.Add(new Record());
}
public ICommand AddUserCommand { get; set; }
private Record _selectedRow;
public Record SelectedRow
{
get
{
return _selectedRow;
}
set
{
_selectedRow = value;
Debug.Print("Datagrid selection changed");
OnPropertyChanged("SelectedRow");
}
}
}
I have used MVVMLight toolkit which contains RelayCommand. You can also define your own ICommand implementation and use it instead of the toolkit
EDIT 2
Fixed the bug introduced by me which would prevent the combobox from displaying the Country if the data comes from the data base. The improved code does not require any converter either

How to display data in a textblock from a listbox of objects using databinding?

This is my XAML:
<Window x:Class="H7_oef1_listBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="517.164" Width="733.955">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="457*"/>
<ColumnDefinition Width="60*"/>
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding}" HorizontalAlignment="Left" Height="299" Margin="10,10,0,0" VerticalAlignment="Top" Width="128">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Padding="5,0,5,0" Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock HorizontalAlignment="Left" Margin="295,31,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Path=Name}"/>
<TextBlock HorizontalAlignment="Left" Margin="295,31,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Path=Street}"/>
</Grid>
</Window>
This is my Person class:
class Person : INotifyPropertyChanged
{
string name;
string street;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged();
}
}
public string Street
{
get { return street; }
set
{
street = value;
OnPropertyChanged();
}
}
public static ObservableCollection<Person> GetPersons()
{
var persons = new ObservableCollection<Person>();
persons.Add(new Person() { Name = "name1", Street = "street1", City = "city1", State = "state1", Zip = "1111", Phone = "1111", Cell = "111" });
persons.Add(new Person() { Name = "name2", Street = "street2", City = "city2", State = "state2", Zip = "2222", Phone = "2222", Cell = "2222" });
return persons;
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string caller = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(caller));
}
}
}
Main:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = Person.GetPersons();
}
}
I want that the details are shown in the textblocks next to the listbox using the name that is selected in the listbox.
How can I do this using databinding?

You can bind to TextBlock to a property of ListBox.SelectedItem. Give ListBox some name and use it ElementName binding
<ListBox ItemsSource="{Binding}" ... x:Name="myListBox">
<!-- ... -->
</ListBox>
<TextBlock ... Text="{Binding ElementName=myListBox, Path=SelectedItem.Name}"/>
<TextBlock ... Text="{Binding ElementName=myListBox, Path=SelectedItem.Street}"/>

Binding ListView SelectedItem between two or more ListViews

I have a Dictionary that contains an ObservableCollection like this:
Dictionary<string, ObservableCollection<Person>> MyDictionary
Now in my xaml, I'm creating an itemscontrol that uses the dictionary's key for an expander and the person's collection in a listview something like this:
<ItemsControl ItemsSource="{Binding MyDictionary}" VerticalAlignment="Center" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Name="expander" IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Left" Text="MyString:"/>
<TextBlock Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Left" Text="{Binding Key}"/>
</StackPanel>
</Expander.Header>
<Expander.Content>
<ListView SelectionMode="Single" ItemsSource="{Binding Value}">
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn>
<GridViewColumn.Header>
<TextBlock Text="Name" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.Header>
<TextBlock Text="Last Name" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding LastName}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Expander.Content>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now, as you can see it creates a collection of expanders and each expander has a listview within it's content...
I want to let only one listview have a selected item, how can I do it?
If I wasn't clear: I will have 3 Expanders, each one has 1 ListView, each ListView has 4-5 item's, i want that when a user click on a listviewitem all other ListViews selected items will be unselected.
Thanks !

Why don't you subscribe to the selection event of each list view and call UnselectAll on the others.

Hey I have an idea to do this . Bind the SelectedItem of all the listBox to same SelectedItemProperty of ViewModel like
>xaml here I have two ListBox whose SelectedItem is bound to same property of VM
<StackPanel Height="500" Width="500">
<ListBox Height="200" ItemsSource="{Binding StudentList1}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedStudent}"></ListBox>
<ListBox Height="200" ItemsSource="{Binding StudentList2}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedStudent}"></ListBox>
</StackPanel>
xaml.cs
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
ViewModel
public class ViewModel:INotifyPropertyChanged
{
public ViewModel()
{
StudentList1 = new ObservableCollection<Student>();
StudentList1.Add(new Student() { Name = "abc", Age = 20 });
StudentList1.Add(new Student() { Name = "abc", Age = 20 });
StudentList1.Add(new Student() { Name = "abc", Age = 20 });
StudentList2 = new ObservableCollection<Student>();
StudentList2.Add(new Student() { Name = "xyz", Age = 30 });
StudentList2.Add(new Student() { Name = "xyz", Age = 30 });
StudentList2.Add(new Student() { Name = "xyz", Age = 30 });
}
public ObservableCollection<Student> StudentList1 { get; set; }
public ObservableCollection<Student> StudentList2 { get; set; }
Student selectedStudent;
public Student SelectedStudent
{
get { return selectedStudent; }
set { selectedStudent = value; Notify("SelectedStudent"); }
}
public void Notify(string propName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
Student Class
public class Student
{
public string Name { get; set; }
public int Age { get; set; }
}
I hope you got an idea .SelectedItem works on the basis of References when you will select one Listbox item the SelectedStudent property of VM will get updated and hence all othe ListBox SelectedItem will get deselected because they dont have this reference in there itemssource. The power of MVVM :)
>Update
Student selectedStudent1;
public Student SelectedStudent1
{
get { return selectedStudent1; }
set {
selectedStudent=null;
selectedStudent1 = value;
Notify("SelectedStudent1"); }
}
Student selectedStudent;
public Student SelectedStudent
{
get { return selectedStudent; }
set {
selectedStudent1=null;
selectedStudent = value;
Notify("SelectedStudent"); }
}