Designer WPF

These are my links for March 25th:

• Building Silverlight 2 and Silverlight 3 Beta applications on the same machine – Jeff Wilcox does what so many of us can only dream of doing… building with a client ready version of Silverlight and also the latest coolest shiznit.
• What’s New for Performance Profiling Tools for WPF – WindowsClient.net –
• kirupa.com – WPF Tutorial: Creating a Custom Window in WPF – Not my highest priority item, but cool nonetheless.
• Thriple – 3D Controls for WPF – Must play with new WPF UI stuff… No… must do real work… no, must play
• CodeProject: How to Implement MergedDictionaries for the ResourceDictionary in Silverlight 2 – This would be handy on my more enterprise oriented Silverlight projects

I will have no time to write real blog posts (I’m actually writing this during Robby Ingebretsen’s fantastic session: “Design Fundamentals for Developers”), but I will be updating on Twitter like a maniac. You can see my twitter feed here.

I’ll try to tweet something from every session I attend.

I’ve been meaning to totally overhaul my Wiimote WPF visualizer for weeks now and I simply haven’t been able to find the time. But in the meantime, people keep having problems with my old version.

So… my solution is to get my semi-updated version out there. This version works with the latest version of Brian Peek’s Wiimote Library (as of March 10, 2009).

Download Wiimote Visualizer (03_10_09)

Download Wiimote/WPF Binding Library (03_10_09)

Warning: This project WILL break if you try to use the Wii Fit balance board with it. That’s one of the things I’m trying to fix.

Let me know if you have any problems. I will try to address them, but with MIX coming up in a week, it might be a little while. In the meantime, I’m trying to do a complete revamp of all this stuff.

When are we going to get rid of Daylight Savings Time? It makes no sense at all.

Besides, then I’ll be able to sound like Grandpa Simpson when I’m older. “When I was your age, we had these great American traditions. We changed the time around just cause we wanted to and we put people with no dramatic experience on TV and called it ‘reality’. Oh, yeah, and we had TV… it was like a computer except you couldn’t really do anything except choose between the four things that were on at that exact moment. And the world didn’t revolve around you… if you missed the beginning of the show, tough beans!”

I was working on a project recently and I wanted one of my layout controls to have a different margin based on a certain piece of data.

(It’s a long story… let’s just say that this is a good post if you want to change properties of a control based on a piece of data of a different type.)

So… for the sake of the argument, let’s say that I want my control to have a margin of “4,4,4,4″ if my data returns “dog” and I want it to have a margin of “2,2,2,2″ if my data returns “cat” and a margin of “0,0,0,0″ if the data is anything else.

Normally, I would use a value converter for this. My problem was that I was sick of using value converters for things so specific and using them only a couple times in my application. So I decided I wanted to do this one with styles and triggers.

First thing I did was bind my data to the “Tag” field.

<Border Style=”{DynamicResource MyBorderWithTriggers}” Tag=”{Binding MySpecialData}” >

Then, I created a style for my Border layout control. If you’re in Blend, go to Object –> Edit Style –> Create Empty…

Create a new property trigger by clicking on the “+ Property” button and change the property to “Tag”.

I couldn’t find a way to type “dog” into the field value, so I did it in the XAML (full XAML sample below, for those of you who want to cut to the chase… you know who you are).

With the property trigger highlighted, you’ll see a “Trigger recording is on” sign in the corner of your canvas.

Just change all the properties you want. Of course, in this case, I’m just going to change the Margin property. If we do the same thing for the “Cat” contingency, we get the following style.

<Style x:Key=”MyBorderWithTriggers” TargetType=”{x:Type Border}”>
        <Setter Property=”Margin” Value=”0,0,0,0″/>        <Style.Triggers>
                <Trigger Property=”Tag” Value=”Dog”>
                        <Setter Property=”Margin” Value=”4,4,4,4″/>
                </Trigger>
                <Trigger Property=”Tag” Value=”Cat”>
                        <Setter Property=”Margin” Value=”2,2,2,2″/>
                </Trigger>
        </Style.Triggers>
</Style>

And we end up with a layout that changes its properties based on a bound value. And we don’t have to write endless value converters.  Pretty handy… or at least I thought so.

These are my links for March 6th:

• How to create your own commands and bind them in WPF – Edward Tanguay's piece on commands and WPF… I know that they are supposed to be awesome, but I haven't taken the time to sit down and figure them out yet.
• Simple example of Inversion of Control and Dependency Injection – Edward Tanguay continues his series on stuff that would be obvious if the Microsoft documentation were better.
• Coding4Fun : Wiimote Virtual Reality Desktop – So much Wii stuff… this one is a "Virtual Reality Desktop". It's more about 3D tracking with two Wiimotes
• How to: Publish a ClickOnce Application –
• 50 Twitter Tools and Tutorials For Designers and Developers – Yet another fantastic Smashing Magazine piece.

These are my links for February 27th:

