Develop Reference

WPF: Bindings break when CollectionChanges - why?

First, let me apologize for the length of this post - I know it's long, but I figured for this one, more detail is better than less.
What I'm trying to achieve now is a totals footer row for a datagrid. Since it needs to show up on the bottom row, the approach I'm taking is to just add some TextBlocks that line up with the columns in the datagrid.
My app has multiple datagrids inside an ItemsControl so I haven't found a nice way of just setting a binding. Using RelativeSource doesn't seem to be an option as there's no way (as far as I can tell) to point it at a descendent element, then search for a particular child. So instead I've written a bit of hackery to do what I want in code behind.
Ok, so now the problem.. Everything looks fine when the app starts, but as soon as any of the items in the grid change, the width binding seems to break completely. I wrote a small test app to show what I mean. Here's some screenshots:
Now if I click the button to change an element, the width binding of the footer textblocks breaks:
I'm completely stumped as to the cause of this behavior. I'm pretty new to WPF and just muddling my way through building my first app. So if this is a dumb way of doing things, please let me know. Here's my code.
MainWindow.xaml:
<Window x:Class="WpfTestApp.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:WpfTestApp"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel Orientation="Vertical">
<ItemsControl x:Name="BarsItemsControl" ItemsSource="{Binding Bars}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Description}" />
<DataGrid x:Name="FooGrid"
ItemsSource="{Binding Foos}"
IsSynchronizedWithCurrentItem="False"
AutoGenerateColumns="False"
SelectionUnit="Cell"
SelectionMode="Extended"
CanUserReorderColumns="False"
CanUserAddRows="True"
HeadersVisibility="Column">
<DataGrid.Columns>
<DataGridTextColumn Header="Col 1" Width="*" Binding="{Binding Value1}" />
<DataGridTextColumn Header="Col 2" Width="*" Binding="{Binding Value2}" />
<DataGridTextColumn Header="Col 3" Width="*" Binding="{Binding Value3}" />
</DataGrid.Columns>
</DataGrid>
<StackPanel x:Name="TotalsRow" Orientation="Horizontal">
<TextBlock Text="{Binding Totals[0]}" />
<TextBlock Text="{Binding Totals[1]}" />
<TextBlock Text="{Binding Totals[2]}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Content="Change something" Click="Button_Click" />
</StackPanel>
</Window>
MainWindow.xaml.cs
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
namespace WpfTestApp
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public IList<Bar> Bars { get; }
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
this.Bars = new ObservableItemsCollection<Bar>();
var foos = new ObservableItemsCollection<Foo>();
for (int i = 0; i < 5; i++)
{
foos.Add(new Foo()
{
Value1 = 14.23,
Value2 = 53.23,
Value3 = 35.23
});
}
var foos2 = new ObservableItemsCollection<Foo>();
for (int i = 0; i < 5; i++)
{
foos2.Add(new Foo()
{
Value1 = 14.23,
Value2 = 53.23,
Value3 = 35.23
});
}
this.Bars.Add(new Bar(foos)
{
Description = "Bar 1",
});
this.Bars.Add(new Bar(foos2)
{
Description = "Bar 2",
});
this.Loaded += MainWindow_Loaded;
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// Bind widths of the TotalsRow textblocks (footers) to the width of the
// datagrid column they're associated with
var elements = new List<FrameworkElement>();
this.GetChildElementsByName(this.BarsItemsControl, "FooGrid", ref elements);
foreach (var element in elements)
{
var dataGrid = element as DataGrid;
if (dataGrid != null)
{
var totalsRowList = new List<FrameworkElement>();
this.GetChildElementsByName(VisualTreeHelper.GetParent(dataGrid), "TotalsRow", ref totalsRowList);
if (totalsRowList.Count > 0)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(totalsRowList[0]); i++)
{
var textBlock = VisualTreeHelper.GetChild(totalsRowList[0], i) as TextBlock;
Binding widthBinding = new Binding();
widthBinding.Source = dataGrid.Columns[i];
widthBinding.Path = new PropertyPath("ActualWidth");
widthBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
BindingOperations.SetBinding(textBlock, TextBlock.WidthProperty, widthBinding);
}
}
}
}
}
/// <summary>
/// Populate a list of elements in the visual tree with the given name under the given parent
/// </summary>
public void GetChildElementsByName(DependencyObject parent, string name, ref List<FrameworkElement> elements)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var child = VisualTreeHelper.GetChild(parent, i);
var element = child as FrameworkElement;
if (element != null && element.Name == name)
{
elements.Add(element);
}
GetChildElementsByName(child, name, ref elements);
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Bars[0].Foos[3].Value1 = 10;
}
}
}
Foo.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace WpfTestApp
{
public class Foo : INotifyPropertyChanged
{
private double value1;
public double Value1 {
get { return value1; }
set { value1 = value; OnPropertyChanged(); }
}
private double value2;
public double Value2
{
get { return value2; }
set { value2 = value; OnPropertyChanged(); }
}
private double value3;
public double Value3
{
get { return value3; }
set { value3 = value; OnPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
}
Bar.cs
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
namespace WpfTestApp
{
public class Bar : INotifyPropertyChanged
{
public Bar(ObservableItemsCollection<Foo> foos)
{
this.Foos = foos;
this.Totals = new double[3] { 14, 14, 14};
this.Foos.CollectionChanged += Foos_CollectionChanged;
}
private void Foos_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
//var fooList = this.Categories.Cast<CategoryViewModel>();
this.Totals[0] = this.Foos.Sum(f => f.Value1);
this.Totals[1] = this.Foos.Sum(f => f.Value2);
this.Totals[2] = this.Foos.Sum(f => f.Value3);
OnPropertyChanged(nameof(Totals));
}
public string Description { get; set; }
public ObservableItemsCollection<Foo> Foos { get; }
public double[] Totals { get; }
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
}
ObservableItemsCollection.cs
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;
namespace WpfTestApp
{
public class ObservableItemsCollection<T> : ObservableCollection<T>
where T : INotifyPropertyChanged
{
private void Handle(object sender, PropertyChangedEventArgs args)
{
base.OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset, null));
}
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
{
if (e.NewItems != null)
{
foreach (object t in e.NewItems)
{
((T)t).PropertyChanged += Handle;
}
}
if (e.OldItems != null)
{
foreach (object t in e.OldItems)
{
((T)t).PropertyChanged -= Handle;
}
}
base.OnCollectionChanged(e);
}
}
}

Just bind to the ActualWidth of the columns:
<Window x:Class="WpfTestApp.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:WpfTestApp"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel Orientation="Vertical">
<ItemsControl x:Name="BarsItemsControl" ItemsSource="{Binding Bars}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Description}" />
<DataGrid x:Name="FooGrid"
ItemsSource="{Binding Foos}"
IsSynchronizedWithCurrentItem="False"
AutoGenerateColumns="False"
SelectionUnit="Cell"
SelectionMode="Extended"
CanUserReorderColumns="False"
CanUserAddRows="True"
HeadersVisibility="Column">
<DataGrid.Columns>
<DataGridTextColumn x:Name="col1" Header="Col 1" Width="*" Binding="{Binding Value1}" />
<DataGridTextColumn x:Name="col2" Header="Col 2" Width="*" Binding="{Binding Value2}" />
<DataGridTextColumn x:Name="col3" Header="Col 3" Width="*" Binding="{Binding Value3}" />
</DataGrid.Columns>
</DataGrid>
<StackPanel x:Name="TotalsRow" Orientation="Horizontal">
<TextBlock Width="{Binding ElementName=col1, Path=ActualWidth}" Text="{Binding Totals[0]}" />
<TextBlock Width="{Binding ElementName=col2, Path=ActualWidth}" Text="{Binding Totals[1]}" />
<TextBlock Width="{Binding ElementName=col3, Path=ActualWidth}" Text="{Binding Totals[2]}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Content="Change something" Click="Button_Click" />
</StackPanel>

Change your last stackpanel to grid in your xaml source:
<Grid x:Name="TotalsRow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Totals[0]}" Grid.Column="0"/>
<TextBlock Text="{Binding Totals[1]}" Grid.Column="1"/>
<TextBlock Text="{Binding Totals[2]}" Grid.Column="2"/>
</Grid>
Result:

Item Source in Data Grid Data Template not working

I am trying to show MultiSelectComboBox in Datagrid cell but even though combo box works alone, it shows empty if I put it inside the data grid.
I think it is related to <UserControl.Resources> vs <DataGrid.Resources> but I couldn't find a fix.
You can find the solution from here.
My Model:
public class Blocks : BaseViewModel
{
private bool _isSelected;
private int _id;
private string _name;
public Blocks(string name)
{
_name = name;
}
public bool IsSelected
{
get => _isSelected;
set
{
if (_isSelected == value) return;
_isSelected = value;
OnPropertyChanged();
}
}
public int ID
{
get => _id;
set
{
if (_id == value) return;
_id = value;
OnPropertyChanged();
// multicombox default filtreleme için name kullanıyor
_name = value.ToString();
}
}
public string Name
{
get => _name;
set
{
if (_name != null && string.Compare(_name, value, StringComparison.InvariantCulture) == 0)
{
return;
}
_name = value;
OnPropertyChanged();
}
}
public override string ToString()
{
return ID.ToString();
}
}
My ViewModel:
public class ListItemsViewModel : BaseViewModel
{
private ObservableCollection _routes;
public ObservableCollection<int> Routes
{
get => _routes ?? (_routes = new ObservableCollection<int>());
set
{
_routes = value;
OnPropertyChanged();
}
}
// multi combo box
private ICommand _selectedStatusItemsChangedCommand;
private ObservableCollection<Blocks> _includedBlocks;
private ObservableCollection<Blocks> _selectedBlocks;
public ObservableCollection<Blocks> IncludedBlocks
{
get => _includedBlocks ?? (_includedBlocks = new ObservableCollection<Blocks>());
set
{
_includedBlocks = value;
OnPropertyChanged();
}
}
public ObservableCollection<Blocks> SelectedBlocks
{
get => _selectedBlocks ?? (_selectedBlocks = new ObservableCollection<Blocks>());
set
{
_selectedBlocks = value;
OnPropertyChanged();
}
}
public ICommand SelectedItemsChangedCommand
=> _selectedStatusItemsChangedCommand ?? (_selectedStatusItemsChangedCommand = new CommandHandler(SelectedItemsChanged));
public ListItemsViewModel(ObservableCollection<Blocks> list, ObservableCollection<int> ints)
{
_includedBlocks = list;
_routes = ints;
}
// Multi select combo box
public int SelectedStatusItemsCount { get; set; }
private void UpdateSelectedStatusItemsCount(int count)
{
SelectedStatusItemsCount = count;
OnPropertyChanged();
}
private void SelectedItemsChanged(object parameter)
{
if (parameter is SelectedItemsChangedEventArgs args)
{
foreach (var virtualRailBlock in _includedBlocks)
{
var selectedItemIndex = args.Selected.Cast<Blocks>().ToList().IndexOf(virtualRailBlock);
virtualRailBlock.IsSelected = selectedItemIndex > -1;
}
UpdateSelectedStatusItemsCount(args.Selected.Count);
}
}
}
My View:
<UserControl x:Class="MultiSelectControlCodes.View.ListItemsView"
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:sdl="http://schemas.sdl.com/xaml"
xmlns:viewModel="clr-namespace:MultiSelectControlCodes.ViewModel"
xmlns:model="clr-namespace:MultiSelectControlCodes.Model"
mc:Ignorable="d" d:DesignHeight="200" d:DesignWidth="400"
d:DataContext="{d:DesignInstance viewModel:ListItemsViewModel}">
<Grid>
<DataGrid
ItemsSource="{Binding Routes}"
SelectionUnit="FullRow"
SelectionMode="Extended"
AutoGenerateColumns="False"
IsReadOnly="False"
CanUserAddRows="True"
CanUserDeleteRows="True">
<DataGrid.Resources>
<DataTemplate x:Key="MultiSelectComboBox.Dropdown.ListBox.ItemTemplate" DataType="Block">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" Text="{Binding Path=Name}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="MultiSelectComboBox.SelectedItems.ItemTemplate" DataType="Block">
<StackPanel Orientation="Horizontal" Margin="0,-4">
<TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" Margin="2,0" />
</StackPanel>
</DataTemplate>
</DataGrid.Resources>
<DataGrid.Columns >
<DataGridTemplateColumn Header="Routes" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<sdl:MultiSelectComboBox
Margin="2"
VerticalAlignment="Top"
Height="50"
IsEditable="true"
SelectionMode="Multiple"
SelectedItems="{Binding SelectedBlocks}"
ItemsSource="{Binding IncludedBlocks}"
SelectedItemTemplate="{StaticResource MultiSelectComboBox.SelectedItems.ItemTemplate}"
DropdownItemTemplate="{StaticResource MultiSelectComboBox.Dropdown.ListBox.ItemTemplate}"
sdl:SelectedItemsChangedBehaviour.SelectedItemsChanged="{Binding SelectedItemsChangedCommand}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</UserControl>
Resulting window:
Working View:
<UserControl x:Class="MultiSelectControlCodes.View.ListItemsView"
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:sdl="http://schemas.sdl.com/xaml"
xmlns:viewModel="clr-namespace:MultiSelectControlCodes.ViewModel"
xmlns:model="clr-namespace:MultiSelectControlCodes.Model"
mc:Ignorable="d" d:DesignHeight="200" d:DesignWidth="400"
d:DataContext="{d:DesignInstance viewModel:ListItemsViewModel}">
<UserControl.Resources>
<DataTemplate x:Key="MultiSelectComboBox.Dropdown.ListBox.ItemTemplate" DataType="Block">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" Text="{Binding Path=Name}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="MultiSelectComboBox.SelectedItems.ItemTemplate" DataType="Block">
<StackPanel Orientation="Horizontal" Margin="0,-4">
<TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" Margin="2,0" />
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid>
<sdl:MultiSelectComboBox
Margin="2"
VerticalAlignment="Top"
Height="50"
IsEditable="true"
SelectionMode="Multiple"
SelectedItems="{Binding SelectedBlocks}"
ItemsSource="{Binding IncludedBlocks}"
SelectedItemTemplate="{StaticResource MultiSelectComboBox.SelectedItems.ItemTemplate}"
DropdownItemTemplate="{StaticResource MultiSelectComboBox.Dropdown.ListBox.ItemTemplate}"
sdl:SelectedItemsChangedBehaviour.SelectedItemsChanged="{Binding SelectedItemsChangedCommand}"/>
</Grid>
</UserControl>
Working Result:

Bind to the properties of the view model using a RelativeSource:
<sdl:MultiSelectComboBox
Margin="2"
VerticalAlignment="Top"
Height="50"
IsEditable="true"
SelectionMode="Multiple"
SelectedItems="{Binding DataContext.SelectedBlocks, RelativeSource={RelativeSource AncestorType=DataGrid}}"
ItemsSource="{Binding DataContext.IncludedBlocks, RelativeSource={RelativeSource AncestorType=DataGrid}}"
SelectedItemTemplate="{StaticResource MultiSelectComboBox.SelectedItems.ItemTemplate}"
DropdownItemTemplate="{StaticResource MultiSelectComboBox.Dropdown.ListBox.ItemTemplate}"
sdl:SelectedItemsChangedBehaviour.SelectedItemsChanged="{Binding SelectedItemsChangedCommand}"/>
The default DataContext the root element in a CellTemplate is the current item in the ItemsSource, i.e. an int in Routes in this case, and this one doesn't have any IncludedBlocks or SelectedBlocks property to bind to.

WPF DataTemplate binding parameter in Window.Resources

I'm creating a datagrid, with filters in the column headers. It works, but I don't think it's a good approach. Let me show you the code, very simple example:
The View
<Window x:Class="TestDataGridApp.Views.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:viewModels="clr-namespace:TestDataGridApp.ViewModels"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.DataContext>
<viewModels:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="DataGridHeader">
<DockPanel>
<TextBlock DockPanel.Dock="Top" TextAlignment="Left" Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<TextBox DockPanel.Dock="Top" Text="{Binding DataContext.FilterName, RelativeSource={RelativeSource AncestorType=Window}, UpdateSourceTrigger=LostFocus}"/>
</DockPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{Binding ItemCollection}" AutoGenerateColumns="False">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Path=Id}" Width="60" MinWidth="60" MaxWidth="60" HeaderTemplate="{StaticResource DataGridHeader}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="60" MinWidth="60" MaxWidth="60" HeaderTemplate="{StaticResource DataGridHeader}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
ViewModel
namespace TestDataGridApp.ViewModels
{
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Data;
using TestDataGridApp.Entities;
using Prism.Mvvm;
public class MainWindowViewModel : BindableBase
{
private string _filterId;
private string _filterName;
private ObservableCollection<Item> _items = new ObservableCollection<Item>();
public MainWindowViewModel()
{
for (int i = 1; i <= 100; ++i)
{
Items.Add(new Item() {Id = i, Name = $"Item{i}"});
}
}
public string FilterId
{
get { return _filterId; }
set
{
SetProperty(ref _filterId, value);
TriggerFilters();
}
}
public string FilterName
{
get { return _filterName; }
set
{
SetProperty(ref _filterName, value);
TriggerFilters();
}
}
public ObservableCollection<Item> Items
{
get { return _items; }
set { SetProperty(ref _items, value); }
}
public ICollectionView ItemCollection => CollectionViewSource.GetDefaultView(Items);
private void TriggerFilters()
{
ItemCollection.Filter = o => FilterItem((Item)o);
}
private bool FilterItem(Item item)
{
try
{
bool checkId = false;
bool checkName = false;
int itemId = 0;
if (!string.IsNullOrEmpty(FilterId) && int.TryParse(FilterId, out itemId)) checkId = true;
if (!string.IsNullOrEmpty(FilterName)) checkName = true;
if (!checkId && !checkName) return true;
if (item == null) return false;
bool checkIdIsOk = (checkId && item.Id == int.Parse(FilterId) || !checkId);
bool checkNameIsOk = (checkName && item.Name.ToUpper().Contains(FilterName.ToUpper()) || !checkName);
if (checkIdIsOk && checkNameIsOk) return true;
}
catch (Exception e)
{
Console.WriteLine(e);
}
return false;
}
}
}
The Item
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
}
Basically simple datagrid, 2 columns. In each column there is a TextBox with binded filter. Each filter has its own field, so after the focus is lost, I can filter the grid by all filters.
My issue is.. I have a lot of columns. This is customized datagrid, so you can add and remove columns on the fly and there's a lot of duplicated code. Basically this is duplicated:
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Top" TextAlignment="Left" Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<TextBox DockPanel.Dock="Top"
Text="{Binding DataContext.FilterId, RelativeSource={RelativeSource AncestorType=Window}, UpdateSourceTrigger=LostFocus}"/>
</DockPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
... only this <TextBox DockPanel.Dock="Top" Text="{Binding DataContext.FilterId, ... is changing for different columns.
So, I thought, I can easily replace it with this solution, but now.. I lost binding to my filter fields in the ViewModel:
<Window.Resources>
<DataTemplate x:Key="DataGridHeader">
<DockPanel>
<TextBlock DockPanel.Dock="Top" TextAlignment="Left" Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<TextBox DockPanel.Dock="Top" Text="{Binding DataContext.FilterName, RelativeSource={RelativeSource AncestorType=Window}, UpdateSourceTrigger=LostFocus}"/>
</DockPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{Binding ItemCollection}" AutoGenerateColumns="False">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Path=Id}" Width="60" MinWidth="60" MaxWidth="60" HeaderTemplate="{StaticResource DataGridHeader}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="60" MinWidth="60" MaxWidth="60" HeaderTemplate="{StaticResource DataGridHeader}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
SOO.. I was thinking, to create a Dictionary for filters, where key would be the name of the column and in value I will store current filter (or null, if there's no filter at the moment for this column). Something like..
<TextBox x:Name="Foo" DockPanel.Dock="Top" Text="{Binding DataContext.FiltersDictionary[Foo], RelativeSource={RelativeSource AncestorType=Window}, UpdateSourceTrigger=LostFocus}"/>
But then I have to Biding contexts.. for one TextBox. I'm really not sure about this solution..
My question will be, how to create a parameter for DataTemplate in the above scenario?
Thanks for help!
PS. It's not a duplicate. This question is about "how to create a parameter for DataTemplate". The "duplicated" question is about dictionary as a binding - a potential solution for this question.. although probably NOT. As another user suggested there might be totally different, better solution to solve this problem. Two different things. I'm shocked that I have to explain this

Easiest way is to not rely only on xaml and add some code to help. For example use Loaded event of your TextBox like this:
<DataTemplate x:Key="DataGridHeader">
<DockPanel>
<TextBlock DockPanel.Dock="Top" TextAlignment="Left" Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<TextBox DockPanel.Dock="Top" Loaded="OnFilterBoxLoaded" />
</DockPanel>
</DataTemplate>
And setup binding when it is loaded:
private void OnFilterBoxLoaded(object sender, RoutedEventArgs e) {
var tb = (TextBox)sender;
// find column
DataGridColumnHeader parent = null;
DependencyObject current = tb;
do {
current = VisualTreeHelper.GetParent(current);
parent = current as DataGridColumnHeader;
}
while (parent == null);
// setup binding
var binding = new Binding();
// use parent column header as name of the filter property
binding.Path = new PropertyPath("DataContext.Filter" + parent.Column.Header);
binding.Source = this;
binding.UpdateSourceTrigger = UpdateSourceTrigger.LostFocus;
tb.SetBinding(TextBox.TextProperty, binding);
}
You can use attached property to achieve the same, but I don't think it's needed in this case.

I used Evk solution with DependencyProperty instead of using Header
<controls:FilterDataGridTextColumn FilterName="Name" Header="Name" Binding="{Binding Path=Name}" Width="200" HeaderTemplate="{StaticResource HeaderTemplate}" />
FilterDataGridTextColumn :
public class FilterDataGridTextColumn : DataGridTextColumn
{
public static readonly DependencyProperty FilterNameProperty =
DependencyProperty.Register("FilterName", typeof(string), typeof(FilterDataGridTextColumn));
public string FilterName
{
get { return (string) GetValue(FilterNameProperty); }
set { SetValue(FilterNameProperty, value); }
}
}

WPF Expander - Only one expander to be expanded at any time

In a WPF list view I create few WPF expanders which inside each expander I have few items. Now I want to only one of the expanders to be expanded each time...meaning all other expanders to be collopsed if one is expanded. Can you please help? Please note that the expanders are created by ItemTemplate !
XMAL :
<UserControl x:Class="DataRetrieval.Views.ParametersView"
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"
mc:Ignorable="d"
xmlns:local="clr-namespace:DataRetrieval.Views"
d:DesignWidth="400" Height=" 600" Background="White">
<UserControl.Resources>
<DataTemplate x:Key="StringDataTemplate">
<StackPanel Margin="5" >
<TextBlock Text="{Binding Name}" />
<TextBox Text="{Binding SelectedValue, UpdateSourceTrigger=PropertyChanged}" Width="290" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="DateDataTemplate">
<StackPanel Margin="5" >
<ComboBox SelectedIndex="{Binding SelectedValue, UpdateSourceTrigger=PropertyChanged}" Text="{Binding Name}" Width="290" ItemsSource="{Binding UserItems}"/>
<DatePicker SelectedDate="{Binding multitype.datetime}" Width="200"/>
</StackPanel>
</DataTemplate>
<local:ParamControlTemplateSelector x:Key="myParamTemplateSelector" />
</UserControl.Resources>
<Border BorderBrush="LightGray" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8" Margin="20" Background="#FFF3F3F3">
<Grid Margin="5">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ListView x:Name="myListView1" ItemsSource="{Binding Qtables, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" SelectedIndex="{Binding SelectedIndex}">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding Name}" Width="320" IsExpanded="{Binding IsExpanded}" >
<StackPanel Height="600">
<TextBlock Text="{Binding Name}" />
<ListView x:Name="myListView" ItemsSource="{Binding Params, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ItemTemplateSelector="{StaticResource myParamTemplateSelector}" SelectedIndex="{Binding CurrentUser, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</ListView>
</StackPanel>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
</Border>
</UserControl>
ViewModel
namespace DataRetrieval.ViewModel
{
class ParametersViewModel:BindableBase
{
public ParametersViewModel()
{
AParams = new WhereParams();
Qtables = new QDatatables();
for (int j = 0; j < 5;j++ )
{
for (int i = 0; i < 10; ++i)
{
int[] numbers;
numbers = new int[3] { 1, 2, 3 };
var parameter = new WhereParam { ID = i, Name = "Name " + i.ToString() };
if (i == 2 || i == 4)
{
parameter.Type = ParamTypeEnum.datetimeType;
}
AParams.Add(parameter);
}
var qtable = new QDatatable { ID=j, Name = j.ToString() + "QTable", Params = AParams};
Qtables.Add(qtable);
}
}
private WhereParam _parameter;
public WhereParam Parameter
{
get { return _parameter; }
set
{
SetProperty(ref _parameter, value);
}
}
private WhereParams _paramas;
public WhereParams AParams
{
get { return _paramas; }
set { SetProperty(ref _paramas, value); }
}
private QDatatables _qtables;
public QDatatables Qtables
{
get { return _qtables; }
set
{
SetProperty(ref _qtables, value);
}
}
}
}

This could be done by changing the Model to handle the IsExpanded
Model for QTables:
public class QDatatables : BindableBase
{
public QDatatables()
{
List.CollectionChanged += List_CollectionChanged;
}
void List_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
foreach (var item in e.NewItems)
{
var test = item as QDatatable;
test.PropertyChanged += test_PropertyChanged;
}
}
void test_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == "IsExpanded")
{
var cur = sender as QDatatable;
if (cur.IsExpanded == true)
{
foreach (var item in List)
{
if (item.Name != cur.Name && item.IsExpanded == true)
{
item.IsExpanded = false;
}
}
}
}
}
private ObservableCollection<QDatatable> _list;
public ObservableCollection<QDatatable> List
{
get { return _list ?? (_list=new ObservableCollection<QDatatable>()); }
set { SetProperty(ref _list, value); }
}
}

