Designer WPF

Mac Scroller Project Files Updated for RCW

Just because we’re working in Microsoft technologies doesn’t mean we can’t throw a bone to our Mac friends. After all, they are the people we love, our cousins and our neighbors, and that irritating guy who is dating our daughter and can’t seem to shut up about how awesome his Mac is even though he’ll be long out of his program in musical costume design before he ever pays off his laptop …

Issues? I don’t have issues. Why do you ask?

Anyway, since Silverlight is a semi-ubiquitous technology, it would be nice if we could cater to all platforms and not make anyone feel left out. And nothing makes people feel more left out than when they expect their application to work one way and it doesn’t.

So, here’s a picture of what we’re going for.

As far as I’m concerned (and therefore as far as this tutorial is concerned) the important stuff is to make sure that the incremental buttons (the arrow buttons in the bottom right) are in the right place. We can deal with the color later.

OK, so let create our ScrollViewer (I’ll be using Blend exclusively for this). I tossed a button in it and made it small so we can see both of the ScrollBars.

Right click on the ScrollViewer in the “Objects and Timeline” section and go down to “Edit Control Parts (Template) -> Edit a Copy…”

You should have something that looks like this:

Let’s do the VerticalScrollBar first. Right click on it and go to “Edit Control Parts (Template) -> Edit a Copy…” Name it something memorable and you should get something like this:

This is actually easier than it looks. The unnamed rectangles and the path lay down the basic visual backbone for the ScrollBar and the rest of it runs like this:

VerticalSmallDecrease – The up button
VerticalLargeDecrease – The space between the up button and the VerticalThumb

VerticalThumb – The interface element that allows the dragging interaction of the scrollbar
VerticalLargeIncrease – The space between the down button and the VerticalThumb

VerticalSmallIncrease – The down button

The horizontal root in this template is strikingly similar.

So, let’s start by moving the VerticalSmallDecrease button down to the bottom above the VerticalSmallIncrease button. The magic here will happen in the VerticalRoot grid. (I highly recommend the Design/XAML split view for this one.) In the design view, our grid looks like this:

Ugly. However, in the XAML, it looks like this:

<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
<RowDefinition Height=”Auto”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

Much easier. For the purposes of maintaining a coherent structure, drag the VerticalSmallDecrease in Objects and Timeline pane until it is between the VerticalSmallIncrease and the VerticalLargeIncrease. Next, change the third RowDefinition to “*”. You can do this in the XAML or by clicking on the “Auto” icon until it becomes a “*” icon. Change the fourth RowDefinition from “*” to “Auto”. When you do this, it won’t immediately act like an “Auto”. This is because Blend gives it an automatic “MinHeight” of whatever the current Height is. You can change that in the XAML (easiest move) or you can highlight that row by clicking just below the “Auto” icon until the row highlights in a semitransparent gray like so.

You may need to zoom in to do this. Once highlighted, the properties of the Row will show up in the Properties tab on the right. Change the MinHeight to 0.

Now we’ll need to change the Grid.Row properties of almost everything. Click on the items in the Objects and Timeline and change the Row property in the Layout section of the Properties tab like so:

VerticalLargeDecrease -> Row = 0
VerticalThumb -> Row = 1
VerticalLargeIncrease -> Row = 2
VerticalSmallDecrease -> Row = 3
VerticalSmallIncrease -> Row = 4

You’re done. With the Vertical part of the ScrollBar at least. You can do the same thing with the Horizontal part of it. Just move around the buttons, change the ColumnDefinitions and update the Column assignments. My best recommendation is to go back to the ScrollViewer template and assign your new ScrollBar template to the HorizontalScrollBar and then go back to editing the template from there.

Later on…

After a bunch of color tweaking, I have a scroll viewer in silverlight that looks like this:

I’m feeling OK with it. I’ve embedded what I have at this point below.

I’ve recently be working on changing the ControlTemplate of a GridViewColumnHeader in a custom ListView that we’ve been working on. (The ListView was rewritten for sorting, so that’s why it had to be custom.)

One of the things we had to do was swap out ControlTemplates so that we could display a caret to indicate ascending or descending lists. We ended up deciding on ControlTemplates over DataTemplates because the DataTemplates would only work for ListViews that had no custom DataTemplates for the headers. We’re doing all sorts of crazy stuff with our headers and we need to preserve our DataTemplates, so this wasn’t an option.

In any case, I was having no luck finding the resource when I named it this way:

<ControlTemplate x:Key="MyCustomControlTemplate" TargetType="{x:Type GridViewColumnHeader}">

I was using the following code to try and find the resource.

ControlTemplate myNewTemplate = (ControlTemplate)Resources["MyCustomTemplate"];

However, we were able to solve the problem by naming the resource this way

