Creating a Dynamic Silverlight Video Player

Steps

Notes

1. Select Start | All Programs > Microsoft Visual Studio 2008 > Microsoft Visual Studio 2008.

2. From the main menu, select File > New Project.
3. In the dialog window, select Silverlight on the left and Silverlight Application on the right.
4. Name your project ArtViewerSL and place it in a location where you are comfortable working (for example the Desktop). Make sure that the Create Directory option is selected.

5. In the pop-up window, select Add a new web application project and accept the name. Click OK.
6. This new project will contain a local copy of your web server structure – you can use it just as you woold a remote web server structure. To deploy the finished application, you will need to mirror the folders and files to your final web server location!

7. Press F5 to run the application.
8. In the dialog box that pops up, select Modify web.config to Enable Debugging.
9. Internet Explorer opens and shows a blank page. Note the balloon telling you that the internal development web server is running your web site.
10. Close the browser window.
11. Look in the ClientBin folder in the ArtViewerSL_Web project – a new XAP file has been created. This is your Silverlight application. You can delete this file, if you re-build your application, it will be re-created.

12. Right-click the ArtViewerSL project node in the solution explorer (second node in the list from the top).
13. Select Add > New Folder from the menu
14. Rename the folder to images.

15. Right-Click the images folder and select Add > Existing Item from the context menu.

Navigate to the ASSETS folder and open the images folder. Select all 3 images and click Add.

16. Right-Click the ArtViewerSL_Web project node and select Properties from the context menu to open the project properties page.

Note: Before we can continue, we need to make one important setting to the built-in development web server – we want to explicitly set the port number to 8081.

17. On the left side of the main window, select the Web tab.
18. In the Web settings window, under Servers, select Specific Port and enter 8081 in the text box.
19. Press Enter and close the properties window by clicking the x to the right of the window.

Steps

Notes

1. Select Start > All Programs, Microsoft Expression > Microsoft Expression Blend 2

Make sure to use Blend 2 SP1 – Blend 2 (without SP1) will not work for Silverlight applications!

2. From the main menu, select File > Open > Project/Solution ….
3. In the dialog window, navigate to your project location and find the ArtViewerSL.sln file in the directory.
4. When Blend has finished opening the solution, click on the Project tab to browse the solution. The structure is the same as in Visual Studio.

If you placed your project on the desktop, the location of the solution file is Desktop\ArtViewerSL\.

5. In the Projects tab, double-click the Page.xaml file to open it.

6. In the Objects and Timelines panel, double-click the  UserControl element to select it.
7. In the Properties panel, set the Width property to 800 and the Height property to 600.
8. Click on the LayoutRoot element to select it.
9. In the Properties panel, set the Width property to 800 and the Height property to 600.
10. In the Properties panel, set the background color to #FFCCCCCC.
11. Right-Click on LayoutRoot and select View XAML from the context menu.
12. Press F4 to hide all the panels and select the XAML tab to the right of the artboard to switch to full-screen XAML view.

13. Minimize all windows and from the desktop, navigate to and open the CODE SNIPPETS.TXT file.

Navigate to the ASSETS folder and open the CODE SNIPPETS.TXT file by double-clicking.

14. Select the XAML code below SNIPPET 1 and copy it to the clipboard (press CTRL-C).
15. Switch back to Blend and paste (CTRL-V) the code between the existing <Grid> </Grid> statement.
16. Click the Design tab to switch back to design view. Your window should look like the one on the right.
17. Note how the Objects and Timelines panel now shows new elements in the object tree.
18. Explore the different elements in the object tree and change them using the design view. You could also create these elements inside Blend from scratch rather than copying the XAML snippet.
19. Press CTRL-S to save your work.

Note: take a look at the simplified XAML of this page in comparison to the original WPF XAML from the last tutorial and how elements have been altered. Note of the treatment of the drop shadow as an extra image.

