Have xaml.cs file containing my ObservableCollection of my ViewModel. I have now implemented a command binding to a button click which invokes my function inside the viewmodel. The problem is that I do not get the item of my list in my button click function
xaml
<ItemsControl ItemsSource="{Binding ConditionList}" AlternationCount="{Binding ConditionList.Count}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<Button Content="{Binding}" Command="{Binding DataContext.DeleteCondition,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" CommandParameter="{Binding}" />
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Please note my button is in ItemControl
VM
private void DoDeleteCondition(object parameter)
{
// if (parameter != null)
// ...
}
public ICommand DeleteCondition
{
get
{
if (_DeleteCondition == null)
_DeleteCondition = new RelayCommand(o => DoDeleteCondition(o));
return _DeleteCondition;
}
}
You need to create a RelayCommand<T> where T is the Item in the ConditionList. Then you will get your parameter in the execute method.
I have a feeling that your binding is set a little backwards.
In your ItemsControl do you want to have:
the items from your collection and one command that will execute when you click on the single item
or the list of possible commands you want to execute on a single item that you have elsewhere (meaning the collection is displayed on some parent element, so you can bind to the single item somehow)?
... or maybe you have a separate command defined for every item in your collection ...? (then, how are the elements in your collection implemented?)
Depending on your answer:
1:
<ItemsControl ItemsSource="{Binding Path=MyObservableCollection}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<Button Content="{Binding}"
Command="{Binding Path=DataContext.DeleteCondition, RelativeSource={RelativeSource AncestorType=AncestorWithYourViewModelAsDataContext}}"
CommandParameter="{Binding}" />
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
2:
<ItemsControl ItemsSource="{Binding Path=ConditionList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<Button Content="{Binding}"
Command="{Binding Path=MyConditionalCommand}"
CommandParameter="{BindingToTheElementOfYourCllectionThatYouWantToActUpon}" />
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
example implementation in your ViewModel:
private List<ConditionalCommand> _ConditionList;
public List<ConditionalCommand> ConditionList
{
get { return _ConditionList; }
set
{
if (_ConditionList != value)
{
_ConditionList = value;
OnPropertyChanged("ConditionList");
}
}
}
...
class ConditionalCommand
{
public ICommand MyConditionalCommand { get; set; }
public string Name { get; set; }
public override string ToString()
{
return Name;
}
}
...
this.ConditionList = new List<ConditionalCommand>();
this.ConditionList.Add(new ConditionalCommand{ MyConditionalCommand = DeleteCondition , Name="Delete"});
this.ConditionList.Add(new ConditionalCommand{ MyConditionalCommand = DeleteSpecial, Name="Delete special" });
....
private void DoDeleteCondition(object parameter)
{
// if (parameter != null)
// ...
}
public ICommand DeleteCondition
{
get
{
if (_DeleteCondition == null)
_DeleteCondition = new RelayCommand(o => DoDeleteCondition(o));
return _DeleteCondition;
}
}
// DeleteSpecial implemented in similar manner...
Related
How would you add command to a wpf button that is part of ItemsControl and is modifying the ItemsSource itself?
So here is my XAML:
<ItemsControl ItemsSource="{Binding PluginVMs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="btnStampDuplicate"
Content="Duplicate this control"
Command="{Binding ?????????}"/>
<!-- other stuff -->
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And here is my viewmodel:
public ObservableCollection<PluginViewModel> PluginVMs
{
get { return _pluginVMs; }
set
{
if (_pluginVMs != value)
{
_pluginVMs = value;
NotifyPropertyChanged("PluginVMs");
}
}
}
As you can see PluginVMs is collection of PluginViewModel. So I am aware that the Command that is available from the btnStampDuplicate should be implemented inside of PluginViewModel.
However, as the name duplicate suggest, I would like to make a duplicated copy of the currently generated PluginViewModel inside of PluginVMs. What is the best approach to give that kind of functionality to btnStampDuplicate?
it is not necessary to have a command in each item. you can use CommandParameter to pass an item which is a dupe source
inside DataTemplate bind command using ElementName to access DataContext of a higher level
View
<ItemsControl Name="ListPlugins" ItemsSource="{Binding PluginVMs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="btnStampDuplicate"
Content="duplicate"
CommandParameter={Binding Path=.}
Command="{Binding Path=DataContext.DupeCmd, ElementName=ListPlugins}"
/>
<!-- other stuff -->
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
ViewModel
public class Vm
{
public ObservableCollection<PluginViewModel> PluginVMs
{
get { return _pluginVMs; }
set
{
if (_pluginVMs != value)
{
_pluginVMs = value;
NotifyPropertyChanged("PluginVMs");
}
}
}
public ICommand DupeCmd { get; private set; }
}
I have a problem to perform filtering of ICollectionView in combination with usage of CompositeCollection.
The illustration describes what I want to achieve:
Window with filter text box, items collection and "Add" button
Requirements:
The "Add" button must be the part of the WrapPanel
The filtering should be performed via ICollectionView.View.Filter
DebugWindow.xaml:
<StackPanel>
<TextBox Text="{Binding TextBoxText, UpdateSourceTrigger=PropertyChanged}" Margin="5" BorderBrush="Black"/>
<ItemsControl BorderBrush="Gray">
<!-- Resources -->
<ItemsControl.Resources>
<CollectionViewSource x:Key="ColVSKey"
Source="{Binding MyCollection}"/>
</ItemsControl.Resources>
<!-- Items Source -->
<ItemsControl.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource ColVSKey}}"/>
<Button Content="Add another one" Margin="5"/>
</CompositeCollection>
</ItemsControl.ItemsSource>
<!-- Item Template -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Background="Gray"
Margin="10"
Padding="5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- Items Panel -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
DebugWindow.xaml.cs:
public partial class DebugWindow : Window, INotifyPropertyChanged
{
private string _textBoxText = "";
public ObservableCollection<string> MyCollection { get; set; }
public Predicate<object> FilterFunction { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private ICollectionView view;
public string TextBoxText
{
get
{
return _textBoxText;
}
set
{
if (value == _textBoxText)
return;
_textBoxText = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(nameof(TextBoxText)));
if (view != null)
view.Refresh();
}
}
public DebugWindow()
{
InitializeComponent();
MyCollection = new ObservableCollection<string>() { "one", "two", "Three", "four", "five", "six", "seven", "Eight" };
FilterFunction = new Predicate<object>((o) => Filter(o));
view = CollectionViewSource.GetDefaultView(MyCollection);
if (view != null)
view.Filter = new Predicate<object>((o) => Filter(o));
this.DataContext = this;
}
public bool Filter(object v)
{
string s = (string)v;
bool ret = false;
if (s.IndexOf(TextBoxText) != -1)
ret = true;
return ret;
}
}
The problem is, that the view = CollectionViewSource.GetDefaultView(MyCollection); is the View associated with the CollectionViewSource defined within Resources and not the View of the CollectionContainer. So the wrong View is refreshed and the displayed View is not refreshed at all.
I was able to achieve desired behaviour with extending the CollectionContainer, hooking up to CollectionChanged event:
public class MyCollectionContainer : CollectionContainer
{
private ICollectionView _view;
public ICollectionView View
{
get
{
return _view;
}
}
public MyCollectionContainer()
{
this.CollectionChanged += MyCollectionContainer_CollectionChanged;
}
private void MyCollectionContainer_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
if (_view == null && Collection != null && MyFilter != null)
{
_view = CollectionViewSource.GetDefaultView(Collection);
_view.Filter += MyFilter;
}
}
}
and exposing it to the code-behind:
...in XAML...
<CompositeCollection>
<local:MyCollectionContainer x:Name="MyCollectionContainer" Collection="{Binding Source={StaticResource ColVSKey}}"/>
<Button Content="Add another one" Margin="5"/>
</CompositeCollection>
...in constructor...
MyCollectionContainer.MyFilter = new Predicate<object>((o) => Filter(o));
...in TextBoxText property set...
if(MyCollectionContainer.View!=null)
MyCollectionContainer.View.Refresh();
Questions:
Is there a way how to achieve the behaviour I require without exposing the control to code-behind?
Is it possible to bind a MVVM to View of the CollectionContainer?
Thanks in advance and sorry for long post.
I have found an elegant solution to my problem. Thanks to article on Thomas Levesque's .NET blog which was referenced in this answer: CollectionContainer doesn't bind my Collection I can simply perform binding and the ICollectionView obtained by
CollectionViewSource.GetDefaultView(MyCollection); is the right one to be refreshed.
BindingProxy.cs (credit goes to Thomas Levesque)
public class BindingProxy : Freezable
{
#region Overrides of Freezable
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
#endregion
public object MyData
{
get { return (object)GetValue(MyDataProperty); }
set { SetValue(MyDataProperty, value); }
}
public static readonly DependencyProperty MyDataProperty =
DependencyProperty.Register("MyData", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
The updated XAML:
<ItemsControl>
<ItemsControl.Resources>
<local:BindingProxy x:Key="proxy" MyData="{Binding Path=MyCollection}"/>
</ItemsControl.Resources>
<ItemsControl.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource proxy}, Path=MyData}"/>
<Button Content="Add another one" Margin="5"/>
</CompositeCollection>
</ItemsControl.ItemsSource>
...
</ItemsControl>
View.Xaml
<Grid>
<ListView ItemsSource = "{Binding Path = dcCategory}" SelectedValuePath = "Key" SelectedValue = "{Binding Path = Category, Mode = TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal" >
<Button Content="Add Value" Command="{Binding Path=DataContext.AddValue, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type ListView}}}"/>
<TextBlock Text="{Binding Path=Key.Name}"/>
</StackPanel>
<ListBox ItemsSource="{Binding Path=Value}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
My goal is to click Add Value and send selected item (Category type). Its right now it's working but not as I acepted.
Insted of clicking only button, I have to click first blue area and then code 'catch' the 'Category' with data. Otherwise Category is null.
example
ViewModel
private Category _Category;
public Category Category
{
get
{
return _Category;
}
set
{
if (_Category != value)
{
_Category = value;
OnPropertyChanged(() => Category);
}
}
}
public ICommand AddValue
{
get
{
if (_AddValue == null)
{
_AddValue = new BaseCommand(() => Messenger.Default.Send(CategoryValueCode.AddValue + "," + Category.CategoryId));
}
return _AddValue;
}
}
That's logic, because your button's command will be executed before ListView.SelectedValue is set. You can change it, if you handle PreviewMouseDown for the Button. I also found it better to set ListView.SelectionMode to Single.
<ListView ItemsSource = "{Binding Path = dcCategory}" SelectedValuePath = "Key" SelectedValue = "{Binding Path = Category, Mode = TwoWay}" SelectionMode="Single">
<Button Content="Add Value" Command="{Binding Path=DataContext.AddValue, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" PreviewMouseDown="PreviewMouseDown"/>
private void PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
ListViewItem lvi = null;
var visParent = VisualTreeHelper.GetParent(sender as FrameworkElement);
while (lvi == null && visParent != null)
{
lvi = visParent as ListViewItem;
visParent = VisualTreeHelper.GetParent(visParent);
}
if (lvi == null) { return; }
lvi.IsSelected = true;
}
I didn't check Rekshino solution
Thank you for the tips, in the meantime during fighting with the problem I made so many changes that completely change viewmodel / view.
I achieved my goal in that way:
View:
<Grid>
<ItemsControl ItemsSource = "{Binding listCategoryAddValue}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="Add Value" Command="{Binding Path=AddValue}"/>
<TextBlock Text="{Binding Category.Name}"/>
</StackPanel>
<ListBox ItemsSource="{Binding ValueList}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
ViewModel:
public class CategoriesViewModel : WszystkieViewModel<CategoryAddValue>
{
#region Fields & Properties
private ObservableCollection<CategoryAddValue> _listCategoryAddValue;
public ObservableCollection<CategoryAddValue> listCategoryAddValue
{
get
{
if (_listCategoryAddValue == null) { Load(); }
return _listCategoryAddValue;
}
set
{
if (_listCategoryAddValue != value)
{
_listCategoryAddValue = value;
OnPropertyChanged(() => listCategoryAddValue);
}
}
}
#endregion Fields & Properties
#region Constructor
public CategoriesViewModel() : base()
{
base.DisplayName = "Kategorie";
}
#endregion Constructor
#region Helpers
private void SendValue(int CategoryId)
{
Messenger.Default.Send(CategoryValueCode.AddValue + "," + CategoryId);
}
public override void Load()
{
var allCategories = (from k in db.Category select k).ToList();
_listCategoryAddValue = new ObservableCollection<CategoryAddValue>();
foreach (var i in allCategories)
{
_listCategoryAddValue.Add(new CategoryAddValue(new RelayCommand(() => SendValue(i.KategoriaId)))
{
Category = i,
ValueList = db.CategoryValue.Where(x => x.CategoryId== i.CategoryId).Select(x => x.Value).ToList()
});
}
}
#endregion Helpers
}
Model
public class CategoryAddValue
{
public Category Category { get; set; }
public List<string> ValueList { get; set; }
private ICommand _addValue;
public ICommand AddValue
{
get
{
return _addValue;
}
}
public CategoryAddValue(RelayCommand command)
{
_addValue = command;
}
}
How would you add command to a wpf button that is part of ItemsControl and is modifying the ItemsSource itself?
So here is my XAML:
<ItemsControl ItemsSource="{Binding PluginVMs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="btnStampDuplicate"
Content="Duplicate this control"
Command="{Binding ?????????}"/>
<!-- other stuff -->
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And here is my viewmodel:
public ObservableCollection<PluginViewModel> PluginVMs
{
get { return _pluginVMs; }
set
{
if (_pluginVMs != value)
{
_pluginVMs = value;
NotifyPropertyChanged("PluginVMs");
}
}
}
As you can see PluginVMs is collection of PluginViewModel. So I am aware that the Command that is available from the btnStampDuplicate should be implemented inside of PluginViewModel.
However, as the name duplicate suggest, I would like to make a duplicated copy of the currently generated PluginViewModel inside of PluginVMs. What is the best approach to give that kind of functionality to btnStampDuplicate?
it is not necessary to have a command in each item. you can use CommandParameter to pass an item which is a dupe source
inside DataTemplate bind command using ElementName to access DataContext of a higher level
View
<ItemsControl Name="ListPlugins" ItemsSource="{Binding PluginVMs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="btnStampDuplicate"
Content="duplicate"
CommandParameter={Binding Path=.}
Command="{Binding Path=DataContext.DupeCmd, ElementName=ListPlugins}"
/>
<!-- other stuff -->
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
ViewModel
public class Vm
{
public ObservableCollection<PluginViewModel> PluginVMs
{
get { return _pluginVMs; }
set
{
if (_pluginVMs != value)
{
_pluginVMs = value;
NotifyPropertyChanged("PluginVMs");
}
}
}
public ICommand DupeCmd { get; private set; }
}
I am new to using RelayCommands (following Josh Smith's MVVMDemoApp) and could use some help identifying my mistake.
I have two listboxes. When an item in the first is selected and the "Add" button is pressed, the AddCommand is executed and the second list's ObservableCollection gets the selectedItem added to it.
My View:
<DockPanel >
<Border DockPanel.Dock="Bottom" Height="50" HorizontalAlignment="Left" Width="150" >
<!--Notice here that the Button was disabled until it was given a DataContext, which allowed the CanAddPN to be true-->
<Button Command="{Binding Path=AddToPartsBinCommand}" Content="Add >" />
</Border>
<UniformGrid Columns="2" Rows="1" DockPanel.Dock="Top" >
<!--ListBox 1 (PartNumbersCollection)-->
<ListBox Background="PaleGoldenrod"
ItemsSource="{Binding PnsCollection, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding SelectedPartNumber, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding pn}">
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!--ListBox 2 (SelectedPartNumbersCollection)-->
<ListBox ItemsSource="{Binding PartsBinCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding pn}">
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UniformGrid>
</DockPanel>
My ViewModel:
//DummyDBEntities _context;
public ObservableCollection<PartNumber> _pnsCollection;
public ObservableCollection<PartNumber> _partsBinCollection;
PartNumber _selectedPN;
public ICommand _addToPartsBinCommand;
public MasterViewModel(DummyDBEntities _context)
{
_context = new DummyDBEntities();
this._pnsCollection = new ObservableCollection<PartNumber>(_context.PartNumbers);
this._partsBinCollection = new ObservableCollection<PartNumber>();
}
public ObservableCollection<PartNumber> PnsCollection
{
get { return this._pnsCollection; }
set
{
_pnsCollection = value;
OnPropertyChanged("PnsCollection");
}
}
public PartNumber SelectedPN
{
get { return this._selectedPN; }
set
{
this._selectedPN = value;
OnPropertyChanged("SelectedPN");
OnPropertyChanged("PartsBinCollection");
}
}
public ObservableCollection<PartNumber> PartsBinCollection
{
get
{
if (_partsBinCollection == null)
{
_partsBinCollection = new ObservableCollection<PartNumber>();
}
return this._partsBinCollection;
}
set
{
this._partsBinCollection = value;
OnPropertyChanged("PartsBinCollection");
}
}
public ICommand AddToPartsBinCommand
{
get
{
if (_addToPartsBinCommand == null)
_addToPartsBinCommand = new RelayCommand(() => this.AddPN(),
() => this.CanAddPN());
return this._addToPartsBinCommand;
}
}
private bool CanAddPN()
{
return true;
}
private void AddPN()
{
if (this._partsBinCollection == null)
{
this._partsBinCollection = new ObservableCollection<PartNumber>();
}
this._partsBinCollection.Add(this._selectedPN);
}
Thanks in advance!
Also: why would:
private bool CanAddPN()
{
return this._selectedPN != null;
}
leave my Add button permanently disabled? What am I not doing to let the button know that an item has been selected? This seem like it is the same missing link to my understanding of why the command isn't firing ever.
Thanks again!
You need to raise the CanExecuteChanged on your command to let the client know that it should check again to see if it can execute. Not sure about the RelayCommand but I would assume it's something along the lines of mycommand.RaiseCanExecuteChanged();
Don't forget to cast your command to a relaycommand first since you have it exposed as ICommand.
OOPS! Right after posting this after an hour of struggling I realized that in my View I was referring to the selectedItem property "SelectedPartNumber" and not "SelectedPN". This solved both problems. CanExecuteChanged is evaluated already.