In this article, I will be discussing multiple styles, nested controls, Resource Dictionaries, similar control templates (TreeView), control reuse & a few other tips...
Introduction
Welcome to my 6th beginners' tutorial for Expression Blend & Silverlight.
This time, we will be focusing on the basic Template of a ListBox, the Control Template!
As well as making things prettier by playing with the surround, to give the ListBox context.
Now ScrollBars are dealt with, we can properly address the basic Control Template for a ListBox, that we touched on in Part 1. We will start with the Control Template, & move on to the Content Layout & Generated Items Templates in the next tutorial. Please appreciate that this is a Designer biased tutorial, and as such I may take liberties, by simplify certain bits for the benefit of people new to Blend (I don't want to blow any budding designers brains away!). The basis for this tutorial will be Defwebserver's MVVM file Manager, which I plan to Style for him.
So open up Defwebserver's demo application in Blend 4 from this link, and we can make a start.
Again, before commencing this tutorial, I recommend that you read my previous CodeProject tutorials.
I am writing them as a series, & as such, this tutorial will presume prior knowledge.
Section Heading
Now with the greatest of respect to Defwebserver, this sucks! But it has had absolutely nothing done to it so far...
(The sample data at Design time, is not the same as the Runtime data).
We want to make this look more interesting, as well as matching the theme of the overall application or website.
Now the first thing we can do, is plug-in the ScrollBars that we created in Part 1.
Download the ScrollBars Resource Dictionary here, & add them to your project.
Now go to the ListBox on the right, & edit a Copy of the Control Template, name this Style to "ListBoxStyleMVVM".
This should now reveal the ScrollViewer, which again, you will need to make a Copy of the Control Template for called "ScrollViewerStyleMVVM".
Now we are at the ScrollBars of the ListBox, & we can Apply the ScrollBar Style Resource to the Vertical & Horizontal ScrollBars.
But that does not effect, the ScrollBars we can see at Design time, & this is because they belong to a different ScrollViewer!
The ListBox itself, is inside of a ScrollViewer, as set up by Defwebserver, and I have no burning desire to change it.
(Mainly because it provides easy control for later formatting & helps teach us a few things about Styles - so thanks!).
So even though we may not get to use these ScrollBars, I definitely wouldn't want mismatched ScrollBars to ever appear!
So setting the Style for these ScrollBars is just good sense!
Now select the Rectangle in the Template & set the Visibility to Collapsed, as we don't want this in our current Style.
Go to the ScrollViewer that is the parent of the ListBox, & Apply the ScrollViewer Style Resource we just created.
(Be aware that we have nested items that share the same Style, so what we do on one, will apply to the other).
And we now have our Styled ScrollBar in view. (As long as you have the Sample Data visible).
Select the VerticalScrollBar & look at the Margins for this component of the ScrollViewer.
These setting worked great for the default Style of ScrollBars, but not the Style we created in Part 1.
Change the Margin setting to 0 for the left, & 5 for all the other sides.
Nothing in the Artboard changes, as the Vertical ScrollBar is not visible.
Now select the Horizontal ScrollBar and set the Margins to 0 for the top, & 5 for all the other sides.
And as this ScrollBar is visible, we can see the updates in the Artboard as shown below:
What you can also see here is a Grid divider on the left, & this tells us that the ScrollContentPresenter above, is the item that is proving the top Margin for the ScrollBar.
(The Margin values of the ScrollContentPresenter, are Template Bound to the Padding in the ScrollViewer Style.)
So we are seeing how important Sample Data & Generated Content is while designing, as I really do need to see what I'm doing... Things are not too bad when just positioning the Vertical & Horizontal ScrollBars, but in other situations, it is vital to have sample input when designing & testing your application.
You may also hate the current red ScrollBar, but I really don't care what colour it is at the moment. All I'm thinking about is Layout, Form & Contrast. For this reason, I will be designing the whole application in red, not because I like it. But because if it looks OK in a monotone red, it should look great when I pick the real colours at the end. So remember, this is all about layout & not colour!
Now I & Defwebserver have bigger plans for this basic file navigator/manager. But for now, I am going to treat it as something like a child window. As it's not really a whole application, more like a module, that might make-up an application. So with that in-mind I want to give the whole thing a border or frame, before we get too serious with the Styling of the ListBox itself... It is also an excellent opportunity to reuse an Asset I created in my 3rd tutorial, the Picture Frame Control. But first we need to centre the parent Grid in the Canvas that was set up for. A Canvas Layout is different from a Grid Layout, as it uses Absolute Co-ordinates originating from the top left corner. As such, you will see slightly different layout options when using a Canvas. If you are doing Physics & things like Gravity, you have to use a Canvas because of the Absolute Co-ordinates.
So select the Grid inside the LayoutRoot Canvas, as shown below:
Look at the Layout properties, & set the Width to 500, the Height to 300, the Left to 50 & the Top to 50.
That should centre the TreeView & the ListBox centrally in our 600x400 Canvas, as shown in the image below:
(I have set my Canvas to a slight off white for clarity).
Download the PictureFramesControl Resource Dictionary here, & add it to your project.
Select the Canvas LayoutRoot element, & find the PictureFrameControl in the Assets menu.
Drag out a PictureFrameControl to fill the Canvas, so Width & Height at 600x400, & the Left & Top both at 0.
Now select the PictureFrame element that is currently named as a "[ContentControl]" & Reset the Content to remove the text in the PictureFrame.
Remember the PictureFrame is of a Type called ContentPresenter, & the square brackets denote that it has no name. (Check the XAML.)
So rename it to "PictureFrame" & in the XAML you can see, it now has an x:Name=PictureFrame. (Where before there was nothing).
Still with the PictureFrame selected, go to the BorderThickness's in the Appearance section, & set them all to 50.
That should fatten up the PictureFrame, & make your run application look like the image below:
(Remember the Design Data, & the Runtime Data are different).
Now we have a perimeter around the Controls we want to Style, & I would suggest it is best to work within something representative of your applications Style.
The PictureFrameControl is very versatile, as all I have done to create the frame profile/form, is to edit the Gradient Resources.
The frame can be almost anything & I will provide a different profile/Style later for the finished application, but this will do for now.
(Just edit the Alpha values & the colour selector to play...You may as well, as I'll be providing a different one later!).
Eventually, we are going to get to the Styling of the ListBox, but first I want to talk about transparency & is it a good idea? You may want to have a background image that shows through your ListBox & Data, but this has its risks regarding the legibility of that Data. Also what if the background failed to load, what would happen then? I don't want to cast doom & gloom, but it needs to be considered! The most lightly reason a background may fail, is if you are showing an image. So logically, you would ensure the background to that image viewport, should be set to a colour that works for your Data/Content. So even though I might be able to rely on the bigger application to provide the background colour to this module, I will set the Canvas to be our background colour. If this module was a child window, I would without hesitation set a background colour, so the decision is made! The other reason for me using a background here, is to see exactly where we have Fill properties, within the ListBox Control's various Templates. And to best show this, I will set a Gradient!
Select the Canvas element & set a Gradient Fill as shown in the image below:
(Use the colour picker to match the Tones of the Picture Fame, but you can choose what you like).
Save this as a Resource for use later...
This should give you a Background Fill in the run application, just like the image below:
(I've shifted the GridSplitter across to show the Horizontal ScrollBar of the ListBox)
Now the GridSplitter is a total miss-match, for the Style of this current application/module, both in its form & colour.
So here is a GridSplitter Resource Dictionary with a suitable Style in it, Add to the project & apply to your GridSplitter.
This GridSplitter Style may not be the finished article, but I'm hoping you are seeing how easy it is to just plug Styles in to make improvements or adjustments.
Now your application/module should look like the image below when run.
Thinks are starting to get more consistent, & the GridSplitter is no longer an eyesore, so I think we can at last look at the ListBox.
Please ignore the TreeView on the left! :-)
Now looking at the ListBox (on the right) in the section above, we have multiple blue gradient borders. This is because there is a Border element within the ScrollViewer's Control Template, that is Template Bound to the BorderBrush in the ScrollViewer Style. Now I want to set this BorderBrush to match the colour scheme for the rest of the application. And as such, effecting the Style of the ScrollViewer that is inside of the ListBox, as well as the one outside the ListBox. Now just setting the BorderBrush properties of the ScrollViewer at root element level, will only change its own colour, so it needs to be done in the Style. Or that is what you might think.... But neither methods changes the BorderBrush Border colour of the inner ListBox. And the reason why is that the ListBox is overriding these Style instructions, as it is the parent of the child ScrollViewer hooked into it! Confused? you will be! :-) But seriously, let's make a start & see how we get on...
Select the ScrollViewer parent of the ListBox & in the Style, Reset the BorderBrush.
(We do not want this Border, as it interferes with the GridSplitter).
But notice it has no effect on the inner ScrollViewer, & this is because the ListBox overrides this, as it is the parent of the inner ScrollViewer Control Part.
So select the ListBox, go to the Style of the Control Template, & change the BorderBrush to a Solid Fill of Hex value: #FFC00000.
(See how this changes the Border of the ListBox to a deep red, & not the BorderBrush of the ScrollViewer Control Part inside it).
Now I want the white inner background to fill the red BorderBrush we just set.
To do that, go to the Style of the ScrollViewer inside the ListBox, & change the Margins from 5, to 0 on all sides.
This should give you the same as the image below:
But we have a problem! The GridSplitter has lost all of its spacing from the ListBox.
This is because the Style Margin setting we have just changed, has applied to this ScrollViewer & to the outer ScrollViewer (the ListBox is in).
So to correct this, as well as provide better Layout control, I will undo the last step (change the Margins back to 5).
And instead, I will make a copy of this Control Template, thus making it independent of the ScrollViewer that is the parent of the ListBox.
(We could have just set a Margin for the GridSplitter, but better flexibility for later, will be provided by a new ScrollViewer Style).
So select the ScrollViewer inside the ListBox Control Template & choose Edit Template > Edit a Copy.
Rename the new ScrollViewer Style to "ScrollViewerStyleListBoxMVVM", & hit OK.
Now we have 2 separate ScrollViewer Styles, each sharing the same ScrollBar Style. Fun eh?
(It's not so bad when you get your head around it.)
Now go to the Style of the ListBox ScrollViewer, & change the Margin of this Style to 0 on all sides.
This should change ONLY the Border Margin of the ScrollViewer inside the ListBox, as shown in the image below:
(Design time Data shown in image above.)
We now have the ScrollViewer inside the ListBox, filling all of the ListBox.
(But have not changed the ScrollViewer outside of the ListBox, & its spacing from the GridSplitter & ScrollBar) - As intended!
Now go into the Control Template for the ScrollViewer, that is inside the ListBox, & select the Grid element.
Look at the Background/Fill of the Grid element, & see that it is Template Bound to the Background colour of the Style. This Grid is what provides the background colour of our ListBox, & I want rounded corners on our ListBox. And a Grid does not have this attribute, instead I need a Rectangle, or a Border element to do this... The Grid is inside of a Border element, & the BorderBrush is Template Bound to the BorderBrush of the Style. (I've no idea why the Border element doesn't control both the Fill/Background, & the Stroke/BorderBrush).
Select the Grid & Reset the Background to No Brush.
Go to the Border element, select the Background property & Template Bind it to the Style.
Now change the CornerRadius of the Border element to 20, as shown in the image below:
What you will also see here, is that the BorderThickness is Template Bound to the Style, & are set to 0.
The parent ListBox is responsible for this, & has removed the ScrollViewer's ability to show its BorderBrush, as the ListBox wants to handle this itself & is also the reason we could not change the Border colour for this Control Part earlier.
But back to the CornerRadius & the ListBox in the Artboard should look like the image below:
Now I have applied far too much CornerRadius, & this is to highlight the problems that can occur with CornerRadius. See how the page icon (page_white.png) is actually off the edge of the Radius corner, of the white Background. We could reformat the content to fix this & take the CornerRadius into account, but this is "Real estate" wasteful, & a lot of work!
So I would suggest not going overboard with the CornerRadius, & think a value of 6 will be suitable for the Style we are creating.
Next go to the ListBox Control Template, select the Border element & change the CornerRadius to 7.
Now to tidy up a bit, select the ScrollViewer in the ListBox Template, & Template Bind the BorderBrush to the ListBox Style.
(This will not visibly do anything, as the BorderThickness of the ScrollViewer & Border element, is set to 0 as I discussed before).
Now go to the Style of the ListBox, & set whatever Background colour you fancy, I've chosen a slight red Gradient.
There is only really the choice of a very light Background, or a very dark Background for clarity. So a slight coloured hint Gradient is about all I can rely on, to safely display the content clearly. But setting a Gradient in the Style is cumbersome compared to setting a Solid colour, especially when trying different colour scheme's...
So set a bright red as the Background colour of the ListBox, and we will use a white overlay in the ScrollViewer Control Template to provide the Gradient.
Now go to the Control Template of the ScrollViewer inside the ListBox, & select the Grid inside the Border element.
Now insert a Border element to fill the Grid element, setting it to Stretch, Auto-Sized, & 0 Margins.
Next Template Bind the BorderThickness to the Style BorderThickness, & this should set it to 0 on all sides.
Change the Background colour to a Linear Gradient, make them both white & add 2 more Gradient Stops at 40 & 60 on the Ribbon.
Set both the end Gradient Stops to 90% Alpha, & leave the 2 centre Gradient Stops at 100% Alpha.
Now rename the new Border element to "BGroundOverlay", set the CornerRadius to 6, & the element Opacity to 95%.
Finally in the Objects and Timeline, move the new Border element to the top of the Grid child elements, as shown in the image below:
This places the overlay behind the ScrollContentPresenter & thus behind the Generated Content.
And hopefully your ListBox will look like the image below when the application is run.
You can now change the Solid Background colour of the ListBox, & always keep the Gradient!
(I'm not saying my values are right, I've only chosen values that I know will show up for this tutorial).
And you might think that the basic Styling for the ListBox is done, but we have made a mistake!
Select the ListBox (Not in the Control Template) & open the Extended Properties of the Layout section.
Now find the HorizontalScrollBarVisibility & set it to Visible.
(I've dragged my Layout section wider to reveal the full names).
This should change the ListBox in the Artboard, to look like the image below:
Not very good, unless we want a horrible red background to the ListBox ScrollBar area.
The problem is we have only set the overlay, to cover a portion of the Grid it is in.
So go into the ListBox, & then the ScrollViewer's Control Template & select the Grid element.
Look at the Row divider in the bottom left of the image below, as well as the Column divider. (Top right)
See that the Row divider is now expanded, as the ScrollBar has become Visible to fill that Grid subdivision. And we want our overlay to cover this area, if it is to perform its job properly! Now we could try to tell the overlay to completely cover all the subdivisions of the Grid, but this always leaves the overlay at the mercy of the Grid. What would be nice, is for the overlay to be the parent of the Grid, as this way it will always apply, to everything in the Grid. But a Border element can only have one child element (as most controls do), it is only really the Grid that can have multiple child elements. And as the Grid is currently the child of the Root Border element, we need the overlay to become the child of the Root Border element, & the Grid to be the child of the overlay. (Basically slot the overlay in-between the Border & the Grid).
Easy, just select the BGroundOverlay element in the Objects & Timeline & drag it onto the Root Border element.
This should change the parent child relationships, as shown in the image below:
Ensure all the Margins are set to 0 & the Width & Height are Auto, when run the application it should look like the image below:
Now I have set some Margins on the ScrollBars early on in this tutorial, that are no longer quite right. As the bottom of the 2 Horizontal ScrollBars in view, has a larger Margin on the bottom than I would like. And before we go jumping into changing the ScrollBars & possibly the ScrollBar Style. We need to remember that the ScrollBar Style applies to BOTH the Horizontal ScrollBars in view. The top one is inside the ListBox & as such not called upon, but notice that is does fit nicely inside the ListBox viewing pane. And changing the Style for one of the ScrollBars will effect the other ScrollBars. So I might end up creating a whole new Style, just as I did for the ScrollViewer. (Which was actually excessive at the time, as I could have simply overridden the Style in the Root of the Control). Which is fine for doing the odd adjustment to a few Controls, but a time consuming nightmare when dealing with lots of adjustments to many Controls. So it is really about balance, to decide if a new Style is warranted & what should be defined in that Style. For example, the ScrollBars used here have absolutely no Margins set in the Style, but do have Margin offsets when used in a ScrollViewer. As we gave the ScrollBars offsets within the ScrollViewer's Control Template. So when a ScrollViewer with this Style is used, the ScrollBars will automatically receive the offset of the ScrollViewer's Control Template. Hopefully, that makes you think it would be a bad idea to start applying Margins to a ScrollBar, as you might make it fit here, but screw it up everywhere else. Keep the basic core blocks simple & add the adjustments as high up the chain as you can!
So ensuring you are not in any Control Templates, select the ListBox & change the HorizontalScrollBarVisibility to Auto, to make it disappear.
Now select the parent ScrollViewer of the ListBox named "FileDetails", leave the left Margin at 5, & change all the others to 0.
This will make the ScrollViewer & the child ListBox, sit nicely inside the PictureFrame on all sides, as shown in the image below:
(If the ScrollBar of the parent ScrollViewer is set to Hidden, the containing ListBox still fits nicely to fill the whole area).
Please keep ignoring the un-styled TreeView on the left, but as for the ScrollViewer & ListBox on the right, the rest is personal taste...
Now you might be thinking, why do we need 2 different ScrollViewer Styles. One for the ScrollViewer that is the parent of the ListBox, & one for the ScrollViewer that is a Control Part of the ListBox. As I have already said: This allows for 2 different spacing setups for the Margins, but it also allows for the 2 different background setting that we are currently using. Remember the BGroundOverlay element we added for the ScrollViewer inside the ListBox? As it is part of the ScrollViewer's Control Template, it is also part of that Style. So if we applied this Style to the ScrollViewer that is the parent of the ListBox, it would also have this BGroundOverlay element as well. And because we have no Template Binding that we can easily applied to this elements Background/Fill property, we have no way of easily switching it on or off. So really, we do need 2 Styles for the ScrollViewers in this application.
In the ListBox Control Template, as well as a ScrollViewer, you should also have ValidationErrorElement of type Border.
Within this Border is a Grid to hold 2 Path elements that are used to indicate a Validation Error. This is lightly to be only be implemented by the Developers work, but the Designer needs to consider these elements, even though they are never lightly to see them while designing. So how do we get to see, these usually invisible elements at design time, and in a State, where we are not defining Keyframes.
Go to the States Manager (VSM) & still while in the Base State, click on the almost invisible black circle to bring up the Eye icon.
This now allows us emulate the InvalidFocused State, & see what the user will see, if the Developers code rules for input are not being observed.
(The Unfocused & Focused States are often the same, but could be different).
There is also no point adding a duration to this State group, as to my knowledge, the way the ValidationErrorElements are being displayed does not animate over time.
(This is because the Border element is going from a Collapsed State, to a Visible State, rather than changing the Opacity of the elements).
With the ValidationErrorElement Border element selected, go to the Artboard & with the Selection tool, drag the right hand edge into view, as shown in the image below:
(Or just set a Margin for the right hand side, of about 125).
That should bring all of the ValidationErrorElements into view, showing a red Border & 2 Path elements in the top right corner.
With the Border ValidationErrorElement still selected, change the CornerRadius to 7, to match our new Style.
Now look at the 2 Path elements in the top right corner of the Border, as shown in the image below.
These Vector Path elements have been designed for a CornerRadius of 2, as will just about all default Controls. So if you want to change this, you will need to do it in every Control you Style to match this one. As will changing the colour.... So to keep things simple for the moment, I will leave these as they are. As they should still work OK for this Style. (I hope!)
So Reset the Margins for the ValidationErrorElement to reset it & that is all we need to do here. And I know the red does not stand out, on our red application, but who said this application had to be red? Even though the introduction picture shows a red application...
That completes the Styling of the Control Template for the ListBox!
This is really not part of the tutorial, but the TreeView could do with a bit of work, just to make it consistent with the ListBox. And thanks to the Styles we have already created, this will be quite simple. So ensuring you are not in any Templates, drag the PictureFrame behind the Grid to move it out the way, & we can make a start.
Select the ScrollViewer named "FileFolders", right click & choose Edit Template > Apply Resource > ScrollViewerStyleMVVM, as shown in the image below:
Now set the Margins to 5 for the right side & 0 for the other 3 sides, as shown in the image below:
Now expand the ScrollViewer named "FileFolders" & select the child TreeView Control.
Next choose Edit a Copy of the Control Template, call it "TreeViewStyleMVVM" & hit OK.
Go to the Style for the TreeView, set a bright red for the Background & a dark red for the BorderBrush.
(Use the Colour Picker on the Artboard to colour match).
Now in the Control Template, select the ScrollViewer, right click & choose Edit Template > Apply Resource > ScrollViewerStyleListBoxMVVM.
This obviously applies the same ScrollViewer Style, that is applied to the ScrollViewer in the ListBox. So this Style that was originally created for a ListBox, will also work for the ScrollViewer part of a TreeView. This is because they are basically the same as each other, a simple building brick that makes up a more complicated Control. All the action (so to speak), goes on in the ScrollContentPresenter part of this Style's Template, & that is controlled by the Additional Templates, that we will discuss in the next article. All we are really doing in the Control Template for this ScrollViewer, is dressing the stage or framing the content. And as we want the TreeView Style to match the ListBox Style, it makes good sense to be able to reuse your base Styles! This means it was a bit short sighted of me to name the Style to "ScrollViewerStyleListBoxMVVM" as we are using this Style in places other than a ListBox, so change this to "ScrollViewerInnerMVVM".
To change the name of a Style Resource, go to the Resources tab & click twice (slowly) on the name, to get the same as the image below:
Change the name to "ScrollViewerInnerMVVM" & hit Enter.
A window should pop up, asking what to do about the name references, as shown in the image below:
The default of "Update references" is what we want, so hit Continue.
With a bit of luck, the name has been updated & nothing broke.
Do the same to the ScrollViewer Style named "ScrollViewerStyleMVVM", changing it to "ScrollViewerOuterMVVM".
Back to the Styling of the TreeView, & ensure you are in the Control Template of the TreeView (& not the ScrollViewer).
Select the Root most Border element, as shown in the image below & change the CornerRadius to 7.
Now select the child Border element & set a CornerRadius of 6, then Reset the Margins to 0 on all sides.
Now to remove the spacing applied by the Padding, go to the Style of the TreeView & change the Padding there to 0 on all sides.
That should now make the TreeView match the ListBox, as shown in the image below:
The only thing left to tidy up now is the GridSplitter, that Defwebserver literally threw at this demo application.
So come out of any Templates, select the GridSplitter & change the Width to 10.
Now go to the Margins & set the left to -5, the right does not matter as we are "left aligned" so leave at 0.
Set the top & bottom Margins to both 80, or any other value you prefer...
But what you should appreciate, is that the GridSplitter will always be 10 pixels wide, but its height will be the same as the form, minus the top & bottom Margin. Not setting a fixed height for the GridSplitter gives better flexibility for your application, but only within a certain range. As Margins of 80 on the top & bottom will result in no GridSplitter, if the parent items height goes below 160! So if you only wanted a short GridSplitter, you may be better of setting a fixed height. You can always try combining a Scale transform for the Y axis, but this will deform (Squash) the visual elements. Especially rounded corners as we have here. so I'll just leave my top & bottom Margin at 80, & presume that this will be ok...
I promised a new PictureFrame, in case you have made a mess of your current one. But it is not a serious problem even if I don't provide an updated PictureFrame. As you could just simply load the old one again to Reset the Gradients, & any other changes you may have made... But I will give you a new PictureFrame, but want to ensure again, that your PictureFrame is behind the Grid, & is the first child of the LayoutRoot Canvas, as shown in the image below:
First copy the Background that we set for the LayoutRoot, to the Grid & edit as you see fit.
Download the new Picture Frames Update from here & add it to your project.
Now if all went according to plan, your project should look like the image below:
The Rivet colours can be changed using the Background colour of the Picture Frame, but as this also changes the inner Background of the Picture Frame, we needed to ensure we covered that, by moving our desired Background, from the LayoutRoot Canvas to the Grid.
And that really is the end for now! - So please vote!!!
You will always learn more by working through the tutorial, but here is the completed project for you to play!
