Video: INTRODUCTION TO BUILDING A SILVERLIGHT PHOTO VIEWER

Presenter:Todd Miranda

Silverlight enables rich UI and media in a web browser. With digital photography and web sites like Flickr, the use of images on the web has increased dramatically. This forces the need for viewers for all of these images. It can be an easy task to build a simple photo viewer application in Silverlight. In this video, Todd Miranda demonstrates techniques that can be used to develop a simple photo viewer in Silverlight.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

Him a it is Tom Lantos in this video and demonstrate techniques necessary to create a photo viewer and more soft silver light source begin in Visual Studio 2005 by creating a new project or choose a superlight JavaScript application if you will see superlight self deprecation here my templates go to the civil rights site and you ll need to download some additional components for Visual Studio so let s go to the civil rights site which is it s a one net if you choose to getting get started and scroll down if you don t install be superlight plug in yet but if you want to do that so you want to

Minute 1

All the marshals to what one of the run time image program will the further you see under software developer kits the martial story 1 0 software developers kit and since this restriction will be using soft of why one auto you want in the martial store though one does software developers can we bring it on your machine one of the folders in the similar one of those offered on the kit will include it in small for the Visual Studio 2005 templates so if you look in the folder where you installed the martial sure what one of those decay you ll see a VS template MSI you can run the installer and that will install the template into studio okay so that you done that you should see a silver light don t trip application template show up in your project types now we can name our

Minute 2

Picked okay so if you create a new project for so life you ll get out of the template you get a default simple application is run this to demonstrate what you ll get right on the box if you run the project comes up in the template you get a button that has some behavior so you get a nice rollover effect when you click the button you get a click alert box pop up if you use that as a good starting point if you re just learning silver light this is what will I create a photo viewer released some of his shows on the techniques for creating a photo viewer where is he going to pull out most of its content from a boil everything in here except for the root element which is the canvas and in this inner element with which to campus and were you named this inner element

Minute 3

In reference to encode their call this image container and will set its width and height to be to something a little bit greater than that and this is where we are at our images into her canvas but first I want to add some images into our project pathetically the images you could create an image list dynamically using JavaScript you could pull a list of images from ASP net version cover service and then dynamically generating those images in our case will go to solution for solution and were to add a tool at a new folder and will call this images and into her images folder will do a project at existing item

Minute 4

Some sample pictures to look at a sample pictures that come with Mr a little hit install most of those were uninstall will include those indoor project in middle school here in order to add an image tag and will say that source is images will do Gordon jpg and let couple more or do dock and forest so will come in here and we ll do dock would do for us and will add some more later but really always done is we ve created this in her canvas we ve named it

Minute 5

We ve given it some type of dimensions and we ve included some images here again is to be a dynamically loaded set of images or we could do just exactly what done it here on a switch over to or seen sample JS and instantly 1 0 hour code behind is effectively done with JavaScript so I ve would only have a compiled code behind we treat it today in a code behind faction with the naming scheme but really it s just a JavaScript file that is used to reference the elements that are in our scene example right so a single catching his roommate here are as that of getting all this we can use some of this so let s start with real leave the stock plug ins we can reference that later we need to recreate any of this god image canvas

Minute 6

And this is the canvas that holds our images so we must specify that this is off of the root element and where do they find a name for this will find any named element of the root element and we know that this is image container parts of that should give us a reference to her canvas that is named image container and that s her canvas that contains our images that what we ll do utilize that to loop through and find all murder for images that wait a few local variables here as well so we re going to create a verbal called left

Minute 7

Is so will you do this start image is big vehicles fall s and as for image is however equals false and that we will really tell what state are particular images in a ticker time right so let s create a nether local variable will put up your this one they were just a call this cow with right and this is where would I calculate the width or images so I will leave this blank and we ll come back to it so we problem more about that than I want a variable that I ll be able to reference later that is actually part of this this pseudo class were building in JavaScript so we ll call this

Minute 8

Image with MS can be equal to whatever we decide where to use for Calc with a sore but already sort applying some property store images so as to what Liberal we want to happen here since we only know how many images were to have is if the loaded dynamically real enemy in Israel have we need to dynamically be able to size the images to fit within our campus as well as two other things or a show in Phoenix ratio is how we can take an arbitrary number of images and resize them accordingly to fit say we were doing some type of a scrollable within a word on some type of a ribbon if you ve looked at WTF you money for me or with the rack panel we could do a rat panel design have multiple rows of multiple columns in this case rest of the world images to fill road

Minute 9

To run resize those images based on how many there are priority that dynamically at a few of the things were at those images dynamically so the first thing we needed his will or would let this blank is we need to determine how wide each image can be given that we wanted to fit in this theater space or so we ll start with this product image canvas width so we want the width of the image canvas the campus is holding or images in order to find that will divide that by this dark image canvas I children Count to want to divide its width of the total number of children that we

Minute 10

It has so we can get the accurate amount of wit per child and then we will leave a little to space in between the images we want butting up against one another so with a stick an extra 10 in their rights organism tracked him from that of give us 10 pixels of space between the images he was little displacing rights of that will give us the width of each image knowing that we have a certain number of images within a cannabis use with window or so let s begin now with a for loop in real loop through all of the images so it s for our four and will just too far exit 0 while exit is less than this dark image canvas children account my ex plus plus will increment their store loop

Minute 11

So mail the first thing you want to do with our loop is we as you want to grab the image they were currently talking about so let s do a this image vehicles this dark image canvas the children got there we use a method called Kit item and they get item allows us to use an index position and give the item that is at that index position within a collection of children are so weird little children with their image canvas and grab the one that is at index acts which we get from our forum are the only thing we wanted to and will just use sort of authority here since they were the forests will go in and use some of that really sets of event handlers for the

Minute 12

Images so now we have a reference to whichever image we re currently looking at is located within our image canvas and were to do a this image in order to change all of these two to this image and we need a left but mail and enter and leave we don t need in a event I so there we have it we specify the event and we will listen to and then we specify the handler for the event and this effectively kills the store that create delegate says what scope is the sand and it s in the current scope they were looking at and what is the method call within that scope that what you

Minute 13

To handle an event listener created Ilya works and will respond those with mouse in her mouth down a mouse leave respectively wiser not only do want to add some event listeners and here there s a few of the things that we want to do our looping through our children elements for which our images in one of those is setting is where we calculated the width so we can set the width of the former images so let s go in there that will do this image width equals and this is our count quit from witches were calculated with we figured out how wide each one of these images needed to be in the thing we need to do is simply amazing is placed in the canvas we ll have this concept of a rack wrapped and were stacked panel and silver life so we had to have the position those elements in the canvas as well and we do

Minute 14

That by using this particular type of notation to specify Canvas left and that equals our LFT variable that we created here arises that attract our left position of her images in a many to increment our left position to to be ready for our next images that have lined so we ll say were take the current position where to add our with former images and or add our extra little space in there that we took into account earlier right so we said the width and wish that the left position and we ve incremented the left counter to be ready for next images to be set to the photo when you didn t we ve lived through dynamically we ve created some event listeners are images

Minute 15

And we ve said some of the properties that long to some of our images aren t so now let s see what we need to do actually down in the event handlers so we ve got the meltdown and we said we didn t need the mouse of less like the mouse down the mouse leave advance or a remove the code is there it was in the default template as we were really need that and will remove this code from the enter Chrysler now when they enter the image was recently hover over the image we want the images to just blow up a little bit want to expand a little bit art so the first thing reduce is say of it if not this God images big right so if it s if if we ve got an expanded

Minute 16

A ruthlessly clicked on it and explore the full size when one worry about the inner event and if not this God image is hover and these are those little status flags that we created to make an easy way to keep up the status of our particular image so if we re already hovering over the image we ll really won t affect the image in any particular way again so we use the sender right with his past indoor function and this is the element that actually fired the event so where do with and were upset hits with two kids with times 1 1 2 and they ll allow us to effectively make the image size when I have time for it normally is no thing we have to take into account with this though is if

