Advertisement
  1. Code
  2. Silverlight
Code

Create a Wallview for Images with Silverlight: Design

by
Difficulty:BeginnerLength:ShortLanguages:

As the title states, we're going to create a Wallview inspired by iTunes. This tutorial is split up into two parts - one for the design in Blend and the other one for the code behind in Visual Studio.


Final Result Preview

Take a look at this video demo of final result we will be working towards (or just check out the web based demo above):


Introduction

In this part of the tutorial we are going to design two UserControls in Expression Blend. This tutorial looks quite long from the amount of steps, but this is because it is very thorough; there is an explanation and screenshot for almost every click you have to do. The reason I've written it in so much detail is that my mates from university found Blend way too complex and difficult to use.


Step 1: Create a new Project in Visual Studio

Open Visual Studio and click on "File" > "New" > "Project" in the top menu bar.


Step 2: Set Up

Select Silverlight Application Visual C# from the menu and enter "WallviewApp" for a project name at the bottom as well as the location to save the project.

After that you will see a popup. Make sure you check the box at the bottom and select Silverlight 4 from the combobox.


Step 3: Open the Project in Blend

Start Expression Blend and open the project that we just created in Visual Studio.

Browse to the project file within the project directory and open it.


Step 4: Create Two New Folders

Right-click on the project WallviewApp inside the project tree and choose "Add New folder". Do this twice, call the folders "usercontrols" and "image".


Step 5: Create a New UserControl

Right-click on the freshly created folder "usercontrols" and select "Add New Item...".

In the popup make sure that UserControl is selected and enter "image.xaml" as a name.


Step 6: Create a StackPanel

Choose the StackPanel Container from the Toolbar which should be on the left side by default...

...and draw a rectangle in the middle of the LayoutRoot which was there from the beginning.


Step 7: Adjust the StackPanel

Make sure the StackPanel is selected on the left side in the "Objects and Timeline" panel. On the right side you see the parameters of the currently selected element. Change Width and Heigh to "Auto (0)" by clicking on the crossed arrows next to the textfield. HorizontalAlignment to "Center" and VerticalAlignment to "Top". Reset the Margin by clicking on the white square icon next to the textfields and choose Reset from the menu. After that set the Top-Margin to "5". Now the Layout panel should look like this and since the StackPanel has got a size of 0x0 pixels you can no longer see it:


Step 8: Create a Grid

Go ahead and select the Grid container from the Toolbar on the left side (where we selected the StackPanel before) and draw another rectangle into the middle of your workspace.


Step 9: Adjust the Grid

Take a look at the "Objects and Timeline" panel and make sure that the Grid is inside the StackPanel. If it isn't just click and drag it into the StackPanel.

Adjust the Layout settings while the Grid is still selected. Set Width and Height to "200" pixels, Horizontal and VerticalAlignment to "Stretch" if they aren't already.


Step 10: Create a Border

Now we're going to create a Border. You can select it like the Grid and StackPanel from the Toolbar on the left side. Draw a rectangle with the Border and move it into the Grid if it isn't already.


Step 11: Adjust the Border Set Color and Corners

Open the area for Brushes on the right side and change the BorderBrush to the following Color: "#0076A2F9". Then set the BorderThickness in the Appearance panel to "5" pixels in all four directions and the CornerRadius to "5" pixels. Width and Height should be set to "Auto" by clicking on the crossed arrows next to the textbox. The HorizontalAlignment needs to be set to "Center" and the VerticalAlignment to "Bottom":


Step 12: Adjust the Border Add a Shadow

Now we are going to add a ShadowEffect to the Border. Click on the Button "New" inside the Appearance area right next to Effect. In the upcoming popup select "DropShadowEffect" and click "OK".

Adjust the Shadow Settings that came up right below the "New" button by setting the BlurRadius to "10" and ShadowDepth to "1":


Step 13: Import an Image

Now we are going to import an image into Blend. You do this by either right-clicking the folder called "image" that we created earlier and selecting "Add Existing Item" or by selecting the folder and dragging an image right onto it from your desktop or explorer.

After the import your project tree should look like this:


