Hello guys,

I had an idea to show you how to use Expression Blend to easily create some custom scrollbars. This is a great way to learn the functionality of Silverlight in Blend. As i started to write i realised it might be best to start with an introduction to using Silverlight in Blend, so here goes. Part 2 coming within the next week!

This can be done in a number of ways but by far the easiest way to customize the look and feel of the User Interface in Silverlight 3 is Expression Blend 3.

I'm going to step you through the sequence you'll be following to edit the correct templates.

For a start, Open up Expression Blend 3.0 and Hit File-> New Project and give it a name.

The important part is to make sure "Silverlight" is selected in the left area, and "Silverlight 3 Application + Website" is selected in the top right area.

I like to use Visual C# and I haven't changed the location for the project, but you can. Press OK.

One thing I'd like to suggest at this stage is that you check Window -> Workspaces and make sure you've selected "Design"



This will ensure that we're looking at the same things, and that all your design tools are easily accessible.

Now we are ready to begin working on the project. The scenario is easy to understand: we have a scrollable pane and the default scrollbars are appearing. You would like to change the appearance of the scrollbars and continue to use them afterwards as per normal. You will not have to write any code to do this, or have an understanding of buttons or mouse over events etc.

In the vertical toolbar on the left, right-click the "Grid" icon to see similar tools display. Then select "ScrollViewer".

 

Now drag a square in the top-left of the main white area, which you can see in the centre of your screen.

Firstly, on the left find the heading "Objects and Timeline". In this panel we should see a [ScrollViewer] inside something called "LayoutRoot". Select the ScrollViewer by clicking on it once:

 

When you have done so, the properties for the ScrollViewer will appear on the right inside a pane called "Properties". We are going to find the "Width" and "Height" properties in the Layout section of the properties pane and set them both to 150:

If you're feeling overwhelmed, take a short break. You've covered a lot of new concepts if you've never used blend before.

Right click on the same box again in the left toolbar and choose "StackPanel". Draw the stackpanel inside the scrollviewer area. Edit the properties of the stackpanel by clicking the "Auto" icon next to width and height:

 

Now we are going to add some items to the stackpanel until the scrollviewer becomes useful. To do this, Select the StackPanel in the "Objects and Timeline" area. Next, select "Rectangle" (the one just above grid) in the Vertical toolbar and double-click it 4 or 5 times. Each time a new "[Rectangle]" should appear inside your "StackPanel" in the Objects & Timeline area.

One by one select these rectangles in the "Objects and Timeline" Area and choose a different colour for each in the properties area.

 

Now When you have chosen a colour for each rectangle, press "f5" and wait for it to open a browser window. When done, use the scrollbar and view all the different colours of your rectangles.

We are ready to customize the scrollbars now and get some custom scrollbars showing. With each change you can press "F5" from expression blend and see the change in your final application. Continue to the next post to see how we can change from the default scrollbars using nothing but this graphical user interface!

Keep Learning,

Zero Gravity Chimp

Hello Readers,

As this is my first blog post I thought I would go for something relatively straightforward. I don't think that my solution to the following problem is the best way to solve the problem, but I found it very hard to figure out the way to do this at first.

So let's assume that you have a class called Card and a list of type Card. If you don't understand what I just said, I recommend reading this first: http://msdn.microsoft.com/en-us/library/6sh2ey19.aspx. I have a function called "create deck" which adds 52 cards to the list (not using jokers) and I would like to create a function that will shuffle the order of the list.

Here is the function:

        public List<Object> ShuffleDeck(List<Object> myDeck)
        {
            List<Object> outputDeck = new List<Object>();

            Random rand = new Random();

            while (myDeck.Count > 0)
            {
                int grabIndex = rand.Next((myDeck.Count));
                outputDeck.Add(myDeck[grabIndex]);
                myDeck.Remove(myDeck[grabIndex]);
            }
            return outputDeck;
        }

And you call it like this:

           //where myDeck already exists

           myDeck = ShuffleDeck(myDeck);

The only catch is if you are using a List<objectNameHere>, for example List<Card> (as in my application), you must replace the part "List<Object>" in the function with "List<objectNameHere>" and you're good to go!

good luck,

Zero Gravity Chimp