Building a WPF User Control: Part 1 - Getting Started

I've been eager to try working with WPF.  Most of my application development experience has centered around web applications.  Desktop apps have always seemed very difficult and time-consuming to develop anything advanced, and with so many limitations on the design.  WPF seems to have adopted some of the best principles from web application development and hammered them in to work at the desktop level.  All the new concepts introduced seem daunting at first until it all clicks.  XAML brings in the HTML strengths; helping you keep your visual logic separate and easy to share with designers using other tools.  Dependency properties help make the flexible XAML possible and eliminate more reasons for needing to write code to handle your UI.  Styles are obvious - drill down to an element anywhere in the visual tree and change something about it and see the difference right away, again with no code.  Routed events are also obvious, event bubbling is core to web development.  With all these 'new' concepts, WPF has made windows development a lot more interesting.

My first 'learning' project is going to be doing the one thing you absolutely cannot and will never be able to do in web applications - the local folder tree.  I know it's been done and I should probably name it 'Yet Another...' whatever, but I want to create one of my own that I can reuse in other projects and with the added feature allowing the intuitive selection of a set of paths (which may make this project at least a little unique).

I'm going to build this project iteratively, with a blog post following each iteration as my publicly shared notes on WPF development.

Goals for Part 1:

• Create a reusable control project.
• Follow the MVVM (Model-View-ViewModel) design pattern.
• Get the control up and running with a simple tree of drives and folders.
• Use lazy-loading for performance.

Making Our Own Headboard

To alleviate middle-of-the-night overcrowding issues we recently upgraded to a King-sized bed.  The bed is fantastic, but our old headboard and footboard no longer fit.  We put it all off since furniture is always such a financial inconvenience, but Lindsay discovered a few blogs detailing projects that created great-looking headboards out of everything from shutters to old kitchen cabinet doors.  It seemed pretty easy to do, and after landing ourselves some cheap second-hand closet doors with symettric paneling, we chose this project as inspiration and set off.

The Find

A set of plain old MDF closet doors for $25.  This was the key, we had to find something cheap and second-hand or else the project would end up costing the same as just buying a headboard.  Also, most doors have panels designed to look good in the vertical position, but this project would set the door on a sideways axis so we needed even panels.

The Shopping List

• 4x4 long enough to make 2 posts with the desired height. Wasn't sure, so I bought a 12' piece. 8' might have worked
• 1x6, 8' long for the top piece
• 2 1x2s, 1 for a mounting solution and the other to be a nail strip for the molding
• 8' crown molding, cheapest I could find
• 16' quarter round molding (I chose a concave look but I still call it quarter-round)
• Paint - spent the money here, as we needed special paint to stick to the laminate surfaces and this is what makes the project in the end, anyway
• A few wood screws already on hand

The total cost of the project: < $80

Making It

First I cut the 4x4 into two equal lengths to be the posts for the headboard.  The length I cut them was basically the length of the legs on my old headboard + the width of the closet door + an extra few inches of rise for the crown molding.  I also cut the ends off of the closet door since it was way wider than the bed.

Next, I fashioned some mounting pieces out of my 1x2.  For each side I cut one length to match the width of the closet door and then added some extra pieces at the corners to make it a little easier to assemble.  Trying to determine exactly where to mount these on the side posts was tricky.  I needed the closet door to have enough clearance on the front to install the quarter-round and the extra room at the top for the crown molding.

While it would seem to make more sense to mount the closet door onto the frame from behind, I decided to flip it around and drive the screws in from the front.  It was much easier to lay the closet door into place this way, the screws would easily be covered by the quarter-round molding, and I figured with the closet door being MDF, I'd rather have the screws go through the fake wood and bite into real wood rather than the other way around.

Next I installed the 1x6 across the top of the 4x4s, flush with the back of the headboard and overhanging the front and the sides enough to install the crown molding.  I mounted my other 1x2 to the top of the closet door to fill the gap and provide a base for the bottom of my crown molding.  The quarter-round covered this up nicely.

Before installing the crown-molding, I noticed that the MDF closet door was bowing in and out when we laid the headboard flat.  I probably should have gotten another length of real wood to put at the bottom to square it all off and make sure it's rigid, but I wasn't making another trip so I improvised; I took one of of the pieces that I cut off the end of the closet door and mounted it to back, centered on the closet door and connected to the top piece just to help stabilize.

The crown molding is installed around just 3 sides so that the back of the headboard can be flush with the wall, so I started at the left side with a straight edge and then used my crown molding book to make my cuts around to the right side to finish on another straight edge.  For the sake of this post I'll just say all my cuts were good and everything fit nicely and I didn't need any wood filler...