<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:MyCustomListView}, ResourceId=MyCustomControlTemplate}"
         TargetType="{x:Type GridViewColumnHeader}">

And then using this code to access it.

ComponentResourceKey myCustomTemplateKey = new ComponentResourceKey(typeof(SortableListView), "MyCustomControlTemplate");
ControlTemplate myNewTemplate = (ControlTemplate)this.TryFindResource(myCustomTemplateKey);

Just thought I’d pass it along.

This is just a quick note on creating a ListView style with the appropriate GridView style and template assignments.

Normally, I’ve been creating listviews that look like this:

<ListView x:Name=”MyListView”
               ItemContainerStyle=”{DynamicResource MyListViewItemContainerStyle}”>
    <ListView.View>
         <GridView ColumnHeaderContainerStyle=”{DynamicResource MyListViewHeaderStyle}”
                         ColumnHeaderTemplate=”{DynamicResource MyGridColumnHeaderTemplate}”> 

I did this because I didn’t know exactly how to assign these styles and templates to the ListView Style. In the style, ColumnHeaderContainerStyle and ColumnHeaderTemplate are not properties of the ListView, they are properties of the GridView… which you can’t create a style for.

Instead, you can encapsulate all the information above in the following style.

<Style x:Key=”CustomListViewStyle” TargetType=”{x:Type ListView}”>
      <Setter Property=”GridView.ColumnHeaderContainerStyle” Value=”{DynamicResource MyListViewHeaderStyle}” />
      <Setter Property=”GridView.ColumnHeaderTemplate” Value=”{DynamicResource MyGridColumnHeaderTemplate}” />
      <Setter Property=”ItemContainerStyle” Value=”{DynamicResource MyListViewItemContainerStyle}” />
</Style>

Problem solved.

I recently got a comment asking if I could do something on creating a Blend-type ScollViewer styling. The only problem is that the ScrollViewer is a multi-post affair, which I’ll try to get completed in the next month or so. I’m going to go ahead and put up the basics here, much like my Styling the ComboBox and Styling the ListView posts.

In the meantime, I’m making available for download a Resource Dictionary with the Blend ScrollViewer style as I’ve approximated it. (You may have to right-click “Save As…” on that file since IE will do its darndest to open it up.) Just load the resource dictionary into your project and set

<ScrollViewer Template=”{DynamicResource BlendScrollTemplate}” />

Note: This is not the “real” Blend styles… just my rendition/approximation.

In the meantime, here’s the overview for the ScrollViewer. When you look at a template of the ScrollViewer (right-click on the ScrollViewer, got to “Edit Control Parts (Template) -> Edit a Copy…“) you should see something like this:

If you want to change something about the main content area (highlighted below), you’re probably going after the PART_ScrollContentPresenter

If you want to style the corner (highlighted below), look at changing the Corner Rectangle.

If you want to style the HorizontalScrollBar and/or the VerticalScrollBar (highlighted below), you should right-click on either the PART_VerticalScrollBar or the PART_HorizontalScrollBar and go to “Edit Control Parts (Template) -> Edit a Copy…”

A point of note: Because of the way Blend works, it can be difficult to visually style a Vertical and Horizontal ScrollBar in the same Template. Don’t create another template. It’s a waste of time and will make your resources a pain to navigate. I’ll go over exactly what to do in a little bit.

The ScrollBar template should look something like this:

If you want to style the ScrollBar thumbs (the bars you would drag to scroll, highlighted below), you’ll need to change the template for the “Thumb” in the PART_Track. Note: Unless you’re doing something really complex, you should only need to style the Thumb control one time. You don’t need different styles for the vertical and the horizontal.

If you want to style the directional buttons (highlighted below), you will need to change the templates for the first and last “RepeatButton” controls (the ones that aren’t in the PART_Track) using the right-click -> Edit Control Parts (Template) -> Edit Template. (This template should already be copied into your resources.) Again, unless you’re doing something complex, you should only need to style this button one time.

If you want to style the empty area that allows for fast scrolling, you will need to change the style for the two RepeatButtons in the PART_Track (DecreaseRepeatButton and IncreaseRepeatButton)using the right-click -> Edit Control Parts (Template) -> Edit Template. You should only need to do this one time and then apply that style/template across the all the instances of this button.

Over the next couple weeks, I’ll try to put up posts going over how to style all of these into the Blend style. I’ll update this post pointing to the more in-depth tutorials as I go along. Until I get around to doing that, feel free to download the ResourceDictionary with the Blend styles in them.

My previous post is the first one that I’ve used Windows Live Writer to create. I changed from the default WordPress blog post composer because Live Writer gives me the following features:

