Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Panel Layout system in Silverlight is flexible, and contains many pre-built panels which help arrange our elements. There are certain situations however, that don't lend themselves well to manipulation strictly with panels. Silverlight exposes a transform mechanism which is very useful for additional layout. All transforms in Silverlight happen after the main layout pass. The formal name for this is a Render Transform. The layout pass is when the element and panels determine where to position each element and choose the elements' dimensions.
After the layout pass, Silverlight performs the transforms. The best tool for manipulating transforms is Expression Blend. I'm inside Blend, and I've opened the ManipulateWithTransforms project, and I have also opened this file called TheTransforms.xaml. I am going to press F4 in Blend to hide my toolbars temporarily, so we can see these transforms. I start with a button in its original size, it has not been transformed. Then, I apply Scale Transform which is used for growing or shrinking the size of the object.
The Rotate Transform is obvious. It rotates it around a point. The Translate Transform moves the item left, right, or up, and down. A Skew Transform changes the relationship or the angle in the corners of the object. You can see that the angles are no longer a 90 degree angle. And in the newer versions of Silverlight, we have something called a Composite Transform which combines all of the above. I will press F4 to return my toolbars and then I am going to open Live Demo. In this screen, I have a ListBox, which contains the days of the week.
Those days of the week are contained in these text blocks. I am going to select my ListBox, and I am going to ensure that I have this Selection tool here enabled. If I take my ListBox, and I drag it left or right, that is not performing a transform, that is setting margins. You can see that by looking at this tip that's popped up here. As I move the ListBox left, you can see that, that number gets smaller. If I want to move it using a transform, I need to go to the Transform section of my Properties pane.
The Transform section is near the bottom. I'm going to collapse a few sections here as I go down. Here's the Transform section in the Property pane. I am going to open this section. You can see that there are a number of different kinds of Render Transforms available in here. In the Top section, I have my Translate Transform. I can click here with my mouse, and then hold down my mouse button, and drag to the left, or the right to do a X-coordinate transform. Now, it's subtle, but if you look in the artboard, you will see there's a blue border.
That is the original position, and shape of the object before the transform has been applied. If you select the object, you can only see the current location of it after the transform, plus the original location where it is currently stored during the layout pass. I can do the same thing with these text blocks. I am going to click on the second text block here, the word Tuesday, and then I'm going to translate it off the screen. You often see this effect when you bring something on to the stage. You often see things fly in from the side and then wobble back-and-forth like so.
In Expression Blend, these kinds of animations always use transforms. The rest of the transforms are listed here. It has the Rotate Transform, I can use this Circle area here to change the angle of that text block. Here, I can scale my text block, and I can also skew it. There are also some Projection Transforms available. Here, I can project around the X, Y, or Z axes.
Let me show you the XAML. Here's that TextBlock, here is my PlaneProjection, here is my ListBox, and here's the RenderTransform, and notice how Expression Blend uses the newer CompositeTransform type. Transforms are very useful. If you can't find the Layout panel that suits your needs, chances are that a transform will solve your problem.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96413 Viewers
56 Video lessons · 110153 Viewers
71 Video lessons · 78943 Viewers
131 Video lessons · 37879 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.