Minute 17

Possible that our image good as we explain and could actually live behind is the order whilst the images next to it so it explains it could become be behind another image that was next to it almost out of each other so we also want to set the canvas done is the index of this particular image of a set of Samarra fairly large number so will display a hundred is larger than the index is the closer it is the front and then we will set our status as the images over a course for okay so there s our mouse enter Mexico while our image to expand a little bit now is go down to our mouse leaders of every similar functions what is copied the function that we had

Minute 18

And hear him say if it s it is not as big so if we ve were expanded mode or worry about that and really won t worry about this if we are currently hovering or so for we are in this time were going to do a divide so replaced with and divide by 1 5 which will bring it back to its original size and is the index can go back to zero because just I go back inside of overlap with image or another to go back to zero animals are specialized so we ve created a function that is a mouse enters only hover and a mouse leave we actually leave the hovering status or image or tracking the status and we ve increased the size and decrease the size moved it up and back end is the index list in front of or behind the image that might be next to it tells you

Minute 19

Is when we actually click on the sticker image okay so we know that we will remake the image big and then get the latest original sauce so the first thing you do is we need to check and see what its current status is so if image is being again is just as evil flags that we created to be able to keep up with the status of our image and will put in else and there obviously so if the image is already big underwater bring it back down to its original size if it s not big yet we will make it larger so let s start with that condition so the first thing we know the one dude who once said it s where but this time we once it is with the beautiful size of the canvas souls saved as image canvas so this is a reference to the actual actual campus containing the images and really set it to it with her so one hour and make the width of the image to be the size of the full canvas again

Minute 20

Organists that we did this earlier when I set the canvas CNX of this particular image to 100 can bring it to the front window when you do that and they were a teen little bit here was the war in the tag property its current left position so will do sender and Canvas left in the reason I put this in parentheses a show to remedy that in print cities and awards go to a two string because we have to store a spring in the tag property okay so that we stored its current left position as it is an easy way to keep track of where was he within the canvas as far as it s left position where legal images of the top so abstract its top position

Minute 21

And will set it as old canvas left position to zero with a bevy of one to fill the canvas who are moved back to zero position and make its width to be the full thing so now we need to set its status images bid to true and then we re a say this not image is however is false so we want to prevent win the image goes back to its original size would eventually be hovering over the image but we made its original size or not taken into account the hover so we ve really want to said he is hover equals false and that way when you leave the image it won t be decreased in size by 1 50 Jan Porter Re take it back down to its original size

Minute 22

Year or so this makes a big would just increase the size or image to be the full size of the canvas notably in bag down to its original size so the first thing they do if the image is already large Israel said its width to the original width of the image which we know is this Calc with things will recall that dealt with it actually stored that and Calc image wit Jakarta that can come down here okay so that we set the width of the image back to what originally was now we need to set this the order back so was the index rose 0

Minute 23

And we also need to set its left so the service lifted back to tag were restored to its original leftist and now he wants that are status big equals false right to read a lot of code we have tested in the Shia so I guess the easiest way to do that is will just run this and we ll see what looks like Celestine was shot okay so we loaded our three images either their smallest all fit when we hover and we move now we get image expands a little bit and see that they all still topple one another s is the index is correct

Minute 24

When we click on one of the images it explains the full signs and we put back on it it shrinks my damn right so I was just from what West has us go back to resemble and let s add a couple more images and will choose maybe tree and war fought hard to what we want to see is that without changing any code at all we ve added two more images and you see their images are our thumbnails are much smaller now to make them all fit her in and likewise the minimize that would change the width here to be 320 eyes were explaining and the wit and save that

Minute 25

Images reload our browser failed initially a little little order because the canvas is larger so they can be larger and still fill that space sees a pretty easily some of the techniques that we can use win in the sample and silver light to build a photo viewer by dynamically sizing our images up and down according to how many we ve got in the size and space without available using some simple math and old style JavaScript room room room room room him a

Click here to go to original video page