You can also export the original Expression Design file (APP_LAYOUT.design as Silverlight XAML and copy the elements into your application window as outlined in the previous tutorial.

20. Switch back to Visual Studio and click Yes to All when asked to reload.
21. When asked to normalize line endings, click Yes (if this dialog box comes up later again, always click Yes).
22. Press F5 to test your application.
23. When finished, close the browser window.

Note: you should always test your Silverlight application with F5 from Visual Studio rather than Blend because in this tutorial VS is acting as the main project management tool for this application project and Blend is a supporting XAML editor.

Steps

Notes

1. In Visual Studio, right-click on the ArtViewerSL_Web project node and select Add > Existing Item from the context menu.

Navigate to the ASSETS folder and select the catalogdata.xml file.

2. Double-click catalogdata.xml to open it. Note the structure and the content inside the different data fields.

In the XML file, some video and image files are referenced with their URLs on the local web server (localhost). We need to add these folders and files to the ArtViewerSL_Web project web server before continuing.

3. Right-click the ArtViewerSL_Web project node in the solution explorer.
4. Select Add > New Folder from the menu
5. Rename the folder to video.
6. Right-Click the video folder and select Add > Existing Item from the context menu.

Navigate to the ASSETS folder and open the video folder. Select all the video files inside the folder.

7. Right-click the ArtViewerSL project node in the solution explorer.
8. Select Add > New Folder from the menu
9. Rename the folder to catalogimages.
10. Right-click the catalogimages folder and select Add > Existing Item from the context menu.

Navigate to the ASSETS folder and open the catalogimages folder. Select all the image files inside the folder.

Note: if you add any images to the ArtViewerSL project, these images will become part of your application XAP file, they will be compiled into the XAP package. Depending on the size of the images, it might make sense to place them into the ArtViewerSL_Web project instead to keep the XAP file size down. If you do that, you need to deploy these external images to the web server as well. For video files, this is the best way as video files are usually very large. You can also simply reference remote video files on any web server by simply placing the appropriate URL in the XML file.

This is why the catalogdata.xml file references the large video files using the full http:// path but the smaller catalogimages using the relative path.

11. Your application tree should now look like this screenshot.

Steps

Notes

1. In the Solution Explorer, under the ArtViewerSL project node, find the Page.xaml file and expand it by clicking on the (+) symbol to show the Page.xaml.cs code behind file.

Each XAML file also has a corresponding code-behind file to store procedural (C#) code. Code-behind files can only be edited in Visual Studio, not in Expression Blend. If you try to open a code-behind file in Blend, it will start or switch to Visual Studio for editing purposes!

We need to add custom logic to load and process the catalogdata.xml file. Contrary to WPF projects, Silverlight projects cannot be directly connected to XML data sources using the visual design surface.

2. At the top of the page, place the cursor behind the last line that begins with "using…".
3. Press Enter to create a new line.

using …; (place cursor here & press enter)

4. On the new line, enter

using System.Xml;

( press enter)

using System.Xml.Linq;

To work with XML data, we need two additional .net components in our application: System.XmlandSystem.Xml.Linq .

5. In the Solution Explorer, right click on the References node in the ArtViewerSL project and select Add Reference in the context menu.
6. In the .net tab in the pop up window, scroll down until you find theSystem.Xml.Linqentry and select it by clicking on it.
7. Press OK.

If you want to use additional .net components in your application (here we are usingSystem.Xml.Linq which offers parsing functionalities for applications), you always have to declare them with the using statement in the code behind file and add a reference to the dll in your project! This is very important: without these steps your application will not compile …

8. Switch back to Page.xaml.cs file in the main window by clicking on the tab at the top of the code window.
9. In the code, select all lines below and including the public partial class statement up and including to the second last }.
10. From the code snippets.txt file, copy the lines below SNIPPET 2 and paste them into your page.xaml.cs in Visual Studio.

The pasted code snippet will request a specified file (catalogdata.xml) from a web server using the web client class (a standard method of downloading remote files). The result is a raw data stream that contains the file content. The next step is to re-assemble the XML file in our application and then query it for the data in the fields.

11. Switch back to the Page.xaml.cs code view and place your cursor above the second last closing bracket }.
12. Press Enter to create a new line.

13. Switch to the code snippets.txt file and select and copy the code under SNIPPET 3.
14. Switch back to Visual Studio and paste the code where you created the empty line.
15. Press F5 to test your application. If no errors or warnings pop up, everything is OK!

The data has been loaded, processed and converted into .NET data objects (called an itemsCollection). The data is now ready to be bound to UI elements in XAML. This code can be used for any data scenario!

The sequence is as follows:
All logic is contained in the Download() method:

