We Keep Coding

How to present data from viewmodel [duplicate]

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; }
}

Navigate through TabItem using MVVm

Assum that I have 3 user Control(TIShowNames,TIEnterCode,TIShowFactor).
they have their views and their corresponding viewModel.
all these 3, are in mainwindowView.
Here is my mainwindowView Xaml:
<Controls:TransitionPresenter Name="transContainer" Grid.Row="2" RestDuration="0:0:1" IsLooped="False" Transition="{StaticResource SlideTransition}">
<TabControl Name="TCMain" Background="#00FFFFFF" BorderThickness="0" Padding="0 -5 0 0 ">
<TabItem Name="TIShowNames" Visibility="Collapsed">
<views:NameView x:Name="NameViewElement" />
</TabItem>
<TabItem Name="TIEnterCode" Visibility="Collapsed">
<views:CodeView x:Name="CodeViewElement" />
</TabItem>
<TabItem Name="TIShowFactor" Visibility="Collapsed">
<views:FactorDetailView x:Name="FactorDetailViewElement" />
</TabItem>
</TabControl>
</Controls:TransitionPresenter>
In my old Programming style i used to use this line of code for navigating through tab items(without any pattern):
private void ChangeTabItemTo(TabItem TI)
{
transContainer.ApplyTransition("TCMain", "TCMain");
TCMain.SelectedItem = TI;
}
I have a btn show in "TIShowNames", so when i clicks on that it has to go to "TIShowFactor".
In MVVM, ViewModel does not know any thing about view(this item tab is in its parent view!!!). so how he can change selected Tab Item without violating MVVM??
Another Try:
Changing Selectedindex wont work because of this error:
"System.Windows.Data Error: 40 : BindingExpression path error: 'Index'
property not found on 'object' ''MainWindowViewModel'
(HashCode=22018304)'. BindingExpression:Path=AAA;
DataItem='MainWindowViewModel' (HashCode=22018304); target element is
'TabControl' (Name=''); target property is 'IsSelected' (type
'Boolean')"
Update:
Controls:TransitionPresenter is from Fluid DLL
Update:
I want to hide tab item's header so no one can click the header and navigatoin through header is possibe only via btns in usercontrols

You could define a DataTemplate per view model type in the view:
<TabControl Name="TCMain"
ItemsSource="{Binding ViewModels}"
SelectedItem="{Binding ViewModel}"
Background="#00FFFFFF" BorderThickness="0" Padding="0 -5 0 0 ">
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl Content="{Binding}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type local:NameViewViewModel}">
<views:NameView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:CodeViewViewModel}">
<views:CodeView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:FactorDetailViewModel}">
<views:FactorDetailView />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
...and bind the SelectedItem property to a source property that you set in your view model, e.g.:
public object ViewModel
{
get { return _vm; }
set { _vm = value; NotifyPropertyChanged(); }
}
...
ViewModel = new CodeViewViewModel(); //displays the CodeView

