Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before learning Buttons and other controls, we should spend a few minutes learning about Content Controls. This is the simple concept that has powerful ramifications in Silverlight templates, a few of the Silverlight elements derived from Content Control Class. All this really means is that the control can have child's content. We have looked at Panels which are responsible for positioning their children during layout. There are also List Controls, officially known as Items Controls. Items Controls are commonly used to show lists of data. Content Controls are simpler than either Panels or List controls.
They serve as a container for other content and provide services to that content. That child content is flexible, it could be a UI element like an Image Control or a TextBlock, or it could be an instance of a non-UI .NET type. Since business types don't usually have a UI, you must provide a set of UI elements for the business class. That is done with something called the DataTemplate. Whichever kind of content you choose, it all has to fit into a single child element. I will show you what I mean in a minute.
Here are some of the Content Controls. At the top of this list is the ContentControl and then below that is the ButtonBase, which has a number of buttons that drive off of it. We will look at those in the next movie; Button RepeatButton, Hyperlink. There are also some Toggle Specific buttons like CheckBox and RadioButton. Other interesting Content Controls are the ToolTip and the ScrollViewer. I'll start by looking at a CheckBox which is a content control. I'm inside Visual Studio and I've opened a project called ContentControls.
I'm looking at the code inside ContentControlsPage.xaml. Here I have a CheckBox. Again, this is a ContentControl and I'm setting the content here in the Content Property Attribute. What am I assigning to this content? I am assigning a string. Since strings cannot be loaded into the visual tree, you have to place it into something that can be shown in the visual tree. In this case, that would be the TextBlock. If you desire, you can specify your own explicit TextBlock as I've shown here.
Here's a CheckBox. I'm no longer using the Content property attribute, instead I have a nested TextBlock within the beginning and ending tags of the CheckBox itself. I did not set the Content Property Attribute, instead I placed the TextBlock between the beginning and ending tags of the CheckBox. Now only a single child can be a content of the CheckBox. If I try to put two TextBlocks inside here, I'll get a parsing error. That's easy to solve, however, by using one of the StackPanels or other panel controls.
You might remember that I said just a minute ago that there's only a single child allowed as content. In this CheckBox, I have a StackPanel as the child, but since the StackPanel can handle multiple elements, I have put two TextBlocks within the StackPanel. Now let me do something silly. I've just added a CheckBox to the StackPanel and the StackPanel is inside the CheckBox. Yes this sounds odd, but just take a look. Run the application. Here's my first CheckBox and inside that you see there is a TextBlock and a TextBlock and another CheckBox.
Now I am not encouraging you to write applications like this, but the point here is that the Content Control can have any valid UI elements. Next, I will look at ContentAlignmentPage. Here are some examples of a button with a TextBlock as content. Here's the Button, here is the TextBlock as a child content. I can control how the child, in this case, the TextBlock, is aligned within the button. That is done with the HorizontalContentAlignment property. It's self-explanatory.
This is Centering the content, this is setting it to the Right edge, and this is setting it to the Left edge. I can use fancier content, like on this demo, FancyContentPage. In this example, I have a picture, an Image Control, and a TextBlock inside a StackPanel. I thought I would show you how to do this live using Expression Blend. I'll switch to Expression Blend and I have opened the LiveDemoPage.xaml. This contains a button which has a StackPanel, which contains a TextBlock.
I am using the Objects and Timeline to look at these items and how they relate to each other. I am going to add an image in this LiveDemo by going up to my Images folder, dragging this bikeRider.png file, and dragging it and dropping it on my Button. Notice how that got added to the StackPanel, which is inside my Button. Again, that's complex content inside a Content Control. I will rearrange the items in the StackPanel by changing the orientation property. Click here, go over to my Property pane and find Orientation and switch that to Horizontal, and now I have the image next to the TextBlock.
I will do one more thing to fix this up. I will choose my TextBlock and I'll set its VerticalAlignment to Centered. I think that looks better. Content Controls may seem like a simple idea but they enable some powerful features. Most importantly, they enable Data Templates and Control Templates. In the next movie, I will show you more details about the Button element.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100273 Viewers
56 Video lessons · 113240 Viewers
71 Video lessons · 82124 Viewers
131 Video lessons · 39411 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.