<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d11476683\x26blogName\x3dWinFX+Adventures\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://winfxadventures.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://winfxadventures.blogspot.com/\x26vt\x3d1143681562734154543', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Wednesday, May 04, 2005

Contact Project: Header Bar

Well this is what I've managed to get done the past couple of days. It doesn't seem like much, but I've put a few hour of work into it. I think that taking on a project like this when starting with Avalon was a great idea. In doing this project, I'll be covering many different features of Avalon. So far I've gotten into Data Binding, and a fairly decent amount of styling.

It may be hard to see at first glance, but all of the controls up there, with the exception of that middle textbox, have been styled. To the left and right, you will notice the task tiles. Each of these sets of tasks are contained in a ListBox control which has been styled. A typical ListBox control displays its content vertically. In order to implement a horizontal ListBox, I simply overrode the VisualTree and implemented a StackPanel with it's Orientation property set to "Horizontal". A mistake that I made, and later seeked help for on the WinFX newsgroups, was to neglect setting the ItemsControl.IsItemsHost="True" property on this StackPanel. This lets Avalon know which control is hosting the ListBoxItems.

Styling the ListBoxItems is where the real creativity comes in. But first, a little background on Data Binding. I created two XmlDataSource items in the Resources section of my Avalon application. Each data source contains the data for the left and right ListBox's respectively, which is only the path to the image, and the caption text. The images are from the original PDC 2003 slide. I just cut the images out and cleaned up the edges a bit.

In order to implement the ListBoxItem style, I had to do a bit of thinking after first jumping in and then realizing the error I had made. Each tile is a task that can be started by the user. These tiles are going to have to behave as buttons. Buttons however, are rather ugly for this application. Instead of having to create my own control which looks like a tile yet behaves as a button, I simply overrode the VisualTree of the ListBoxItem to contain a button, and then in a separate style, I overrode the VisualTree of the button in order to give it my own appearence. I didn't do anything too special, just a DockPanel containing an Image docked to the top (with it's Source property data bound to the Tile property in the XmlDataSource) and a Label docked to the bottom (Content property bound to XmlDataSource text property).

All of the controls rest on a series of rectangles with different colours, gradients and opacities to give the appearence that the rectangle is rounded and has some depth. It took some playing around to get the colour right, and XAMLPad was a great help in speeding up that process with its on-the-fly rendering. I would have posted some snippets from my source code, but Blogger doesn't seem to allow that sort of thing. When I make some more progress, I'll post the source files here on my Blog. In the meantime if you would like a copy, send me an e-mail (WinFXAdventures[at]gmail.com) and I'll send you a copy when I get the email.

Some tips when you're just starting up with Avalon:
  • Have a couple instances of the WinFX SDK Documentation open. It's a really great resource for learning about the different controls and the properties that they expose.
  • Sign up for the Avalon newsgroups (found in the WinFX newsgroups). It's more that likely that someone else is having the same problem that you are, and that a solution has been given. I read every entry made on that newsgroup (As well as the rest of the WinFX newsgroups) and it really does help you out even if you aren't having that specific problem... yet.
  • Crank up the tunes and start playing with Avalon. You can't learn nearly as much by reading as you can by getting your hands dirty. It can get frustrating at times, but that's what the music is for. I've been playing Emanuel in the background all day (seeing them in concert tomorrow in Ottawa), and it's really helped out with the snags I've run into.
I'd love to see what everyone else out there is working on. If you've got some material up, post a link in the comments so I can take a look!


Post a Comment

<< Home