The Resources panel
The Resources panel, shown in Figure 2-57, contains a list of all resources of your application. Remember the ResourceDictionaryl.xaml file you created It shows up in this list, and inside of it, the Brushl resource color gradient you created is shown. You can use the Resources panel to actually apply the resources, which you'll do now by following these steps 1. Select the Rectangle tool and create a Rectangle in the workspace. Figure 2-57. The Resources panel, which contains all resources...
Common Properties
The Common Properties bucket of the Properties panel, shown in Figure 2-51, contains properties common to all UI elements or controls. Here you can set properties such as What cursor an object will display when the mouse is over it by specifying a value in the Cursor field Whether the object can detect hits by enabling the IsHitTestVisible option Whether the object will display a tooltip and what it will read by specifying text in the ToolTip field Figure 2-51. The Common Properties bucket of...
Summary Wtp
Content or layout controls allow you to easily place content into your applications. You have gone through each of the major layout elements and actually created them with hands-on exercises. You also learned that each layout element has its own special ability The Grid allows you to declare rows and columns so that you can then position objects precisely within that Grid. The Canvas allows you to specify where the content inside of it is placed by using the Margin property. The StackPanel...
Creating storyboards visually in Blend
To get started, open Blend 3, and create a new project called StoryboardProject. You can see my settings in Figure 5-1. Make certain to remember where your new application is being saved, as you will be opening it up in Visual Studio later in the chapter. Figure 5-1. Create a new project in Blend 3. Figure 5-1. Create a new project in Blend 3. Once Blend 3 creates the new Silverlight application, you are going to need to put some visuals into your workspace so you have something to animate. 1....
Access modifiers public vs private classes
Both classes and class members properties and methods can be declared as public or private among other things . The following C examples show both private and public classes If a class property is set to private, it can only be set within the class itself. Further, even if the class is instantiated, the private members cannot be accessed from outside the class. For example, if in the Occupation property in the Peter class that we created earlier, we instantiated an instance of Peter, we would...
C and the NET Framework
C is a very robust OOP language based on the C syntax developed by Microsoft. C is designed to use the tools in the .NET Framework efficiently. The .NET Framework is a series of technologies and products also developed by Microsoft. It has continued to evolve, beginning with the .NET 1.0 release in 2002, and continuing on with 1.1 and 2.0, and most recently 3.0 and 3.5 version 4.0 is set to be released soon . The .NET Framework is shipped as part of the Microsoft Windows operating system. It...
The PenPencil tools
The Pen Pencil tools shown in Figure 2-4 allow you to create custom shapes or paths in Silverlight. By default, you will see the Pen tool in the Blend 3 toolbar. To get to the Pencil tool, you can click and hold or right-click the Pen tool until you see the option for the Pencil tool appear. The Pen tool basically allows you to create a series of points that can be manipulated with the Direct Selection tool. In order to demonstrate this, I will show you how to use the Pen tool to create a path....
The Animation workspace
The Animation workspace is a place where you can create storyboard animations in the Objects and Timeline panel, and create EventTriggers in the Interaction panel. Both of these panels are docked along the bottom of the IDE, which gives you more vertical space to work with. This lends itself very well to creating storyboards, as it allows you to see more of the timeline. In the following exercise, you'll create an animation that will run when your page is loaded 1. Delete everything from the...
The Asset Library
The next button you will find on the toolbar is a very handy one called the Asset Library. This is a collection of every control available to you in Silverlight see Figure 2-26 . Figure 2-26. The last tool on the Blend 3 toolbar is the Asset Library. Figure 2-26. The last tool on the Blend 3 toolbar is the Asset Library. and hold the TextBlock tool, the other text and text input controls will appear. and hold the TextBlock tool, the other text and text input controls will appear. and hold the...
The Silverlight Mediaelement
Defining the Silverlight MediaElement Comparing Silverlight versus Flash for video Building a Silverlight media player Parsing and serializing XML for application data Implementing drag-and-drop functionality Creating a singleton DataFactory Creating a custom UserControl Because Silverlight was designed to develop rich Internet applications RIAs with lots of embedded media, such as video and audio, the MediaElement is a very important and useful tool, so I have decided to dedicate an entire...
Creating the backplate for the MediaElement
So what you need to do now is create the background for your MediaElement. In looking at my project, I realized that I left the default size of the application, which Blend set to a width of 640 and a height of 480. Let's go ahead and change that to a bigger size to give us a little breathing room 1. Select the UserControl in the Objects and Timeline panel, as I have done in Figure 6-35. 2. In the Layout bucket of the Properties panel, change the height to 600 and the width to 800. Figure 6-35....
The Brush Transform and Gradient tools
The Brush Transform and Gradient tools, shown in Figure 2-12, are two of my personal favorites because they are so powerful. These tools allow you to manipulate an object's gradient. A color gradient specifies a range of position-dependent colors, generally as an alternative to specifying a single color. Figure 2-12. The Gradient and Brush Transform tools Figure 2-12. The Gradient and Brush Transform tools
Miscellaneous
The Miscellaneous bucket of the Properties panel see Figure 2-55 contains any properties that don't fit into the previously described buckets. Figure 2-54. A Button with a projection transform applied Figure 2-54. A Button with a projection transform applied FocusVisualStyre -Ter' ForceCursor H InputScope Overrde eid-jltSL PendErTi-. fcr' 0,0 Resounds Sty 'n Figure 2-55. The Miscellaneous bucket of the Properties panel
Transform
The Transform bucket of the Properties panel, shown in Figure 2-53, allows you to transform objects. You can perform render transformations rotate, skew, etc. here, or directly on the object, like you did when you rotated your Rectangle. I usually like to make my transformations directly on the object in the workspace. However, this panel is useful for making exact render transformations, or for making sure that a group of objects are transformed in the same way. Figure 2-53. The Transform...
What is the WPF Toolkit
The WPF Toolkit is an open source set of components and features created by Microsoft that do not ship with the current version of the .NET libraries. This toolkit can be easily installed and then added to a WPF project so that the developer has easy access to these new components. Following are some of the WPF Toolkit components and features The MS Office Ribbon control The DatePicker and the Calendar control The ability to enable Blend's States panel for WPF applications Because this is a...
Summary Myt
In this chapter, you learned about ControlTemplates and how they work with Styles. You also learned that you can overwrite Silverlight controls such as ListBoxes using Styles. You then learned how easy it is to apply resources to controls is in Silverlight, as well as the value of keeping your resources, such as Styles, in a ResourceDictionary. You learned how to create your very own Silverlight custom UserControl, complete with mouse states. You then learned about DependencyPropertys and even...
Creating the GENX Furniture website
Open Blend 3 and create a new Silverlight 3 application and website called GenXFurniture, as shown in Figure 14-1. Sifverlight 3 Application Website WPF Application Sih erlight 3 SketchFlow Prototype 5 WPF SketchFlow Prototype A project with an associated website for creating rich cross-platform, web-based applications. Name GenXFurniture Location CMJsers shay Documents Expression Blend 3 F Browse , Language Visual C v Figure 14-1. Create a new Silverlight 3 application and website called...
The Blend toolbar
If you are familiar with popular design development products such as Adobe Photoshop, Flash, or Illustrator, the Blend 3 toolbar will be nothing new to you, as Microsoft has apparently attempted to make its toolbar functionally match that of the Adobe suite of design products. This, in my humble opinion, was a very smart move on the part of Microsoft, as it makes transition from an Adobe product to this new product quite easy. If, however, you are not familiar with the toolbar concept, this...
Adding your Button Style to your ResourceDictionary
So you now understand the way that the Button control you have made is displayed inside of a Style. If you look at Page.xaml, you can see the Button control Style called BlueButtonControl defined in a section called UserControl.Resources. Earlier in this section, you learned that it is best practice to put all of your Styles in a ResourceDictionary, and you even learned how to do that. So, why did I have you create your Button control Style inside of your Page.xaml if it is not best practice to...
Designing the navigation orbs
The next thing you need to do is to create the navigation orbs. This is going to be a series of ellipses, one on top of the next, with different gradients. After you have the series of ellipses the way we want them, you are going to group them into a canvas and then tell Blend 3 to turn them into a Silverlight Button control. Let's start now 1. On the Blend toolbar, hold down the Rectangle tool until you see the option for the Ellipse tool. 2. Draw an ellipse roughly 60X60 display units on the...
A simple Silverlight project
To show you how to quickly use VSM, we are going to make a simple sample application and create a StateGroup with states. Let's get to it 1. Open Blend 3 and click File gt New Project, as shown in Figure 6-2. 2. In the New Project dialog box, select Silverlight 3 Application Website. 3. Name the project SimpleVSMProject. 4. Select the location where you want to save the project. 5. Make a mental note of where you are saving the project, because you will need to open it in Visual Studio 2008...
Input controls 1
Software applications by default are developed to interact with their users. HTML applications, for example, have user input controls such as text fields, buttons, radio buttons, and check boxes, just to name a few. Silverlight is no different in that it, too, has user input controls that have the ability to gather information from the user. In fact, all of the HTML controls that I just named are included in Silverlight. You may recall that I mentioned in the preceding section that a ListBox is...
The Properties panel
This Properties panel, shown in Figure 2-30, is where you set the properties for controls in your workspace. It has sections, also knows as buckets, that help to make it easier to navigate. For example, the Brushes bucket describes how objects are shown fill color, stroke, etc. , and the Appearance bucket describes how objects are laid out in the application height, width, visibility, etc. . You can get from the Projects panel to the Properties panel by clicking the tab that reads Properties....
The Paint Bucket tool
The Paint Bucket tool, shown in Figure 2-11, allows you to select an object and then click this tool. Blend 3 will copy attributes such as the fill color, and you can then click another object to apply these attributes.
Creating custom UserControls
A UserControl in Silverlight allows you to create custom controls much like the controls that ship with Blend 3, such as the Button control. You can specify how your custom controls look as well as EventHandlers for their behavior. In the preceding exercises, you used a Style with a ControlTemplate to make your Buttons look a certain way. What if you wanted to simplify that process that is, avoid having to create a Button in the workspace and then tell that Button to use the Style resource with...
A
Add Silverlight Application dialog box, 6 Add state group button, 92, 95-96, 267 encryption, 150 Advanced property options button, 32, 260 AES Advanced Encryption Standard encryption, 150 Airplane class, 240, 242 angle variable, 285 Animation workspace, 44-47 Appearance bucket, 27, 38, 101 Apple class, 60 ApplicationCommand control, 222 ApplicationCommands class, 216, 218 applicationResourceDict control, 256, 258 applicationResourceDict.xaml file, 256, 261, 264 ApplicationsCommand class, 219...
The Canvas
The next layout element I am going to talk about is the Canvas. This is one of my personal favorites because it allows the user to specify absolute positioning of its children. The Canvas will never change the position of child elements in it, and I find this very useful. To see how the Canvas works, you have to make some changes to the project 1. In Blend 3, change the XAML so that MainPage is now 600X600 to give you some breathing room . 2. Change each of the TextBlocks to have a Width of 150...
The Gradient Tool
To demonstrate these tools, the following exercise will show you how to create a Rectangle with a gradient, and then use the Brush Transform and Gradient tools to manipulate its gradient. 1. Select the Rectangle tool from the toolbar, as shown in Figure 2-13. Figure 2-13. Selecting the Rectangle tool from the toolbar Figure 2-13. Selecting the Rectangle tool from the toolbar 2. Draw a Rectangle in the workspace, as shown in Figure 2-14. Figure 2-14. Drawing a Rectangle in the workspace Figure...
The shape tools Rectangle Ellipse and Line
There are three shape tools. The one that shows by default is the Rectangle tool see Figure 2-20 . If you hold down your mouse over the Rectangle tool or right-click it, you will see the icons for the Ellipse and Line tools, which you can then select. Since you have already seen how the Rectangle tool works, let's move on to the other shape tools. 1. Click and hold on the Rectangle tool, and when you see the option for the Ellipse tool, select it. Figure 2-20. The Rectangle shape tool Figure...
Creating states in Blend
Something relatively new to Silverlight is the Visual State Manager VSM . This allows the developer to create custom states such as MyMouseEnter, MyMouseLeave, and MyMouseDown. When a state is created in a VisualStateGroup, everything that the developer does to any visual in the workspace is recorded into a storyboard timeline. These states can then be wired up in Visual Studio to native Silverlight events such as MouseEnter, MouseLeave, and MouseDown . When a state is activated, the associated...
Creating a Button ControlTemplate
You'll start off by creating a new Silverlight application project in Visual Studio 2008 2. Select Silverlight Application from the Visual Studio installed templates. 3. Enter a project name of ControlTemplateProject see Figure 11-1 , and click OK. 4. When the New Silverlight Application dialog box appears, leave the default settings and click OK. In this project, you are going to create a ControlTemplate for a Silverlight Button control. You are then going to create a few Silverlight Buttons...
Summary Xyv
In this chapter, you learned all about storyboards what they are, what they can do, and how they help keep timeline animations organized. You also learned how to build them using the Visual State Manager. You then learned how to raise native Silverlight events and wire up the states you created in the event handlers for those events. Next, you learned how to manually create and run a storyboard in code-behind. Finally, you learned how to make a Storyboard helper class that allows you to fade in...
Wiring up the interaction in Visual Studio
Now that we have used Blend 3 to create our VisualStateGroup and our states, we need a way to tell the application when to activate these different states. This is typically much easier to do in Visual Studio, so let's do that now. In Blend 3, press Ctrl Shift B to compile the application and fire up Visual Studio. Once Visual Studio opens, click File gt Open gt Project Solution, navigate to where you saved your project, and doubleclick it to open it. Now you can start to wire up our states. 1....
Putting Everything Together To Build A Sample Silverlight Website
Creating a Silverlight paging system Creating a navigation UserControl Creating a custom Silverlight Button to serve as navigation buttons Creating a content holder UserControl Creating content pages Home, About Us, Contact Us, etc. Creating a method that switches out content pages Wiring up the navigation buttons to switch content pages when clicked Now that you have come this far, it is a good time to put everything you have learned together into a real-world application and build a...
The Objects and Timeline panel
Now that you are familiar with the toolbar, let's move on to the Objects and Timeline panel of the Interaction panel, located on the left side of the Blend IDE, just to the right of the toolbar, as shown in Figure 2-27. If you place an object in your workspace say, a Button it will show up here as an object because it now becomes part of your visual tree. The visual tree is a list of any objects in your website or application that show the hierarchy of the controls, much like a family tree...
Creating storyboards in codebehind
Now that you have learned how to create storyboards in Blend using the VSM, it is time you learned how to write them in code-behind in Visual Studio. In order to do this, we need a visual that we can run the storyboard on. So let's go ahead and add an invisible opacity of 0 TextBlock, and when the application starts, run a storyboard that will fade the new TextBlock in. 1. Switch back over to Blend 3. 2. Click the TextBlock tool from the toolbar. 3. Draw a TextBlock in the workspace. 4....
The Grid
Undoubtedly the most popular and most used Silverlight layout element is the Grid. In fact, when you first create a new Silverlight application, Visual Studio 2008 automatically puts in a Grid layout element for you. You can see the code here lt UserControl Width 400 Height 300 gt lt Grid x Name LayoutRoot Background White gt This does not mean that you cannot add other layout elements in fact, layout elements are meant to have other layout elements placed inside of them. Which one you choose...
Demystifying the DependencyProperty
Throughout this book, you have worked with many Silverlight controls such as Buttons, Rectangles, and MediaElements. Because you have worked with these controls and did things such as set the Source property of a MediaElement or the Fill property of a Rectangle, you already have experience in working with DependencyPropertys, because Fill and Source are DependencyPropertys. So, in their simplest form and trust me, they can get much more complicated DependencyPropertys are properties that allow...