CS3240 Human-Computer Interaction

Size: px

Start display at page:

Download "CS3240 Human-Computer Interaction"

Brent Clement Rice
5 years ago
Views:

1 CS3240 Human-Computer Interaction Lab Session 3 Supplement Creating a Picture Viewer Silverlight Application Page 1

2 Introduction This supplementary document is provided as a reference that showcases an alternative way to read data from an external source on the Internet and integrate it into one s application. In this case, a photo gallery application is created that displays photos based on a definition file that resides externally. Creating a Picture Viewer Silverlight application A picture viewer is a Silverlight application which allows users to navigate through a series of images in gallery-liked form. All these images are being referred to in an XML file, which stores their file names and location. Let s get started: 1. Open Microsoft Expression Blend 3 & create a new Silverlight 3 Application + Website project. Name is as Tutorial3_PicViewer and save it with the other files. 2. Select the [UserControl] layer and resize its width and height to 600 and 580 respectively, set the LayoutRoot container type to Canvas 3. Now, create an Image object and makes its width and height as 600 and 450 respectively. Name it as MyLargeImage ; set its Opacity to 0%. The purpose of this MyLargeImage object is to display the content being linked by the XML file which is going to code at a later part of this lab exercise. 4. Next, create a rectangle object and make its width and height as 600 and 127 respectively, set a gradient to it to make it look better. Align it below the MyLargeImage object. (see figure 9) Page 2

3 Figure 9: Align the rectangle object below the MyLargeImage object as shown Now that the basic shape has been created, the next thing is to design the bottom rectangle in details that s where the navigation controls will be located at. 5. Create a Canvas container and name it as cansimilarimages, set its width and height to 560 and 100, and align it in the top-middle part of the rectangle object. (See figure 10) Figure 10: Align the Canvas container in the top-middle part of the rectangle object. 6. Now create a StackPanel object within the cansimilarimages canvas container and align it at its top left corner. Name it as MyPanel and set both its width and height to Create a new canvas object and name it as butleftarrowprog and set its width and height to 10 and 20. Align it to the left side of the rectangle object and pin it as active container. (See figure 11) Page 3

4 Figure 11: Align butleftarrowprog to the left side of the rectangle object & pin it as active container Now, make use of clipping path ability to create an arrow-shaped button as a navigation tool which allows the Picture Viewer Silverlight application to scroll through the list of pictures. Page 4

5 8. Create 2 rectangles objects and arrange them in a way to let the rectangle on the upper layer to cover up a small triangle corner of the rectangle on the lower layer (See figure 12) Figure 12: Use the rectangle on the upper layer to cover up a small triangle corner of the triangle on the lower layer. 9. With both rectangles selected; go o to the menu bar and select Object > Path > Make Clipping Path Figure 13: before make clipping path Figure 14:: after make clipping path Now that this triangle object has been created, it could be use as a arrow arrow-liked button for navigation purpose. Page 5

6 10. Now align the triangle object properly inside the butleftarrowprog Canvas (see figure 15) Figure 15: Align the triangle as shown 11. Now duplicate the butleftarrowprog layer and rename it as butrightarrowprog. Go to Object > Flip > Horizontal to flip it, then align it to the right side so that both arrows looks balanced up. (See figure 16) Figure 16: Align the butrightarrowprog object on the right so that both arrows balanced up Page 6

7 12. Create a TextBlock object and name it txtinfo and in its content area, type in Click a thumbnail to view, then place it in the middle of the design surface, inside LayoutRoot container (See figure 17) Figure 17: Align the txtinfo in middle of content area 13. Create another TextBlock object and name it txttitle, put it in the middle bottom of the content area, remove all the content in it so that it doesn t show anything inside (see figure 18) Figure 18: Align the txttitle textblock object in the middle bottom of the content area Page 7

8 By now, the Objects and Timeline panel should show or be similar to the following figure 19: Figure 19: Details in Objects and Timeline panel at this point of the lab exercise At this point of the lab, we are done with the designers part. The application is now welll designed enough to be coded. But the first thing is to create the ImageInfo class. The use of the ImageInfo class is to allow the system to recognize the objects when they are being read from the XML file. 14. Go to source code view and add in the following codes for Storyboard effect: <UserControl.Resources> <Storyboard x:name="animatevideobar"> <DoubleAnimation x:name="animatevideobar" Duration="0:0:0.5" Storyboard.TargetName="MyPanel" Storyboard.TargetProperty="(Canvas.Left)" /> </Storyboard> </UserControl.Resources> The purpose of this storyboard code is to scroll the MyPanel object left and right, using its Canvas.Left property as the targeted property. Notice the butleftarrowprog and butrightarrowprog object, when users click on these arrows, the thumbnail images shown on the MyPanel would have to scroll accordingly. Page 8

