This course uses a custom app shell to show the examples and demonstrate the code in each chapter. This video reviews that app so that you can see how it works.
- [Narrator] Throughout this course, I use a custom app shell to show the examples and demonstrate the code in each chapter. Now is a good time to review that app so that you can see how it works. This is the main interface for the application. On the left side of the screen is a list of the examples for the chapter. You can see there are two demo areas, Main and Other. These are implemented as a tree view so I can click on this triangle to collapse that area and then re-expand it. Also, is another collapsible area here, implemented with an expander control.
I'm going to click on this, it'll shrink down tree view so I can see more of the demo on the screen, and then when I click on the expander again, it expands it back to the original position. When you start, you'll see the Start Here page, and that also has the chapter name. Here I'm using the generic name. As you go through the course, it'll have the real chapter name here. Now click on this image editor to show what it looks like when you pick an example. Click here and it loads the complete UI into this part of the page. This is implemented with a frame inside a tab control.
So I've got a tab control at the top. You'll see that it says the name of the demo here, which matches what you see over here in the tree view, and then, you can see there's a live demo, and then I can move in here and show off different features of the UI while we're going through the course. There also is a second tab called File Index, and when you click here, it shows you which of the files inside the project you want to look at if you want to see the source code. So, in this example, you'll find it in ImageEditorPage.zamel, inside the Pages folder.
Now click on Splash Page to show you another live example. Down here in this section, you see I've got Example A and Example B. We'll change one of these in just a minute. Now let's go look at the source. In Visual Studio, I'll start by looking at the main window. This is main window that shows up when you start the application. Here's where the tree view lives, and if you click on this, you'll see that I implemented this as a custom user control that I created called AutofillTreeView. I'll talk more about that in a minute.
Then here is the tab control, and inside the tab control is this frame, this is where I load the content. These contents are implemented as pages. You'll see the pages here inside this pages folder. Before I show how those work, let's talk about this custom control that I created, AutofillTreeView. It's a custom user control, and the main thing you need to know about it is that its purpose is to read an XML file and to build the tree view based on the contents of that XML file.
That XML is contained here in this menu.XML file. You'll see the way it's implemented is there's a category, one called Main, and one called Other, and then within the category, I've got these menu items, and this is the text that you saw on the screen, and this is the location of the file that's supposed to be loaded when you click on that tree view item. It's supposed to load StartHere.zamel. And these are all of the pages over here. So that's the way I've implemented all my demos. I put all my demos on pages and then I load each page as I'm going through the demo.
Now this is customizable. One of the reasons I created this is it makes it easy for me to update a demo quickly, so I can add a new page like this simple page, it's not showing yet in the demo application, so I'll go over here to this line 18, change the text on the header, change the instructions of which page to load, restart the application. See I got some new text here on this last node in the tree view, and when I click on it, it loads my new page.
I built this application a few years ago when I was live courses. It provides an easy way for me to add a new demo to a chapter and not have to rebuild the app UI each time. Also I don't have to go to Visual Studio and go into this app.zamel file and modify the start-up URI to point to a different window. The focus in this video was to show you how the app works and to give you a quick tour of the interface. I won't spend any more time reviewing the code itself. You've got the source code to explore, to see how I implemented the app.
Enjoy what you find.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family