We Keep Coding

How to Add a Quantity Column on a DataGrid from ListView selection in WPF

I've a ListView whose data I select and send to a DataGrid. I am having trouble with the quantity column of the DataGrid which I would want to calculate how many times a ListView item has been added to the said DataGrid (I'm currently displaying a success message when the same item is selected). I would also want to calculate the price and the quantity and display them on one column named 'price' the DataGrid.
Here is the Datagrid
<ListView x:Name="ItemGridView" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" PreviewMouseDoubleClick="ItemGridView_PreviewMouseDoubleClick">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ItemImage}" Width="225" Height="157" Stretch="UniformToFill" StretchDirection="DownOnly" />
<StackPanel Margin="0,100,0,0">
<Border Margin="-0,-7,0,0" Height="63" Width="225" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">
<TextBlock Margin="8" FontWeight="Heavy" Foreground="White" FontSize="16" Text="{Binding ItemName}"/>
</Border>
<TextBlock Margin="15,-28,0,0" FontSize="15" Text="{Binding SellingPrice}" Foreground="White"/>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
The DataGrid to which the data is sent looks like this:
<DataGrid x:Name="DGItems" ItemsSource="{Binding}" VerticalAlignment="Top" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Row="0" MinHeight="350" MaxHeight="350" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" CanUserSortColumns="True" CanUserAddRows="False" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn MinWidth="3" Header="#" Width="Auto" Binding="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Converter={global:RowToIndexConverter}}" />
<DataGridTextColumn Header="Items" Binding="{Binding ItemName}" />
<DataGridTextColumn Header="Cost" Binding="{Binding SellingPrice}" />
<DataGridTextColumn Header="Qty" />
</DataGrid.Columns>
</DataGrid>
The code behind to send the datan following a ListView double click event is as below:
private void ItemGridView_PreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)
{
var selectedItem = ItemGridView.SelectedItem;
if (!DGItems.Items.Contains(selectedItem))
{
DGItems.Items.Add(selectedItem);
}
else
{
utilityMethods.InformationMessage("Attempted to add item successfully");
}
}
I've included screenshots to preview how the application looks just to put the question in context.

Here's a working sample. I made slight modifications to your xaml and bindings to show how it can be done. Whenever you double-click an item in the ListView, it will update both the Quantity and Total columns in the DataGrid.
MyItem.cs: This is a simple model to replicate your food item
namespace UpdateQuantityColumnTest
{
public class MyItem
{
public string ItemName { get; set; }
public double SellingPrice { get; set; }
}
}
ListViewItemViewModel.cs: This is a view model representation of your MyItem for the ListView
namespace UpdateQuantityColumnTest
{
public class ListViewItemViewModel : ViewModelBase
{
public ListViewItemViewModel(MyItem model)
{
this.Model = model;
}
public MyItem Model { get; private set; }
public string ItemName { get => this.Model.ItemName; set { this.Model.ItemName = value; OnPropertyChanged(); } }
public string SellingPrice { get => this.Model.SellingPrice.ToString("c"); }
}
}
DGItemViewModel: This is a slightly different view model representation of your MyItem for the DataGrid, but includes a Quantity and a TotalPrice
namespace UpdateQuantityColumnTest
{
public class DGItemViewModel : ViewModelBase
{
private int quantity;
public DGItemViewModel(MyItem model)
{
this.Model = model;
this.quantity = 1; // always start at 1
}
public MyItem Model { get; private set; }
public string ItemName { get => this.Model.ItemName; set { this.Model.ItemName = value; OnPropertyChanged(); } }
public string SellingPrice { get => this.Model.SellingPrice.ToString("c"); }
public int Quantity { get => this.quantity; set { this.quantity = value; OnPropertyChanged(); OnPropertyChanged(nameof(TotalPrice)); } }
public string TotalPrice { get => (this.Model.SellingPrice * this.Quantity).ToString("c"); }
}
}
ViewModelBase.cs: This is the base class that simply handles the INotifyPropertyChanged to update the UI whenever one of the property values change in your view model
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace UpdateQuantityColumnTest
{
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
MainWindow.xaml: I made slight changes, mainly to your bindings so that my sample could work
<Window x:Class="UpdateQuantityColumnTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListView x:Name="ItemGridView" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" PreviewMouseDoubleClick="ItemGridView_PreviewMouseDoubleClick">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ItemImage}" Width="225" Height="157" Stretch="UniformToFill" StretchDirection="DownOnly" />
<StackPanel Margin="0,100,0,0">
<Border Margin="-0,-7,0,0" Height="63" Width="225" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">
<TextBlock Margin="8" FontWeight="Heavy" Foreground="White" FontSize="16" Text="{Binding ItemName}"/>
</Border>
<TextBlock Margin="15,-28,0,0" FontSize="15" Text="{Binding SellingPrice}" Foreground="White"/>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<DataGrid x:Name="DGItems" ItemsSource="{Binding CheckoutItems}" VerticalAlignment="Top" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Row="1" MinHeight="350" MaxHeight="350" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" CanUserSortColumns="True" CanUserAddRows="False" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Items" Binding="{Binding ItemName}" />
<DataGridTextColumn Header="Cost" Binding="{Binding SellingPrice}" />
<DataGridTextColumn Header="Qty" Binding="{Binding Quantity}"/>
<DataGridTextColumn Header="Total" Binding="{Binding TotalPrice}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
MainWindow.xaml.cs: The code-behind that does all the work
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Input;
namespace UpdateQuantityColumnTest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private ObservableCollection<ListViewItemViewModel> items;
private ObservableCollection<DGItemViewModel> checkoutItems;
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
this.DataContext = this;
}
public ObservableCollection<ListViewItemViewModel> Items
{
get
{
if (this.items == null)
this.items = new ObservableCollection<ListViewItemViewModel>();
return this.items;
}
}
public ObservableCollection<DGItemViewModel> CheckoutItems
{
get
{
if (this.checkoutItems == null)
this.checkoutItems = new ObservableCollection<DGItemViewModel>();
return this.checkoutItems;
}
}
private void OnLoaded(object sender, RoutedEventArgs e)
{
// Populate with dummy data
this.Items.Add(new ListViewItemViewModel(new MyItem() { ItemName = "Beef Steak", SellingPrice = 1000 }));
this.Items.Add(new ListViewItemViewModel(new MyItem() { ItemName = "Bacon Brie", SellingPrice = 1200 }));
this.Items.Add(new ListViewItemViewModel(new MyItem() { ItemName = "Bread and Sausage", SellingPrice = 700 }));
}
private void ItemGridView_PreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)
{
var selectedItem = ItemGridView.SelectedItem as ListViewItemViewModel;
var checkoutItem = this.CheckoutItems.SingleOrDefault(o => o.ItemName == selectedItem.ItemName);
if (checkoutItem == null)
{
this.CheckoutItems.Add(new DGItemViewModel(selectedItem.Model));
}
else
{
//utilityMethods.InformationMessage("Attempted to add item successfully");
checkoutItem.Quantity++;
}
}
}
}

If the items in the ItemsSource = "{Binding Items}" collection have an INotifyPropertyChanged implementation and notify about the change of their properties, then you can solve this problem with minimal changes.
Add an int Qty property to the element class and change your method:
if (!DGItems.Items.Contains(selectedItem))
{
DGItems.Items.Add(selectedItem);
selectedItem.Qty = 1;
}
else
{
selectedItem.Qty++;
utilityMethods.InformationMessage("Attempted to add item successfully");
}
And add a binding to this property in the column:
<DataGrid.Columns>
<DataGridTextColumn MinWidth="3" Header="#" Width="Auto" Binding="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Converter={global:RowToIndexConverter}}" />
<DataGridTextColumn Header="Items" Binding="{Binding ItemName}" />
<DataGridTextColumn Header="Cost" Binding="{Binding SellingPrice}" />
<DataGridTextColumn Header="Qty" Binding="{Binding Qty}" />
</DataGrid.Columns>

Datagrid row selected showing error "Sequence contains no matching element"

I have a datagrid which holds the User information. Now once, I click on the selected row, I want to display the user information such as their roles and allow the user to edit the user roles by clicking on the combobox. Under my data template I have the combobox in my xaml. Since using the datatemplate, the combobox name couldnt be found, I am using the following method below to get the children from the grid.
Here is the code to get the children element:
private List<FrameworkElement> GetChildren(DependencyObject parent)
{
List<FrameworkElement> controls = new List<FrameworkElement>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); ++i)
{
var child = VisualTreeHelper.GetChild(parent, i);
if (child is FrameworkElement)
{
controls.Add(child as FrameworkElement);
}
controls.AddRange(GetChildren(child));
}
return controls;
}
I created the selection changed event for the datagrid:
private void userDataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var userRolesList = new User().getUserRoles();
ComboBox cbUserRole = (ComboBox)GetChildren(userDataGrid).First(x => x.Name == "cbUserRole");
cbUserRole.ItemsSource = userRolesList;
}
Now when I run this code, I am being shown error message
Sequence contains no matching element
The same method I use for my textboxes, I am able to display the values and edit the values too. But for my combobox its not working the way it supposed to. Can someone please help me on this. Thanks.
This is my xaml code:
<DataGrid AutoGenerateColumns="False" Grid.Row="2" Grid.ColumnSpan="4" Grid.RowSpan="3" x:Name="userDataGrid" Margin="70,0.2,70,0" ItemsSource="{Binding}" SelectionChanged="userDataGrid_SelectionChanged">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding UserId}"/>
<DataGridTextColumn Header="Username" Binding="{Binding UserName}"/>
<DataGridTextColumn Header="Email" Binding="{Binding UserEmail}"/>
<DataGridTextColumn Header="User Role" Binding="{Binding UserRole}"/>
<DataGridTextColumn Header="Created Date" Binding="{Binding UserCreatedDate}"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="User ID: " VerticalAlignment="Center" />
<TextBlock x:Name="txtBlockId" FontSize="16" Foreground="MidnightBlue" Text="{Binding UserId, Mode=TwoWay}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="First Name: " VerticalAlignment="Center" />
<TextBox x:Name="txtFirstName" FontSize="16" Foreground="MidnightBlue" Text="{Binding UserFirstName, Mode=TwoWay}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="Last Name: " VerticalAlignment="Center" />
<TextBox x:Name="txtLastName" FontSize="16" Foreground="MidnightBlue" Text="{Binding UserLastName}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="User Role: " VerticalAlignment="Center" />
<ComboBox x:Name="cbUserRole" FlowDirection="LeftToRight" FontSize="16" Foreground="MidnightBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center" SelectionChanged="cbUserRole_Click"/>
</StackPanel>
<StackPanel>
<Button x:Name="btnUpdate" Content="Update" VerticalAlignment="Center" HorizontalAlignment="Right" Click="btnUpdate_Click"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
Thanks

