Hello!

This is the first in a long series of how designers can use Blend 3.0.

I'm opening up a new project in Expression Blend 3.0 called GridLayoutBasics. If you don't know how, follow my earlier post here: http://www.zerogravitychimp.com/post/Custom-Scrollbars-1-Create-in-Expression-Blend.aspx
The first thing you should know is that "LayoutRoot" which blend will automatically add to "MainPage.xaml" is a grid. Grids are designed to fill the space that they occupy, and their contents can resize automatically too.

I'm going to go ahead and add some rectangles to the LayoutRoot in different colours. Now I'm going simply going to press "F5" and see the results.

Now in my case I see the rectangles taking up a 640x480 space, because that is the size of grid i drew them on. So how do i get the grid to take up all available space?
Fill the grid with a colour first, so you can see the actual size of the LayoutRoot. Next click the [UserControl] in "Objects and Timeline" and find it's height and width properties in the "Properties" panel. You can now click on the little "Auto" buttons that make your life a bit easier. Do this for width and height.

Run the project again to see what has happened. Your LayoutRoot is probably taking up all the available space in the window, but only some of your rectangles have stretched proportionately, while others have stayed tiny.

Back to Expression Blend. Select the "[UserControl]" in "Objects and Timeline" and locate the bottom-right arrow on the screen. Use this to resize the viewing area to a size that works for you.
This is called setting the Design time size of the UserControl, and will not affect the final product. You can view the Xaml (By right-clicking the UserControl and clicking "View Xaml") to see the following:

If you can't see the arrow I've circled in red you need to make sure you selected "[UserControl]" in the left-hand side panel "Objects and Timeline".

I like to close the Xaml split view to give myself more space. This can be done easily by using the buttons at the top-right of the design area:

But how can we control how all of these items will be resized at runtime? We need to use columns and rows and their properties to be able to control this dynamic resize. I will be addressing this in my next post.

Please leave comments if you have any questions or input.

Have fun designing,

Zero Gravity Chimp

Hello,

for those of you who followed the previous posting, I'm reopening my "Scrollbars" project now. If you are just reading this, I've created a basic application using only Expression Blend 3.0 and Silverlight 3.0. On my MainPage.xaml I have added a Scrollviewer containing a stackpanel, and that contains a bunch of coloured rectangles.



When you run this project (f5) you can scroll downwards to see more rectangles. Now we are going to change the style of the scrollbars.

What we need is to open up the default scrollviewer that microsoft has created for us. The scrollbar is situated inside the ScrollViewer Template. This is the trick you need, remember it: right-click the ScrollViewer, click "Edit Template" and then click "Edit a Copy".



Now you choose a name for your new template. I'm just going with the defaults this time, and pressing 'OK'.



The screen has not changed much once I press OK but the area on the left labelled "Objects and Timeline" has some new objects. You can open up the [Grid] to see VerticalScrollBar and HorizontalScrollbar.

Right click the VerticalScrollbar (You can do the horizontal one instead if that’s what your project needs) and click "Edit Template", then "Edit a Copy".



Again, I'm just going to go for defaults, thus creating "ScrollBarStyle1" in "This document..." when I press 'OK'.

In this view, I'm going to start by looking inside VerticalRoot, since, in my application, the vertical scrollbar is currently visible.

The components that are listed under "VerticalRoot" are the ones which make up the default scrollbar for Silverlight that was supplied to us by Microsoft. Now let's destroy it >:D !! Don't worry, we're editing a copy and it isn’t possible to destroy anything.

I'm going to demonstrate one way to style a scrollbar, but you will probably want to do some things differently. I apologise for my poor design sense, that’s what we developers are known for.

I'm going to start by getting rid of the three nameless [Rectangles] that were originally there for some sort of visual effects.



Next I'm going to edit the template of the VerticalSmallDecrease. In this case I'm using "Edit Current" instead of "Edit a Copy".

In this template, I've deleted everything except the "Path" and added a rectangle underneath the Path with a Black fill.

Now is probably a good time to save your work.

I've changed the Rectangle's Stroke property and the Path's Fill property to this colour #FF7F2CFF which can be pasted into blend here:



I also changed the Path's Width to 12 and Height to 8 using the Properties area after selecting [Path] on the left hand side.

The last thing we need to do before we are done with this VerticalSmallDecrease is find the "States" up in the top left. If you can't find it, you can activate it in the main "Window" menu. I've opened mine and it looks like this:



If you click on a state here, you will be editing only for that state, unless you choose “Base”. For example, if you click MouseOver and make some changes, those changes will only be visible when you mouse-over this part of the scrollbar. When you are editing a "State", such as MouseOver, a pop-down alert will appear at the top of the editing area saying something like “MouseOver state recording is on”. Be careful what you do when recording is on, changes you make are only for that state.

In my project, I'd like the "Fill" property of the path and the "Stroke" property of the rectangle to change based on Normal, MouseOver, Pressed, or Disabled state. Normal should generally be the same as Base.

In base, I change the path's Fill to Black (#FF000000). then in MouseOver I change the path's Fill to #FF7F2CFF. I want the colour to go lighter when the button is "Pressed", so in Pressed state I change the colour of the rectangle Stroke and the path’s Fill to #FF9C5CFF. Finally, I'm going to change the rectangle Stroke to black in the Disabled state.

I recommend you click through all your states one by one and see that they change as you would like. If I run my project now I can clearly see the modified scrollbar in action!



Now that you know how to edit the SmallDecrease, you can do the same for the SmallIncrease. All you need to do to get started is go “Up a level” and right click on the right part of the scrollbar and, of course, choose “Edit Template”. But how? like this:



the small arrow shaped grey name tags at the top act like breadcrumbs and you can follow them backwards step by step. To edit the VerticalSmallIncrease you need to go back one level, which can be done by going to (the same level as) "VerticalSmallDecrease".

Now you should see the same view, and the ability to “edit template” on the parts of the scrollbar: VerticalSmallIncrease, VerticalThumb, etc.

The VerticalThumb is the square part that floats between the arrows and shows how far down you are. It can be edited in a similar way as the smallincrease and decrease. The VerticalThumb has one default behaviour I'd like to keep. In "Disabled" state the "ThumbVisual" (which contains everything) becomes hidden.

Other than that I pretty much got rid of everything except the "Background" element and changed the colours of that to suit me. I've also added 2 rectangles with height=2 and some margins (left and right = 1). They will become visible only on MouseOver and Pressed states.

The last thing you need to change is the "LargeIncrease" and "LargeDecrease". This is the part of the scrollbar between the thumb and the arrow that will cause a "page down" effect if you click on it. This one is easy to edit, I just picked a background colour of Black (#FF000000 not #00000000) and margin left and right= 1.

As a final touch, I decided to change the "VerticalSmallDecrease" margin-bottom to 0 and the "VerticalSmallIncrease" margin-top to 0 to get rid of the white space between the thumb area and the buttons.

Now when I run my project I see this:



Sorry, it isn't pretty, but again I am a coder and not a designer! I hope you can do a better job customizing your scrollbars.

For Horizontal Scrollbars you can either create a new “ScrollBarStyle” or you can edit this one in the “HorizontalRoot” section. You can apply 1 scrollbarstyle to both horizontal and vertical scrollbars alike since the style has a definition for each.

To apply this style to any scrollbar once you are done, Right-click the horizontal scrollbar, click “Edit Template”, “Apply Resource”, and choose the “ScrollbarStyle1”.



If you find anything unclear please comment!



Have fun customising,

Zero Gravity C#himp

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