This video examines some examples of custom layout panels.
- [Narrator] Before I show you how to create your custom panel, I thought I would show you some examples of some custom panels so you get an idea of what you can do with panels. In this application, the implementation looks like this. I have a Panels folder in my project and there are a number of panels in here. This is the one I'll show you later in this course, how to build an Angle Panel and then I've got Diamond, Lens, Radial and Uniform Wrap Panel. I want to use them in Main Windows so in my Main Window I added a custom name space at the top, here, xmlns:panels and I'm telling it to use all the classes that are inside CoursewareApp.panels.
Then for the UI of my window, I have a tab control and I have one tab item for each of the demonstrations I want to show. Here, inside this first tab item, you can see I'm instantiating the Angle Panel and then I'm putting in several letter boxes here. So, the Angle Panel positions the first item in the top left corner and it positions the next item right next to the lower right corner of the previous items. They go up diagonally across the screen.
There's also one called a Diagonal Panel. It lays items out in a diagonal pattern but slightly different. So, it starts here in the corner and then it moves down one and then draws in a diagonal fashion this way. So, the next item would go here and then it would build another diagonal row across this direction. For the third example, I'm using the Radial Panel. Here, it arranges the items around a center point, around a radius. The center point is here and the first item goes here and then the next item gets cast around this outside edge.
And you'll see that since I have this item orientation property set to rotated, it's also rotating each of the items round their center points. If I switch this over to another value, Upright, I compile the project Control + Shift + B now you see there's still going around the center point but now the items all have parallel edges. Here's how you could use it, look at this next example here. Here I've got a RadialPanel that has several text blocks containing names of vegetables.
And you can see as I select them they're being selected over here and the Radial Panel is putting these text boxes around the edge and it look like the spokes of a wheel or looks like the hands on a clock. For the last three examples, I need to run the application so I can show you the fish eye, which is actually implemented as this LensPanel. Again, from the usage perspective it looks real simple, I say panels:LensPanel and then I put my letter boxes in there, let's see what happens when I run the App.
As I move my mouse over the items, you'll see those items get larger, so it looks like they are bulging out from the screen. And this can create some interesting effects. Like, here's an example where I have some pictures and as I move around the pictures are animated into different sizes. Here I've got a number of rectangles on screen, going from a light blue color to a pink color over here and you get this nice lens effect while you move your cursor over the panel. This shows you just a few of the examples.
Virtually any layout algorithm that you can think in your head, you can implement in a custom panel and have WPF layout the UI for you.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels