compilewith.net

New .NET logo

2008-10-25T12:12:00.001+01:00

See here for more information.

My initial reaction was: now what do you wanna go and do that for...? But it's really growing on me... I think I like it.

ReMix UK 08 - the sessions...

2008-10-07T13:07:00.001+01:00

I've posted about the ReMix UK 08 event hosted in Brighton here and here; the sessions are now available on-line from the ReMix Web site, on the agenda page: http://www.microsoft.com/uk/remix08/agenda.aspx. Please check out my previous posts to get an idea of the sessions to watch out for.

What is in a name?

2008-09-30T09:48:00.001+01:00

Whilst drinking my first cup of coffee this morning and browsing my daily feeds, it occurred to me that Prism as a moniker is far more extensible and composite in nature than the official title of the product: Composite WPF. The reason being that once you introduce Silverlight into the mix it's no longer Composite WPF.

Composite Silverlight?
Composite XAML?
Composite .NET?

I find it amusing that the "marketing" title for the product does not live up to the product that it allegedly describes. Apparently for legal beagle reasons we cannot keep the lovely handle Prism as a product name.

Prism V2 - Drop 1

2008-09-22T10:08:00.001+01:00

I have recently managed to get myself invited on to the Microsoft patterns & practices advisory board for Composite WPF, formerly known as Prism. I consider my self very lucky to have been invited to serve on the board so expect to start seeing more from me on this really great topic in the coming months.

My intention had been to wait until I'd at least managed to attend my first meeting of the board before announcing that I'd been invited to attend but the boys at p&p only went and shipped the first drop of Prism V2, forcing my hand by about a week!

If you're working with WPF today or just have a keen interest in designing composite applications please go and take a look at the Composite WPF bits on CodePlex: http://www.codeplex.com/CompositeWPF. I'm also posting all my links for anything related to Composite WPF under the Prism tag on delicious, which you can find here: http://delicious.com/compilewith.net/Prism. Enjoy!

ReMix UK 08 - Day 2

2008-09-20T11:46:00.000+01:00

The second day started with a session by ScottGu on ASP.NET MVC; the session itself was great and the technology shows some real promise. I actually skipped the next session I was going to go to, on IE8, to play with the MVC bits. Next up was the Developer Speaker Panel with Scott, Sara Ford, Mike Flasko, who gave the Astoria talk the day before, and another member of the Data team at Microsoft. Most questions ended up in Scott's lap and while he gave some great answers it was a pretty average session for me.

Next we went to lunch with Arturo Toledo, and then afterwards we went to his session Design with Microsoft Expression, which was really great; easily on a par with Scott's session that same morning. Then that was it, we were all done and left Brighton for home.

In conclusion I don't think there was a single winner with regards to the sessions; but if I had to choose it would have to be Bill's session Designing for the Wild on the designer track, and Scott's MVC session on the developer track. All in all it was great conference and I'd love to do it again next year.

Now I'm just waiting for my swag to arrive......

ReMix UK 08 - Day 1

2008-09-19T00:00:00.000+01:00

The keynote was awesome, the surprise for me was Bill Buxton; I'd not really heard of him much before today and he was a real pleasure to watch. ScottGu was as awesome as ever, and it was really fantastic to meet him in person.

I went to four sessions today:

Introduction to Silverlight 2 - Part 1. I wanted to go to this one to see ScottGu speak, and surprisingly I learnt a couple of things (iframe presence to fix a bug in older Safari browsers and their expected control release plans) that actually made the whole session worthwhile.
Designing in the Wild: Sketching Experiences. This session was the highlight of the day for me. Bill is an inspirational speaker; I learnt loads about design and designers and how to think about design... and that I'm not a designer, and unlikely to ever be one.
ADO.NET Data Services (Astoria). This was the best technical presentation of the day! This technology is amazing and is live and available for use today by using .NET 3.5. JP you really need to look at this.
Design Panel. I had a choice of this session or the VS IDE Tips and Tricks by Sara Ford, which was the session that I intended to go to - but Bill so impressed me that I wanted to hear more from him.

All in all it was a great day, I really enjoyed the whole thing, looking forward to more sessions tomorrow.

New look...

2008-09-16T14:47:00.001+01:00

...the new look is now live. I'm still not completely done hacking on it yet, but it's baked enough that I just wanted to get it out there. I'd love to get your feedback, be it good, bad or indifferent.

Microsoft ReMix UK 08

2008-09-11T10:54:00.001+01:00

18-19 September 2008 | Brighton

See you there?

Evernote - My Public Notebook

2008-09-02T12:42:00.001+01:00