Step 14: Use the Image

In order to use the image in the control you simply drag it from the project browser, where you imported it, right onto the workspace. As you can see it is way too big and in the wrong container:

To fix that we just drag the image into the border:


Step 15: Adjust the Image

Change Height and Width of the image to "Auto", Horizontal and VerticalAlignment to "Center", Margins to "0" and Stretch to "Uniform" in the Common Properties panel:


Step 16: Create a TextBlock

Select the TextBlock tool from the Toolbar on the left side and create a TextBlock somewhere in the working area.

Press the "ESC" key on your keyboard to cancel editing the text inside the TextBlock.


Step 17: Adjust the TextBlock

Click and drag the TextBlock in the "Objects and Timeline" panel into the StackPanel we created earlier.

After that, change the Foreground Color to "#FF1F1F1F" and the Layout settings on the right side to the following values: Width: "Auto", Height: "Auto", HorizontalAlignment: "Center", VerticalAlignment: "Top", Margin-Top: "8". Set the Text to nothing by marking the text "TextBlock" and deleting it or by clicking the white square next to it and clicking "Reset". Also change the Font of the Text to "Verdana":


Step 18: Create another TextBlock

Create another TextBlock either by repeating Steps 16 and 17, or by selecting the one we created already in the "Objects and Timeline" panel and pressing Ctrl+C then Ctrl+V to duplicate it. The only thing we have to do different from Step 17 is that we don't want any Margin to be set. If you did the duplicate method you just set the Top-Margin to "0" or click the small white square next to it and reset the Margin:


Step 19: Rename the Elements

In order to be able to work with the elements we created so far we need to give them names. So go ahead and rename the TextBlock at the very bottom to "imgDate" by either slowly clicking twice or by right-clicking and selecting "rename". Change the name of the other TextBlock to "imgName", the Image to "img", the Border to "imgBorder" and the Grid to "imgSize". Now we are done with the design of this control and your hierarchy should look like this:

And the design should look like this:

Of course you can't see the two TextBlocks in your project since we set their Text to nothing some steps earlier.

I personally leave the names of Textblocks as long as I need them to get the design done before I remove them. This way, you can control if everything is at the right place.


Step 20: Take a Look at the XAML

If you want to take a look at the code we just generated click the icon "< >" in the middle at the top of the right scrollbar of the working area. To get back to the design view click the icon at the top.

Our code looks like this:


Step 21: Create another UserControl

Make sure you switch back to the design view.

Create another UserControl in the "usercontrols" folder by right-clicking the folder and choosing "Add New Item" from the menu.

From the popup select "UserControl" and for the name enter "wallview-img.xaml":


Step 22: Create a ScrollViewer

Choose the ScrollViewer container from the Toolbar on the left...

...and draw a rectangle with it into the workspace.


Step 23: Adjust the ScrollViewer

While the ScrollViewer is selected inspect the Brushes area on the right side and change the BorderBrush to "No Brush".

Set the BorderThickness to "0" for all four directions, the Horizontal and VerticalAlignment to "Stretch", the Top-Margin to "29" pixels and the other Margins to "0". Also control if Width and Height are on "Auto" by clicking the crossed arrows. Further extend the Layout area by clicking on the small arrow and set all four Padding directions to "0":


Step 24: Create a StackPanel

Select the StackPanel from the Toolbar on the left...

...and create a StackPanel in the middle of the ScrollViewer.


Step 25: Adjust the StackPanel

Select the StackPanel if it isn't already from the "Objects and Timeline" panel, then click on the "Solid Color Brush" button in the Brushes area (it is the second one from the left, right next to "No Brush") and set the Background Color to "#FFB8B8B8". Furthermore change the Horizontal and VerticalAlignment to "Stretch", check if Width and Height are set to "Auto" and if the Margins are all "0":


Step 26: Create a Grid

Choose the Grid Container from the Toolbar and create a Grid.

If you created it inside the StackPanel just drag and drop it into the LayoutRoot-Grid:


Step 27: Adjust the Grid

