Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Sometimes you don't need all the power of the layout system; you just want to brute force a location of an element on the screen. This is a terrible idea for data entry forms or other standard input screens but perfect when need a drawing surface in your application. Another use is when creating logos, vector art, or other custom graphics. In these cases, you need to tightly control the spatial relationships of elements within the overall drawing. The Canvas panel is the layout container that arranges content based on pixel coordinates. I'm going to be drawing some custom art in this demo.
So, I'm going to use Expression Blend because it has the best designer surface for doing those kinds of tasks. I've opened a project called PositionWithCanvas and I'm going to start by looking at LiveDemo.xaml. By default, all user controls start with a LayoutRoot, which is a grid. If I ever want to change the layout type I can right-click in Expression Blend, scroll down and choose Change Layout Type. So, I could switch this Root element to a Canvas. What I'm going to do for my demo is draw a canvas within the LayoutRoot.
To do that, I'm going to click on my Toolbox in the panel area. I'm going to click and hold and then I'm going to choose Canvas and I'm going to draw it on the designer surface. Now, I have a canvas, which is inside my grid, which is inside my UserControl. Next, I'm going to change the background color of my canvas to make it a little bit easier to see in this white background. I'm going to select my canvas, go to my Property pane, and click on this Solid color brush section.
Here, I can choose all sorts of fantastic colors. I'm going to use a light yellow color. I'll click in the yellow bar area and then I'll move my mouse or drag my mouse to the left until I get a light, desaturated color. I like that. Next, I'm going to draw a primitive cat face over here inside my canvas. I'm going to use three shapes to do that. I'm going to use the ellipse shape, the triangle shape, and the ring shape. The ellipse shape ships with Silverlight and so it's available here in this section.
If I click and hold, you can see the standard shapes Rectangle, Ellipse and Line. I'm going to click on the Ellipse and then I'm going to hold down the Shift key while I'm drawing, which will make it or constrain it to a perfect circle. I've got my cat head. I don't like the color though, so again I'm going to go over to my Color Editor. First, before I do that, I'm going to pressing V to select my element and then I'm going to go over and choose a blue color. While I'm here, I'm also going to turn off the Stroke. That's the border around the ellipse.
So, I'll click on the Stroke section and then I want to click on the No brush button. For more complex shapes, you need to use Blend. Blend has an Assets pane and they ship some extra shapes that are part of the Blend library, they're not part of the standard Silverlight library. So, I click on Assets, then I go to Shapes, and you can see there're about 10 or 12 different shapes available here. I'm going to choose this one called Triangle. I'm going to draw two triangles and while I'm in the Shape Asset section, I'm also going to draw a ring.
Click on Ring and I'll draw one right here in the center of the face. I can't see the ring, so I'm going to change its color. Again, I go over to Brushes, choose Fill. And it doesn't look like a ring; it looks like an ellipse. I need to change another property on the Ring. I'm looking for the ArcThickness. I'll change that to 4. Now, the way I'm doing that is I'm clicking with my mouse on this text box and in Blend you get a four-headed arrow.
If I click and hold I can scroll up and down or left and right to change these values. My last step is going to rotate these two ears into position. Again, I'll choose my Selection arrow, I'll click on this ear, and then you can move your mouse over the edge of the shape. This gives you the rotation arrow and then I can angle it like so and slide it behind the ellipse. Do the same for this one. I probably need to spend a few more minutes, I'll do that when the video is finished. My cat is ready.
The cat is inside my canvas. If I move my canvas around on the screen, it keeps the relationships of all the children elements. That's the point of the Canvas, it's choosing absolute positioning for each of these child elements. If I copy the Canvas and move it to another page, I'll keep the exact same relationships. Let me show you a more complicated or sophisticated version of this. I'm going to go to Projects and I'm going to double-click on Octopod.xaml. Now, Octopod is shy. He's hiding off the left edge of the screen. First, I'm going to do is I'm going to use my mouse wheel to zoom out and I'm going to hold down the Spacebar, which gives me the Hand Tool and I'll center him on screen and then I'll use my mouse wheel again to zoom in.
This is done as a Canvas. It's a number of ellipses and custom shapes all arranged to give us the cute little octopod face. A Canvas is simple. It does one thing, it excels at positional layout.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98566 Viewers
61 Video lessons · 85854 Viewers
71 Video lessons · 69749 Viewers
56 Video lessons · 102056 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.
Your file was successfully uploaded.