Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I've created many user interfaces over the years. Configuring your screens to dynamically load content goes a long ways toward making a flexible long-living application. For this demonstration I'm using Visual Studio and a solution called dynamically loading UI content. This solution has two projects: ChartingYourData and DynamicallyLoadingUIContent. ChartingYourData is an application from another movie in this title. I'd like to show how you use user controls in this example. Let me run the application. You can see here in the application I have these tabs across the top of the screen, and when I click on each tab I'm loading some content into each of these tabs.
As I click on each of these tabs, I'm loading content into the tab itself. I'm doing that via a user control. Let me show you what I mean. On my MainPage I have a TabControl--here it is--and then I have individual TabItems. Inside the individual TabItem, all I'm doing is loading one of my user controls. I have a number of user controls, like using a line chart here. These are normal Silverlight user controls. There are a few benefits from using user controls in this fashion. You encapsulate the UI logic into a subcontrol.
It also cleans up the XAML and code in the hosting page. What I mean by that is rather than having 300 lines of XAML that describes the bar chart, I have a single line here that says load that user control. I'm not dynamically loading this content though; this is statically loaded in here at compile time. I'd like to show you an example of dynamic loading. There is a good implementation of this in Visual Studio. We go to Tools > Options. This is an example of dynamically loading a tree view on the left side, and then as you click through the nodes, dynamically loading a user control on the right side.
So these different nodes are discovered at runtime through registry settings or other options. Then when I want to click on the node, it determines what user control will load on this side. I'll show you how to do that in Visual Studio. To do that I'm going to use this DynamicallyLoadingUIContent project. Let me right-click on this and choose Set as StartUp, and then we'll go and look at our main UI, MainPage.xaml. And this UI have a list box in the left-hand side and I have a grid called ContentGrid on the right-hand side. In the real world, I'd probably use a tree view here, but for simplicity's sake, in this demo I'm using a list box.
Then I have a number of controls over here. These are Silverlight user controls. Here's the FontOptions and here is the ProjectOptions and here's the SaveOptions. I created a wrapper class to help me called OptionWrapper. It just has two properties. It has a string title called OptionTitle, and it has a placeholder for user control called UserControl. So I want to instantiate my user control and store it in option wrapper, and I'll also give it a title. I'll then show the title in the list box and when you click on the list box, I'll load the control out of this property.
Let's look at the code behind from MainPage.xaml. Here I'm creating an instance of an observable collection of option wrappers and then loading an option wrapper in this first slot. Here is my title. You see what I mean? It's a string that's going to show up in the user interface, and then I'm going to instantiating the FontOptions control and storing it in this reference. Then I fix up my data context for the entire page, using this observable collection. I tell the menu list box what to display in the list, and then let's see how this works. Press F5 to run the application. Here's the strings from my option wrapper and when I click on one of those, it loads the correct your subuser control. It's nice! Now how am I loading this user control? I'm doing that in the SelectionChanged.
When the user selects an item in the list box, this code runs. I clear up that content grid I showed you, and then I grab this selected item out of the list box, cast it to an option wrapper, and then that allows me to go get the user control list stored in it and add it to the children collection of the grid. In the real world you can find robust implementations of this pattern. Microsoft has one such framework called Managed Extensibility Framework or M-E-F or MEF for short. Let me show you an implementation of that inside Visual Studio. If I go to Tools > Extension Manager, this is using MEF to load the information.
I click on Online Gallery, going out to the Internet and loading a list of available installable packages. So this UI is coming from extensible locations. I'm going to search for a tool called devColor. Here it is. This is also an extensible plug-in. I can click on Download and then Install. It says I must restart Visual Studio. When I restart Visual Studio, it's going to modify the code editor so that whenever I type a color inside my XML or my C# code, it will put a little bar of color underneath it.
In the next movie, I'll show a dynamic loader that also supports a navigation history and provides forward and back buttons.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97410 Viewers
61 Video lessons · 84638 Viewers
71 Video lessons · 68850 Viewers
56 Video lessons · 101308 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.