Binding Property at runtime

I have created an UserControl for reusability in my program:
GroupPanel.xaml:
<UserControl x:Class="View.UserControls.GroupPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"assembly=ViewModel"
Name="root">
<DockPanel>
<DataGrid DockPanel.Dock="Top"
AutoGenerateColumns="False"
CanUserAddRows="True"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
DataContext="{Binding ElementName=root}"
ItemsSource="{Binding DataGridItemSource}"
Name="mainGrid">
<DataGrid.Columns>
<DataGridTextColumn Header="Nr/Unit"
Binding="{Binding Nr}" />
<DataGridTextColumn Header="Text"
Binding="{Binding Text}" />
<DataGridTextColumn Header="Comment"
Binding="{Binding Comment}" />
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="Delete" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</DockPanel>
and a Dependency Property to set the DataGrid's ItemsSource:
GroupPanel.xaml.cs:
public static readonly DependencyProperty DataGridItemSourceProperty =
DependencyProperty.Register("DataGridItemSource", typeof(IEnumerable), typeof(GroupPanel),
new PropertyMetadata(null));
public IEnumerable DataGridItemSource
{
get { return (IEnumerable)GetValue(DataGridItemSourceProperty); }
set { SetValue(DataGridItemSourceProperty, value); }
}
I have a window where I need this UserControl 2 times with different ItemsSources to bind. But both Sources have the same properties up to first property. The sources are:
GroupNumber:
Number, int
Text, string
Comment, string
GroupUnit:
Unt, int
Text, string
Comment, string
The behaviour is the same for both of them. Is there a way to set the 1 DataGrid column's binding depending on the ItemsSource?
I have tried something like this:
void GroupPanel_Loaded(object sender, RoutedEventArgs e)
{
var type = DataGridItemSource.GetType();
if(type.FullName.Contains("GroupNumber"))
{
}
}
But I don't know how to set the columns binding inside the if...
Thank you in advance

You can add another dependecy property to your GroupPanel usercontrol:
public string FirstColumnBindingPropertyName
{
get { return (string)GetValue(FirstColumnBindingPropertyNameProperty); }
set { SetValue(FirstColumnBindingPropertyNameProperty, value); }
}
public static readonly DependencyProperty FirstColumnBindingPropertyNameProperty =
DependencyProperty.Register("FirstColumnBindingPropertyName", typeof(string), typeof(GroupPanel), new UIPropertyMetadata(null, new PropertyChangedCallback(OnFirstColumnBindingPropertyNameChanged)));
private static void OnFirstColumnBindingPropertyNameChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args)
{
GroupPanel groupPanel = (GroupPanel)dependencyObject;
DataGridTextColumn dataGridTextColumn = groupPanel.mainGrid.Columns[0] as DataGridTextColumn;
if (args.NewValue == null)
{
dataGridTextColumn.Binding = null;
}
else
{
dataGridTextColumn.Binding = new Binding(Convert.ToString(args.NewValue));
}
}
Then in your window you will have:
<local:GroupPanel FirstColumnBindingPropertyName="Number" />
<local:GroupPanel FirstColumnBindingPropertyName="Unt" />

You can use a DataTemplateSelector. Please refer below code.
<Window x:Class="DataTemplateSelector_Learning.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DataTemplateSelector_Learning"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="GroupNumber">
<TextBlock Text="{Binding Number}"/>
</DataTemplate>
<DataTemplate x:Key="GroupUnit">
<TextBlock Text="{Binding Unit}" />
</DataTemplate>
</Window.Resources>
<StackPanel>
<DataGrid DockPanel.Dock="Top"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
Name="numGrid">
<DataGrid.Columns>
<DataGridTemplateColumn Header="GroupNumber">
<DataGridTemplateColumn.CellTemplateSelector>
<local:GroupTemplateSelector
GroupNumber="{StaticResource GroupNumber}"
GroupUnit="{StaticResource GroupUnit}"/>
</DataGridTemplateColumn.CellTemplateSelector>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Text"
Binding="{Binding Text}" />
<DataGridTextColumn Header="Comment"
Binding="{Binding Comment}" />
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="Delete" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<DataGrid DockPanel.Dock="Top"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
Name="unitGrid">
<DataGrid.Columns>
<DataGridTemplateColumn Header="GroupUnit">
<DataGridTemplateColumn.CellTemplateSelector>
<local:GroupTemplateSelector
GroupNumber="{StaticResource GroupNumber}"
GroupUnit="{StaticResource GroupUnit}"/>
</DataGridTemplateColumn.CellTemplateSelector>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Text"
Binding="{Binding Text}" />
<DataGridTextColumn Header="Comment"
Binding="{Binding Comment}" />
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="Delete" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ObservableCollection<GroupNumber> lstNum = new ObservableCollection<GroupNumber>();
lstNum.Add(new GroupNumber() { Number=1,Text="Test",Comment="Comment"});
numGrid.ItemsSource = lstNum;
ObservableCollection<Groupunit> lstUnit = new ObservableCollection<Groupunit>();
lstUnit.Add(new Groupunit() { Unit = 2, Text = "Test", Comment = "Comment" });
unitGrid.ItemsSource = lstUnit;
}
}
public class GroupTemplateSelector : DataTemplateSelector
{
public DataTemplate GroupNumber
{ get; set; }
public DataTemplate GroupUnit
{ get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is GroupNumber)
{
return GroupNumber;
}
else if (item is Groupunit)
{
return GroupUnit;
}
else
return base.SelectTemplate(item, container);
}
}
public class GroupNumber
{
private int number;
public int Number
{
get { return number; }
set { number = value; }
}
private string text;
public string Text
{
get { return text; }
set { text = value; }
}
private string comment;
public string Comment
{
get { return comment; }
set { comment = value; }
}
}
public class Groupunit
{
private int unit;
public int Unit
{
get { return unit; }
set { unit = value; }
}
private string text;
public string Text
{
get { return text; }
set { text = value; }
}
private string comment;
public string Comment
{
get { return comment; }
set { comment = value; }
}
}