• Quick Tip: Expression Blend – the Hand – Long story short: press the spacebar to use the hand tool without having to choose it from the toolbar
• Silverlight Drag and Drop Manager released @ CodePlex –
• “Implementing MVVM in Silverlight” – a UI perspective – Another in my ever-growing list of MVVM posts to look at
• Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF – Another in the long list of MVVM stuff… someday I'll get around to it all
• Silverlight Patterns: Model-View-ViewModel In Silverlight 2 Apps – Shawn Wildermuth's article in MSDN magazine on Model-View-ViewModel In Silverlight 2 Apps

Due to repeated requests for the source code (and the fact that I apparently can’t brag about it on Silverlight.Net without a link to the source code), I’m putting it up for download.

Presidential Candidate News Tracker Source Code

JSON Data File With Candidate Data (Note: Apparently, Wordpress likes to uncapitalize file names for me, you may have to re-name the file to “CandData.json” to get it to work with the app.)

Warning: This code is a disaster. I was having strange problems getting my custom controls to work and, after a couple hours fighting with it, I gave up and ended up writing the exact same layout and code for 14 separate candidates. Same problem with the “dates-of-note” along the timeline.

Not pretty, but it works. Have fun.

It’s not set in stone, but Brian Peek is trying to see if anyone who has played around with homebrew Wiimote projects and is also going to MIX is interested in having a get together.

If this describes you, please take his poll so he knows there is interest. (I’m voting for Wednesday, since I’m not going to be able to make it on Thursday). This is really a selfish plea on my part, since I’d love to meet so many of the great minds behind the Coding4Fun site and the Wiimote projects.

In this post, you’ll either need to walk through this tutorial on how to call and prepare JSON data gathered from the New York Times API or, if you’re not particularly interested in doing that, you can just download the final project here. This tutorial pretty much assumes that you’re starting from the end of that tutorial.

Fortunately for everyone involved (especially me), this tutorial is much shorter. It is also another in my “without a line of code” series in which you can do everything without even touching the code. Let’s open up our project in Blend and get started. (To see an example what this tutorial makes, scroll to the bottom of this post.)

First of all, I lied. You do have to touch one line of code because you need to get your NYT API key and plug it into the myApiKey variable in the Page constructor (line 26 in the project available for download). The line should look like this:

myApiKey = “&api-key=your_api_key_here”;

Now, right click on the project solution and select “Build Solution” (in Visual Studio or Blend, it doesn’t matter).

This should build the assemblies so that Blend can do a really neat trick. In the Project tab in Blend, you should see a Data panel in the bottom half. Click on the “+ CLR Object” button.

A pop-up will gently encourage you to name your new data source and choose from a list of available data sources. Select “NYTResult” and hit OK.

You will now have your NYTResult data source show up in your Data pane. Before we start building a nice slick looking interface, select your ListBox (named “ResultsDisplay”) and, in the Properties pane, find the “Display Member Path” and reset it by clicking on the little gray box to the right.

Now, right-click on the ListBox  in your “Objects and Timeline” panel and select “Bind ItemsSource to Data…”

Select the data source you just created and select “NYTResult”. Then click on “Define DataTemplate” at the bottom. This will take you to the “Create Data Template” panel, where the fun happens. You will see “New Data Template and Display Fields” automatically selected. We like this. This lets us select all the data we want and give it some basic structure and Blend will do all the bindings for us.

Let’s make a few changes from the standard Data Template setup. Expand the Date field and check Day, DayOfWeek, Month, and Year and change the order with the up and down buttons to something you like. Then, change the Url from “StackPanel” to “TextBlock”. I reordered the data a little bit, so my template looks like this:

Hit OK. The point of that whole exercise was so that Blend would build our data template for us. We don’t actually want the data source and we don’t want our ListBox bound to it. So reset the “ItemSource” property on the ListBox and remove the NYTResult data source. If you run the project now, you should get something like this:

At least we’re getting more data now. Doesn’t look that great, but we’re getting there. Go back to your project in Blend and right-click on your ListBox and go to “Edit Other Templates –> Edit Generated Items (ItemTemplate) –> Edit Template”

We’re now in the DataTemplate but we sadly have no visible data, which makes manipulating it a tad difficult. What I have found works best for me is just to build my desired layout with static data and then translate the bindings. (I haven’t mentioned this, but you should be working in Split mode as a general rule, so you should be able to see the bindings in the XAML.)

So… long story short (it’s getting really late here): I changed the layout to replicate the NYT story design… the Title is a hyperlink button that takes us to the full story, followed by a small byline, the beginning of the story and the date on which the story appeared. If you’d like to look at the design itself in more detail, download the project at the end of this post.

I do want to mention one issue… the issue of getting your text to wrap. With my current redesigned DataTemplate, my project looks like this:

It scrolls horizontally to a degree that is certainly unhealthy. What is happening is that the TextBlock in the DataTemplate is making a request for space and when it hits a limit, it will start wrapping. Unfortunately for us, when the ScrollViewer in the ListBox has the HorizontalScrollBarVisibility set to “Auto”, it is telling the TextBlock that it has all the room in the world and that it doesn’t need to wrap. So, let’s just change the HorizontalScrollBarVisibility on the ListBox to “Disabled”.

And we’re done.

You can download the source here

JSON – Silverlight – New York Times Tutorial (Part 2) Project Files

Questions and comments are always welcome.