Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Microsoft Silverlight 5 is a rich application framework for creating high-performance, cross-platform desktop and mobile applications. In this course, author Walt Ritscher demonstrates how to build a variety of applications in Silverlight, with particular focus on building compelling business applications and delivering premium video and audio content. Developers will work with the C# programming language and Visual Studio Professional, as well as Expression Blend, a tool that simplifies creation of the interactive user interfaces expected in modern-day applications.
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.
Find answers to the most frequently asked questions about Silverlight 5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.