Expanding on mm8's answer, this is how I'd do it:
First of all, I would create a BaseViewModel class to be inherited by every view model that will represent each tab of the TabControl.
I like to implement it as an abstract class with an abstract string property called "Title", so I can dynamically create the tabs and display their names (or titles). This class would also implement the NotifyPropertyChanged interface.
public abstract class BaseViewModel : INotifyPropertyChanged
{
public abstract string Title { get; }
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Then I would create each view model inheriting from this base view model. for example:
public class NameViewModel : BaseViewModel
{
public override string Title
{
get
{
return "Name";
}
}
}
You would do the same for the other view models, only changing the "title" property of each of them.
Now I would create the MainView of the application and its corresponding view model.
The MainViewModel would have a collection of BaseViewModels and a "CurrentViewModel" (of type BaseViewModel) and would add all the view models you want to its collection on its constructor, like this:
public class MainViewModel : BaseViewModel
{
public override string Title
{
get
{
return "Main";
}
}
private ObservableCollection<BaseViewModel> _viewModels;
public ObservableCollection<BaseViewModel> ViewModels
{
get { return _viewModels; }
set
{
if (value != _viewModels)
{
_viewModels = value;
OnPropertyChanged();
}
}
}
private BaseViewModel _currentViewModel;
public BaseViewModel CurrentViewModel
{
get { return _currentViewModel; }
set
{
if (value != _currentViewModel)
{
_currentViewModel = value;
OnPropertyChanged();
}
}
}
public MainViewModel()
{
ViewModels = new ObservableCollection<BaseViewModel>();
ViewModels.Add(new NameViewModel());
ViewModels.Add(new CodeViewModel());
ViewModels.Add(new FactorDetailViewModel());
}
}
Finally, your main view would be similar to what mm8 posted:
(Notice the differences from my code to mm8's code: (1) You need to set the DisplayMemberPath of the TabControl to the "Title" property of the BaseViewModels and (2) You need to set the DataContext of the Window to your MainViewModel)
<Window ...>
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<TabControl Name="TCMain"
ItemsSource="{Binding ViewModels}"
DisplayMemberPath="Title"
SelectedItem="{Binding CurrentViewModel}"
Background="#00FFFFFF" BorderThickness="0" Padding="0 -5 0 0 ">
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl Content="{Binding}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type local:NameViewModel}">
<local:NameView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:CodeViewModel}">
<local:CodeView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:FactorDetailViewModel}">
<local:FactorDetailView />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
Now it should work as expected. Everytime you change the active tab of the TabControl, the SelectedItem property of the control will change to the corresponding view model, which will be templated as its corresponding view.
This approach is called "View Model First" (instead of View First), by the way.
EDIT
If you want to have a button on one of the view models that has a command to change the current view model, this is how you do it:
I suppose you are familiarized with Josh Smith's RelayCommand. If you are not, just search for its implementation on the web.
You will need to create an ICommand property on your MainViewModel, which will be responsible to change the "CurrentViewModel" property:
private ICommand _showFactorDetailCommand;
public ICommand ShowFactorDetailCommand
{
get
{
if (_showFactorDetailCommand == null)
{
_showFactorDetailCommand = new RelayCommand(p => true, p => show());
}
return _showFactorDetailCommand;
}
}
private void show()
{
CurrentViewModel = ViewModels.Single(s => s.Title == "Factor");
}
The show() method above simply searches the collection of view models that has the title "Factor" and set it to the CurrentViewModel, which in turn will be the Content of the ContentControl that acts as the ContentTemplate of your TabControl inside your main view.
Remember that your FactorDetailViewModel should be implemented as follows:
public class FactorDetailViewModel : ViewModelBase
{
public override string Title
{
get
{
return "Factor";
}
}
}
The button inside your "NameView" will bind to this command which is a property of "MainViewModel" using RelativeSource binding:
<Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ShowFactorDetailCommand}" Content="Show Factor" Height="20" Width="60"/>
You could make this command more generic, passing the title of the view model you would like to navigate to as the command parameter:
private ICommand _showCommand;
public ICommand ShowCommand
{
get
{
if (_showCommand == null)
{
_showCommand = new RelayCommand(p => true, p => show(p));
}
return _showCommand;
}
}
private void show(p)
{
var vm = (string)p;
CurrentViewModel = ViewModels.Single(s => s.Title == vm);
}
Then on your views, pass the Command Parameter too:
<Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ShowCommand}" Content="Show Factor" CommandParameter="Factor" Height="20" Width="60"/>
Finally, to hide your TabItems completely, you need to set the ItemContainerStyle of your TabControl so that the Visibility of your TabItems has the value of "Collapsed".
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</TabControl.ItemContainerStyle>

ICommand Button binding in Itemcontrol

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...

Databinding a nested List property in WPF

I am using the following XAML code to display a list of checked list boxes.
<ListBox x:Name="lbxProjects" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<ListBox x:Name="lbxUnits" ItemsSource="{Binding Units}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox Content="{Binding unit.Name}" IsChecked="{Binding isSelected}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The data model is as follows
public class ProjectsListBox
{
public Project project { get; set; }
public List<UnitsCheckBox> Units = new List<UnitsCheckBox>();
public ProjectsListBox(Project project)
{
this.project = project;
foreach(var d in project.Documents)
{
Units.Add(new UnitsCheckBox(d));
}
}
}
public class UnitsCheckBox : INotifyPropertyChanged
{
public Document unit { get; set; }
private bool isselected = true;
public bool isSelected
{
get { return isselected; }
set
{
isselected = value;
NotifyPropertyChanged("isSelected");
}
}
public UnitsCheckBox(Document d)
{
unit = d;
}
}
I am assigning the data source for the parent listbox like
lbxProjects.DataContext = projectsList;
The code creates the child list boxes but not the checkboxes inside the child list boxes. What am i missing?