I've been using Evernote for a couple of months now and I think it's an absolutely brilliant tool for keeping notes. Matt introduced me to it and I'm glad he did; he talks about how much he's loving it too.

Like Matt, previously I used Microsoft OneNote (which I introduced him to a while back, heh); At first I saw no reason to change, I just thought I'd give it a go for a while, take it out for a spin. I don't really know why I did, I was really happy with OneNote.

But Evernote has one killer feature that has made me a convert (even if it does have a much smaller feature set):

Evernote is everywhere!

And that's it hold over me, that's why I probably won't be going back to OneNote. Evernote is simply and truly everywhere - in the cloud, on my desktop, on my phone, on my laptop. Like the Mesh, Delicious, Flickr, Skype and Box.NET before it Evernote has found it's way on to my list of indispensable tools for living and working in the cloud.

Find my public Evernote notebook here:

http://www.evernote.com/pub/pjackson/compilewith.net

Where did that Microsoft Word feature go...?

2008-08-28T09:55:00.001+01:00

I use Microsoft Word 2007 (and PowerPoint for that matter) a lot in my day job, and I think I've got a pretty good handle on where things are now since the invention of the Ribbon. However, there are still times where I think:

Now, where the %"@#'$ has that menu option moved to...

Here is a little application where you find the feature you want in a mock up of the Word 2003 interface and it'll show you where it is now in Word 2007, awesome.

Microsoft Office Online

I don't know how long this has been available, but I hope it'll save you some time and frustration when trying to find those missing or moved Word features.

Enjoy!

Silverlight 2 and a new look Web site...

2008-08-08T12:47:00.001+01:00

Things have been decidedly busy over last month or so making my posts a little sparse - or more accurately non-existent - I have been working with Silverlight 2 beta 2; I certainly like what I see, even if it's not quite there yet, compared with WPF that is, it shows real promise. [...snip...]

However, the jewel in the crown for me is the integration of the DeepZoom technology (previously known as SeaDragon), it is truly awesome! Just check out what the boys and girls at Vertigo have put together (pay special attention to the Hard Rock Memorabilia sample):

http://www.vertigo.com/Silverlight.aspx

As for my own endeavours, over last couple of weeks I've been working on some new designs for this Web site - the style and template I've been using since the inception of this site is a pre-canned template that comes with the Blogger offering. Whilst it's OK I've grown a tad bored of it and the restrictions it places on my posts (content area width, and *very* un-code friendly) I thought it was about time that I did my own design.

Here's the tie in with DeepZoom: I've created an application to show-off the five designs that I've come up with (you can also find the designs on Flickr). I've used the free Silverlight Streaming service to host the application:

Click the image above or here to see the application in it's full glory.

I've also had a bunch of my friends (thank you!) review and critique my original designs, and with some final tweaks I'm down to a shortlist of two, and here they are (in order of my personal preference):

You can click the images to see them full size. My plan is to live with both these designs for a couple of weeks, after that time I'll pick one and prototype it.

I would love to know your thoughts on DeepZoom and the remaining two designs (both positive and negative), my view is the more feedback I get the better.

WPF - Data-binding a lesson in framework design

2008-07-21T15:56:00.001+01:00

In WPF we tend to take data-binding for granted. It is just one of those features that just works. In this post I want to briefly bring your attention to how the data-binding system works with regards to non-FrameworkElement derived classes, not because you need to know to be able to use it, but because I think it has all the hallmarks of a good API design. [...snip...]

Consider this XAML:

<StackPanel x:Name="panel">
    <ListBox x:Name="colors" Margin="10">
      <sys:String>Black</sys:String>
      <sys:String>Red</sys:String>
      <sys:String>Green</sys:String>
      <sys:String>Blue</sys:String>
    </ListBox>

