It's the same old old problem you want to make a set of columns the same height but life it too short for the CSS only version. It's technically possible to do but nowadays you can't run the web without having javascript turned on. There must be an easier way.

After a short amount of googling I came across a few solutions. A couple were GPL'd which ruled them straight out as I want Red Gate to pay for my mortgage.

The best simple solution was found at.

http://www.cssnewbie.com/equal-height-columns-with-jquery/

function equalHeight(group) {
   var tallest = 0;
   group.Each(function() {
       var thisHeight = $(this).height(); 
       if(thisHeight > tallest) {
           tallest = thisHeight;
       }
   });
   group.height(tallest);
}

Now this worked for my particular situation but wasn't quite nice enough for me. So I thought I'd put it forward to our internal web development e-mail list to see what they made of the issue. This is a list made of developers, designers, marketers who use HTML so can be quite a useful forum for getting good ideas. This threw up the beautiful code from Matt Lee.

Or, if you like a bit of code golf (and are using underscore.js, which you should be!):

$.fn.equalize = function () {
      return this.css("height", _.max(this.map(function () { return $(this).height(); })));
  };

See the whole thing at: http://jsbin.com/isixib/edit#javascript,html,live

Also, I don't think Richard's version worked if the elements were in increasing height order: http://jsbin.com/abovoq/edit#javascript,html,live

This seems to do the job really nicely and I thought it was so elegant that it should be shared. enjoy. The way I call this is to on every page perform the following code to equalize groups of divs to be the same height - it will also work for multiple rows and columns of divs: http://jsbin.com/isixib/2/edit#javascript,html,live

    $("div.height1").equalize();
    $("div.height2").equalize();
    $("div.height3").equalize();


Before you read this you should probably read my original post 5 Reasons why I hate WPF. Also "Qwertie" wrote a nice article detail about his overview of why WPF sucks.

1 - Binding

There is something so nice about setting a button to be enabled or not enabled based on a property in the view. All the enabling and disabling is handled for you (more or less). I find that using MVVM helps in many ways to separate UI logic from UI appearance. Something I've always found difficult when writing WinForms in the past.

Using this mechanism and writing a simple implementation of INotifyPropertyChanged means your control availability can be declarative rather than procedural.

public bool ShowFinished
{
    get { return m_ShowFinished; }
    set
    {
        m_ShowFinished = value;
        OnPropertyChanged(() => ShowFinished);
    }
}

Then in your XAML you can do something moderately simple (albeit with arcane syntax)

<BooleanToVisibilityConverter x:Key="boolToVis" />

<StackPanel Orientation="Horizontal" Visibility="{Binding ShowFinished, Mode=OneWay, Converter={StaticResource boolToVis}}">

Simply set the property to whatever you want in code and the visibility of the stack panel in the UI will show or hide depending on the value. However I have found problems where multiple properties changes in a short space of time don't seem to actually update until the UI receives some event to prompt a redraw.

2 - Pretty

One thing nobody can deny is that XAML programs can routinely look much prettier with much less work than the same program done via WinForms. This is one of those occasions that are making something hard trivially easy. Say you want to slide in a panel from the side covering the controls and landing with a nice bounce above. No problem.

<EventTrigger RoutedEvent="ToggleButton.Checked">

    <EventTrigger.Actions>

        <BeginStoryboard>

            <Storyboard>

                <DoubleAnimation Storyboard.TargetName="RightSlide"

                                    Storyboard.TargetProperty="X"

                                    From="{Binding Path=ActualWidth, ElementName=HiddenSlideOut, Mode=OneWay}"

                                    To="0"

                                    Duration="0:0:0.6">

                    <DoubleAnimation.EasingFunction>

                        <BounceEase EasingMode="EaseOut" />

                    </DoubleAnimation.EasingFunction>

                </DoubleAnimation>

            </Storyboard>

        </BeginStoryboard>

    </EventTrigger.Actions>

</EventTrigger>

The danger here is (apart from again the arcane syntax) that it's almost too easy to do fancy graphics. Developers are not known for their restraint when given shiny things to play with - just look at <marquee> or <blink>. The design of a program is best left to a UX professional - step away from the shiny thing.

I may be old fashioned but one of the things I liked about WinForms is some degree of consistency. If something was a button it looked like a button, it rarely looked like a teapot or a spinning cube. Until there is some form on consistency in the new UI I worry that users won't be able to get the most out of a program because they simply won't know what is design and what is interface.

3 - Separation of UI and Engine