I've been seeing you asking around how to work with this, let me show you one way, hope this helps, but I recommend you read about MVVM patterns and frameworks like MVVMLight for WPF.
Well, for this, first you need to install Install-Package MvvmLight -Version 5.4.1
Then you may need to fix one reference issue, in the ViewModelLocator, remove all the usings and replace with:
using GalaSoft.MvvmLight.Ioc;
using CommonServiceLocator;
Now, your MainWindowView.xaml, it should like:
<Window x:Class="WpfApp2.MainWindow"
x:Name="root"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:WpfApp2.ViewModel"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<vm:MainViewModel x:Name="Model"/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid AutoGenerateColumns="False" x:Name="userDataGrid" Margin="70,0.2,70,0" ItemsSource="{Binding Users}">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding UserId}"/>
<DataGridTextColumn Header="Username" Binding="{Binding UserName}"/>
<DataGridTextColumn Header="Email" Binding="{Binding UserEmail}"/>
<DataGridTextColumn Header="User Role" Binding="{Binding UserRole}"/>
<DataGridTextColumn Header="Created Date" Binding="{Binding UserCreatedDate}"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="User ID: " VerticalAlignment="Center" />
<TextBlock x:Name="txtBlockId" FontSize="16" Foreground="MidnightBlue" Text="{Binding UserId, Mode=TwoWay}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="First Name: " VerticalAlignment="Center" />
<TextBox x:Name="txtFirstName" FontSize="16" Foreground="MidnightBlue" Text="{Binding UserFirstName, Mode=TwoWay}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="Last Name: " VerticalAlignment="Center" />
<TextBox x:Name="txtLastName" FontSize="16" Foreground="MidnightBlue" Text="{Binding UserLastName}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="User Role: " VerticalAlignment="Center" />
<ComboBox ItemsSource="{Binding Path=DataContext.UserRoles, ElementName=root}" SelectionChanged='CbUserRole_OnSelectionChanged' SelectedItem="{Binding UserRole}" x:Name="cbUserRole" FlowDirection="LeftToRight" FontSize="16" Foreground="MidnightBlue" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
</StackPanel>
<StackPanel>
<Button x:Name="btnUpdate" Content="Update" VerticalAlignment="Center" HorizontalAlignment="Right" Command="{Binding UpdateCommand, ElementName=Model}" CommandParameter="{Binding}" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>
</Window>
Then in your code-behind, there's a little event handling that needs to be done, when changing the roles,
using System.Windows;
using System.Windows.Controls;
using WpfApp2.ViewModel;
namespace WpfApp2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public MainViewModel ViewModel => (MainViewModel) DataContext;
private void CbUserRole_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBox cb = (ComboBox)sender;
if (cb != null)
{
ViewModel.SelectedUserRole = (UserRole)cb.SelectedItem;
}
}
}
}
Then you should create a ViewModel like so (ViewModel -> MainViewModel.cs):
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Runtime.CompilerServices;
using GalaSoft.MvvmLight.Command;
using WpfApp2.Data;
namespace WpfApp2.ViewModel
{
public class MainViewModel : INotifyPropertyChanged
{
public MainViewModel()
{
PopulateUserTestData();
UpdateCommand = new RelayCommand<User>(UpdateUser);
}
private ObservableCollection<User> _users;
public ObservableCollection<User> Users
{
get => _users;
set
{
if (_users != value)
{
_users = value;
NotifyPropertyChanged();
}
}
}
private UserRole _userRole;
public UserRole SelectedUserRole
{
get => _userRole;
set
{
if (_userRole != value)
{
_userRole = value;
NotifyPropertyChanged();
}
}
}
public RelayCommand<User> UpdateCommand { get; }
public IEnumerable<UserRole> UserRoles => Enum.GetValues(typeof(UserRole)).Cast<UserRole>();
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void UpdateUser(User user)
{
Users.Single(u => u.UserId == user.UserId).UserRole = SelectedUserRole;
// Do updates on your context (or in-memory).
PrintUsersOnDebug();
}
#region Test data and diagnostics support
private void PrintUsersOnDebug()
{
foreach (User user in Users)
{
Debug.WriteLine("Username: " + user.UserName + " Role: " + user.UserRole);
}
}
private void PopulateUserTestData()
{
Users = new ObservableCollection<User>
{
new User
{
UserId = 1,
UserCreatedDate = DateTime.Now,
UserEmail = "johndoe1#email.com",
UserFirstName = "John",
UserLastName = "Doe",
UserName = "johnd",
UserRole = UserRole.Administrator
},
new User
{
UserId = 2,
UserCreatedDate = DateTime.Now,
UserEmail = "billgordon#email.com",
UserFirstName = "Bill",
UserLastName = "Gordon",
UserName = "billg",
UserRole = UserRole.SuperUser
}
};
PrintUsersOnDebug();
}
#endregion
}
}
Other related classes:
Data->User.cs
using System;
namespace WpfApp2.Data
{
public class User
{
public int UserId { get; set; }
public string UserName { get; set; }
public string UserEmail { get; set; }
public UserRole UserRole { get; set; }
public DateTime UserCreatedDate { get; set; }
public string UserFirstName { get; set; }
public string UserLastName { get; set; }
}
}
UserRole.cs
namespace WpfApp2
{
public enum UserRole
{
Administrator,
User,
SuperUser
}
}
Now since I just designed this test app to view the changing data in this case roles, I designed this to be just viewable on output window. As you change the roles and click the update button, inspect the output window.

