CS3240 Human-Computer Interaction Lab Sheet Lab Session 2

Transcription

1 CS3240 Human-Computer Interaction Lab Sheet Lab Session 2 Key Features of Silverlight Page 1

2 Overview In this lab, you will get familiarized with the key features of Silverlight, such as layout containers, pixel effects, transformation, out of browser control, and element-element binding. Using Layout Containers A layout container is like a box or virtual container that could be used to put objects. Users can use it to group specific objects together to position elements within the application or to be able to control the scalability of different types of elements inside the Silverlight application. They are special tools that are used to create and organize the layout of the applications: Grid, Canvas, StackPanel, ScrollViewer and Border. 1. Go to File > New Project and create a new Silverlight 3 application + Website. Name it as tutorial2 and save the file in a new folder. 2. Ensure that the Design Workspace is selected and look at the Objects and Timeline panel. Notice that under [UserControl], there is this LayoutRoot being nested inside. (See figure 1) Figure 1: LayoutRoot is nested inside the [UserControl] LayoutRoot is a container by itself. This is the container where all other elements in the application go. If necessary, users can add more containers to subdivide or group objects together and even nest them several layers deep depending on what the user want to achieve. By default, Silverlight application will always have a single grid container as the master layout root. Page 2

3 3. Move the mouse to the Grid tool which is right below the Rectangle tool. Hold the mouse click until there is a small pop out window showing the 5 options of layout containers and select Canvas (See figure 2) Figure 2: Select Canvas from the 5 available options of layout containers 4. Drag it in the design surface to create a Canvas of 400px width and 325px height. It can be done easily by going to the Properties panel and change its width and height value accordingly. Also while at the Properties panel, change the Canvas s fills color to Black. 5. Right click on the Canvas container in the Object and timeline panel and select Pin Active Container. After pinning, it will be highlighted with a yellow line; this is to indicate that all new items added into the design surface will be placed within it. (See figure 3) Figure 3: Pin Canvas as the Active Container 6. Now select the Rectangle tool and drag it within the canvas, make it as close to the corners as possible. Change its color to make it shown clearly on top of the black color fill canvas. Page 3

4 7. Select the rectangle and go to the to 20 Properties panel, change both the RadiusX and RadiusY values Figure 4: Change the RadiusX and RadiusY values to Select the Canvas tools and drag it in the design surface, make it 320px width and 240px height, change its fill color to black to make the color stand out. (See figure 5) Figure 5: Make the inner canvas black color so that it stands out Notice that now there is a Canvas within a Canvas (See figure 6) Figure 6: Canvas within a Canvas The good thing about Canvas is that the elements placed within will have an absolute position. You can drag the Canvas container around and notice that all the elements placed inside will be moved together. Page 4

5 9. Now, select the StackPanel tool from the layout container tools and drag it on the design surface to let it take up the space below the Canvas. (See figure 7) Figure 7: Create a StackPanel container below the Canvas 10. Right click on the StackPanel from the objects and timeline panel and select Pin Active Container. 11. Now select the Button tool and create a button within the StackPanel. Create another button note that these buttons stack on top with each other vertically. This is because by default, a StackPanel container orientates the elements placed within in a vertical manner. 12. To change it, simply select StackPanel from the Objects and timeline panel, go to the Properties panel and look under Layout and change the value of Orientation from Vertical to Horizontal. (See figure 8) Figure 8: Set orientation to Horizontal 13. Select the button and go to the Properties panel, change the Content value under Common Properties to Play.. Page 5

6 14. Then duplicate this button for Stop and Rewind button. Position them side by side and under the Layout property, change the Margin to 0 so that there is no unnecessary gap between buttons. (See figure 9) Figure 9: Position the 3 buttons nicely in the StackPanel Note that if any element was being deleted from within the StackPanel, it will rearrange the elements within and close up the gap in between each element. For example, if the Stop button is deleted, the Play button and Rewind button will move and close up the gap, so that no unnecessary space will be wasted. Select the Canvas container and scale it, note that it does not affect the elements being placed within. 15. Now, try out the Grid layout type by changing the outermost Canvas to Grid container type. (See figure 10) Figure 10: Change the Canvas container type to Grid Page 6