9 15. Open the tutorial3_picviewer project in Microsoft Visual Studio Under the Solution Explorer panel, Right click on the tutorial3_picviewer and go to Add > New Item and choose the Class file and name it as ImageInfo. (See figure 20) Figure 20: Create a new Class file and name it as ImageInfo 17. Edit the ImageInfo class file as according to the following codes: using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace tutorial3_picviewerr public class ImageInfo // Attributes of ImageInfo class public string ImageTitle get; set; public string ImageURL get; set; // Constructor used to create objects of ImageInfo class public ImageInfo(string title, string url) Page 9

10 this.imagetitle = title; this.imageurl = url; Short and sweet basically as shown in the comments typed in the class itself, the codes is just creating the attributes and constructor for creating objects of ImageInfo class. 18. Now that the ImageInfo class is created, let s create the XML file that is going to be used by the application to read in the images information. For demonstration purpose, let s get 3 images and name them as sample1.jpg, sample2.jpg, and sample3.jpg, keep them in the images folder and drag and drop the entire folder into the tutorial3_picviewer project. (See figure 21) Figure 21: Solution Explorer of the project so far with images folders and the 3 sample images added in Now is the time to create the XML file for storing images information. 19. Under the Solution Explorer panel, Right click on the tutorial3_picviewer and go to Add > New Item and choose the XML file and name it as images. Page 10

11 20. Enter the details for the XML file in the following structure: <?xml version="1.0" encoding="utf-8"?> <images> <image> <title>koala</title> <url>images/sample1.jpg</url> </image> <image> <title>penguins</title> <url>images/sample2.jpg</url> </image> <image> <title>flowers</title> <url>images/sample3.jpg</url> </image> </images> Note that the title doesn t really make sense according to your images; they are only catered for my sample images. Do edit it accordingly so that it makes sense to your images. 21. Finally, it is time to write some codes to complete the tutorial3_picviewer application. First, let s open up the MainPage.xaml.cs file and go to Solution Explorer, right click on the References and select Add References ; select to add in System.Xml and System.Xml.Linq 22. Type in the following codes; comments are written for explanation. using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Xml.Linq; namespace tutorial3_picviewer public partial class MainPage : UserControl // ViewPort stands for the visible portion of a 2D area which can be seen by users // viewportsize = 560px const int viewportsize = 560; // No. of items which will be displayed in each view port const int numitems = 3; // The current item that is shown on the viewport // It is used to track which item it have been scrolled to double scrollposition; Page 11

12 // Creates a WebClient object WebClient wc; public MainPage() // Initialise all components on this silverlight application InitializeComponent(); // Set wc as a new WebClient object wc = new WebClient(); // Create a event handler to take place when the web client // completed downloading a string object wc.downloadstringcompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted); wc.downloadstringasync(new Uri("images.xml", UriKind.RelativeOrAbsolute)); void onmousedown(object sender, MouseButtonEventArgs e) // Create a Canvas object and assign the sender object to it Canvas cv = sender as Canvas; // Do a switch between several Canvas switch (cv.name) case "butleftarrowprog": side yet right // If the ScrollPosition is not yet 0, // means that it is not yet scrolled to the most left if (scrollposition!= 0) // Add the viewportsize to the scrollposition value // so that it looks like it scrolled from left to scrollposition += (double)viewportsize; // Display the right arrow butrightarrowprog.visibility = Visibility.Visible; // Run the MoveVideoBar animation MoveVideoBar(scrollPosition); // If scrollposition is 0 if (scrollposition == (double)0) // Hide the left arrow butleftarrowprog.visibility = Visibility.Collapsed; else // Show the left arrow butleftarrowprog.visibility = Visibility.Visible; break; case "butrightarrowprog": Page 12

