Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The prime goal of modern UI is a simplification and reduction of screen elements. While that is nice for the consumer, it often means a complex mess of elements for the designer and programmer to sort out. A real world Silverlight UI will have many sophisticated parts and contain overlapping regions. These layers might have translucent areas and differing opacity levels. They may have dozens of subareas that are animated onto the screen as UI state changes. There can be embedded images and video and so much more. This makes a lot of work for the Silverlight rendering engine.
Microsoft has spent time and money ensuring that Silverlight is fast as well as beautiful. It features different caching mechanisms and it can make use of optimizations like GPU acceleration. Details about the caching system are beyond the scope of this course. You can find more information on the Internet including some articles on my blog at blog.xamlwonderland.com. It seems obvious with all the complexity that Silverlight needs a framework to facilitate placing elements on the screen. This is called layout and it means what the name implies, controlling the location and sizes of a section of the screen.
A great layout system will prove resilient to changes in browser size and font settings and it will also remember spatial positioning between related elements. Let's talk about sizing for a moment. Each child element is responsible for determining its height and width. Most of the time in Silverlight, the size is set to Auto size. The element can adjust its size whenever its content changes. Imagine a text box for a minute. What is the optimal width? Doesn't the answer depend somewhat on the text content of the control? A Silverlight page is usually composed of scores of child elements.
They can't all go in the root element, so they typically are placed in layout panels. While the child is responsible for its size, the panel is responsible for the child's position on the screen. Each panel specializes in one form of layout. You can see in the bottom of the slide a few examples of these layouts. Silverlight user controls can only hold one child element. Therefore, the UserControl is known as a ContentControl. There are other elements in Silverlight that are optimized for holding a single content, too. Examples are a button and checkbox.
Since user controls and content elements only hold a single child, there must be other elements that can hold many children. In Silverlight, these multi-child elements consist of Panels and Items Controls. Panels are responsible for layout and have no UI of their own. Item Controls are more sophisticated and can also contain children. These are controls however, not panels and can have sophisticated UI templates applied to dramatically change their appearance. Silverlight ships with a handful of built-in panels. In the Core assembly lives the StackPanel which is good at stacking elements, the Grid which excels at dividing the screen into rows and columns, the Canvas which arranges its children by absolute coordinates.
There's also a special panel for arranging items in a listbox called the VirtualizingStackPanel. The Silverlight Toolkit also provides two essential panels. That would be the WrapPanel and the DockPanel. Details regarding these panels are available in other movies in this title. The Panel base class is provided as a base class for all the layout containers which makes it possible to create your own custom panels. Since the rest of this chapter elaborates on the built-in panels, I thought in this movie I would show you an example of a custom panel. To do that, I need to switch to Visual Studio.
I'm inside Visual Studio and I've opened a project called CustomPanel. It has a MainPage.xaml and it has a custom class called DiamondPanel.cs. Let's look at the code in DiamondPanel. DiamondPanel derives from the Panel base class. The panels are responsible for arranging the children on the screen. So there is a method in this class called ArrangeOverride and a method called MeasureOverride. The MeasureOverride method is responsible for asking each child for its desired size, while the ArrangeOverride method is responsible for arranging the children on the screen.
In my case, this DiamondPanel will arrange them in a diagonal row. Let me show you what I mean. Go to MainPage.xaml, scroll down to this section, line 30, and you can see that I have instantiated an instance of DiamondStackPanel and ask for the DesiredElementDimension to be 90 pixels, so each of these child elements will be optimized to 90 pixels in width and height. As you can see, I have six elements in there, let me show you them down here. It consists of a Grid containing a TextBlock and I have a button at the top of the window here.
When I click on this, the code will add another child. I'll press F5 to run the application and then click on the child and you'll see that it's arranging each child in a diagonal fashion. What this shows is that you can create your own custom panel and that Silverlight provides an extremely flexible layout system that can be configured in endless permutations, one of which is sure to be the layout you are looking for.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105185 Viewers
56 Video lessons · 116967 Viewers
71 Video lessons · 86167 Viewers
131 Video lessons · 41205 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.