If you put this XAML straight into something like XamlCruncher or Kaxaml (XamPad doesn't quite cut it because of the external reference to MSCoreLib) you end up with something like this:

When you click the items in the ListBox, the TextBlock foreground colour changes and so does the text.

Great, data-binding in action - a somewhat contrived example but it works as you would expect. However, things get a little more interesting when you try and achieve the same effect in procedural code.

Setting the TextBlock text is simple enough as TextBlock is derived from FrameworkElement that has a SetBinding method that we can use - we would write code similar to the following:

// Create the binding
Binding colorsBinding = new Binding();
colorsBinding.Source = this.colors;
colorsBinding.Path = new PropertyPath("SelectedItem");

// Create the TextBlock
TextBlock tb = new TextBlock();
tb.FontSize = 36;
tb.Margin = new Thickness(10);

// Bind the TextProperty to the ListBox.SelectedValue
tb.SetBinding(TextBlock.TextProperty, colorsBinding);

This code is considerably more verbose than using the lovely data-binding XAML syntax, but it should be clear what's going on. Here's the equivalent XAML, as we saw above:

This would render as:

Note the lack of colour, let's do that next. We can use the same Binding class instance as before and apply it to the ColorProperty dependency property on the SolidColorBrush class, then apply that brush to the TextBlock instance, as shown here:

SolidColorBrush brush = new SolidColorBrush();
brush.SetBinding(SolidColorBrush.ColorProperty, colorsBinding);
tb.Foreground = brush;

However, if you try and compile this code your compiler will complain that SolidColorBrush does not have a SetBinding method. This is because SolidColorBrush derives from Brush, which derives from Animatable, and then from Freezable, before we finally hit DependenyObject:

DependencyObject
- Freezable
  - Animatable
    - Brush
      - SolidColorBrush

But TextBlock has a somewhat different lineage:

DependencyObject
- Visual
  - Animatable
    - UIElement
      - FrameworkElement
        
        TextBlock

So what's the story here, these two objects only have DependencyObject in their common ancestry, and that class does not have the necessary SetBinding method, how can the binding possibly work at all?

If you were to look at the implementation code for the SetBinding method in FrameworkElement the answer would immediately present itself:

public BindingExpressionBase SetBinding(
    DependencyProperty dp,
    BindingBase binding)
{
    return BindingOperations.SetBinding(this, dp, binding);
}

BindingOperations.SetBinding, this static method asks for a target dependency object, a dependency property and a binding instance. So we should be able to re-write our previous code to use this class directly, like this:

SolidColorBrush brush = new SolidColorBrush();
BindingOperations.SetBinding(
brush, SolidColorBrush.ColorProperty, colorsBinding);
tb.Foreground = brush;

Which works as expected, therefore the visual outcome is the same as above, but this time the effect is achieved by using procedural code:

Now we understand what is going on a little better how does this helps us? "So what?" you might ask. You can still write the same XAML there's nothing new there; learning this has not changed a single thing for you when it comes to data-binding, it just works. It is exactly the it just works aspect of the data-binding design I think is soooo important in this implementation.

The designers of the data-binding API put the convenience method (SetBinding) in exactly the right place to make sense for the object model (high cohesion); but they implemented the feature in such a way that it's not tied to that specific scenario, meaning that have enabled many scenarios with only the absolutely minimum requirements or contract being placed on the API, therefore loosely coupled. Brilliant!

Every single day I learn more about WPF and every day I appreciate the quality of the framework design. Enjoy and learn from a great design, I know I will.

WPF - Selecting TreeViewItems in code

2008-07-03T09:53:00.001+01:00

This appears to be a common problem for people with various solutions, most involving some walking of the visual tree, which to my mind is a little overkill. Also, you've got to wonder what the WPF team were thinking when they left out such a core (and apparently much demanded) feature, so there has to be an easier way, right? [...snip...]

As with most things like this you rarely find a complete solution in a single location, but that is what this post (and possibly a one or two more) will give you - which will not involve walking the visual tree, but will actually leverage the WPF data binding engine.

Let us start with the application scenario, to give us something to work with. Consider the following XML:

<?xml version="1.0" encoding="utf-8" ?>
<Library>
    <Author Name="Edward Tufte">
        <Book Name="The Visual Display of ..." />
        <Book Name="Envisioning Information" />
        <Book Name="Visual Explanations" />
        <Book Name="Beautiful Evidence" />
    </Author>
    <Author Name="Chris Sells">
        <Book Name="Windows Forms Programming in C#" />
        <Book Name="Windows Forms 2.0 Programming" />
        <Book Name="Programming WPF" />
    </Author>
    <Author Name="Charles Petzold">
        <Book Name="Programming Microsoft Windows with C#" />
        <Book Name="Application = Code + Markup" />
        <Book Name="3D Programming for Windows" />
    </Author>
</Library>

A very simple schema for a library of books. Our first step is to get this data into a TreeView. We'll use CLR objects, rather than XML directly (the reasoning for this will be apparent later) - so lets assume that there is an appropriate object model of CLR objects to support this data schema, something like:

To wire a TreeView and this object model together is pretty straight forward: we provide the TreeView with a HierarchicalDataTemplate, something like this:

The only significant difference between a DataTemplate and a HierarchicalDataTemplate is the ItemsSource property; this simply tells the TreeView where to get the children for the templated item from, the Books property in this example.

Next we must provide the TreeView with its ItemsSource, which is the list of Authors; some like this:

private void OnLoaded(object sender, RoutedEventArgs e)
{
this.tree.ItemsSource = DataProvider.GetAuthors();
}

This will produce an output similar to the following:

Right, so that's the basic application, lets start trying to tackle the actual problem.

Before we go too much further we need to talk a little bit about what makes up a TreeView. The important thing to understand for this solution is that each tree node is actually a type called TreeViewItem, and it is this item that displays the data template we defined earlier for our custom types Author and Book.

So you should be able to see from the image above (click on it to see a lager version) is that the TreeViewItem is the container for our content. The TreeView kindly provides a simple way for us to work with the TreeViewItem indirectly by using the TreeView.ItemsContainerStyle. This property enables us to modify the style associated with the TreeViewItem template - remember that a Style tweaks the properties on UI elements that the Template loaded in the visual tree to render our view. Simply put: a Style work with objects already in the visual tree by changing the values of (dependency) properties.

What this means for us is that the TreeViewItem has two properties that we can use: IsSelected and IsExpanded, if we bind our business objects to these two properties via the ItemsContainerStyle like so:

We can effect the behaviour of the tree buy manipulating our business objects! To make this all work we need to add these two properties to all the business objects that can appear in the tree control, Author and Book in this case. Then we must add change notification for the binding system to notice when we update these properties, which will then in turn update the tree control. Here's the new data model:

With all this in place, we're all set to manipulate the tree by using our data model. For example, when the application loads, the tree nodes are all collapsed (IsExpanded defaults to false), therefore to expand all the Author nodes and to select the Book with the title "Beautiful Evidence" we would write the following code:

foreach (Author a in this.tree.ItemsSource)
{
a.IsExpanded = true;

    if (a.Name == "Edward Tufte")
    {
        foreach (Book b in a.Books)
        {
            if (b.Title == "Beautiful Evidence")
            {
                b.IsSelected = true;
                break;
            }
        }
    }
}

Running this code should produce something that looks like this:

Here's the complete code for this simple example, note that this code is just the bare bones of what we've been talking about in this post, it's far from production code:

PaulJ.TreeViewManipulation.zip

This is not the end of the story, however. This solution is still a little sucky, due to the tight coupling between the data model and the requirements of the UI by way of the TreeViewItem; the current data model would not be great for reuse in a WCF service or a Silverlight application for example.

Therefore in future post we'll look at tackling the separation of concerns with a couple of design patterns, probably the Decorator pattern (regular readers would have heard that story before) and the most likely sound solution, in my opinion, will probably be a Model View Controller approach, but we'll see - we can figure it out together.

Until next time, enjoy!

Windows Live Writer del.icio.us Plug-In...an update

2008-06-30T11:57:00.001+01:00

UPDATE 2008-08-14: When the boys at Delicious updated their site recently (nice work BTW, it looks great) they also changed their URL for feeds, causing my plug-in to break :-(

I have fixed up the code; the download links to the code on the original post are all correct and contain the updated code. The boys at Windows Live are currently approving the new upload, so please check to make sure you're downloading v1.1 if you get the plug-in from the link in this post.

Sorry for any hassle this may have caused. </PJ>

When I wrote the original post on the WLW plug-in, I had no intention of releasing it publicly; it was all about the process of building software and coding in general, I just needed a real piece of software to focus on for the post. However, after a brief conversion with Derek, the other day, I spent 10 minutes packaging it all up, and then submitted it to the Windows Live Gallery... it was accepted over the weekend:

del.icio.us Plug-In

So if you're not interested in the code and just want to use it then please feel free to download it from the link above.

Enjoy!

WPF - Settings Dialog... the Movie

2008-06-25T15:18:00.001+01:00

WARNING: This is an experiment! I thought it might be interesting (and fun) to record a brief screencast (<10 minutes) showing how to do the settings element of my previous post, and this is the result:

I tried both YouTube and MSN Video to host this video and as you can probably see I've ended up with the latter. While YouTube uploaded the file faster it consistently failed to process it, with the upshot being that I could not view my video. MSN Video, however, accepted the file, gave me great feedback while it was uploading and then processing (whatever processing means!); but it did take nearly an hour for the entire cycle to complete. Which is a whole bunch longer than it took to produce the content in the first place. I'm not sure what I expected but it was not that.

I'm also not overly impressed with the quality of the end result; I'm sure there is more I can do my end, at the expense of a larger file, to improve that however.

To that end I'm making the raw WMV file available for download, purely because of the sub optimal quality and I think it might be frustrating to watch and code along with in the current form factor:

WPF Setting Example... the Movie

Please let me know what you think - if you like, I'll do more; this really is my first time at doing something of this nature so only your feedback can make it better (or go away :). Enjoy!

Update: Here's the code (albeit cleaned up a little) created during the video, as requested:

WPF Settings Example Code

WPF - Send to Flickr, Settings Dialogs and Security

2008-06-23T12:12:00.001+01:00

There are literally hundreds of tools for sending your image files to your Flickr account. This post is not really about sending images to Flickr, it's not even about sending e-mails from .NET code by using GMail as an SMTP server (I chose that approach over mastering the vast Flickr API - or using a .NET wrapper of some description, however here is a good one if you're interested).

What I really want to explore with this post and the sample application are two things:

How to create a settings window the WPF way, e.g. by using data binding to the Settings class and successfully handling the Cancel scenario, and
Storing secrets, like your GMail password, in plain sight e.g. by using a settings configuration file, also this must be in a WPF friendly way.

Given my previous experience with tools that help me with my Flickr account, and my simple requirements, I'm sure you'll forgive me for writing my own Flickr uploader, which forms the basis for the sample application.

Simply, the WPF application has three very basic windows:

The Help window, the Configuration window and the Sending window. The Help window is simply a FlowDocumentViewer with an inline FlowDocument. The Sending window is the one that sends an email by using the settings information. Finally, the Settings window for capturing the necessary settings information.

The application works by you placing a shortcut to the assembly in your Send To folder (the path on Vista will be:
%APPDATA%\Microsoft\Windows\SendTo), right-click the target image, and then click Send to Flickr (or whatever you called your shortcut).

Providing you've populated your settings information, that process will send an email to your Flickr account with the selected image as an attachment.

Data Binding to Settings

The diagram above provides a visual explanation of how the settings works for this application (click the image to see a larger version). The goal with this design is to only use WPF data binding, in order to remove any of the tedious right-hand/left-hand code; this type of code, as described by Scott Hanselman, is:

[the code] where you've got an object on the left and some other object/bag/pileOdata on the right and you spend a lot of lines just going "left side = right side, left side = right side."

Basically property field mapping; really boring, time consuming and error prone code. This design makes all that go away.

However, the usual downside with this approach is something I like to call "The Cancel Problem". This is where the user has updated a value in the dialog, but then changes their mind and clicks the Cancel button. The behaviour you want is to ignore the update, but because your UI and the backing store are bound together updates are dynamic. This means when the user tabs off the control, or presses ENTER, an update is immediately sent to the underlying data store.

Solutions to this problem tend to involve using intermediate objects to remember the old settings or store the new, and then when the user saves you write some left-hand/right-hand code to persist the values, booooh!

The simple solution I have chosen for this problem is shown in the diagram; basically in the OK button click you call Save on the Settings class, and on a Cancel button click you call Reload. This appears to be a little known technique, but solves the Cancel problem completely and removes any need for intermediate objects, and therefore any right-hand/left-hand code, yay! The Reload method simply reads the values again from the backing store, in effect cancelling the operation, and due to the data binding update the in memory view of all the values too.

Next we tackle the more prickly problem of storing sensitive information in your configuration files.

Storing Secrets

With the myriad of tools out there to help you with this social service and the other social service, be it: Flickr, FaceBook, del.icio.us or what-have-you, all asking for your password and potentially a mountain of other personal or sensitive information, all to do things on your behalf making your life easier - what confidence do you have:

A) assuming that you trust the installed software not to do anything naughty, and
B) that the developers involved were security conscious