If you simply want to populate the ComboBox in the RowDetailsTemplate, you could handle its Loaded event:
private void cbUserRole_Loaded(object sender, RoutedEventArgs e)
{
ComboBox cbUserRole = (ComboBox)sender;
if (cbUserRole.ItemsSource == null)
cbUserRole.ItemsSource = new User().getUserRoles();
}
XAML:
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="12" Text="User Role: " VerticalAlignment="Center" />
<ComboBox x:Name="cbUserRole"
Loaded="cbUserRole_Loaded"
FlowDirection="LeftToRight" FontSize="16" Foreground="MidnightBlue" HorizontalAlignment="Stretch"
VerticalAlignment="Center"
SelectionChanged="cbUserRole_Click"/>
</StackPanel>

Changing TextBox's Text in a ListView does not update ObservableCollection<string> Source

I have a quite complicated structure of ListViews. Inside this structure are TextBoxes with values from my ViewModel. When I change a value in some textbox, the property in ViewModel doesn't update. The "AllTexts" property in ViewModel still contains only "Hello" strings.
Basically, I want to show user structure of strings and then let the user change this structure. After he finishes his modification I want to save his changes. "Hello" strings are here just for testing.
My ViewModel:
class MainWindowViewModel
{
public ObservableCollection<ObservableCollection<ObservableCollection<string>>> AllTexts { get; set; }
public int SelectedGroupIndex { get; set; }
public int SelectedColumnIndex { get; set; }
public ICommand AddGroup { get; private set; }
public ICommand AddColumn { get; private set; }
public MainWindowViewModel()
{
this.AllTexts = new ObservableCollection<ObservableCollection<ObservableCollection<string>>>();
this.SelectedGroupIndex = -1;
this.SelectedColumnIndex = -1;
this.AddGroup = new Command(this.AddGroupCommandHandler);
this.AddColumn = new Command(this.AddColumnCommandHandler);
}
private void AddGroupCommandHandler()
{
var tempColumn = new ObservableCollection<string>() { "Hello", "Hello", "Hello", "Hello", "Hello" };
var tempGroup = new ObservableCollection<ObservableCollection<string>>();
tempGroup.Add(tempColumn);
this.AllTexts.Add(new ObservableCollection<ObservableCollection<string>>(tempGroup));
}
private void AddColumnCommandHandler()
{
if (this.SelectedGroupIndex >= 0 && this.SelectedGroupIndex < this.AllTexts.Count)
{
var tempColumn = new ObservableCollection<string>() { "Hello", "Hello", "Hello", "Hello", "Hello" };
this.AllTexts[this.SelectedGroupIndex].Add(tempColumn);
}
}
}
My View:
<Window.Resources>
<ResourceDictionary>
<local:MainWindowViewModel x:Key="vm" />
</ResourceDictionary>
</Window.Resources>
<Grid Margin="10,10,10,10" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="300" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ListView Grid.Row="0"
ItemsSource="{Binding AllTexts, Source={StaticResource vm}, Mode=TwoWay}"
Background="Red"
SelectedIndex="{Binding SelectedGroupIndex, Source={StaticResource vm}}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<ListView
Background="Yellow"
ItemsSource="{Binding Path=., Mode=TwoWay}"
SelectedIndex="{Binding SelectedColumnIndex, Source={StaticResource vm}}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<ListView
Background="Green"
ItemsSource="{Binding Path=., Mode=TwoWay}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=., Mode=TwoWay, NotifyOnSourceUpdated=True}"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Width="100" Height="40"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,20,0,0">
<Button Content="Add Group" Width="120" Height="30"
Command="{Binding AddGroup, Source={StaticResource vm}}" />
<Button Content="Add Column" Margin="20,0,0,0" Width="120" Height="30"
Command="{Binding AddColumn, Source={StaticResource vm}}" />
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,20,0,0">
<TextBlock Width="120" Height="30" FontSize="20"
Text="{Binding SelectedGroupIndex, Source={StaticResource vm}}" />
<TextBlock Width="120" Height="30" Margin="20,0,0,0" FontSize="20"
Text="{Binding SelectedColumnIndex, Source={StaticResource vm}}" />
</StackPanel>
</Grid>
Could someone, please help me?
Thank you.