13 value // Subtract the viewportsize from the scrollposition // so that it looks like it scrolled from right to left scrollposition -= (double)viewportsize; // Set the left arrow to be visible butleftarrowprog.visibility = Visibility.Visible; // Run the MoveVideoBar animation MoveVideoBar(scrollPosition); // Check to see if the panel has already been scrolled to // the most right side already if ((scrollposition - viewportsize) <= - (MyPanel.ActualWidth)) // Hide the right arrow butrightarrowprog.visibility = Visibility.Collapsed; else // Show the right arrow butrightarrowprog.visibility = Visibility.Visible; break; private void ClipItems() // Create a RectangleGeometry class object RectangleGeometry RectangleGeometry = new RectangleGeometry(); // Create a new Rectangle of 100px height and 550px width Rect Rect = new Rect(); Rect.Height = (double)100; Rect.Width = (double)550; // Assign the Rectangle object to the RectangleGeometry object RectangleGeometry.Rect = Rect; Canvas // Use the RectangleGeometry object to clip the cansimilarimages // which stores the MyPanel object (StackPanel container type) cansimilarimages.clip = RectangleGeometry; private void MoveVideoBar(double scroll) // Set the storyboard's To property as the current scrollposition this.animatevideobar.to = scroll; // Start the AnimateVideoBar animation this.animatevideobar.begin(); void wc_downloadstringcompleted(object sender, DownloadStringCompletedEventArgs e) // Check if there is any error downloading the string object Page 13

14 downloaded elements // Continue only if there is no error if (e.error == null) // Create an XDocument object to parse the XML file being XDocument doc = XDocument.Parse(e.Result); // Create an IEnumerable array to store each image element // being read from the XML file as it loop through all IEnumerable<XElement> elements = from el in doc.descendants("image") select el; foreach (XElement el in elements) // Create a ImageInfo object and instatiate its value to be // the element's title and url ImageInfo imginfo = new ImageInfo(el.Element("title").Value, el.element("url").value); // Create a new Image class object Image b = new Image(); // Set its source to be a new BitmapImage class // BitmapImage provides a specialized BitmapSource that is // optimized for loading images using XAML // Note that the Uri method is actually to create a // Uniform Resource Identifier to reference to the element's "url" value b.source = new BitmapImage(new Uri(el.Element("url").Value, UriKind.RelativeOrAbsolute)); // Set the size for the thumbnail image to be place in the MyPanel container b.width = 50; b.height = 50; // Create an event handler for when user left click on the image b.mouseleftbuttondown += new MouseButtonEventHandler(b_MouseLeftButtonDown); // assign imginfo to the Image object's Tag property // all elements/objects in an application has a Tag property to store information b.tag = imginfo; // Set the on-mouse-hover cursor icon to be Hand b.cursor = Cursors.Hand; of the application // Add the image into the StackPanel to display at bottom MyPanel.Children.Add(b); Page 14

15 // Execute the ClipItems function ClipItems(); scroll to the most side, // Initially, the thumbnail images won't require users to // left side, so the left arrow will not be shown butleftarrowprog.visibility = Visibility.Collapsed; // Check if the thumbnail images has been scrolled to the // right side already if (numitems * viewportsize <= (MyPanel.ActualWidth - 1)) // If it have already been scrolled to the most right // don't show the right arrow butrightarrowprog.visibility = Visibility.Collapsed; // Create event handler for both the left and right arrow // for when it is being clicked butleftarrowprog.mouseleftbuttondown += new MouseButtonEventHandler(onMouseDown); butrightarrowprog.mouseleftbuttondown += new MouseButtonEventHandler(onMouseDown); it void b_mouseleftbuttondown(object sender, MouseButtonEventArgs e) // Create an Image class object and assign the sender object to Image i = sender as Image; // Create an ImageInfo class object and assign the image's Tag property value to it ImageInfo info = (ImageInfo)i.Tag; // Set the MyLargeImage source property to the ImageInfo object's ImageURL // This is to display the image MyLargeImage.Source = new BitmapImage(new Uri(info.ImageURL, UriKind.RelativeOrAbsolute)); // Set the ImageInfo object's ImageTitle to the txttitle Textblock's content txttitle.text = info.imagetitle; // Hide the "Click a thumbnail to view" Textblock txtinfo.visibility = Visibility.Collapsed; Page 15

16 Press F5 to debug the application and you will see the following (See figure 22): Figure 22:: Default view of the application When users click on the any of the 3 images shown at the stackpanel at the bottom, the application will read from XML file, retrieve the correct image accordingly and display them on the large area above the stackpanel. (See figure 23 and 24) Figure 23: A screenshot of when the first image is clicked Page 16

17 Figure 24: A screenshot of when second image is clicked Page 17

CS3240 Human-Computer Interaction Lab Sheet Lab Session 4 Media, Ink, & Deep Zoom

CS3240 Human-Computer Interaction Lab Sheet Lab Session 4 Media, Ink, & Deep Zoom CS3240 Lab SEM 1 2009/2010 Page 1 Overview In this lab, you will get familiarized with interactive media elements such