that your secrets will not be easily discoverable by third parties by simply spelunking through the plain text files on your machine?

Here's an experiment:

Go to your favourite command line tool (mine's PowerShell), navigate to your AppData folder, in Vista that's: <drive>:\Users\YOU\AppData, and then type:

Get-ChildItem -r * | Select-String [your password]
(or the equivalent for your command line tool)

Then do the same for <drive>:\Program Files and <drive>:\Windows, and then, finally, search the registry for the same information.

The question I have for you is: How confident are you that you won't find any instances of your password?

I'm not saying that you will come up with anything, but what I am asking you is how confident do you feel that you won't, on a scale of 1 to 10 - I bet it's not 10!

With this sample application I wanted to explore a good way to store your email password in the Settings plain-text XML file, which was also a good fit for WPF applications, whilst not adding to your potential security woes.

My search was a pretty short one to find the answer I needed: Data Protection API, provided natively by Windows. Keith Brown explains this all very well in his free book The .NET Developer's Guide to Windows Security. What it boils down to for this application is the use of the ProtectedData class, provided by the .NET Framework since version 2.0, which simply has two methods: Protect and Unprotect. To protect a value you would write code like:

byte[] buffer = Encoding.UTF8.GetBytes(targetValue);
byte[] encryptedData = ProtectedData.Protect(
    buffer,
    this.entropy,
    DataProtectionScope.CurrentUser);

To make this all WPF friendly I wrapped the ProtectedData calls into value converter - so when data binding you can store and retrieve secure information by using my ProtectedDataConverter class as the Converter on the binding.

For passwords where you want to use the WPF PasswordBox control however, you cannot data bind to the Password property, it's not a dependency property - for obvious security reasons, therefore in this application I create an instance of the converter in code and use it that way:

this.PasswordBox.Password = DataCoverter.Convert(
    Settings.Default.Password,
    typeof(string),
    null,
    CultureInfo.CurrentUICulture) as string;

To convert the string value back to plain text (decrypt) is shown above, and to convert back in to a secure value (encrypt):

Settings.Default.Password = DataCoverter.ConvertBack(
    this.PasswordBox.Password,
    typeof(string),
    null,
    CultureInfo.CurrentUICulture) as string;

The converter returns the cipher text in a Base64 encoded string for easy plain-text storage.

Conclusion

I think I achieved my goals with this software; you, dear Reader, are the real judge of my assertion; to that end the code available for your review and use:

PaulJ.Windows.SendToFlickr

Obviously if you have an problems with the code then let me know. Your comments and personal conclusions are also very much welcome. I would love to know where you use this code, or indeed any of the code I publish, so all I ask is if you intend to use the code please drop me a line to let me know.

Enjoy!

Tufte complete... Book4

2008-06-20T08:22:00.001+01:00

I've finished all the books now, this one was easily as good as his later books. The Visual Display of Quantitative Information offers practical advice and clear examples; I can see how this was the springboard for his later works.

I'm going to end this Tufte series with a quote from the book shown on the right; here Tufte is talking about designs for the display of information, but I think it equally applies well to software development and design:

What is to be sought in the designs for the display of information is the clear portrayal of complexity. Not the complication of the simple; rather the task of the designer is to give visual access to the subtle and the difficult - that is,

the revelation of the complex.

Personally, I think all software development and design boils down to the management of complexity, at some level or other. What I see in Tufte's words is simply:

Manage complexity; avoid making the simple complex.

The second part is always tricky - especially when designing at the keyboard. Turning a simple solution into a complex implementation is obviously undesirable (albeit quite common), to learn that the same is true for information design is not that surprising I guess, and it probably holds true for many other technical fields as well, I'm sure.

I am a little sad that I have finished this series and I will continue to blog about Tufte occasionally and I will also continue to follow his work. I do feel that I've savoured, enjoyed and poured over each book, but I cannot hear soon enough that there is another book coming from Graphics Press on information design.

Finally, my greatest hope is that you've been inspired to take a look at this fascinating field yourself - I would love to hear about your adventures with information design and Tufte, what you have done or plan to do, please drop me a line and share the wealth.

WPF - The Zoom Decorator: Part 3

2008-06-18T17:54:00.001+01:00

Despite what the title says, this post is not about Decorators in WPF, the previous post in this series explains why decorators are not on the menu; the post before that gives the background to what we're going to delve into in this post.

Now that's out the way, on the with the show. In this post we're going to take the simple XAML we defined for zooming and turn that into a reusable Zoom control.

Migrating Loose XAML into a Control

Our first step is to migrate the loose XAML into a control, first lets define a class called Zoom that inherits from ContentControl.

namespace PaulJ.Windows.Controls
{
    using System;
    using System.Windows.Controls;

    public class Zoom : ContentControl
    {
        static Zoom()
        {
            DefaultStyleKeyProperty.OverrideMetadata(
                typeof(Zoom),
                new FrameworkPropertyMetadata(typeof(Zoom)));
        }
    }
}

The interesting part here is in the code for the static constructor; note that it overrides the metadata property for the controls DefaultStyle. What this says is that our new control's type is the resource key for it's style. What this enables us to do is define a style for our control without having to provide a resource key name for it, we can just specify the type - like you would for a Button or a TextBox.

For example, the following would replace the style for a Button:

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

               

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Whatever you specify for the content of the control template will be how the button looks; as an x:Key value has not been specified the Type value will be used as the key - this will effectively change all buttons in scope. If we specify an x:Key value then only the Buttons that specify a Style property bound to that key would show the content specified in the new control template.

If we did not override the metadata in the static constructor for our control, we would have to use the syntax shown for the second button in all the places we want to use our control; which would be a little tedious and would not give the same experience as using the built in controls.

So now we have a resource key defined and we know what we want our control to look like (the loose XAML already written), the question now is: where to put it, where do we specify the default style for our control? There are two things that we need to do to provide our a Default style: First, add attribute to our assembly and second, add a generic resource dictionary.

[assembly: ThemeInfo(
ResourceDictionaryLocation.None,
ResourceDictionaryLocation.SourceAssembly)]

The ThemeInfoAttribute class is an assembly level attribute, and in the example above we are saying that we have no theme level specific resources (we're not replacing Aero or Luna here!) and we have a generic dictionary located within the source assembly i.e. our control assembly.

With this code in place, WPF is now going to look for a resource dictionary in the following location at run time:

pack://application:,,,/Themes/Generic.xaml

That resource dictionary is as close to System Scope as we can get with our assembly; without defining any new themes (something you will probably never do, unless you're writing an operating system or intend to replace Aero!).

With that file in place, we now have somewhere to dump our controls XAML. We only need to make a couple of minor adjustments to migrate the loose XAML in to a control template, I've highlighted some of important the changes:

The key changes are the TargetType association to our control, the use of TemplateBinding rather than fixed values, meaning the values will be obtained at run time from the templated parent (which will be an instance of our control). Finally, I renamed the slider so that it uses a standard naming convention for template parts; other than that the template remains pretty much unchanged.

We now have a working control identical to the loose XAML version in functionality, but it can now be used like this:

Fixing the ClipToBounds

There is a small problem with our current implementation: when we zoom to full-size we loose the border; the image below demonstrates:

This is because the ClipToBounds property is applied to the Border, so while the contained element (a rectangle in this example) does not leak outside the bounds of the Border control, there is no room left for the control to draw the border lines. The simplest way to fix that is to introduce a child control to the Border that acts as the clipping container:

I used a ContentControl for this purpose as it does not have any visual appearance of it's own, meaning it's lightweight, but it does participate in layout of the visual tree - so it is perfect for our needs. No more Border issues.

Adding some Knobs and Dials

Currently all the slider behaviour is static, you'd have to completely replace the template just to make the zoom go from 0 to 500 percent (the default is 200 percent), or to start at 25 percent instead of a hundred. You also would be unable to change any of these values for an animation effect or in even in code without jumping through lots of hoops.

So lets expose three core properties Value, Minimum and Maximum; after we've done that you'll easily see how you could add more flexibility to your version of the control.

The process is pretty straight forward: define a Dependency Property for each value we wish to represent, and then update the control template to use a TemplateBinding for that value:

public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
    "Value",
    typeof(double),
    typeof(Zoom),
    new UIPropertyMetadata(1.0));

This creates a Dependency property to represent the Value of the Zoom control, and then we expose the dependency property value by using a standard .NET property:

[Bindable(true), Category("Behavior")]
public double Value
{
get { return (double)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}

By doing with we make the dependency property accessible both from code and from XAML. Note that I've also added a couple of attributes to the property so that it is located sensibly in the property window of any UI designers, such as Expression Blend or Visual Studio, and I've also said that the value can be safely used for data binding.

You just repeat that process for the other properties and then we're done. The following link is WPF Browser Application (XBAP) that uses the new Zoom control's various different properties:

PaulJ.Windows.ZoomApplication.xbap

I'm also making all the source code available for you to do with as you wish. All that I ask is that if you do anything cool with it then please send me a link or an email:

Download the Source

There are various improvements that could be made, such as adding animation to the zooming effect or adding the ability to move the zoom slider into different positions within the control. Also feel free to make these changes and then drop me a line.

Obviously if you find any bugs or have any problems with the code then please let me know.

Enjoy!

Windows Live Writer, Plug-Ins, WPF, Code Analysis and Tufte!

2008-06-17T17:08:00.001+01:00

After the other days debacle with Nostalgia and Flickr I looked to simplify my picture posting process for this blog. My requirements are simple: something like right-click an image, and then click "Send to Flickr" or something similar. I figured that someone must have written this already.... but no, I came up dry.

I figured I'd have to write my own version against the Flickr APIs (which are vast!). However, during my initial investigations I found out two interesting things:

You can post images to Flickr via email, and
There is a Windows Live Writer plug-in for Flickr images (WLW is the text editor that I use to write all my posts).

Armed with this information, I managed to completely streamline my image uploading process with zero code on my part! Good enough... for now.

With that, I del.icio.us'd the appropriate links and figured that I would blog about my experience, share the solution, with you dear Reader, and seek your opinion on the matter. Then it occurred to me that there must be a Windows Live Writer plug-in for del.icio.us... my search began anew. But, again, I came up dry (well, I found one, but it really sucked).

By this time my interest was really piqued with regards to Windows Live Writer plug-ins; I wondered what it would take to write a plug-in with my exacting requirements:

It must be a WPF front-end (nothing else will do)
It must use XLinq for the back-end (experiment)
It must be FxCop and Microsoft Source Analysis compliant (as I want to ship it, to you dear Reader)
The UI should "suck-less" and follow as many Tufte principals as makes sense for an application of this type (experiment)

When I started out on this adventure I was far from sure if the WPF approach was even possible; Windows Live Writer is a Windows Forms based application, therefore the plug-ins must also be WinForms. However, you can load WPF controls into WinForms using some fancy interop, so I was confident I could make something work. But, what I really wondered was:

Is it possible to load a WPF Window from WinForms?

I wanted to write something like:

private void buttonOpenDialog_Click(object sender, EventArgs e)
{
    MyWpfWindow dialog = new MyWpfWindow();
    if (dialog.ShowDialog() == true)
    {
        MessageBox.Show(dialog.SomeVlaue);
    }
}

Where the buttonOpenDialog method was inside a WinForms application. It turns out that this is not only possible but it also work extremely well.

I wanted to use XLinq given that the data will be coming from del.icio.us, in the form of an RSS feed, and I want to filter the results locally XLinq seemed like a perfect fit, and indeed it has been:

IEnumerable<LinkItem> result =
from i in this.xdoc.Element(rdf + "RDF").Elements(rss + "item")
    select new LinkItem
    {
        Categories = i.Element(dce + "subject").Value,
        Date = (DateTime)i.Element(dce + "date"),
        Description = i.Element(rss + "description").Value,
        Link = i.Element(rss + "link").Value,
        Title = i.Element(rss + "title").Value
    };

This is a simple query to deserialize the RSS feed into a list of custom LinkItem class, which is then used by the WPF UI.

To load the RSS feed in the first instance is as simple as:

this.xdoc = XDocument.Load(
"http://del.icio.us/rss/compilewith.net);

That forms the basis of the back-end provider.

Next is the static code analysis tools. The main difference between the two tools I have chosen is that FxCop reports on the assemblies (post build), whereas the Source Analysis tool does what it says on the tin, and looks at the source text files (pre build).

The important aspect to understand here is that I'm not looking for a zero bounce with these tools. It may be possible, and indeed I did nearly achieve a zero bounce with the Source Analysis tool, I was finally thwarted due to the way WPF works. As was the case with this code, sometimes you simply cannot obey all the rules and still compile!

The rules are there to help you, not hand-cuff or hurt you, remember to only apply the rules that make your code better, cos aiming for 100 percent compliance in my experience means less than optimal code; not to mention the extra time required to chase down the last 1 or 2 percent of the violations, that is time better spent on shipping new features.

So with that in mind, here is my analysis of the remaining FxCop rules that I have no intention of fixing and why:

Note also that there is a way to suppress the violations in your source code for FxCop (and other static code analysis tools?), using code analysis attributes and providing compile time hints, which in production code, I strongly recommend you do. That way (1) you formally acknowledge the rule violation, (2) you also explain why the rule is ignored, and (3) most importantly, you explain why as close to the code as possible.

(If anyone is interested in how to achieve the suppression of FxCop rules in this way with attributes then drop me a line an I'll knock a "how-to" post together).

And finally, the Tufte analysis. This is probably the most subjective part of the work I've done for this plug-in; but I honestly believe that this UI is one of the best I've done.

This is the bit where I would most appreciate feedback:

In the final analysis I'm happy with the result, the code is available in two different forms:

This is the first time that I've released code in this way, so your feedback would be greatly appreciated. Enjoy!

Flickr and Nostalgia Woes

2008-06-11T10:46:00.001+01:00

Apologies for those of you who will get some of my older posts in your feeds this morning. I've had to repost a bunch of articles with fresh image links.

I've been using flickr for almost as long as this blog as been alive, with great success, I'm a huge fan; more recently I've been using Nostalgia from the boys a Thirteen23, which is where the trouble begins... I think. I don't know for sure but a bunch of pictures went AWOL yesterday after what appeared to be a successful session, and now I cannot trust the application anymore.

Which is a real shame as Nostalgia looks great and is seriously usable, but it is only a proof of concept and it's my own fault for using it for something an important to me as my blog. Ho-hum, lesson learned.

Sorry for any inconvenience in your RSS feed, my bad :-(

(Note: have "touched" my newer posts so they should appear at the top of feed)