I am new to MVVM and still trying to get a grasp on it so let me know if I'm setting this up wrong. What I have is a UserControl with a ListView in it. I populate this ListView with data from the ViewModel then add the control to my MainView. On my MainView I have a button that I want to use to add an item to the ListView. Here is what I have:
Model
public class Item
{
public string Name { get; set; }
public Item(string name)
{
Name = name;
}
}
ViewModel
public class ViewModel : INotifyPropertyChanged
{
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
private ObservableCollection<Item> _itemCollection;
public ViewModel()
{
ItemCollection = new ObservableCollection<Item>()
{
new Item("One"),
new Item("Two"),
new Item("Three"),
new Item("Four"),
new Item("Five"),
new Item("Six"),
new Item("Seven")
};
}
public ObservableCollection<Item> ItemCollection
{
get
{
return _itemCollection;
}
set
{
_itemCollection = value;
OnPropertyChanged("ItemCollection");
}
}
}
View (XAML)
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical">
<Label Content="{Binding Name}" />
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<UserControl.DataContext>
<local:ViewModel />
</UserControl.DataContext>
<Grid>
<ListView ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding ItemCollection}">
</ListView>
</Grid>
MainWindow
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.mainContentControl.Content = new ListControl();
}
private void Button_Add(object sender, RoutedEventArgs e)
{
}
}
MainWindow (XAML)
<Grid>
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Button Width="100" Height="30" Content="Add" Click="Button_Add" />
</StackPanel>
<ContentControl x:Name="mainContentControl" />
</DockPanel>
</Grid>
Now, from what I understand, I should be able to just an item to ItemCollection and it will be updated in the view. How do I do this from the Button_Add event?
Again, if I'm doing this all wrong let me know and point me in the right direction. Thanks
You should not interact directly with the controls.
What you need to do is define a Command (a class that implements the ICommand-interface) and define this command on your ViewModel.
Then you bind the Button's command property to this property of the ViewModel. In the ViewModel you can then execute the command and add an item directly to your list (and thus the listview will get updated through the automatic databinding).
This link should provide more information:
http://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx#sec11
Related
I have been struggling with this for a day or so, can't figure out what I'm doing wrong here. I want to be able to select any tab in my observable collection of tabs, and I want my selection to be visible in the UI. I have tried SelectedIndex and SelectedItem. I can see that my Properties are set but my tabs are not selected, nothing happens in the UI. Here is my code:
MainWindow.xaml
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uc="clr-namespace:WpfApplication5"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<ViewModel xmlns="clr-namespace:WpfApplication5" />
</Window.DataContext>
<StackPanel>
<Button Content="Select Tab Index 0" Click="Button_Click_0"/>
<Button Content="Select Tab Index 1" Click="Button_Click_1"/>
<Label Content="{Binding SelectedIndex, UpdateSourceTrigger=PropertyChanged}" />
<TabControl ItemsSource="{Binding Tabs}" SelectedIndex="{Binding SelectedIndex, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<uc:TabContent Content="{Binding Content}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</StackPanel>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click_0(object sender, RoutedEventArgs e)
{
var viewModel = (ViewModel)DataContext;
viewModel.SelectedIndex = 0;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
var viewModel = (ViewModel)DataContext;
viewModel.SelectedIndex = 1;
}
}
ViewModel.cs
class ViewModel
{
private int _selectedIndex = 0;
public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection<Tab> _tabCollection = new ObservableCollection<Tab>();
public ViewModel()
{
Tabs.Add(new Tab { Header = "Tab1", Content = new WpfApplication5.TabContent() });
Tabs.Add(new Tab { Header = "Tab2", Content = new WpfApplication5.TabContent() });
}
public ObservableCollection<Tab> Tabs
{
get { return _tabCollection; }
}
public int SelectedIndex
{
get { return _selectedIndex; }
set
{
_selectedIndex = value;
NotifyPropertyChanged("SelectedIndex");
}
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Tab.cs
class Tab
{
public UserControl Content { get; set; }
public string Header { get; set; }
}
TabContent.xaml
<Grid>
<Label Content="Hello World!" />
</Grid>
Your ViewModel class doesn't implement the INotifyPropertyChanged interface:
class ViewModel : INotifyPropertyChanged
{
...
That's your issue.
This is my first time posting a question. I've simplified my code as much as possible to illustrate what I'm looking for.
I have a ViewModel (outer) that contains an ObservableCollection of another ViewModel (inner). The inner ViewModel is for a UserControl. The outer ViewModel is for MainWindow. I simply want to display one UserControl for each item in the ObservableCollection. But, I'm having trouble getting the UserControl's DataContext set to the items in the ObservableCollection.
Inner ViewModel (for UserControl):
public class InnerViewModel : ViewModelBase
{
string _text;
public string Text
{
get { return _text; }
set { SetProperty<string>(ref _text, value); }
}
public InnerViewModel() { }
}
Inner ViewModel (for UserControl):
public class OuterViewModel : ViewModelBase
{
ObservableCollection<InnerViewModel> _innerViewModels;
public ObservableCollection<InnerViewModel> InnerViewModels
{
get { return _innerViewModels; }
set { SetProperty<ObservableCollection<InnerViewModel>>(ref _innerViewModels, value); }
}
public OuterViewModel()
{
_innerViewModels = new ObservableCollection<InnerViewModel>();
}
public void Init()
{
InnerViewModels.Clear();
InnerViewModels.Add(new InnerViewModel { Text = "Item1" });
InnerViewModels.Add(new InnerViewModel { Text = "Item2" });
}
}
InnerControl XAML (outermost tag removed for cleanliness)
<UserControl.DataContext>
<local:InnerViewModel />
</UserControl.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Header"></Label>
<Label Grid.Column="1" Content="{Binding Text}" ></Label>
<Label Grid.Column="2" Content="Footer"></Label>
</Grid>
MainWindow XAML
<Window.DataContext>
<local:OuterViewModel />
</Window.DataContext>
<Grid>
<ItemsControl ItemsSource="{Binding InnerViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:InnerControl></local:InnerControl> <!-- HOW DO I SET THE DATACONTEXT ON THIS??? -->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
InnerControl.cs Code:
public partial class InnerControl : UserControl
{
public InnerControl()
{
InitializeComponent();
}
}
MainWindow.cs Code:
public partial class MainWindow : Window
{
OuterViewModel _vm;
public MainWindow()
{
InitializeComponent();
_vm = (OuterViewModel)DataContext;
_vm.Init();
}
}
ViewModelBase:
public abstract class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
{
if (Equals(storage, value))
{
return false;
}
storage = value;
this.OnPropertyChanged(propertyName);
return true;
}
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler eventHandler = this.PropertyChanged;
if (eventHandler != null)
{
eventHandler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Result:
Screenshot of what I get when I run
I solved this as follows:
Changed MainWindow.cs to create the outer view model:
public partial class MainWindow : Window
{
OuterViewModel _vm;
public MainWindow()
{
InitializeComponent();
_vm = new OuterViewModel();
_vm.Init();
DataContext = _vm;
}
}
Change MainWindow to NOT have DataContext set
<!-- Don't set DataContext here -->
<Grid>
<ItemsControl ItemsSource="{Binding InnerViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:InnerViewModel}">
<local:InnerControl DataContext="{Binding}"></local:InnerControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Changed InnerControl XAML to NOT have DataContext set:
<!-- Don't set DataContext here -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Header"></Label>
<Label Grid.Column="1" Content="{Binding Text}" ></Label>
<Label Grid.Column="2" Content="Footer"></Label>
</Grid>
In you view for the inner VM you create the the view-model in the view (view-first), that means your view that you create in the DataTemplate has a different view-model than the one supplied by the ItemsControl.
You could maybe overwrite that again like this (not sure about the property assignment order):
<DataTemplate>
<local:InnerControl DataContext="{Binding}"/>
</DataTemplate>
As noted in the comment, i would not create the VMs in the view, but create the views implicitly using typed DataTemplates.
I have a main control (MainWindow.xaml) and an user control (ItemView.xaml). MainWindow contains an ItemsControl for all the ItemView-s and a simple button to add an item. All logic is (should be?) inside two corresponding viewmodels (MainWindowViewModel and ItemViewModel). Below is my code (made it as short as possible), but I have two problems with it:
When a new item is added it is correctly displayed but the exception is raised (Cannot create default converter to perform 'two-way' conversions between types 'WpfApplication1.ItemView' and 'WpfApplication1.ItemViewModel'.).
The OnDelete event handler in MainWindowViewModel is never raised? Edit: actually the ViewModel property inside BtnDeleteClick is null so yeah... of course.
Btw - I use Fody PropertyChanged.
MainWindow.xaml:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfApplication1="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Width="100" Height="35" Content="Add" HorizontalAlignment="Left" Margin="10" Click="BtnAddClick"></Button>
<Border Grid.Row="1" MinHeight="50">
<ItemsControl ItemsSource="{Binding ViewModel.Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<wpfApplication1:ItemView ViewModel="{Binding ., PresentationTraceSources.TraceLevel=High, Mode=TwoWay}"></wpfApplication1:ItemView>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
</Window>
MainWindow.xaml.cs:
[ImplementPropertyChanged]
public partial class MainWindow
{
public MainWindowViewModel ViewModel { get; set; }
public MainWindow()
{
InitializeComponent();
ViewModel = new MainWindowViewModel();
}
private void BtnAddClick(object sender, RoutedEventArgs e)
{
ViewModel.Add();
}
}
MainWindowViewModel.cs:
[ImplementPropertyChanged]
public class MainWindowViewModel
{
public ObservableCollection<ItemViewModel> Items { get; set; }
public MainWindowViewModel()
{
Items = new ObservableCollection<ItemViewModel>();
}
public void Add()
{
var item = new ItemViewModel();
item.OnDelete += (sender, args) =>
{
Debug.WriteLine("-- WAITING FOR THIS TO HAPPEN --");
Items.Remove(item);
};
Items.Add(item);
}
}
ItemViewModel.xaml:
<UserControl x:Class="WpfApplication1.ItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Button Width="100" Height="35" Content="Delete" Click="BtnDeleteClick"></Button>
</Grid>
</UserControl>
ItemView.xaml.cs:
[ImplementPropertyChanged]
public partial class ItemView
{
public static readonly DependencyProperty ViewModelProperty = DependencyProperty.Register
(
"ViewModel", typeof(ItemViewModel), typeof(ItemView), new UIPropertyMetadata(null)
);
public ItemViewModel ViewModel
{
get { return (ItemViewModel)GetValue(ViewModelProperty); }
set { SetValue(ViewModelProperty, value); }
}
public ItemView()
{
InitializeComponent();
}
private void BtnDeleteClick(object sender, RoutedEventArgs e)
{
ViewModel.Delete();
}
}
And ItemViewModel.cs:
[ImplementPropertyChanged]
public class ItemViewModel
{
public event EventHandler OnDelete;
public void Delete()
{
var handler = OnDelete;
if (handler != null)
{
handler(this, new EventArgs());
}
}
}
You should not set
DataContext="{Binding RelativeSource={RelativeSource Self}}"
in the XAML of your ItemView. It effectively breaks the ViewModel="{Binding .}" binding in MainWindow.xaml, because the DataContext is no longer an ItemsViewModel, but an ItemsView.
As a rule, you should never explicitly set the DataContext of a UserControl, because all "external" bindings would then require an explicit Source or RelativeSource value.
That said, you're doing all this way too complicated. Instead of having a button click handler in your ItemsView, you could simply have a view model with a delete command, and bind the Button's Command property to this command.
It may look like this:
public class ItemViewModel
{
public string Name { get; set; }
public ICommand Delete { get; set; }
}
public class MainViewModel
{
public MainViewModel()
{
Items = new ObservableCollection<ItemViewModel>();
}
public ObservableCollection<ItemViewModel> Items { get; private set; }
public void AddItem(string name)
{
Items.Add(new ItemViewModel
{
Name = name,
Delete = new DelegateCommand(p => Items.Remove(p as ItemViewModel))
});
}
}
and would be used like this:
<UserControl x:Class="WpfApplication1.ItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Button Content="Delete"
Command="{Binding Delete}"
CommandParameter="{Binding}"/>
</Grid>
</UserControl>
I am displaying the data in the gridview in a grouped style. I am already can create new items. Now I want to create a function that can delete the item that I create. Here is my viewmodel :
Viewmodel
public class VM : INotifyPropertyChanged
{
public VM()
{
DeleteItem = new DelegateCommand(DeleteCurrentItem);
}
public ObservableCollection<Contact> ContList = new ObservableCollection<Contact>();
private ObservableCollection<Category> _GroupedCollection;
public ObservableCollection<Category> GroupedCollection
{
get
{
if (_GroupedCollection == null)
_GroupedCollection = new ObservableCollection<Category>();
return _GroupedCollection;
}
set
{
_GroupedCollection = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("GroupedCollection"));
}
}
public void DeleteCurrentItem(object param)
{
var cont= param as Contact;
// there is another class that declare another ObservableCollection that holds all the models.
var category = GroupedCollection.FirstOrDefault(g => g.Key == cont.Account);
if (category != null)
{
if (category.CredCategory.Contains(cont))
{
category.CredCategory.Remove(cont);
}
}
}
public DelegateCommand DeleteItem { get; set; }
private string _Account;
public string Account
{
get { return _Account; }
set
{
_Account = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Account"));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
In my XAML, I have a flyout, which work as desired. I can hold the data displayed and the flyout will appear/open. But when I click "Delete", the 'gridview' does not delete it.
View (XAML)
<Page.DataContext>
<data:VM/>
</Page.DataContext>
<Page.Resources>
<CollectionViewSource x:Key="cvs" IsSourceGrouped="True"
Source="{Binding GroupedCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemsPath="CredCategory"/>
</Page.Resources>
<Grid>
<FlyoutBase.AttachedFlyout>
<MenuFlyout x:Name="flyout">
<MenuFlyoutItem Text="Delete"
Command="{Binding DataContext.DeleteItem, ElementName=gridview}"
CommandParameter="{Binding}"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<GridView x:Name="gridview"
ItemsSource="{Binding Source={StaticResource cvs}}"
<GridView.ItemTemplate>
<DataTemplate>
. . . .
<DataTemplate/>
<GridView.ItemTemplate>
<GridView/>
<Grid/>
I am showing the code-behind in case someone wants to see it.
View (Code-Behind)
public void cardstack_pass_Holding(object sender, HoldingRoutedEventArgs e)
{
//this is the event declared in the Datatemplate inside gridview
flyout.ShowAt(sender as FrameworkElement);
e.Handled = true;
}
As I stated at the above, my problem is when I click the "Delete" on flyout, it should be deleting the data from the ObservableCollection right? Because as far as I know, the DataContext of the flyout is the DataContext of the data displayed, or am I wrong? How to fix this?
I mean, the gridview's DataContext is the ObservableCollection, and the Stackpanels' DataContext inside gridview's DataTemplate will be the Model Contact right? Since flyout was open at the item created, so the DataContext of flyout will inherit from the item's DataContext, and if the flyout's CommandParameter = "{Binding}", it should pass the Contact inside the item to the viewmodel, isn't it?
I might be missing something here but shouldn't the AttachedFlyout code go in the DataTemplate
Note Binding of Command to element name root (Page name) as we're inside the GridView eg
<Page x:Name="root">
<Page.DataContext>
<data:VM/>
</Page.DataContext>
<Page.Resources>
<CollectionViewSource x:Key="cvs" IsSourceGrouped="True"
Source="{Binding GroupedCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemsPath="CredCategory"/>
</Page.Resources>
<Grid>
<GridView x:Name="gridview"
ItemsSource="{Binding Source={StaticResource cvs}}"
<GridView.ItemTemplate>
<DataTemplate>
<FlyoutBase.AttachedFlyout>
<MenuFlyout x:Name="flyout">
<MenuFlyoutItem Text="Delete"
Command="{Binding DataContext.DeleteItem, ElementName=root}"
CommandParameter="{Binding}"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<DataTemplate/>
<GridView.ItemTemplate>
<GridView/>
<Grid/>
This article shows how to use Behaviours which are available in UWP.
I am generating Grid for every item from my ObservableCollection. Now I want to be able to change the source collection at runtime and I am not sure what needs to be done.
Here is my XAML:
<Window.Resources>
<c:GraphicsList x:Key="GraphicsData" />
</Window.Resources>
...
...
<ItemsControl x:Name="icGraphics" ItemsSource="{Binding Source={StaticResource GraphicsData}}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Tag="{Binding id}" Margin="15,0,15,15">
<Label Grid.Row="0" Content="{Binding name}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And C#:
myCollection1 = this.FindResource("GraphicsData") as GraphicsList;
myCollection1:
public class GraphicsList : ObservableCollection<Graphics>
{
public GraphicsList()
{
}
}
Graphics class:
class Graphics: INotifyPropertyChanged
{
// some properties not important
}
Its a simplyfied version of my code, but it works, I basically a want to change the source collection myCollection1 to myCollection2 (which is same class just different list). How do I do this?
You can Add or Remove items from collection as below
var dresource = this.Resources["GraphicsData"] as GraphicsList;
dresource.Add(new Graphics() { Name = "New Entry" });
But with StaticResource you can't assign new Collection to one in ResourceDictionary.
Ideally you should be using ViewModel and bind Collection if you want to assign completely new collection.
Your mainwindow class or viewmodel should implement INotifyPropertyChanged interface
Sample code
public partial class MainWindow : Window, INotifyPropertyChanged
{
private GraphicsList _graphicsData;
public MainWindow()
{
InitializeComponent();
DataContext = this;
this.Loaded += MainWindow_Loaded;
}
public GraphicsList GraphicsData
{
get { return _graphicsData; }
set
{
if (Equals(value, _graphicsData)) return;
_graphicsData = value;
OnPropertyChanged("GraphicsData");
}
}
void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
//var resource = this.Resources["GraphicsData"] as GraphicsList;
var resource = new GraphicsList();
resource.Add(new Graphics(){Name = "Some new Collection of data"});
this.GraphicsData = resource;
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
And Your Xaml
<Grid>
<ListBox ItemsSource="{Binding GraphicsData}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I hope this will help