How should WPF resolve unit.Name?
If the type UnitsCheckBox contains a Name property, then the CheckBox's Content should be bound to Name:
Content="{Binding Name}"
You should always specify the type of your DataTemplate:
<DataTemplate DataType="{x:Type local:UnitsCheckBox}" ...>
Those are the probable problems but I can't be sure unless you give us the UnitsCheckBox code.

Simple WPF DataBinding of a ListBox to an ObservableCollection of strings

Okay, I just don't get it. Please tell me why I get no items in my ListBox (should be the two strings "empty" and "stuff" right now ):
XAML:
<Window.DataContext>
<Windows:SettingsWindowModel x:Name="model"/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="ListItemTemplate">
<ListBoxItem Content="{Binding}" />
</DataTemplate>
</Window.Resources>
<ListBox Name="listBoxActivities" SelectionChanged="ListBoxActivitiesSelectionChanged"
ItemsSource="{Binding Path=IgnoredActivities}"
HorizontalAlignment="Left" VerticalAlignment="Top" MinHeight="40" MinWidth="200"
Padding="5,100,5,0" Height="100" Margin="0,207,0,0" ItemTemplate="{StaticResource ListItemTemplate}" />
In SettingsWindowModel:
private ObservableCollection<String> _ignoredActivities;
public ObservableCollection<String> IgnoredActivities
{
get
{
if (_ignoredActivities == null)
{
// empty
_ignoredActivities = new ObservableCollection<String>() { "empty","stuff" };
}
return _ignoredActivities;
}
}
Anything more you need to know? What did I forget?
EDIT:
Maybe I should add that VisualStudio + ReSharper also show no underlines and compile errors. Not even warnings.

Sorry guys, the data was there all the time. The problem was in the visual details. The padding also got applied to a sub-container of the ListBox (or the items), therefore the items were not sitting at the top of the list. As I've but a height on the ListBox, the items always were below the visible height of the ListBox. Stange thing to debug. Thanks for your answers anyways!

1) You don't need to set the DataTemplate
2) Are you sure the DataContext of the view (aaaaa.xaml.cs) is the ViewModel (bbbbb.cs, contains IgnoredActivities)?
It should be like this:
aaaaa.xaml:
<ListBox ItemsSource="{Binding IgnoredActivities}" />
aaaaa.xaml.cs:
public partial class aaaaa : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new bbbbb();
}
}
bbbbb.cs :
public class bbbbb : INotifyPropertyChanged
{
public bbbbb()
{
IgnoredActivities.Add("empty");
IgnoredActivities.Add("stuff");
}
private ObservableCollection<String> _ignoredActivities;
public ObservableCollection<String> IgnoredActivities
{
get
{
if (_ignoredActivities == null)
{
// empty
_ignoredActivities = new ObservableCollection<String>() { "empty","stuff" };
}
return _ignoredActivities;
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string _Prop)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(_Prop));
}
#endregion
}
}

With this statement you are binding to a property "IgnoredActivities" in a control named "model" of your Window.
ItemsSource="{Binding ElementName=model, Path=IgnoredActivities}"
When working with ViewModels, set them as the DataContext of your control:
<ListBox ItemsSource="{Binding IgnoredActivities}">
<ListBox.DataContext>
<local:MyViewModel/>
</ListBox.DataContext>
</ListBox>
A binding with no source specified ("{Binding PathToMyPropert}") defaults to the control's DataContext, which is inherited from parent controls. So in your case, you could set your ViewModel to your Window's DataContext so it will be available to all its children:
<Window>
<Window.DataContext>
<local:MyViewModel/>
</Window.DataContext>
<ListBox ItemsSource="{Binding IgnoredActivities}"/>
</Window>

Get rid of that ElementName binding property. It's used to bind to WPF controls. Simply set ItemsSource={Binding IgnoredActivities}

Try it as follows:
<ItemsControl ItemsSource="{Binding Path=IgnoredActivities}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<ListBox />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBoxItem Content="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Try also setting the DataContext for the control in code behind.
Xaml - <ListBox Name="myListBox" ItemsSource="{Binding IgnoredActivities}"/>
CodeBehind - myListBox.DataContext=this;