Your ViewModel has to notify the View about the changes, or else the View retains original values of the ViewModel
In this case, string cannot notify the changes made to itself. Only its enclosing observable collection can notify about changes made to itself like add or remove and does not monitor further into its elements.
So you need an observable string:
public class MyString : DependencyObject
{
public string Value
{
get { return (string)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(string), typeof(MyString), new PropertyMetadata(""));
}
To use in the collection:
public ObservableCollection<ObservableCollection<ObservableCollection<MyString>>> AllTexts { get; set; }
I also added the following line to the MyString class in order to test the code and it worked.
public static MyString Hello { get { return new MyString { Value = "Hello" }; } }
Obviously, this is how it will be used:
var tempColumn = new ObservableCollection<MyString>() { MyString.Hello, MyString.Hello, MyString.Hello, MyString.Hello, MyString.Hello };
In xaml there are also some unnecessary things which you can get rid of:
use ItemsSource="{Binding}" for both ListViews, and use Text="{Binding Value}" for the TextBox. (there is no need for explicit TwoWay in any of those)

Selected Value in Multi-Column ComboBox

I have a table named Groups in my Database as follows:
Groups
|--GroupID
|--GroupName
|--ParentID
|--NatureOfGroupID
|--EffectID
Here is the relationship diagram for above table:
I have a combobox in a window in which I have two columns. Here is the xaml:
<ComboBox ItemsSource="{Binding DataContext.GroupNamesWithCorrespondingEffects, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
SelectedValue="{Binding ParentID}" SelectedValuePath="GroupID">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding GroupName}" Width="200" />
<TextBlock Text="{Binding CorrespondingEffect}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Actually i want to show GroupName and its corresponding Effect but when user selects any Item then I want to get SelectedValue as ParentID.
Here is the implementation of GroupNameWithCorrespondingEffect.cs
public class GroupNameWithCorrespondingEffect : MainViewModel
{
private string _groupName;
public string GroupName
{
get
{
return _groupName;
}
set
{
_groupName = value;
OnPropertyChanged("GroupName");
}
}
private string _correspondingEffect;
public string CorrespondingEffect
{
get
{
return _correspondingEffect;
}
set
{
_correspondingEffect = value;
OnPropertyChanged("CorrespondingEffect");
}
}
}
Here is the code for groupsViewModel.cs
public class GroupsViewModel : MainViewModel
{
public GroupsViewModel()
{
using (Entities db = new Entities())
{
GroupNamesWithCorrespondingEffects = (from g in db.Groups
select new GroupNameWithCorrespondingEffect
{
GroupName = g.GroupName,
CorrespondingEffect = g.Master_Effects.Effect
}).ToList();
NaturesOfGroup = (from m in db.Master_NatureOfGroup
select m).ToList();
}
SaveChangesCommand = new RelayCommand(SaveGroup);
CurrentGroup = new Group();
}
private Group _currentGroup;
public Group CurrentGroup
{
get
{
return _currentGroup;
}
set
{
_currentGroup = value;
OnPropertyChanged("CurrentGroup");
}
}
private List<GroupNameWithCorrespondingEffect> _groupNamesWithCorrespondingEffects;
public List<GroupNameWithCorrespondingEffect> GroupNamesWithCorrespondingEffects
{
get
{
return _groupNamesWithCorrespondingEffects;
}
set
{
_groupNamesWithCorrespondingEffects = value;
OnPropertyChanged("GroupNamesWithCorrespondingEffects");
}
}
private List<Master_NatureOfGroup> _naturesOfGroup;
public List<Master_NatureOfGroup> NaturesOfGroup
{
get
{
return _naturesOfGroup;
}
set
{
_naturesOfGroup = value;
OnPropertyChanged("NaturesOfGroup");
}
}
public ICommand SaveChangesCommand { get; set; }
private void SaveGroup(object obj)
{
Group cGroup = new Group()
{
GroupName = CurrentGroup.GroupName,
**ParentID = CurrentGroup.ParentID,**
NatureOfGroupID = CurrentGroup.NatureOfGroupID,
EffectID = CurrentGroup.EffectID
};
using (Entities db = new Entities())
{
db.Groups.Add(cGroup);
db.SaveChanges();
GroupNamesWithCorrespondingEffects = (from g in db.Groups
select new GroupNameWithCorrespondingEffect
{
GroupName = g.GroupName,
CorrespondingEffect = g.Master_Effects.Effect
}).ToList();
}
}
}
When I debug and put a breakpoint on the line marked with ** .... ** I always get CurrentGroup.ParentID = null.
Update:
<Page.DataContext>
<vm:GroupsViewModel />
</Page.DataContext>
<Grid DataContext="{Binding CurrentGroup}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Name" HorizontalAlignment="Left"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text=" : " HorizontalAlignment="Right"/>
<TextBox Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Text="{Binding GroupName}"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="Under" HorizontalAlignment="Left"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text=" : " HorizontalAlignment="Right"/>
<ComboBox x:Name="cbUnder" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
ItemsSource="{Binding DataContext.GroupNamesWithCorrespondingEffects, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
SelectedValue="{Binding ParentID}" SelectedValuePath="GroupID">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding GroupName}" Width="200" />
<TextBlock Text="{Binding CorrespondingEffect}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBlock Grid.Row="3" Grid.Column="1" Text="Nature of Group" HorizontalAlignment="Left" Visibility="{Binding Visibility, ElementName=cbNature}"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text=" : " HorizontalAlignment="Right" Visibility="{Binding Visibility, ElementName=cbNature}"/>
<ComboBox x:Name="cbNature" Grid.Row="3" Grid.Column="2" Visibility="{Binding SelectedIndex, Converter={StaticResource selectedIndexToVisibilityConverter}, ElementName=cbUnder}"
ItemsSource="{Binding DataContext.NaturesOfGroup, RelativeSource={RelativeSource AncestorType={x:Type Page}}}" DisplayMemberPath="Nature"
SelectedValue="{Binding NatureOfGroupID}" SelectedValuePath="NatureOfGroupID"/>
<StackPanel Grid.Row="5" Grid.Column="4" Orientation="Horizontal">
<Button Content="Save" Command="{Binding DataContext.SaveChangesCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"/>
</StackPanel>
</Grid>