• I don’t have to upload my images file-by-file… I just use OneNote to screen grab and then copy and paste from OneNote into Live Writer and Live Writer just uploads everything to my site. My posts are pretty image heavy, so I probably saved about 30 minutes of time with this feature alone.
• The Paste from Visual Studio plug-in lets me… well… paste from Visual Studio and maintain the colors and formatting. You’ll probably see more code integrated into my posts, since I hate putting in code that isn’t color coordinated. Time saved: about 15 minutes
• I don’t lose my posts to some web or Javascript weirdness. The posts I put up take, on average, 2 hours to create. Losing my work is devastating.
• Super simple interface. I don’t know what team at Microsoft was working on this, but I wouldn’t be surprised if they took their cues from the OneNote team. Huge Interaction Designer props for harnessing the power of simplicity and elegance. I never have to ask myself how to do something… it is transparent. Now, maybe I’m not trying to do enough complex stuff, but I’m ok with that. Way to design 90% of the audience rather than agonize over that last 10%.

Go get it.

Silverlight Concepts Covered:

• Building a basic Silverlight project
• Creating code behind for a event triggered by the user
• Creating an HTML alert (a fake MessageBox) in Silverlight

Project Files are available for download at the bottom of the page.

Because I’m an interaction designer and not a coder, I find that there are certain things that can be very limiting for me. I’ve decided to fix that by learning how to code properly. To do so, I’m using a book that actually makes sense to me: Head First C#. If you’ve never used the Head First series, its generally a pretty good series zero-to-sixty book on the given topic which teaches by doing (the only way I’ve found I can learn anything).

Sadly, Head First C# currently uses WinForms for all user interfaces. This is the beginning of a series in which I’ll go through the book, but replace all the WinForms with Silverlight. I will very purposely not give the rest of the lessons because I have a nagging moral qualm in the back of my mind about taking someone else’s intellectual property and putting it up on my blog. Call me old fashioned.

I will, however, be going through the project and offering alternative code downloads of the projects (with Silverlight interfaces). I figure that, because the Heads First books allow free downloads of their project code on their website, they don’t mind me doing this on mine. If anyone from O’Reilly is reading this and disagrees, just let me know.

The first chapter has you building a program for entering and saving Contacts from start to finish. I will be pointing to the pages and listing alternative Silverlight steps

Pages 8-16

1. Start Visual Studio 2008 and select “Silverlight Application” from your list of options. The default “Web Page” options should be fine for what we’re doing.

2. Open up Expression Blend 2.5 (I’m using the June 2008 Preview) and find your project and open it.

3. Double Click on the Page.xaml file to open it up in Blend. We’re going to create the basics of our user interface here.

4. Go ahead and grab the “Objectville Paper Co” image from the Heads First web site. Right click on your project in Blend and select “Add New Folder”. Name your new folder “Images”. Right click on that folder, click “Add Existing Item…” and navigate the graphic you downloaded. Your project should look something like this:

5. Drag the image from the project to the canvas. Things may look a little crowded on the canvas, so lets make it a little bigger. Click the “Properties” tab (a) on the right side of Blend and make sure you have UserControl (the highest object in the tree) selected in the “Objects and Timeline” (on the left side) (b). Change the Width to 600 and the Height to 800 (c).

(a)

(b)

(c)

6. You’ll probably notice that our images got stretched. We’re going to follow the spirit of HFC# and change it to be an unstretched size. Select the Image from your Objects and Timeline and set Stretch to None, HorizontalAlignment to Left and VerticalAlignment to Right.

7. Before we run the project, let’s change the background so we can tell where our page is. Select the LayoutRoot and change the Background to something not white (I chose a light blue). Save All in Blend and click on your open Visual Studio 2008 and hit F5. (I haven’t had a lot of luck getting Silverlight projects to run from Blend)

OK, that gets us to page 14. The next step is to add extra code to the auto-generated code in Visual Studio.

8. Go back to Blend and click on the Image and go to the Events section (the little lighting icon) of the Properties tab. This will give you a list of all the events available for the Image control.

9. In MouseLeftButtonUp, type the name of the method you want called when the Image registers a MouseLeftButtonUp event (I typed ImageClick) and hit enter.

10. Blend will communicate to Visual Studio, which will in turn auto-generate all the code you need for that event handler. It should look something like this:

private void ImageClick(object sender, MouseButtonEventArgs e)

{

}

11. Type the following at the top of the page:

using System.Windows.Browser;

and then type the following into the ImageClick method:

HtmlPage.Window.Alert(“Contact List 1.0. \nWritten by: Your Name”);

Run your project.

From here, HFC# walks through creating a database. The next installment will pick up after the database is created and we get to bind the data to our interface.

Download Project Files for this post: HFCSharp Part 1 Project Files