Microsoft Expression Blend - Working with the Canvas Video

Get it off your chest – be the first to comment on this video!

Microsoft Expression Blend - Working with the Canvas

Let us start working with Layout. I have opened Blend all ready. I am going to switch over to the Projects tab on the welcome screen and this time, I am going to the project. I need to open it from my Assets Folders that was created for me when I installed the Total Framing software. In the Project Files, Part 1, Lesson 02, I am going to open the Layout Tutorial project. Now, once the project opens, I am going to use Pen tools so I can see it a little bit better. What I have here is I have got my window and I have got six controls that I want to layout, numbered from 1 to 6. The most basic Layout Container that we have available is the Canvas. The Canvas is a control that application designers and UI designers are most familiar with because it is the oldest and most basic control. As soon as I am over a new Layout Container, you will see Text telling me that I need to ALT drag to move the element into the Layout Container. By tapping the ALT key, now, my number 1 control is part of the Canvas, which is this vault over here in the Object Tree. I am going to go ahead and bring the first three elements into my Layout Container and now we can take a look at how it behaves. The Canvas being the most basic container really has no concept of layout other than position. So, as I resized the Canvas, the elements on the Canvas do not actually move in any way. By default, the Canvas’s Property is set such that it would draw outside the Canvas so even when the Canvas is not large enough to contain all the buttons, they are still rendered. This property is in the Property Inspector if you want to change it. The Property is clipped bounce, as soon as I checked that. Now, as I resized the Canvas, the buttons disappear. Again, this is the most basic of Layout Containers. It does not offer any functionality for moving the elements around outside of code or explicit control. We are going to take to look at some of the other Layout containers that the Windows Presentation Foundation makes available to see how they work. The first of these is going to be the Scroll Viewer. When any Layout container is right clicked in the Object Tree, the menu that is brought up allows you among other things to change layout type. I am going to convert my Grid into Scroll Viewer. A Scroll Viewer is a Layout Container that can only have one child. By default, a grid is created for you as a child of the Scroll Viewer and all of the elements are inserted into it. The Scroll Viewer, like the Canvas does not have a concept of re-positioning the elements, but if the elements take up too much space, the Scroll Viewer provides a Scroll Bar for you. So, when the application is run, you can drag the Scroll Bar around to change the portion of the Scroll Viewer that you are displaying. The Scroll Viewer is not really the control that I want to use at this time, so I am going to press CONTROL Z a couple of times and switch back to my Canvas.

Total Training Official Site

Software training for creative minds. Learn from the experts. Award-winning, high-quality online and DVD Training.

http://www.TotalTraining.com

Featured Links:

The Art of Blending Herbal Teas

Art is defined as "the quality, production, expression, or realm of what is beautiful, or of more than ordinary significance." A finely blended herbal tea can be just that; a colorful blend of herbs, varying textures, contrasting and complimenting fl

http://www.articlesbase.com/tea-articles/the-art-of-blending-herbal-teas-602766.html/9461024403

Let us start working with Layout. I have opened Blend all ready. I am going to switch over to the Projects tab on the welcome screen and this time, I am going to the project. I need to open it from my Assets Folders that was created for me when I installed the Total Framing software. In the Project Files, Part 1, Lesson 02, I am going to open the Layout Tutorial project. Now, once the project opens, I am going to use Pen tools so I can see it a little bit better. What I have here is I have got my window and I have got six controls that I want to layout, numbered from 1 to 6. The most basic Layout Container that we have available is the Canvas.

The Canvas is a control that application designers and UI designers are most familiar with because it is the oldest and most basic control. As soon as I am over a new Layout Container, you will see Text telling me that I need to ALT drag to move the element into the Layout Container. By tapping the ALT key, now, my number 1 control is part of the Canvas, which is this vault over here in the Object Tree.

I am going to go ahead and bring the first three elements into my Layout Container and now we can take a look at how it behaves. The Canvas being the most basic container really has no concept of layout other than position. So, as I resized the Canvas, the elements on the Canvas do not actually move in any way. By default, the Canvas’s Property is set such that it would draw outside the Canvas so even when the Canvas is not large enough to contain all the buttons, they are still rendered. This property is in the Property Inspector if you want to change it. The Property is clipped bounce, as soon as I checked that. Now, as I resized the Canvas, the buttons disappear. Again, this is the most basic of Layout Containers. It does not offer any functionality for moving the elements around outside of code or explicit control.

We are going to take to look at some of the other Layout containers that the Windows Presentation Foundation makes available to see how they work.

The first of these is going to be the Scroll Viewer. When any Layout container is right clicked in the Object Tree, the menu that is brought up allows you among other things to change layout type. I am going to convert my Grid into Scroll Viewer. A Scroll Viewer is a Layout Container that can only have one child. By default, a grid is created for you as a child of the Scroll Viewer and all of the elements are inserted into it. The Scroll Viewer, like the Canvas does not have a concept of re-positioning the elements, but if the elements take up too much space, the Scroll Viewer provides a Scroll Bar for you. So, when the application is run, you can drag the Scroll Bar around to change the portion of the Scroll Viewer that you are displaying.

The Scroll Viewer is not really the control that I want to use at this time, so I am going to press CONTROL Z a couple of times and switch back to my Canvas.

Transcription by: Scribe4you Transcription Services