I can see two issues in your code.
First of all you mentioned
Actually i want to show GroupName and its corresponding Effect but
when user selects any Item then I want to get SelectedValue as
ParentID.
But in combobox declaration, you set SelectedValuePath="GroupID". It should be set to ParentID - SelectedValuePath="ParentID".
Second, even if you set SelectedValuePath to ParentID, it won't work since combobox ItemsSource is a list of GroupNameWithCorrespondingEffect which doesn't have any property ParentID in it.
For SelectedValuePath to work underlying model class should have that property, so create a property and filled it from database like other two properties.
GroupNamesWithCorrespondingEffects = (from g in db.Groups
select new GroupNameWithCorrespondingEffect
{
GroupName = g.GroupName,
CorrespondingEffect = g.Master_Effects.Effect,
ParentID = g.ParentId
}).ToList();
So, for your solution to work, you have to fix both these issues.

WPF Tabcontrol of Datagrids

I'm trying to create a databound Tabcontrol, where each TabItem contains a Datagrid, also databound.
My data structure is something like this:
public class Exercise
{
public Guid ExerciseID { get; protected set; }
public string ExerciseName { get; set; }
public List<Set> Sets { get; set; }
}
public class Set
{
public Guid SetID { get; protected set; }
public decimal Weight { get; set; }
public decimal Reps { get; set; }
public bool MaxEffort { get; set; }
}
I'm trying to bind a List<Exercise> to a TabControl, and the List<Set> for each Exercise to the DataGrid within each Tab, displaying the "Weight" and "Reps" properties in two columns. My current XAML code is below, with the relevant section labelled.
<Window x:Class="MyWorkouts.WorkoutViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WorkoutViewer" Height="424" Width="708"
x:Name="WorkoutDisplay">
<Grid DataContext="{DynamicResource WorkoutToDisplay}">
<Calendar SelectedDate="{Binding WorkoutDate}" Height="180" HorizontalAlignment="Left" Margin="8,12,0,0" Name="calendar1" VerticalAlignment="Top" Width="230" />
<StackPanel Height="94" HorizontalAlignment="Left" Margin="12,182,0,0" Name="spProperties" VerticalAlignment="Top" Width="238">
<StackPanel Height="30" Name="spProgram" Width="232" Orientation="Horizontal">
<Label Content="Workout Program:" Height="25" Name="lblProgram" Width="104" />
<TextBox Text="{Binding WorkoutProgram}" Height="25" Name="tbProgram" Width="120" />
</StackPanel>
<StackPanel Height="30" Name="spType" Width="232" Orientation="Horizontal">
<Label Content="Workout Type:" Height="25" Name="lblWorkoutType" Width="104" />
<TextBox Text="{Binding WorkoutType}" Height="25" Name="tbWorkoutType" Width="120" />
</StackPanel>
<StackPanel Height="30" Name="spVenue" Width="232" Orientation="Horizontal">
<Label Content="Workout Venue:" Height="25" Name="lblVenue" Width="104" />
<TextBox Text="{Binding WorkoutVenue}" Height="25" Name="tbVenue" Width="120" />
</StackPanel>
</StackPanel>
<TabControl Height="365" HorizontalAlignment="Left" Margin="260,10,0,0" Name="TCWorkoutView" VerticalAlignment="Top" Width="425">
<TabItem Header="Workout View" Name="TIView">
<StackPanel Height="335" HorizontalAlignment="Left" Name="spExercises" VerticalAlignment="Top" Width="410" Grid.ColumnSpan="2">
<ItemsControl ItemsSource="{Binding Exercises}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding ExerciseName}" BorderThickness="1" BorderBrush="DarkBlue">
<ItemsControl ItemsSource="{Binding Sets}" DisplayMemberPath="WeightForReps" BorderThickness="1" BorderBrush="Gray"/>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</TabItem>
<!--The below section is the one in question-->
<TabItem Header="Edit Workout">
<TabControl ItemsSource="{Binding Path=Exercises}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding Path=Sets}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Weight" Binding="{Binding Path=Weight}"/>
<DataGridTextColumn Header="Reps" Binding="{Binding Path=Reps}"/>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</TabControl>
</TabItem>
</TabControl>
</Grid>
I've got as far as having the ExerciseName property correctly displayed in each Tab (with the correct number of tabs generated, but there's no datagrid at all, instead the Tab just says MyWorkouts.Exercise (MyWorkouts is the namespace).
For a bit of background, this is meant to be the "Edit" screen for a workout logging program, and I've got the display view working correctly with a stackpanel of expanders - I need whatever solution I have to be editable, and have the changes made in the datagrid reflected in the appropriate class objects - I hope to work this out myself, but if this approach won't work, please let me know!
EDIT: My full XAML code is now listed above

Needed to set the TabControl.ContentTemplate rather than the ItemsControl.ItemTemplate. Once I switched that, I could use the DisplayMemberPath property, and everything else worked!
The XAML code I needed was:
<TabControl ItemsSource="{Binding Path=Exercises}" DisplayMemberPath="ExerciseName">
<TabControl.ContentTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding Path=Sets}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Weight" Binding="{Binding Path=Weight}"/>
<DataGridTextColumn Header="Reps" Binding="{Binding Path=Reps}"/>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>