7 Select the Grid container and try scaling it, all the elements placed within it will be scaled as well. Here s a short summary: Grid: Elements within are placed by indicating their coordinates with virtual row and column designations within the Grid layout. So that when the container is scaled, the elements within will be scaled accordingly as well. Canvas: Completely free-format drawing surface. Thus when the container is scaled, the elements within will not be scaled. StackPanel: Always orient its child controls either horizontally or vertically, stacking them based on the Orientation property. The panel will override the positioning of the controls. Now after trying out and experiencing 3 different types of layout containers, do explore on the ScrollViewer and Border layout container as well. Rotating with RotateTransform Property RotateTransform property allows user to rotate an element by specified angle around a specified center point. Consider the horizontal vector pointing to the right to be 0 degrees, and rotation takes place clockwise, so the vertical vector pointing down is the result of a 90-degree rotation. 1. Create a new item (UserControl.xaml) and use the Textblock tool Hello World! on the design surface. (See figure 11) to create a line of text stating Figure 11: Create a line of text stating Hello World! 2. Select the textblock and go to the Properties panel. Under the Transform section, select the 2nd tab (Rotate) and change the Angle value to 45. (See figure 12) Figure 12: Set the angle to 45 to rotate the textblock Page 7

8 Scaling with ScaleTransform Property The ScaleTransform property is used to change the size of an object based on the horizontal axis, the vertical axis, or both axes. 1. Repeat step one of the previous section (Rotating with RotateTransform Property) 2. Select the textblock and go to the Properties panel. Under the Transform section, select the 3rd tab (Scale) and change both the X and Y value to 5. (See figure 13) Figure 13: Adjust the X and Y values to scale the textblock Simulating 3D Perspective with SkewTransform Skewing is useful for simulating 3D effects in graphics. Now try out an example which uses 3 rectangles, 2 skewed on the x axis and 1 on the y axis, where they create an illustration of a 3D perspective when being put together. 1. Select the rectangle tool and draw a square of 88px width and height. 2. Select the rectangle and go to the Properties panel. Under the Transform section, select the 4th tab (Skew) and change the X value to 45. (See figure 14) Figure 14: Adjust the X value to skew the rectangle Page 8

9 3. Duplicate two more of this skewed rectangle and select one of them. Go to the Properties panel. Under the Transform section, select the 4th tab (Skew) and change the X value to 0 and change the Y value to 45. (Seee figure 15) Figure 15: Adjust the Y value to skew the rectangle 4. Now that there are 3 skewed rectangles, position them in the way it s positioned in the following image (See figure 16) Figure 16: Simulating 3D Perspective using SkewTransform property Page 9

10 Creating effects in Silverlight using Element to element binding Element to element binding is used to connect two different elements' attribute together, so that when one of the element has any changes in its value, it would affect the other element. Effects can be created easily using this concept as explained below - 1. Create a new UserControl file and place an image (any image will do) in the design surface. (See figure 17) Go to properties panel and name it Coolimage. Figure 17: Place any imagine in the design surface 2. Go to the toolbar and click on the >> sign to expand the assets panel and under the Controls section, select Slider. (See figure 18) Page 10

11 Figure 18:: Select the slider control from the assets panel 3. Drag and drop it to the design surface and position position it properly below the picture which was added previously. (See figure 19) Figure 19:: Position the slider below the image 4. Now go back and click on the same >> button to expand the assets panel and go under Effects, select BlurEffect. (See figure 20) Page 11

12 Figure 20: Select the BlurEffect controll from the asset panel 5. Drag and drop it on the image which was placed on the design surface previously. Now go to the Objects and timeline panel, notice that there is this additional element named BlurEffect being placed within the image layer. (Seee figure21) Figure 21: Notice that there is a new element being placed within the image layer 6. Click on it and go the Properties, change its Name value to blureff and Radius value to 0. (See figure 22) Page 12

13 Figure 22: Set the properties of the BlurEffect control accordingly Page 13

14 7. Now that the BlurEffect control has a name, an element to element binding is now possible. Select the Slider, go to Properties and click on the small button next to the Value field to see a list of options pop out. Select Data Binding (See figure 23) Figure 23: Select Data Binding from the list of options Page 14

15 8. Select Element Property" first, then under Scene elements, select [Slider], and don t select any options in the Properties section. Check on the box stating Use a custom path expression and type Radius in it; Radius is used because BlurEffects uses Radius to track the level of blurness. Lastly, expand the window below and select the Binding direction as TwoWay. Click on OK when it is done (See figure 24) Figure 24: Select the choices accordingly as shown above Page 15

16 9. Last but not least, now go to XAML view on the design surface, scroll down to look for the codes on Slider element and change following: Original codes being generated ElementName=slide Replace original codes with the following ElementName=blurEff 10. That s it! Now press F5 to run the project on the browser and test out the effect using the slider that was created just now (See figure 25) Figure 25: See the output image become blur when drag the slider from left to right Summary In this lab, you have learnt how to make good use of layout containers to group the elements together so as to allow them to perform at their top capabilities, and make good use of transformation properties to manipulate objects such as simulating 3D perspective. Also, you carried out hands on exercise to create effects on Silverlight using the element to element binding. Page 16