After sanding and filling in all the nail holes, Lindsay took over with the paint.  We used Rust-oleum Countertop Coating paint, which is pretty expensive but it sticks to the laminate surfaces without scratching and the paint job makes the project so it makes sense for it to be the main expense.

Finally just a bit of distressing from Lindsay's designer touch and we have a finished headboard that looks a whole lot better than one we bought for our old bed.

See the full gallery on Posterous

 

Posted via email from The Williams Family

Courtney, Stefan and Baby Jacob Visit

Courtney, Stefan and Baby Jacob came to visit for Grandma's birthday.  It's not too often that the boys get to spend time with a cousin.  We celebrated Grandma's birthday in Austin and then Courtney and Baby J came over to our house with Poppy for most of the week.

 

Grandma's Birthday

Strawberry Pickin'

Griffin and Baby Jacob

Posted via email from The Williams Family

Spring Break Memories

2 Birthdays, 4 nights at the beach, 3 nights in Orlando, 2 theme parks, 37+ hours in the car, 1 great Spring Break!

Day 1 was a pleasant day on the beach.  Sunny but cool weather, crystal clear but freezing water, too many spring breakers.  We'll get back to this in the summer...

Day 1 - At the Beach

Day 2 was Griffin's birthday with more perfect weather.  We had lunch at Margaritaville and secured the boat booth, and then enjoyed presents and a cookie cake out on the porch.  Can't get much better than that.

Day 2 - Griffin's 3rd Birthday

Day 3 we traveled to Orlando, getting in early enough to go eat at Downtown Disney.

Day 3 - On to Disney

Day 4 we did Disney World Magic Kingdom.  Quite a long day but everyone had a great time.  Griffin doesn't like crowds and lines but loves teacups, flying elephants, merry-go-rounds, etc...  Sawyer rode his first roller-coaster (Big Thunder Mountain) without even a flinch.  Harrison steered clear of the roller coasters but tried to steer into every gift shop.

Day 4 - Disney World

Day 5 was Sawyer's Birthday.  We did birthday donuts and presents in the morning (had to save the cake for later with the full day planned in Orlando) and then onto Universal Studios Island of Adventure to visit Harry Potter World.  It was so crowded, once we finally reached the entrance to the Harry Potter area, we were denied entry and given a 'fast-pass' to come back in 5 hours.  Still we had plenty of fun and didn't even have time to see but half the park until it was too light to ride any rides.

Day 5 - Sawyer's Birthday & Harry Potter World

Day 6 we went back to the beach.  One last relaxing evening on the beach to bring the trip to an end.  

Day 6 - Back at the Beach

Posted via email from The Williams Family

Spring Break

See the full gallery on Posterous

Posted via email from The Williams Family

Griffin's 3rd Birthday Party

Griffin's 3rd Birthday Party

Griffin's 3rd Birthday Party from Jason Williams on Vimeo.

Posted via email from The Williams Family

Halloween

Halloween

Griffin's approach to trick-or-treating:

Download now or watch on posterous

IMG_0196.MOV (63456 KB)

Posted via email from The Williams Family

Halloween at the Creekside Y

Download now or watch on posterous

p155.mov (12218 KB)

Posted via email from The Williams Family

Griffin's Day Out

With both Harrison & Sawyer in school, Griffin's been feeling a bit left out in the mornings, so last Friday I took the day off and we had a special day just for Griffin.  He rode with me to take his brother's to school, we got some breakfast and then we took him down to the Curious George Live show in Houston.  He really enjoyed it.

Watch the video on mobile devices

Posted via email from The Williams Family

Picking Blueberries

We made a last minute trip out to nearby Moorehead's Blueberry Farm to pick some blueberries yesterday. They were reporting an excellent crop thanks to all the recent rain, and we were worried that everything would be picked through after the holiday weekend, but the blueberries were nice and ripe and falling off the bushes.  We went after dinner to avoid the heat and didn't have much time before they closed, but we were still able to pick over 3 pounds of perfect blueberries.

Griffin did such a good job too!  He caught on quickly, only picked the good ripe ones, and got them all in the bucket.  He even took over the bucket I was sharing with him and carried it around himself picking his own blueberries and not spilling any at all.

Griffin Picking Blueberries (video)

Posted via email from The Williams Family

Giant Oreo Cake