Change the Grid's Height to "30" pixels and the Width to "Auto". HorizontalAlignment to "Stretch", VerticalAlignment to "Top" and the Margin to (-1, -1, -1, 0) for (left, top, right, bottom):


Step 28: Create a Rectangle

Select the Rectangle Tool from the left side which is above the containers we used several times already...

... and draw a box into the work area.

Move the Rectangle into the Grid we created in the step before:


Step 29: Adjust the Rectangle

Change the Rectangle's Fill color to "#FF4E4E4E":

And the Stroke color to "#FF1F1F1F":

Set Height and Width to "Auto", Horizontal and VerticalAlignment to "Stretch" and reset the Margin if there is any:


Step 30: Create a StackPanel

Now we create a StackPanel and move it into the Grid:


Step 31: Adjust the StackPanel

Change the StackPanel's parameters to the following: Width and Height to "Auto", Orientation to "Horizontal", HorizontalAlignment to "Left", VerticalAlignment to "Center" and the Margin-Left to "10":


Step 32: Create a Button

Select the Button-Tool from the Toolbar...

...and create a Button somewhere in the working area.

Then drag it into the StackPanel we just created:


Step 33: Adjust the Button

Set the Button's Width and Height to "Auto", HorizontalAlignment to "Stretch", VerticalAlignment to "Center", Margins if there are any to "0", the Content to " All Albums " (white spaces on purpose so the default button looks slightly better) and the Font to "Verdana":


Step 34: Duplicate the Button

Select the Button and press Ctrl+C, Ctrl+V to copy and paste the button in the same StackPanel, then Change the Margin-Left to "5" and the Content to " Current Album ":


Step 35: Duplicate the StackPanel

Select the StackPanel with the two Buttons in it from the "Objects and Timeline" panel and press CTRL+C, CTRL+V to duplicate it as well. Now your hierarchy should look like this:


Step 36: Adjust the Duplicated StackPanel

Select the duplicated StackPanel if you haven't already, change the HorizontalAlignment to "Right" and set all the Margins to "0" except for the right one which you set to "10" pixels.


Step 37: Adjust the Buttons

Select one of the the Buttons in the duplicated StackPanel and change its content to " < " if you selected the left one and to " > " for the right one. Now we have two buttons with an arrow symbol which will later be used for navigation.


Step 38: Create a Slider

Select the Slider-Tool from the Toolbar and create a Slider on your workspace.

Then drag and drop it to the top of the lower StackPanel:


Step 39: Adjust the Slider

Select the Slider and adjust it to the following settings:

  • Width: "100",
  • Height: "Auto",
  • HorizontalAlignment: "Center",
  • VerticalAlignment: "Center",
  • Margin-Right: "20",
  • the other Margins: "0",

And under Common Properties:

  • LargeChange: "0,2";
  • Maximum: "1,5";
  • Minimum: "0,5":
  • SmallChange: "0,1";
  • Value: "1".

Step 40: Rename the Elements

As in the image UserControl which we created earlier we are going to rename the elements that we need later. From bottom to top: Button: "btnNext", Button: "btnPrev", Slider: "slider", skip the StackPanel, Button: "btnCurrentAlbum", Button: "btnAllAlbums", skip the next elements up to the StackPanel which is inside of the ScrollViewer. Rename that StackPanel to "content". Now the hierarchy should look like this:


Step 41: Final Look

This is how the "wallview-img" UserControl should now appear:


Step 42: Take a Look at the Code

This is how the xaml-code for our UserControl "wallview.img.xaml" appears:


Conclusion

Blend is a great tool to build beautiful designs and animations. You can even write the whole code behind in Blend, but I prefer using Visual Studio since it is more powerful, has a debugger and a better IntelliSense for proposals and autocompletion.

In the second part of this tutorial we are going to write the whole code behind for our two UserControls in C# as well as our own webservice which brings every image from a particular folder into our wallview.

Since this is my first tutorial ever I hope you liked working through it and learned something useful. For any comments, suggestions or concerns, please leave a note in the comment section.

Thanks for reading!


Further Resources

30 day trial of Blend
An Introduction to Microsoft Silverlight 4 – Blend

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.