I am making a WPF application following MVVM pattern. In this i am using entity framework,
my entity structure is simple, it has 3 entities: department, course, books,
a department can have many courses, and a course can have many books,
now i want to show this in a treeview, so my output in wpf should look like this,
Department1
Course1
Book1
Book2
Course2
Book3
Department2
Course
Book
Department3
in my ViewModel i have EntityContext object. But i dont know how to show this in a treeview.
how i can do this.
I prepared the small sample to replicate this..
<Window x:Class="TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:this="clr-namespace:TestApp"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<this:TreeViewModel />
</Window.DataContext>
<Window.Resources>
<HierarchicalDataTemplate ItemsSource="{Binding Courses}" DataType="{x:Type this:Department}">
<Label Content="{Binding DepartmentName}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Books}" DataType="{x:Type this:Course}">
<Label Content="{Binding CourseName}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type this:Book}">
<Label Content="{Binding BookName}"/>
</DataTemplate>
</Window.Resources>
<Grid>
<TreeView ItemsSource="{Binding Departments}">
</TreeView>
</Grid>
</Window>
Model and ViewModel classes.
public class Book :ViewModelBase
{
private string bookname = string.Empty;
public string BookName
{
get
{
return bookname;
}
set
{
bookname = value;
OnPropertyChanged("BookName");
}
}
public Book(string bookname)
{
BookName = bookname;
}
}
Department class
public class Department : ViewModelBase
{
private List<Course> courses;
public Department(string depname)
{
DepartmentName = depname;
Courses = new List<Course>()
{
new Course("Course1"),
new Course("Course2")
};
}
public List<Course> Courses
{
get
{
return courses;
}
set
{
courses = value;
OnPropertyChanged("Courses");
}
}
public string DepartmentName
{
get;
set;
}
}
Course class
public class Course :ViewModelBase
{
private List<Book> books;
public Course(string coursename)
{
CourseName = coursename;
Books = new List<Book>()
{
new Book("JJJJ"),
new Book("KKKK"),
new Book("OOOOO")
};
}
public List<Book> Books
{
get
{
return books;
}
set
{
books = value;
OnPropertyChanged("Books");
}
}
public string CourseName
{
get;
set;
}
}
TreeViewModel class.
public class TreeViewModel :ViewModelBase
{
private List<Department> departments;
public TreeViewModel()
{
Departments = new List<Department>()
{
new Department("Department1"),
new Department("Department2")
};
}
public List<Department> Departments
{
get
{
return departments;
}
set
{
departments = value;
OnPropertyChanged("Departments");
}
}
}
ViewModelBase class.
public class ViewModelBase :INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propname)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propname));
}
}
}
Finally it displays the data in the hierarchical format.. I hope this would satisfy you...
You have to define hierarchy data template template for this Here is the sample how to use this.
Based on 'David Bekham' answer i created an more generic way to display the items
hops it helps:
define a generic HierarchicalDataTemplate
<HierarchicalDataTemplate
ItemsSource="{Binding ChildItems}"
DataType="{x:Type viewModels:TVItemViewModel}">
<Label Content="{Binding Name}" />
</HierarchicalDataTemplate>
here the viewmodel (if your content is non static you need to implement the viewModelbase class )
public class TVItemViewModel
{
private bool isSelected;
private string name;
public TVItemViewModel(string name)
{
this.Name = name;
}
public string Name
{
get => name;
set => name= value;
}
public bool IsSelected
{
get => isSelected;
set => isSelected= value;
}
public ObservableCollection<TVItemViewModel> ChildItems { get; set; }
}
and in the MainViewModel i create a root collection like
TvItems = new ObservableCollection<TVItemViewModel>()
{ new TVItemViewModel("RootItem1")
{ ChildItems = new ObservableCollection<TVItemViewModel>()
{ new TVItemViewModel("Child1"),
new TVItemViewModel("Child2"),
new TVItemViewModel("Child3)
}
}
};
I hope someone finds this usefull
We need to define the 'n' level of HierachialDataTemplate for the nested level we want.. We will have ItemsSource property for the HierarchicalDataTemplate class to define this.. We can do the same for the MenuControl also..
Related
I am trying to implement a countries list as per this link. Basically it has a id:country with 3 levels of data.
I have the tree view displaying as required using this class:
using System.Collections.ObjectModel;
namespace ckd.Library
{
/// <summary>
/// implementation of the hierarchical data from the ABS SACC 2016
/// #link https://www.abs.gov.au/statistics/classifications/standard-australian-classification-countries-sacc/latest-release
/// </summary>
public static class Sacc2016
{
public static ObservableCollection<MajorGroup> Countries { get; set; }
static Sacc2016()
{
Countries = new ObservableCollection<MajorGroup>();
var majorGroup1 = new MajorGroup(1, "OCEANIA AND ANTARCTICA");
var minorGroup11 = new MinorGroup(11, "Australia (includes External Territories)");
var minorGroup12 = new MinorGroup(12, "New Zealand");
var minorGroup13 = new MinorGroup(13, "Melanesia");
minorGroup11.Countries.Add(new Country(1101, "Australia"));
minorGroup11.Countries.Add(new Country(1102, "Norfolk Island"));
minorGroup11.Countries.Add(new Country(1199, "Australian External Territories, nec"));
minorGroup12.Countries.Add(new Country(1201, "New Zealand"));
minorGroup13.Countries.Add(new Country(1301, "New Caledonia"));
Countries.Add(majorGroup1);
}
}
public class MajorGroup
{
public MajorGroup(int id, string name)
{
Id = id;
Name = name;
MinorGroups = new ObservableCollection<MinorGroup>();
}
public int Id { get; set; }
public string Name { get; set; }
public ObservableCollection<MinorGroup> MinorGroups { get; set; }
}
public class MinorGroup
{
public MinorGroup(int id, string name)
{
Id = id;
Name = name;
Countries = new ObservableCollection<Country>();
}
public int Id { get; set; }
public string Name { get; set; }
public ObservableCollection<Country> Countries { get; set; }
}
public class Country
{
public Country(int id, string name)
{
Id = id;
Name = name;
}
public int Id { get; set; }
public string Name { get; set; }
}
}
My ViewModel implements INotifyPropertyChanged and in part is:
private int? _CountryOfBirth;
public int? CountryOfBirth
{
get => _CountryOfBirth;
set => SetProperty(ref _CountryOfBirth, value);
}
public ObservableCollection<MajorGroup> CountriesObservableCollection { get; private set; }
void ViewModelConstructor(){
...
CountriesObservableCollection = Sacc2016.Countries;
...
}
Finally, the xaml section is:
<TreeView x:Name="CountriesTreeView" HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch"
ItemsSource="{Binding CountriesObservableCollection}"
SelectedValue="{Binding CountryOfBirth, Mode=OneWayToSource }"
SelectedValuePath="Id"
>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding MinorGroups}" DataType="{x:Type library:MajorGroup}">
<Label Content="{Binding Name}"/>
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Countries}" DataType="{x:Type library:MinorGroup}">
<Label Content="{Binding Name}"/>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate DataType="{x:Type library:Country}">
<Label Content="{Binding Name}"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
this xaml gives the error: View.xaml(260, 23): [MC3065] 'SelectedValue' property is read-only and cannot be set from markup. Line 260 Position 23.
removing the selectedValue shows:
so my question is, how can I link the Id field (from MajorGroup, MinorGroup and Country) to the CountryOfBirth property in my viewmodel?
There exist many solutions. One simple MVVM ready solution is to handle the TreeView.SelectedItemChanged event to set a local dependency property which you can bind to the view model class:
MainWindow.xaml.cs
partial class MainWindow : Window
{
public static readonly DependencyProperty SelectedTreeItemProperty = DependencyProperty.Register(
"SelectedTreeItem",
typeof(object),
typeof(MainWindow),
new PropertyMetadata(default));
public object SelectedTreeItem
{
get => (object)GetValue(SelectedTreeItemProperty);
set => SetValue(SelectedTreeItemProperty, value);
}
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
var treeView = sender as TreeView;
this.SelectedTreeItem = treeView.SelectedItem;
}
}
MainWindow.xaml
<Window>
<Window.Resources>
<Style TargetType="local:MainWindow">
<Setter Property="SelectedTreeItem"
Value="{Binding SelectedDataModel, Mode=OneWayToSource}" />
</Style>
</Window.Resources>
<TreeView SelectedItemChanged="TreeView_SelectedItemChanged" />
</Window>
MainViewModel.cs
class MainViewModel : INotifyPropertyChanged
{
public object SelectedDataModel { get; set; }
}
Alternatively, you can also move the logic from the MainWindow.xaml.cs to an attached behavior.
I am working around the MVVM pattern and a TreeView.
I failed to bind the data models with the view. Here's my currently code:
MainWindow.xaml:
xmlns:reptile="clr-namespace:Terrario.Models.Reptile"
...
<TreeView x:Name="TrvFamily" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding }">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type reptile:Family}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
LoadFamily();
}
MainWindow.xaml.cs:
private void LoadFamily()
{
FamilyVM familiesVM = new FamilyVM();
familiesVM.Load();
TrvFamily.DataContext = familiesVM;
}
}
ViewModels\FamilyVM:
class FamilyVM
{
public ObservableCollection<Family> Families { get; set; }
public void Load()
{
ObservableCollection<Family> families = new ObservableCollection<Family>();
families.Add(new Family { ID = 1, Name = "Amphibian" });
families.Add(new Family { ID = 2, Name = "Viperidae" });
families.Add(new Family { ID = 3, Name = "Aranae" });
Families = families;
}
}
Models\Family.cs
class Family
{
public int ID { get; set; }
public string Name { get; set; }
}
The TreeView still white, like without data.
Hope you have a issue ;)
Thanks per advance
You're binding to the instance of FamilyVM rather than Families.
That has no Name property, so you get nothing.
You should also always implement inotifypropertychanged on any viewmodel.
You get a memory leak otherwise.
And you have no child collection on Family.
<TreeView x:Name="TrvFamily" Grid.Row="1"
ItemsSource="{Binding Families}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Family}" ItemsSource="{Binding SomeCollectionYouDoNotHaveYet}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
It's usual to put the inotifypropertychanged stuff in a base class you inherit viewmodels from.
class FamilyVM : INotifyPropertyChanged
{
private ObservableCollection<Family> families = new ObservableCollection<Family>();
public ObservableCollection<Family> Families
{
get { return families; }
set { families = value; NotifyPropertyChanged(); }
}
public void Load()
{
ObservableCollection<Family> families = new ObservableCollection<Family>();
families.Add(new Family { ID = 1, Name = "Amphibian" });
families.Add(new Family { ID = 2, Name = "Viperidae" });
families.Add(new Family { ID = 3, Name = "Aranae" });
Families = families;
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
when typing in the textbox and click "Add Employee", i want it to update and display to the datagrid, i've implemented INotifyPropertyChanged and RelayCommand. what am i missing that's not populating the data. thanks in advance
here is my model
public class EmployeeModel
{
public string Name { get; set; }
public int Pedicure { get; set; }
public int Tip { get; set; }
public int Total { get; set; }
}
this is my ViewModel
List<EmployeeModel> employeeModel = new List<EmployeeModel>() { };
private ICommand _addEmployeeCommand;
public ICommand AddEmployeeCommand
{
get
{
return _addEmployeeCommand ?? (_addEmployeeCommand = new RelayCommand(x => { AddNewEmployee(); }));
}
}
public List<EmployeeModel> Employee
{
get { return employeeModel; }
set
{
if(value != employeeModel)
{
employeeModel = value;
OnPropertyChanged("Employee");
}
}
}
private string employeeName;
public string EmployeeName
{
get { return employeeName; }
set
{
if (value != employeeName)
{
employeeName = value;
OnPropertyChanged("EmployeeName");
}
}
}
public void AddNewEmployee()
{
Employee.Add(new EmployeeModel { Name = EmployeeName });
}
here is my View
<TabItem Header="Employee">
<StackPanel Orientation="Vertical">
<DataGrid ItemsSource="{Binding Employee}">
</DataGrid>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name: "/>
<TextBox Text="{Binding EmployeeName}"
Width="40"
Height="15"
VerticalAlignment="Top"/>
<Button Content="Add"
Command="{Binding AddEmployeeCommand}"
Height="20"
VerticalAlignment="Top"/>
</StackPanel>
</StackPanel>
(I pluralized the name Employee to Employees in this answer for future readers)
The problem is with the Source of the DataGrid
Bear in mind that OnPropertyChanged("Employees") only notifies about the changes made to the Employees and is not responsible for any changes made within Employees.
To be clear, it only works when you do employeeModels = new List<EmployeeModel>()
And won't be called when Employees.Add(employee)
Hopefully WPF has its own ObservableCollection type that will take care of that:
private ObservableCollection<Employee> _employees = new ObservableCollection<Employee>;
public ObservableCollection<Employee> Employees { get { return _employees; } }
Models
public class EmployeeDetails
{
public string Name { get; set; }
public int Age {get;set;}
}
public class AddressDetails
{
public EmployeeDetails EmployeeName { get; set; }
public string City { get; set; }
}
View
<Window x:Class="ClassCollection.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:ClassCollection"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding Source={StaticResource loc},Path=ViewModel}"
>
<Grid>
<StackPanel Margin="0 20 0 0">
<TextBox x:Name="txt1" Width="90" Height="20" Text="{Binding Details.EmployeeName}"/>
<TextBox x:Name="txt2" Width="90" Height="20" Text="{Binding Details.City}" Margin="0 20 0 0"/>
</StackPanel>
<Button x:Name="btn" Width="90" Height="25" Content="Add" Command=" {Binding AddCommand}"/>
</Grid>
</Window>
ViewModel
public class Viewmodel
{
public ObservableCollection<AddressDetails> EmployeeList;
public Viewmodel()
{
EmployeeList = new ObservableCollection<AddressDetails>();
LoadCommand();
}
private AddressDetails _details;
public AddressDetails Details
{
get { return _details; }
set
{
_details = value;
}
}
// Commands
public ICommand AddCommand { get; set; }
private void LoadCommand()
{
AddCommand = new CustomCommand(Add, CanAdd);
}
private bool CanAdd(object obj)
{
return true;
}
private void Add(object obj)
{
EmployeeList.Add(new AddressDetails { EmployeeName = Details.EmployeeName, City = Details.City });
}
}
Locator
public class Locator
{
private static Viewmodel viewmodel = new Viewmodel();
public static Viewmodel ViewModel
{
get { return viewmodel; }
}
}
How to add TextBox value to collection list using MVVM?
The Above is my code that I have tried. It shows null reference exception if I do like above. What would be the problem?
Update
I have two fields in EmployeeDetails class. So I must give input for these two field when add to collection. But I need only one field Name to insert to the collection. How to do it?
Analysis
It seems the _details field is not «initialized».
Solution
Please consider introducing the appropriate field initialization, for example:
private readonly AddressDetails _details = new AddressDetails
{
EmployeeName = new EmployeeDetails()
};
I want to create a databinding on a TreeView with the following model:
public partial class MainWindow : Window
{
private ViewModel model = new ViewModel();
public MainWindow()
{
InitializeComponent();
DataContext = model;
}
...
}
public class ViewModel : ObservableObject
{
private IList<Document> sourceDocuments;
public IList<Document> SourceDocuments
{
get { return sourceDocuments; }
set
{
sourceDocuments = value;
OnPropertyChanged("SourceDocuments");
}
}
public ViewModel()
{
SourceDocuments = new ObservableCollection<Document>();
}
}
public class Document
{
public String Filename;
public IList<DocumentBlock> Blocks { get; set; }
public Document(String filename)
{
this.Filename = filename;
Blocks = new List<DocumentBlock>();
}
}
public class DocumentBlock
{
public String Name { get; private set; }
public DocumentBlock(String name)
{
this.Name = name;
}
public override string ToString()
{
return Name;
}
}
And this XAML
<TreeView HorizontalAlignment="Left" Margin="6,6,0,6" Name="SourceDocumentsList" Width="202"
ItemsSource="{Binding SourceDocuments}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding /Blocks}">
<TextBlock Text="{Binding /Name}" />
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
I get the error message 'Blocks' property not found on 'current item of collection' ''Document'. Why is this?
You should drop the /, the DataContext in the ItemTemplate is an item, it has no current item itself. Also the Name binding won't work, as the DataContext is still a Document, you can specify the HierarchicalDataTemplate.ItemTemplate, there the DataContext is a DocumentBlock from the Blocks.
You usually use / for a details view outside of the TreeView, e.g. <TextBlock Text="{Binding SourceDocuments/Blocks[0].Name}"/>