For Harrison's 8th birthday cake, we decided to try something original and make the Williams-Sonoma Sandwich Cookie Cake.  The most challenging cake yet, this one involved some serious made-from-scratch magic and the results were delicious.  Ultimately, this cake consisted of two layers of rich dense buttery chocolate brownie baked with intricate designs sandwiched around about an inch of vanilla butter cream icing.

Lindsay followed the recipe on the back of the box, no cake mixes or canned icing involved.  The process started with brushing both of the pans with melted butter and then 'flouring' them with cocoa powder.  Then more cocoa powder, more butter and lots of sugar and flour.  The cakes baked up perfectly and the intricate design came out much better than we anticipated.   We considered the alternative of using ice cream as the filling, but ultimately stuck with the higher melting point of the butter cream icing.

The result was decadence, rich and delicious.  It sliced pretty easily and we served it with ice cream.  The pans were extremely difficult to clean, though.  Each little detail had to be individually scrubbed out and the edges were uncomfortably sharp.  Regardless, this cookie pan set will be seeing more action.

From Making Harrison's Cake

From Making Harrison's Cake

Posted via web from The Williams Family

Harrison & Ella: Big ol' Bedfellas

See and download the full gallery on posterous

Posted via email from The Williams Family

Griffin's First Haircut

Griffin's First Haircut

Yes, Griffin got his first haircut today.  But for all you fans of the curls they didn't take much off at all, just had to get rid of the mullet he was developing.

Posted via web from The Williams Family

Griff & Ella in the car,

We drove to Austin today with just #3 (as #1 and #2 were already there
since Wednesday) and this was Ella's first car trip where she's too
big to ride anywhere other than in the back with Zada. She begged to
differ however and managed to wiggle around the makeshift barrier and
spent the majority of the trip perched up on top of the back sit until
she finally made it down.

See and download the full gallery on posterous

Posted via email from The Williams Family

Ella at 13 weeks

Here's our big ol' 13 week old puppy.

via Pixelpipe

Posted via web from The Williams Family

More Ella Pics

More Ella Jun 22, 2009 by The Williams Family View Album Play slideshow

Posted via web from The Williams Family

Video: New Puppy Ella

Just some video to go along with the photos I posted on Sunday.

Posted via email from The Williams Family

New Puppy

New Puppy Ella Jun 6, 2009 by The Williams Family View Album Play slideshow

Posted via email from The Williams Family

At the Astro's game today, 3rd row seats!!

Lindsay and I had a little date afternoon without the kids today at an
Astro's game, sitting 3 rows up from the field thanks to our neighbor
who was heading out of town this weekend. He only had 2 seats, so we
couldn't bring the boys, unfortunately. We will definitely be taking
them to a game or two this summer.
 
No luck with foul balls. One pop-fly was caught by the outfielder
just in front of our section and another ground ball hit the wall and
the guy in the front row got it.

See and download the full gallery on posterous

Posted via email from The Williams Family

Memorial Day Weekend Home Improvement Project #1

We usually use the Memorial Day or Labor Day 3 day weekends to tackle
a DIY home improvement project. This year the project was installing
new pendant lights over the bar to improve the lighting in the
kitchen. Not the most laborious project, but maybe still the most
challenging yet because there were no fixtures there to start with, no
attic space above the celing, and I haven't had good experiences with
drywall patching in the past.
 
The plan was to run a line from our existing main light fixture in the
kitchen across to the bar and connect 3 pendant lights to that line.
I started by using a hole saw to cut the 3 holes for the ceiling
fixture boxes, with the first one being directly across from the light
fixture that we needed to run the line from. Then, with the help of a
friend and a very handy 54" flexible drill bit designed for drilling
inside finished walls, we drilled through the floor joists and were
able to string the line through with just one access hole cut halfway
in between. With that line in place, it was pretty easy to just chain
together the light fixtures, down the lenght of the bar, with the only
obstacle being poorly designed mounting hardware for the fixtures
themselves, go figure.
 
Patching up the access hole cut in the ceiling was easier than I
anticipated, thanks to sheetrock clips and the fact that the ceiling
is textured. I screwed the panel back into place, spread a little
joint cement on it and sprayed on some texture. With a coat of paint,
the evidence is barely visible.
 
Photos of the finished results are below, but you'll notice there are
only 2 pendants, whereas I've mentioned 3 up to this point. After
completing the installation, Lindsay decided 3 lights were too crowded
and just 2 would look better. So back up on the ladder, a little
re-wiring and more patching and then we have the finished results:

See and download the full gallery on posterous

Posted via email from The Williams Family