Geeks With Blogs
Mike Kenyon Hoarked

The raw, basic functionality of my Oscars application is now up and running.  Next job is to get the application up and looking pretty.  This is without a doubt, at the moment, the ugliest application I’ve ever built and was intentionally.  The goal was to do all the functional work first, and then tackle the “look pretty” work.  Well, that time has come. 

Defining the “Look”

So I’ve got to decide on a look to go with for the application.  I want everything to feel like it should fit together, so I spent a little while thinking through what I want it to look like.  When I think of the Oscar’s, I think of the Mann Chinese Theater, the red carpet and things in Black & Gold. So I think that’ll be my theme.  What I’d REALLY like is to have a 3D scene in the background but I’m just not that good with 3D.  I can do some nice shading with black and gold and get a fairly attractive app.  Here’s the main screen before styling.

Before Styling - Main Page

Here’s the same screen with a little styling applied …

1a

MUCH better…. still some issues.  I’m being lazy at the moment with icons for the top-right and since I had to, I figured out the resource loading issue, so I should go back and remove them as actual buttons and use the ModeSelector type I made back at the start.  Right now, I’m excited to make progress aesthetically, so I’ll save it for cleanup before I get to to adding features.

Browse Pages

The browse pages were fairly easy to style as well.  The main categories page was just four buttons.  We needed to come up with something a little flashier.

2b 2a

When I got to the This required that I start tracking an image on the category, which is fine, because I started thinking about it and it should probably show the winner’s picture after they win.

For the type listing page (listing all categories, movies, what-have-you, I wanted VERY much to get a nice grid-array.  This tripped me into two major problems.

First, it was slow, butt slow.  At least, it was slow when I was showing People.  If I showed Songs it was great, of course, there are only three songs and pushing 600 people.  I was forcing a new image source for each image,which was costly.  So, I gave up a little abstraction and converted the business types to return image sources.  I thought about coding VIewModel wrappers for them all to do just that, but it seemed excessive for the degree of violation of abstraction that it was.  Pragmatism sometimes needs to rule. 

Second, I was using a wrap-panel to represent things (like I did on the main categories page and that wasn’t great.  I decided I needed to virtualize.  There’s great though about making a VirtualWrapPanel on the Internet, but the only guy I can find to do isn’t giving up the source.  I didn’t have time to get the panel and scrolling issues taken care of.  I really just wanted to steal something, so with a little creative Google-foo, I found the VirtualizingTilePanel, which is close enough for government work.  The hardest part was getting the scroll-bar styled nicely.  There’s just a lot of moving parts there.  None of them are hard, you just to put some thought to what you’re looking for.

Content Pages

For the content pages themselves, all I needed to do was to add a DataTemplate for each of the 4 stylized approaches.  This works out great.  Check out the different stylings just by setting the default style for the data template for the module.  The “before” pictures were just the name of whatever it was twice, so I’m going to skip over that if no one minds …

4p-a 4m-a

4s-a 4c-a

 

Making a Splash

So, somewhere in this whole deal, I downloaded the WPF Futures Splash Screen add-on and turned it on.  In about 0.222 seconds I had a VERY nice splash screen for application startup.  I was impressed.  It’d be nice if Prism integrated a little better here.  The splash screen comes down when the main window comes up, which is well before module loading has completed, so there’s a couple of minutes of dead-time before the modules kick in and the app is actually usable.  All you need to do is add an image and then set it’s BuildAction to SplashScreen.  It couldn’t be any easier.

Backing Up

I found it really necessary to add a back button, which gets us back to our whole issue of the navigation.  My first cut at this was to just add a button that knew what the previous page would have been and re-activate that.  The downside was that that’s REALLY taxing to do, breaks a lot of encapsulation and the whole idea goes out the window when I start having the browse pages link to one another.  So, I needed to create a navigation service.  Once that was in place, I just made everything a button or hyperlink bouncing it to the appropriate navigation service.

I did this in two parts.  First, I wanted an easy way for the different pages to link to a spot, so I created an IOscarsNavigationService that provided methods to allow you to link to interesting areas without having to know anything about them.  I put the definition in the foundational module OscarsNight, but the implementation I put in the Browse module as this is logically where the smarts to the do the work are located.   Once I had the service in place, I followed the How to: Create Globally Available Commands guidance from the Prism docs to create a global ItemNavigate command, which the Browse module intercepts to navigate any INamedEntity that might happen to be navigated to.  I had already created a single, named DataTemplate that I used to describe the little icons I was dropping all over the place with cross references in them.  By associating the command with the template everything suddenly became navigatable!  I then dropped like 40 lines of code (mixed XAML and C# code) that had been doing navigation and I got a clean implementation back that gets rid of list boxes, and just shows everything as being a link.

The second part was trying to clean-up the Back button that was now everywhere.  I actually wanted it to go back, but that requires understanding what “back” means.  I needed a stack.  I needed to track what the active view was at any given time.  I thought about doing it with a behavior, but I don’t need to and behaviors really are great when you want the behavior to apply to all regions of a specific type.  In this case, we want to handle exactly one region as the navigation locale, so I think we’ll pass on it.  A little playing around got it working pretty quick, which allowed me to clean out a bunch of code dedicated to supporting the hack I had had in place.  The code is now starting to look clean. 

Future Proofing

I’m a big fan of planning for the future … if it’s easy enough and in this case it is.  I know that I’m going to want to add more information to what I have stored on the different objects in Browse, but I don’t know what and as they’re going to be later add-ons, I don’t want to have to know.  So what I did was I added an ItemsControl to each of the data templates that style the navigatable types and marked that items control as being a region.  This enables me to register views with the region and through view discovery, they’ll auto populate whenever the page pops up.  As the types will invariably need to see the thing being presented, I made that the RegionContext of that region.

 

Next up the voting module …

Here is the code.

Posted on Saturday, February 14, 2009 4:28 PM | Back to top


Comments on this post: The Oscars with Style – Part 1

# re: The Oscars with Style – Part 1
Requesting Gravatar...
Very interesting !


Could you send me the oscar database ?


Thanks
Left by Christian Lesage on Mar 24, 2009 3:39 AM

Your comment:
 (will show your gravatar)


Copyright © hoarked | Powered by: GeeksWithBlogs.net