MVVM is a new thing for me. I was only introduced to design patterns when I started and Red Gate and I still feel I should get more experience writing code using them than I do. I really like the idea behind the MVVM pattern that you can do with XAML. This makes it much easier to test the UI using automated tests and generally inspires you to write cleaner XAML using bindings a lot more extensively.

The gotchas are there for all to see though, try showing a modal dialog box for instance. Or perhaps you'd like to close the application. There are solutions to the issues but none of them yet have the simple elegance of MVVM itself.

4 - CSS style re-use

Using WinForms colour consistency is neigh on impossible to achieve. However with the use of resources in XAML it's the simplest thing in the world to make sure all your controls share a common colour scheme and even more via the use control templates and decorators. I do think there are many varied ways of doing the same thing and very few "best practices" that were truly elegant.

<Brush x:Key="SlideColor">#373737</Brush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

5 - XML

I've a confession to make, my name is Richard Mitchell and I'm an XML addict. Ever since I made extensive use out of XML and XSLT in a previous job I've fallen in love (or lust) with it. Now there are those of you who like to point out the failings of XML but almost always in those circumstances you shouldn't be using XML in the first place for that problem.

The simple rules and fantastic tool support nowadays makes autocompleting even complex XML an absolute breeze and XSD support makes it even better.

Conclusion

Should you try WPF - I say yes. If nothing else it gives you a great new perspective on how UI programming could work, perhaps you'll stay in the WPF world or use your knowledge in HTML5 (the future is obviously HTML5 no matter how much I personally dislike javascript).

Recently somebody showed me a little trick to get a command prompt in any directory. Simply hold down SHIFT whilst pressing right-click on the folder and the menu option containing "Open command window here" appears as if by magic.

I know this is simple but it's not something I knew about, or had forgotten about. There seems to be a complete list of short-cuts on MSDN.

http://support.microsoft.com/kb/126449

Hopefully this can save you as much time as it does for me.

Download the zip here

Working in New Biz

As I work in Red Gate's new business division much of what we do isn't very visible. So along with Marine Barbaroux I decided to try to create an engaging website to capture what we're doing in an easy to digest way.

The idea is to create a website that can be used by everybody in Red Gate to get a picture of what we're doing on a day-to-day basis. It isn't quite there yet but I thought I'd share the work so far so that anybody can play with it.

How it works

The website is run entirely in javascript and makes use of jquery so should be hostable on whatever web server you have lying around. The main index.htm page reads a data page html and uses the

I decided to use writing a new tool as a way to learn WPF and MVVM and I thought I'd write down a few of my problems as a way of cathartic release.

I decided to read a book before attempting WPF for the first time as I've heard others complain about the steep learning curve. I chose the rather excellent "WPF 4 Unleashed" by Adam Nathan to read through and "Pro WPF in C# 2010" by Matthew MacDonald as a reference whilst I programmed.

1 - Poor editing support for XAML

The first thing I think any developer is going to notice about starting with XAML is that the visual studio designer is pretty poor (choosing my words carefully). I liken it to using the experience using Word to edit HTML documents. Really you have no choice but to hand code it if you want anything even roughly resembling something maintainable xaml. Even then the designer doesn't give the best of previews e.g.

Why no scrollbars?

2 - Poor editing support for Graphics

Next up comes what is a strength of WPF, the vector graphics. Now don't get me wrong I like vector graphics just the tool support at the moment is terrible. The only bright ray of hope is Inkscape which will allow you to trace a bitmap to convert it into vector and also export xaml files.

I found this helped somewhat but still the output wasn't very clean and for simpler graphics like the arrow or the tick I just resorted to drawing on graph paper and typing the ever so user friendly PathGeometry directly.

        <PathGeometry x:Key="DatabaseShape"
                      Figures="M 150,100
                                         L 150,250
                                         Q 150,280 225,280 S 300,280 300,250
                                         L 300,100
                                         Q 300,80 225,80 S 150,80 150,100
                                         M 150,150
                                         Q 150,170 225,170 S 300,170 300,150
                                         M 150,200
                                         Q 150,230 225,230 S 300,230 300,200"
                      FillRule="Nonzero" />

Yes, I coded this by hand.

3 - Blurry bitmap appearance

Now for another drawback when favouring vectors. I'm not a purist and am regularly accused of committing coding horrors however, Dear Microsoft, Please support just showing a bitmap at normal resolution without resorting to blurring it. I will get images and I can't spend the time converting everything to vectors so sometimes I just want to show a bitmap without having to swallow a whole bottle of Kool-Aid.

It amazes me that WPF doesn't include this ability as standard.

4 - Changing appearance of standard control

Is it a good or a bad thing that in order to change some relatively minor appearance of a standard control you have to copy the whole control template into your project and modify it? I really miss the ability to just change behaviour or appearance slightly with a cleverly constructed sub-class in winforms.

To me it just seems a little heavy-handed and I really hope there must be a better way of doing things that I've just not found in my initial investigation.

5 - Hard Trivial - Trivial Hard

I can't remember the exact quote but it went something like.

"WPF makes the hard trivial and trivial hard"

If you want your application to contain lots of custom drawing, drop shadows, blended backgrounds and an almost CSS like way of designing the UI's then WPF and MVVM is fantastic. However if you want to show a modal dialog box - beware!!! Why? I mean the Kool-Aid drinkers out there talk about lovely design patterns and clever ways to get around what to me is a very common requirement.

I did manage to bodge my way around it using a Callback a collection of ICommands and a ManualResetEvent. I even think it's not that terrible a way of doing things although I'm probably wrong.

Conclusions

Is WPF all bad? No, certainly not. I think there's a steep learning curve so reading a book before you start is a must in my opinion. However the clever databinding, MVVM and resource dictionaries make for a very testable way to program a UI. WPF takes away most of the rendering and re-painting that plagues me when I use winforms and is a blessing worth a fair amount of pain.

Is it right yet? I'm not sure but I'll certainly play with it some more and see where my journey takes me.

I'd love to hear your experiences of WPF if you've tried it, and any solutions to some of my gripes above as I can't believe I'm just not missing something fundamental.

This weekend I took one of the Samsung Galaxy Tabs we have lying around the office here home to see how I got on with it as I've been thinking of buying one.

Initial impressions

The look and feel of the Tab is quite nice. It's a lot smaller than an iPad but that is no bad thing as I imagine they are targeted at different markets. The Tab fits into my inside coat pocket nicely and doesn't feel like it's weighing me down too much.

Connecting up the Tab to the network at work was fine, typing in the password was a bit of a faff but after that I was connected to the internet and found that yes I could view websites - wooo.

Come home with me my pretty

Now I have the Tab at home I can really start to personalise it and put those tools that I really can't live without. Again getting it on the home network was a faff, I use a large key that I store on a usb key, can't access that from a Tab of course, perhaps if I'd transferred it to a micro-sd card I'd have got around that.

First few applications to get installed.

• Dropbox ( I need my keepass file )
• KeePassDroid ( I need my password for . )
• TweetDeck ( and.. )
• Facebook

Copying and pasting my passwords from KeePassDroid took a couple of attempts, I really like the swipe down access to notifications - and in this case the ability to copy and paste my username and password from one running app to another. Multi-tasking in order to achieve something like this is very neat, having all of Dropbox, KeePassDroid and TweetDeck running at the same time. Although I did find myself trying to switch into the active applications using the "Active Applications" link from the homepage, being forced to navigate to the place you started the other app from is just too clunky.

More customisation

So now I'm in contact with the world all is good, strangely I had to give over my google account information to download applications which then set-up my sync to google mail, contacts and calendar but I didn't actually mind that as that meant I'm now even more contact ready. A few obligatory games made their way onto the Tab.

• Angry Birds ( of course )
• Alchemy
• Unblock Me Free

So now I'm no only in contact with the world but I'm also having fun, this is when I noticed a real hardware snafu by Samsung. The screen looks great in both portrait and landscape however when viewing games or e.g. iPlayer ( I watched last weeks F1 race on it ) in landscape the stereo speakers are both on the right - surely some hardware designer is going D'Oh!

Corporate-Ready? Not really

So putting on my work hat ( after revenging myself on those curséd pigs for a bit ) I decided to hook up my exchange account. After an incredibly scary warning prior to connecting I found it mostly worked. I could see my work e-mail, my calendar and outlook contacts synched up, but not the Global Address List. This is a real let down as I need that to send e-mail to people at work and as far as I can tell I'm not the only one who feels this is a major drawback - http://code.google.com/p/android/issues/detail?id=4602. The system will auto-complete addresses but they aren't there in the contacts initially.

Also upon reading an e-mail I thought I'd check out a bug link to our internal bug tracking system. Right, need to set-up a connection to the VPN - how hard can it be? Turns out - impossible, I'm reasonably tech-savvy and I know about networks, I even installed a couple of tools to try to diagnose the problems

• NetInfo
• Pinger

But still no joy and no way I could tell what the IP address of the VPN link was - it seemed to connect but I just couldn't make it work. Some of this may have been due to the fact I'd had to fix the Tab to a static IP on my home network in the morning as for whatever reason it refused to pick up a DHCP address ( it had worked fine the night before ).

Still was nice having my work Mail accessible via the main Mail app and my google mail via the GMail app and my combined calendar. Shame I couldn't get my work Notes into Memos too.

Final thoughts

I only really had the Tab for a weekend and I do quite like it, I really like the software, probably more so than the hardware, it's neither small enough to be a phone nor large enough to get the most out of web pages like an iPad.

Installing application from Marketplace is terrifying, this application needs access to your location - why? I don't want it to have that but my only option is not using the application rather than denying it rights. A barcode scanner that wants to read my e-mail - fsck off!

There are probably ways to work around some of the problems I had with the Tab but I didn't come across them. The android marketplace is so poorly organised that it's of no use - sorted by what?, how many people voted for that 5 star?, how may downloads?

Being always connected is a great feeling, maybe it's because I've never had a "smart" phone ( a Tocco Lite does not count Samsung! ). So maybe I won't have a Tab but perhaps a Galaxy S is more up my street. The iPads lack of multi-tasking and lack of customisation would be a killer for me.

 As I've been doing a bit of work on remoting (see my previous blog post) I'm necessarily looking quite a bit into the serialization of messages. Yesterday I found quite a good article on the CodeProject website with a good set of references about remoting it's well worth a read. While I'm on the subject I thought I'd share my variation of Ingo Rammer's RemotingHelper class. This is a class that enables you to create remote classes based on interfaces via the remoting configuration file. Normally you would have to use a call to Activator.GetObject() and that takes URL so suddenly all of your configuration has to be done outside the easy to edit config file. The only issues I had with the Ingo's RemotingHelper class was that it was very fussy over the type of the remoting object so if the version changed it would stop working. To rectify that issue for my case I only store the FullName in the lookup table. This makes it a lot easier when getting auto-versioned builds from our build system (we have two build computers, one called Bob and the other called Wendy - guess why) so I don't have to change both the client and server every single time.

/// <summary>
/// Use Interface-based remote objects with config files
/// http://www.thinktecture.com/resourcearchive
///               /net-remoting-faq/useinterfaceswithconfigfiles
/// </summary>
public class RemotingHelper
{
    private static bool m_IsInit;
    private static Dictionary<string, WellKnownClientTypeEntry> m_WellKnownTypes;

    /// <summary>
    /// Replacement to Activator.GetObject which allows config files
    /// to work properly
    /// </summary>
    /// <param name="type">Type to create</param>
    /// <returns>Type created</returns>
    public static Object GetObject(Type type)
    {
        if (!m_IsInit)
        {
            InitTypeCache();
        }

        WellKnownClientTypeEntry entr;

        if (!m_WellKnownTypes.TryGetValue(type.FullName, out entr))
        {
            throw new RemotingException("Type not found!");
        }

        return Activator.GetObject(entr.ObjectType, entr.ObjectUrl);
    }

    private static void InitTypeCache()
    {
        m_IsInit = true;
        m_WellKnownTypes = new Dictionary<string, WellKnownClientTypeEntry>();
        foreach (WellKnownClientTypeEntry entr in
            RemotingConfiguration.GetRegisteredWellKnownClientTypes())
        {

            if (entr.ObjectType == null)
            {
                throw new RemotingException("A configured type could not " +
                  "be found. Please check spelling");
            }
            m_WellKnownTypes.Add(entr.ObjectType.FullName, entr);
        }
    }
}

This only really works because the FullName is likely to be pretty unique and will change a lot less often than the Type information which changes every build due to the version increments.

 The actual purpose of this blog at the start was to mention a lovely little thing I stumbled across while looking for solutions to the Shared version mismatch remoting calls was to do with serializing classes for persistence. Again if you serialize something to disk it's all good you can load it up again no problems. Unless the version of your strongly named assembly changes version at which point suddenly it stops working. The simple solution that seems to work is....

            BinaryFormatter formatter = new BinaryFormatter();
            formatter.AssemblyFormat = FormatterAssemblyStyle.Simple;

 Now when deserializing the runtime now no longer has to find the perfect match for the assembly - just something that is 'close enough' will do - lovely jubbly.