I'm implementing MVVM for a WPF application.
The ViewModels are created as follows:
ViewModel: base class from which all ViewModels override
MainTemplateViewModel: the 'Masterpage' ViewModel which contains a ViewModel property Current that contains the ViewModel to show
CustomerOverviewViewModel: an example of a view that can be placed in the MainTemplateViewModel.Current
The CustomerGridViewModel contains a Telerik GridView. I would like to show the number of items in the title of the MainTemplateViewModel. The GridView.Items.Count property implements the INotifyPropertyChanged so I would like to bind this property to ViewModel.RowCount (because the CustomerGridViewModel doesn't know it is part of the MainTemplateViewModel it cannot be bound directly to the TextBlock). I can in turn use ViewModel.NumberOfRecords to show the amount in the title.
How can I bind the Count property to a property in my ViewModel?
Edit
I'll describe the issue in more detail:
The list of objects shown in the grid is a binding from the ViewModel:
<telerik:RadGridView x:Name="CustomerGrid" ItemsSource="{Binding CustomerViewModels}">
</telerik:RadGridView>
When filtering the Grid in memory, the Telerik Grid automatically changes the GridView.Items.Count property (this does not mean the original list count is changed!). So if I can bind this property to a property in the ViewModel class, this would solve the problem.
ViewModel.cs
public class ViewModel : INotifyPropertyChanged
{
private int numberOfRecords;
public int NumberOfRecords
{
get { return numberOfRecords; }
set { numberOfRecords = value; OnPropertyChanged(); }
}
}
MainTemplateViewModel.cs
public class MainTemplateViewModel : ViewModel
{
private ViewModel current = new MainOverviewViewModel();
public ViewModel Current
{
get { return current; }
set
{
if (current != value)
{
current = value; OnPropertyChanged();
}
}
}
}
CustomerOverview.xaml.cs
public partial class CustomerOverview : UserControl
{
public CustomerOverview()
{
InitializeComponent();
this.CustomerGrid.Items.CollectionChanged += ItemsCollectionChanged;
this.CustomerGrid.Loaded += CustomerGrid_Loaded;
}
void CustomerGrid_Loaded(object sender, RoutedEventArgs e)
{
/* METHOD 1 PROBLEM: the field to bind to in the MainTemplate is out of scope and accessing a view is not MVVM */
var binding = new Binding();
binding.Path = new PropertyPath("Items.Count");
binding.Source = CustomerGrid;
((MainWindow)this.ParentOfType<MainWindow>()).NumberOfRecords.SetBinding(TextBlock.TextProperty, binding);
}
void ItemsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
/* METHOD 2 PROBLEM: codebehind code should be in viewmodel */
((CustomerOverviewViewModel)this.DataContext).NumberOfRecords = CustomerGrid.Items.Count;
}
}
Instead of loading the data in your UserControl, just declare a DependencyProperty of the relevant type in it. You can then load the data in the main view model and simply data bind to it from the UserControl. You could do something like this simple example:
In CustomerOverview.xaml.cs:
public static DependencyProperty ItemsProperty = DependencyProperty.Register("Items",
typeof(ObservableCollection<YourDataType>), typeof(CustomerOverview),
new PropertyMetadata(null));
...
In CustomerOverview.xaml:
<ListView ItemsSource="{Binding Items, RelativeSource={RelativeSource AncestorType={
x:Type YourPrefix:CustomerOverview}}}" ... />
...
In MainWindow.xaml (or whichever relevant view):
<YourPrefix:CustomerOverview
Items="{Binding SomeCollectionPropertyInMainTemplateViewModel}" ... />
...
In MainTemplateViewModel.cs (or whichever relevant view model):
public ObservableCollection<YourDataType> SomeCollectionPropertyInMainTemplateViewModel
{
get { return someCollectionPropertyInMainTemplateViewModel; }
set
{
someCollectionPropertyInMainTemplateViewModel = value;
NotifyPropertyChanged("SomeCollectionPropertyInMainTemplateViewModel");
NotifyPropertyChanged("NumberOfRecords");
}
}
public int NumberOfRecords
{
get { return someCollectionPropertyInMainTemplateViewModel.Count; }
}
Telerik Grid has two properties
Visible Count
TelerikGrid.Items.Count
Total Count
TelerikGrid.Items.TotalItemCount
In case this helps!
If i get you right, you want your master to show details of the child.
Your master should be able to know your child by your Current property.
If you are using MVVM correctly, the data bound to your grid comes from the child-ViewModel.
In that case, you have already have the itemscount in your child-ViewModel.
After this you can say in your Master something like
<Label Content="{Binding Current.NumberOfRows}"></Label>
According to this page you could wrap your source in a QueryableCollectionView
Related
I am using a bindable property in a custom control in order to set a property from the xaml code. However, it seems like my property always will get the default value that I've specified for the bindable property.
My xaml code:
<controls:MyView ID="4" />
My code behind:
public partial class MyView : ContentView
{
public static readonly BindableProperty IDProperty = BindableProperty.Create(
nameof(ID),
typeof(int),
typeof(MyView),
15);
public int ID
{
get
{
return (int)GetValue(IDProperty);
}
set
{
SetValue(IDProperty, value);
}
}
private MyViewViewModel viewModel;
public MyView()
{
InitializeComponent();
viewModel = new MyViewViewModel() {};
BindingContext = viewModel;
}
}
I expect that my property should get value 4 in this example, but it always get the default value 15. Should the property be set in the constructor or later?
What am I doing wrong?
Why do you embed a ViewModel inside your custom control? It is weird and even wrong. The idea behind a custom control is that you could reuse and bind it to the parent's ViewModel. Think of a simple Button control, it is reusable by simple placing it on the screen and setting the BindableProperties like Text, Command and etc. It is working because it's BindingContext by default is the same as it's parent.
In your case you sort of isolate your control from any modifications, since you set the BindingContext to a private custom ViewModel class. You have to rethink your solution.
It should be as simple as:
public partial class MyView : ContentView
{
public static readonly BindableProperty IDProperty = BindableProperty.Create(
nameof(ID),
typeof(int),
typeof(MyView),
15);
public int ID
{
get => (int)GetValue(IDProperty);
set => SetValue(IDProperty, value);
}
public MyView()
{
InitializeComponent();
}
}
I see it's too late, but i have been suffering for a while now, that - for a reason that i don't know - a ContentView(Custom view element) won't bind when you set it's BindingContext property in any way other than this:
<ContentView x:Class="mynamespace.CustomViews.MyView"
....
x:Name="this">
then on the main container element (in my case a frame) set the BindingContext
<Frame BindingContext="{x:Reference this}"
....>
Setting the BindingContext in the constructor - in MyView.xaml.cs - does not work, while this way - and other ways - work in binding a View to another class (a view model), it does not - i repeat - work in binding ContentView to its code_behind.cs file.
In you xaml , do
<controls:MyView ID="{Binding Id}" />
And then in ViewModel, Create a porperty called Id
public int Id {get; set;} = 4;
You don't need Bindable property if your are not binding , Just Create a Normal Property of type int With ID as property name.And then you can assign the ID from XAML.(Intellisense will also show the ID property)
public int ID
{
get;set;
}
So I currently have a Window with a TabControl. The MainWindow has its own ViewModel and all the TabItems have their own ViewModels also.
I can easily change tabs from the MainWindow ViewModel through a bound SelectedIndex property. What I would like to do is change to another tab from code that runs within ANOTHER tab viewmodel. Since the Tabs are not part of the MainWindowViewModel, I am looking for a clean way to change the Tab without resorting to code behind to do it.
There are also cases, where I might need to change the tab from something such as a message prompt. I thinking my only way is to create and event and subscribe to that from MainWindowViewModel.
So I solved this with an EventAggregator.
public static class IntAggregator
{
public static void Transmit(int data)
{
if (OnDataTransmitted != null)
{
OnDataTransmitted(data);
}
}
public static Action<int> OnDataTransmitted;
}
First ViewModel sends data.
public class ModifyUsersViewModel : INotifyPropertyChanged
{
private void change_tab(int data)
{
IntAggregator.Transmit(data);
}
}
Second ViewModel receives data and then does something with it.
public class MainWindowViewModel : INotifyPropertyChanged
{
private int _Tab_SelectedIndex = 0;
public int Tab_SelectedIndex
{
get
{
return _Tab_SelectedIndex;
}
set
{
_Tab_SelectedIndex = value;
OnPropertyChanged(new PropertyChangedEventArgs("Tab_SelectedIndex"));
}
}
public MainWindowViewModel()
{
IntAggregator.OnDataTransmitted += OnDataReceived;
}
private void OnDataReceived(int data)
{
Tab_SelectedIndex = data;
}
}
Rather than trying to bind to SelectedIndex, if the TabItems have their own view models, then you can create a property for each of those view models: IsSelected and then bind the TabItem.IsSelected property to that:
<TabItem IsSelected="{Binding IsSelected}">
This prevents the view models from needing to know the index of their corresponding TabItem, something I would argue is a detail that should be specific to the view and something the view model should not concern itself with. What if you add another TabItem or want to change the order? Now you've got changes to make in the view models for something that could be just simple change to the view.
My Main window has a sidebar menu. When an item on the menu is clicked, I will render that item's page (UserControl) on a ContentControl. Here is what it looks like.
My MainViewModel
public MainViewModel()
{
SystemMenu = new List<SystemMenuViewModel>();
SystemMenu.Add(new SystemMenuViewModel("Dashboard", new Dashboard()));
SystemMenu.Add(new SystemMenuViewModel("Appointments", new Dashboard()));
SystemMenu.Add(new SystemMenuViewModel("Reports", new Reports()));
SystemMenu.Add(new SystemMenuViewModel("Configuration", new Configuration()));
}
private string _windowTitle = GlobalVariables.WindowTitleDefault;
private string _currentPage = "Dashboard";
public string WindowTitle
{
get { return _windowTitle; }
set
{
_windowTitle = value;
NotifyOfPropertyChange(() => WindowTitle);
}
}
public string CurrentPage
{
get { return _currentPage; }
set
{
_currentPage = value;
NotifyOfPropertyChange(() => CurrentPage);
}
}
public List<SystemMenuViewModel> SystemMenu { get; set; }
My SystemMenuViewModel
private string _name;
private object _content;
public SystemMenuViewModel(string name, object content)
{
_name = name;
Content = content;
}
public string Name
{
get { return _name; }
set { this.MutateVerbose(ref _name, value, RaisePropertyChanged()); }
}
public object Content
{
get { return _content; }
set { this.MutateVerbose(ref _content, value, RaisePropertyChanged()); }
}
public event PropertyChangedEventHandler PropertyChanged;
private Action<PropertyChangedEventArgs> RaisePropertyChanged()
{
return args => PropertyChanged?.Invoke(this, args);
}
My MainView on the rendering part
<ContentControl Content="{Binding ElementName=lstSystemMenu, Path=SelectedItem.Content}" />
My main problem is that I am just rendering the Content on my MainView without actually invoking or binding its ViewModel.
I am sure that there is something wrong on my implementation of the MVVM framework. Kindly enlighten me on what part did I go wrong and what's the best way to implement this one.
Have a look at this : https://msdn.microsoft.com/en-us/magazine/dd419663.aspx
Can't find the source zip, but the article has plenty of code samples.
What you need is to bind your ContentControl's Content property to a ViewModel/Model object, and use DataTemplates to create the correct page depending on the datacontext. The datatemplates just need to be stored in a ResourceDictionary, either the ContentControl's or some upper level control (or even the app). The DataTemplates must have a DataType set for this to work.
Also, as suggested in the comments on your question, the viewmodels shouldn't have a "content" property of type object. It looks like your "content" property is a view object or something. Can't know without you showing us more code.
The ViewModel should not reference any View object. But the View can reference ViewModel classes in the code-behind or in the XAML.
There are two ways to bind to the "current selection".
Either use the "current selected" info from the view list (SelectedItem for example), or add a property in the MainViewModel (ex: SelectedViewModel, and then bind the ContentControl to this property.
I am studying mvvm and face this problem with dynamic addition - in simple win forms I have done this easily with one loop and just few specification to DataRow..
So, the task is - to put all elements from List of strings to Grid/DataGrid, that contains two columns - first for check box and second for the string-based control.
I think the best idea is to use DataGrid. So I created a wpf dialog with this DataGrid and buttons and a separate file for ViewModel.
Now my ViewModel class contains a List of strings.
And I stuck.. I have read about some ObservableCollection<UIElement> that must hold DataGridRow (??) with two controls in my case..
Edit: I am trying <DataGridCheckBoxColumn for check box and <DataGridTemplateColumn for control. So the question now is binding this two columns with a list of strings - pass value of the string to control and all OK.
Need I use an ObservableCollection for that?
When i am binding a datagrid in wpf using mvvm rather than looking at it as a collection of rows and columns i see it as a collection of objects - each row represents an individual object, and each column represents a property of that object. So in your case, you should make a class to represent what you are showing in your grid, and it will have a boolean and a string property in it (to use in the 2 columns you have stated).
public class MyListItem : ImplementPropertyChangedStuff
{
private string _myString;
private bool _myBool;
public MyListItem()
{ }
public string MyStringProperty
{
get { return _myString; }
set
{
_myString = value;
this.RaisePropertyChanged("MyStringProperty");
}
}
public bool MyBoolProperty
{
get { return _myBool; }
set
{
_myBool = value;
this.RaisePropertyChanged("MyBoolProperty");
}
}
}
Now in your viewmodel, rather than having separate lists for each column, you can have a single list. If you wish to add/remove/edit rows, then you should use the observable collection, as this has the propertychanged stuff inbuilt and will update the ui when any changes are made to the collection.
public class MyViewModel
{
private ObservableCollection<MyListItem> _items;
public ObservableCollection<MyListItem> Items
{
get { return _items; }
set
{
_items = value;
this.RaisePropertyChanged("Items");
}
}
public MyViewModel()
{
this.Items = new ObservableCollection<MyListItem>();
this.LoadMyItems();
}
public void LoadMyItems()
{
this.Items.Add(new MyListItem { MyBoolProperty = true, MyStringProperty = "Hello" };
}
}
And finally the DataGrid binding:
<DataGrid ItemsSource="{Binding Path=Items, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="MyBoolProperty" Binding="{Binding Path=MyBoolProperty}"
<DataGridTextColumn Header="MyStringProperty" Binding="{Binding Path=MyStringProperty"/>
</DataGrid.Columns>
</DataGrid>
You need a view model for data row. Something like this:
public class DataRowViewModel
{
public bool? IsChecked { get; set; }
public string Text { get; set; }
}
Then, instead of List<string>, view model for dialog should expose List<DataRowViewModel>, or, if you're planning to modify this list from code, ObservableCollection<DataRowViewModel>:
public class DialogViewModel
{
// other code here
public ObservableCollection<DataRowViewModel> DataRows
{
get { return dataRows ?? (dataRows = new ObservableCollection<DataRowViewModel>(yourStringList.Select(s => new DataRowViewModel { Text = s }))); }
}
private ObservableCollection<DataRowViewModel> dataRows;
}
Next, setup DataGrid to be bound to DataRows collection, and bind its columns to IsChecked and Text respectively.
Note, that for simplicity I've omitted INPC implementation in DataRowViewModel. This will work, but if you're going to change data row properties from view model's code, you should implement INPC.
I've started an MVVM project and now I'm stucking with correct DataBinding.
My project has:
A UserControl whit a ViewModel as DataContext like:
public partial class TestUserControl: UserControl
{
public TestUserControl()
{
this.DataContext = new TestUserControlViewModel();
}
}
ViewModel code is (BaseViewModel class contains PropertyChangedEventHandler):
public class TestUserControlViewModel : BaseViewModel
{
public KrankenkasseControlViewModel()
{}
public IEnumerable<DataItem> GetAllData
{
get
{
IGetTheData src= new DataRepository();
return src.GetData();
}
}
}
IGetTheData is the interface to DataContext:
public interface IGetTheData
{
IEnumerable<DataItem> GetData();
}
}
and finally the DataRepository code:
public class DataRepository : IGetTheData
{
private TestProjectDataContext dax = new TestProjectDataContext();
public IEnumerable<DataItem> GetData()
{
return (from d in this.dax.TestData
select new DataItem
{
ID = d.ID,
SomeOtherData = d.SomeOtherData
});
}
}
My UserControl has a few TextBoxes, but what's the best way to bind correctly?
Thanks for your help, regards.
EDIT: Binding the data against multiple textboxes
After reading your comment, I will elaborate my example for textboxes.
First important thing is that the ViewModel will model the things in the View, so that the View gets all information it needs in the structure it needs. That means, if you have multiple textboses in the View, you will need multiple string Properties in your ViewModel, one for each textbox.
In your XAML you could have something like
<TextBox Text="{Binding ID, Mode=TwoWay}" />
<TextBox Text="{Binding SomeOtherData, Mode=TwoWay}" />
and in your ViewModel
public class TestUserControlViewModel : BaseViewModel {
private string id;
private string someOtherData;
public TestUserControlViewModel() {
DataItem firstItem = new DataRepository().GetData().First();
this.ID = firstItem.ID;
this.SomeOtherData = firstItem.SomeOtherData;
}
public string ID {
get {
return this.id;
}
set {
if (this.id == value) return;
this.id = value;
this.OnPropertyChangedEvent("ID");
}
}
public string SomeOtherData {
get {
return this.someOtherData;
}
set {
if (this.someOtherData == value) return;
this.someOtherData = value;
this.OnPropertyChangedEvent("SomeOtherData");
}
}
}
Here I assume that in your BaseViewModel there is an OnPropertyChangedEvent method to fire the corresponding event. This tells the View that the property has changed and it must update itself.
Note the Mode=TwoWay in the XAML. This means, that it doesn't matter on which side the value changes, the other side will reflect the change immediately. So if the user changes a value in a TwoWay bound TextBox, then the corresponding ViewModel property will automatically change! And also vice versa: if you change the ViewModel property programmatically, the View will refresh.
If you want to show multiple textboxes for more than one data item, then you must introduce more Properties in the ViewModel and bind them accordingly. Maybe a ListBox with a flexible number of TextBoxes inside is a solution then, like #Haspemulator already answered.
Binding the data against a collection control
In the TestUserControl I guess you have a control (like a ListView) to show the list of loaded things. So bind that control against the list in the ViewModel with
<ListView ... ItemsSource="{Binding GetAllData}" ... />
First you must understand that Binding means not "read the data and then forget the ViewModel". Instead you bind the View to the ViewModel (and its Properties) as long as the View lasts. From this point of view, AllData is a much better name than GetAllData (thanks #Malcolm O'Hare).
Now in your code, every time the View reads the AllData property, a new DataRepository is created. Because of the Binding, that is not what you want, instead you want to have one instance of DataRepository for the whole lifetime of the View, which is used to read the initial data and can later be used to update the View, if the underlying database changes (maybe with an event).
To enable such a behavior you should change the type of the AllData property to an ObservableCollection, so that the View can automatically update the list if changes occur.
public class TestUserControlViewModel : BaseViewModel
private ObservableCollection<DataItem> allData;
public TestUserControlViewModel() {
IGetTheData src = new DataRepository();
this.allData = new ObservableCollection<DataItem>(src.GetData());
}
public ObservableCollection<DataItem> AllData {
get {
return this.allData;
}
}
public void AddDataItem(DataItem item) {
this.allData.Add(item);
}
}
Now if you call AddDataItem later, the ListView will update itself automatically.
Your Property Name is bad. You should call it AllData, not GetAllData.
Since you are returning a collection, you probably should be using some sort of list control (ListBox, ListView).
In that case you'd be doing
<ListBox ItemsSource="{Binding GetAllData}" />
Guten Abend. :) As it already mentioned, since you're returning the collection, it's better to use a ListBox. The comment about having ObservableCollection as a cache is also absolutely valid. I would add that if you need to have your data editable, you should use TextBox inside the ItemTemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text={Binding SomeOtherData,Mode=TwoWay} />
</DataTemplate>
</ListBox.ItemTemplate>
In this case if user edits the text in the box, data will be updated in your data object, so that it could be saved in the database later.