1. Create a Web Client and request a remote file asynchronously.
2. Once the file has been downloaded successfully, the DownloadStringCompletedEventHandler event fires and a new XDocument is created and the XML stream is parsed in the event handler.
3. Individual data elements from the XML file are bound to an itemsCollection which later can be connected to a ListBox in XAML.

Steps

Notes

1. Switch back to Expression Blend. When asked to reload, click Yes.

2. Double-click LayoutRoot to select it.

3. Click on the >> button in the tools pane to open the Asset Library.
4. Select the ListBox from the palette and click and drag to draw a ListBox on the artboard.
5. In the Properties panel, find the name property and enter _ListBox as the name in the box.

6. Select File > Save All and switch to Visual Studio.
7. When asked to reload, click Yes to All.

8. Switch to Page.xaml.cs and place your cursor below the line of code on the right.
9. Delete the two slashes (//) from this line.

//this._ListBox.ItemsSource = itemsCollection;

becomes

this._ListBox.ItemsSource = itemsCollection;

10. Press F5 to test your application.

11. Switch back to page.xaml.

We need to change the data template of the ListBox in XAML to display the actual data from our XML file.

12. Change the <ListBox> statement so that it looks like the screenshot on the right and place your cursor on the empty line in the middle.

< ListBox Margin ="60,144,68,64.5" x : Name ="_ListBox">

</ ListBox >

13. Switch to the code snippets.txt file and select and copy the code under SNIPPET 4.
14. Paste the code into your Page.xaml file.

Note the construction of the Data Template in XAML and how the individual elements are formatted. You can play around with the formatting or re-arrange the elements. You can also bind to other data elements in the XML file by using the {Binding XXX} statement.

You can also edit the data template visually by switching back to Expression Blend and using the breadcrumb navigation at the top of the artboard. For details on how to do that, check out the WPF tutorial Designing Beautiful Applications with Microsoft Expression.

Steps

Notes

1. In Visual Studio, open the App.xaml file by double-clicking it.

Global style definitions are added to the App.xaml file and can be used throughout the application.

2. Place your cursor on the empty line between the <Application.Resources> statements.

We will first add two styles to change the color of the yellow bar and the logo.

3. Switch to the code snippets.txt file and select and copy the code under SNIPPET 5.
4. Paste the code into your App.xaml file.

Styles declared globally always need a key (x:key=””) and a target type.

5. Switch back to the Page.xaml file and find the second <Rectangle> element.
6. Change the second <Rectangle> element to use the new style by adding the code on the right to the XAML. Place the statement behind the last property in the <Rectangle>.
7. Still in the <Rectangle> element, remove both the Fill=”” and Stroke=”” properties.

Style="{StaticResource RightBar}"

8. Find the <TextBlock> named “museum” in the XAML code.
9. Change the <TextBlock> element to use the new style by adding the code on the right to the XAML. Place the statement behind the last property in the <TextBlock>.
10. Still in the <TextBlock> element, remove the Foreground=”” property.

Style="{StaticResource Logo}"

11. Test your application with F5.
12. If you want to change the color back to yellow, modify the styles in App.xaml and replace all instances of red with the value #FFFFC100.

Steps

Notes

1. Switch to the code snippets.txt file and select and copy the code under SNIPPET 6.
2. Paste the code into your App.xaml file, below the other styles.

The ListBox element exposes a Template property that contains the complete control template for the ListBox. By modifying this control template, you can alter or change the look of a control completely. If this change is global (for all elements of your application), then you can define it as a style in App.xaml.

3. Switch back to Page.xaml and add the code on the right to the <ListBox> statement.

Style="{StaticResource ListBoxGeneral}"

4. Test the application with F5.

Not perfect yet – we need to make the background of the list in the <ListBox> transparent. For that, the ListBox offers the  <ListBox.ItemContainerStyle> property.

5.  Switch to the code snippets.txt file and select and copy the code under SNIPPET 7.
6. Paste the code into your Page.xaml file, above the <ListBox.ItemTemplate>.

7. Press F5 to test your application.

Important Tip: In Expression Blend 2 SP1, you can visually style the control templates and the data templates of any contol by using the breadcrumb navigation at the top of the artboard. For detailed information on how to do that, please take a look at the previous tutorials Designing Beautiful Applications with Microsoft Expression. The process is the same for WPF and Silverlight applications.

You can now continue working on the ListBox by using the visual design tools in Expression Blend to further disassemble the ListBox elements and restyle it (for example changing the vertical scrollbar).