![]() ![]() We then declare two DataTemplates to tell the TreeView how to display a CommandViewModel and a CommandTreeGroup respectively. We start off in line 7 with a TreeView, for which we bind ItemsSource to the ObservableCollection of CommandTreeItem instances in the MainWindowViewModel, to form the root of our command tree. Here is the complete view code, with comments below: The rest of the niftiness happens over in the View, which really isn’t all that complicated. Because the root list and the sub lists are all implemented as ObservableCollections, the View will automatically update to show the additional command. In the code above, most commands are just lambdas that print out the command name when invoked, with the exception being innerCommandB, which calls AddCommand() to add another command to the tree at run time. (innerCommandB) ĬommandViewModel newGrouplessCommand = new CommandViewModel("New Groupless Command", new Rela圜ommand(param => Console.WriteLine("Clicked New Groupless Command"))) Create an inner group inside the first group:ĬommandTreeGroup innerGroup = new CommandTreeGroup("Inner Group") ĬommandViewModel innerCommandB = new CommandViewModel("Add More Commands", new Rela圜ommand(param => this.AddCommand())) Public class MainWindowViewModel : ViewModelBaseīase.DisplayName = "MVVM Command Tree Demo" Ĭonsole.WriteLine("Commands queried, returning items", _commands.Count) ĬommandViewModel groupLessCommand = new CommandViewModel("Groupless Command", new Rela圜ommand(param => Console.WriteLine("Clicked Groupless Command"))) ĬommandTreeGroup group1 = new CommandTreeGroup("Command Group") ĬommandViewModel commandA = new CommandViewModel("Command A", new Rela圜ommand(param => Console.WriteLine("Clicked Command A."))) ĬommandViewModel commandB = new CommandViewModel("Command B", new Rela圜ommand(param => Console.WriteLine("Clicked Command B."))) / ViewModel for application's main window. Below is the ViewModel’s initialisation of a Rela圜ommand, and beneath that the binding to that command by the View: Here I will just show how it is used, as this will make the rest of this post make more sense. ![]() You can find the source code for the Rela圜ommand class in Figure 3 of Josh’s article. Some action is performed by the ViewModel when the command is invoked. The ViewModel then hosts a Rela圜ommand, and in the View, a button or hyperlink binds to the Rela圜ommand. In his article’s demo code, Josh uses a Rela圜ommand class, which implements ICommand, to wrap actions that can be invoked by the View. Putting Commands in ViewModels Rela圜ommand My code here is based closely on the Demo Application code available in that article. I am not going to explain or demonstrate the MVVM pattern here – if you are unfamiliar with it, check out Josh Smith’s excellent introduction over at MSDN. MVVM is an interface design pattern is ideally suited for use with WPF, due to the way WPF GUI code binds to data and refreshes the display. In this post I will show you how I put together a tree of commands that can be modified at runtime, using the Model-View-ViewModel (MVVM) pattern. ![]() However, since I have many possible workspaces, and they are logically grouped together, I wanted the side panel to list the available workspaces in a collapsible TreeView, and have the user open the desired workspace by clicked the corresponding command link. It is closely based on a MVVM demo I saw, where the commands are displayed as a list of hyperlinks. We indicate that each node should be a TreeViewItem object, with text ( Header) that just binds to the Person object.In my current project’s interface, the main elements of the GUI are a TabControl holding any number of workspaces, and a side panel with commands to launch the desired workspaces.We tell the HierarchicalDataTemplate to use the Children property to traverse the hierarchy.We set the ItemsSource of the TreeView to our top-level property (a list of Person, which contains one person).There are several things to note about this XAML fragment: To wire this hierarchical data source up to a TreeView control, we use a HierarchicalDataTemplate in XAML, as shown below. Public Person(string name, int birth, int? death) ![]() (INPCBase is just a class that implements INotifyPropert圜hanged and includes a SetField method). Let’s say that we have a Person object that looks like the following. Below is a very simple example of how you might use a TreeView control to display a set of hierarchical data. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |