Mike Taulty's Blog

Various Links

mtaulty — Thu, 20 Nov 2008 19:59:51 GMT

I've been catching up on my blog reading...interesting stuff I came across;

PNRP in Windows 7 being used for "remote assistance". Sounds very cool. You can find a few PNRP examples on this blog if you search.
Seadragon in AJAX from Live Labs - if you've seen DeepZoom in Silverlight then this is the same underlying technology (AFAIK) without the Silverlight part.
Themes for WPF released on CodePlex ( a port of the Silverlight versions from the Silverlight Toolkit ). There's also a port of the charts up here.
If you've not seen it yet, the WPF Toolkit got rev'd with the toolkit now containing the DataGrid, Calendar and DatePicker and the Ribbon preview being available off the same page. I thought I'd written a post about this but I've just realised it didn't get past the preview stage :-)
ScottGu's update on Silverlight 2 and Silverlight 3 - some of that stuff "surprised" me in terms of what's being revealed here!
VS2010 code editor is being drawn with vectors and WPF - Kenny spots it and enjoy vectors :-)
Celso Gomes styles a Silverlight Twitter application.
Tricky talks through "the Design Experience" at the UK Silverlight User Group - this is a cool session.
Gareth starts to talk about DSL features in VS 2010
Tim Anderson asks an interesting question about making parallel programming "easier"
The BCL team talks about Code Contracts in .NET Framework 4.0

Silverlight: Design-Time Extensibility

mtaulty — Thu, 20 Nov 2008 18:40:52 GMT

Just a link but what a link! If you're interested in design-time extensibility for Silverlight controls then;

this post

is what you want.

WPF: Experiment with Text Animation

mtaulty — Thu, 20 Nov 2008 18:09:26 GMT

I wanted to experiment with text animation. Specifically, I wanted a control that would display some text and have the option of "exploding" that text in the sense of taking each word in the text and randomly animating it in terms of;

translation
rotation
scale
opacity

so that the words that make up the text can seem to "fly in" all at once to their final position on screen.

Perhaps a UI will help;

Here, my control is in the blue border occupying the bottom 3/4 of the window. Naturally, none of the styling is fixed.

The other controls on the Window just provide;

Text
Whether the control initially displays its text "exploded" or not
How long the animation to bring the text into place should take

and those controls all data-bind to properties on my control with the TextBox only being set to transfer its value on a loss of focus rather than on every keystroke.

When I hit (in this case) the Implode button there'll be a 5 second animation which does;

to bring the words into place and (naturally) Explode just does the reverse.

When the Text is set on the control, I just split it up into words and then create a separate TextBlock within a TextBlock to represent that word and then I just set some transformations on it randomly and apply some animations. Initially, I wanted to use Run rather than TextBlock for each of the words but Run turns out not to be nearly so flexible as TextBlock in terms of what you can do with it.

I've shared the source code here if you want to play with it and/or re-use the control or some of it - the demo app above is included with the control source.

There are some hard-coded things in the control ( such as the maximum amount by which to rotate, translate, scale ) which should perhaps be moved to properties for completeness.

There's also a bit of a hack in there in order to get the main TextBlock that I use to wrap otherwise because the whole thing is in a ViewBox it'll just be one line so I artificially limit the width of the TextBlock.

Taking that a step further...

I added this into the Green version of my "Twistori" client that I started building here and the code for that is then downloadable by clicking the image below;

and then I added it into the Blue version of my "Twistori" client that I shared here and the binaries for this one are downloadable by clicking the image below;

Visual Studio 2010 Resources

mtaulty — Thu, 20 Nov 2008 12:45:27 GMT

This post is a companion to a little article that I wrote for the UK MSDN Flash about Visual Studio 2010 with some resources to get you kick-started. It's not meant to be definitive.

What? You don't read the MSDN Flash? Sign up.

The first thing I'd say is that you need to take a look at this area on Channel9 and subscribe to it;

http://channel9.msdn.com/VisualStudio/

and also check out the Visual Studio 2010 and .NET Framework V4.0 week here;

http://channel9.msdn.com/posts/VisualStudio/Visual-Studio-2010-and-the-NET-Framework-40-Week/

If you're looking for a CTP to download then you need to look here - it's in VPC form and it's big so download over a weekend or something;

http://www.microsoft.com/downloads/details.aspx?familyid=922B4655-93D0-4476-BDA4-94CF5F8D4814&displaylang=en

and there's a preview of the VS 2010 Training Kit (demos, labs, presentations) which you can get from here;

http://www.microsoft.com/downloads/details.aspx?FamilyId=752CB725-969B-4732-A383-ED5740F02E93&displaylang=en

If you're looking at Visual Studio 2010 then here's some places I'd go to;

If you want to understand the side-by-side story and features in the V4.0 CLR then;

If you want to check out what's coming in the languages with Visual Studio 2010 then;

If you want to know more about what's coming in the .NET Framework 4.0;

Parallel Programming

Take a look at Daniel Moth's Parallel Extensions session at TechEd EMEA.

Watch the WPF Roadmap with Kevin Gjerstad at PDC
Check out what's coming in XAML 2009 with Rob Relyea at PDC (not strictly WPF specific but a lot of fun nonetheless :-))

WF and WCF

Data

Office

Deploying Office Applications with Sauurabh Bhatia at PDC

Other

Have a look at the Managed Extensibility Framework with Glenn Block at PDC

If you want to look at what Visual Studio Team System 2010 is bringing then;

If you've got through that little lot already you're quite some way ahead of me.

Xbox 360: New Xbox Experience Today

mtaulty — Wed, 19 Nov 2008 11:45:56 GMT

I'm not a big gamer. I hadn't turned my Xbox on for about 3 months before I recently bought Far Cry 2 which I'm playing through and really enjoying. I'm also thinking of Mirror's Edge as I played a preview of that and it looks really cool.

However...today is the launch of the New Xbox Experience which looks pretty cool and has one particular feature that sounds very attractive to me - the ability to install a DVD based game to the hard-drive.

I really want to try that out - with the best will in the world, the Xbox DVD drive ( like most DVD drives ) makes a lot of noise and so I'd expect that a game coming from the hard-drive would be a lot quicker and a lot quieter. Hopefully, I'll get to give the NXE a whirl later today :-)

WPF and "Twistori": Part 7 (of 7 :-))

mtaulty — Wed, 19 Nov 2008 11:42:00 GMT

Following on from the previous post I had one last thing that I wanted to do.

At the moment, when my application moves from one feed item to another, it simply hides the UI displaying the feed item and then shows it again at a later point which is a bit "dull". It'd be nice if it did some kind of transition.

I figured that I'd use the Shader Effect Library from CodePlex for this so I downloaded it and then added a reference to the ShaderEffectLibrary from my project;

Now I can make use of an effect on my user control. Picking a ripple effect, I can make sure my XAML can "see" the library;

xmlns:effects="clr-namespace:ShaderEffectLibrary;assembly=ShaderEffectLibrary"

and then I can add an effect to my declaration of my user control in my main UI as in;

    <local:ItemDisplayControl
      x:Name="displayControl"
      Visibility="Hidden"
      ControlReady="OnItemDisplayReady" 
      Grid.Column="1"
      Margin="1in"
      HorizontalAlignment="Center"
      VerticalAlignment="Center">
      <local:ItemDisplayControl.Effect>
        <effects:RippleEffect
          x:Name="ripple"
          Amplitude="0"
          Phase="0"
          Frequency="0"
          Center="0.5,0.5" />
      </local:ItemDisplayControl.Effect>
    </local:ItemDisplayControl>

now I can add some Storyboards to my main UI to manipulate that effect ( this XAML is a snippet rather than the whole UI definition );

<Window.Resources>
    <Storyboard
      x:Key="sbRipple"
      Storyboard.TargetName="displayControl"
      FillBehavior="Stop"
      Duration="00:00:00.5"
      AutoReverse="True">
      <DoubleAnimation
        From="0"
        To="0.5"
        Storyboard.TargetProperty="(Effect).(effects:RippleEffect.Amplitude)" />
      <DoubleAnimation
        From="0"
        To="50"
        Storyboard.TargetProperty="(Effect).(effects:RippleEffect.Frequency)" />
    </Storyboard>

and I need to rejig my code a little bit so that rather than just displaying the new item, we ripple it as well :-) Updated code is;

    void OnItemDisplayReady(object sender, EventArgs args)
    {
      ShowItemDisplayControl();
    }
    void ShowItemDisplayControl()
    {
      displayControl.Visibility = Visibility.Visible;
      SbRipple.Begin();
    }
    void HideItemDisplayControl()
    {
      displayControl.Visibility = Visibility.Hidden;      
    }
    Storyboard SbRipple
    {
      get
      {
        return (mainGrid.FindResource("sbRipple") as Storyboard);
      }
    }

and that's it (for now) - I'm done with it. There are some other things I could do here;

Fix a bug that I know is lurking in there where certain Feed Items don't display. Trying to nail that down.
Add some UI around only include Positive/Negative sentiment in the searches.

but I've had fun playing with WPF and Blend and it's also strangely introduced me to the idea that watching Twitter feeds is very addictive and I already learnt a whole bunch of stuff this morning that I wouldn't otherwise know so I think I might have to become a bit of a Twitter-watcher (is that a Twitcher?) if not a Tweeter.

The final bits for download are here.

WPF and "Twistori": Part 6

mtaulty — Wed, 19 Nov 2008 11:40:12 GMT

Following on from this previous post there's a few things wrong with where I've got to so far and some improvements that I'd like to make;

I'd like to display something when there's no new feed items available.
I'd like some kind of transition when one feed item moves to another.
I'd like to avoid displaying an empty user control when the application starts up. That is, this doesn't look great;

whilst I'm waiting for the first item to come in and, finally,

There's a problem with images. I'm loading an image over the web and I need to know when it's loaded otherwise the image goes on the screen before it's really loaded and then updates whilst the user is looking at it and that doesn't seem right at all to me :-)

So, 4 things to fix even if the last one is called (1) just like the first one - I can't work list numbering in Live Writer :-)

Dealing with the first issue isn't too difficult - my AtomFeedManager class fires a FeedItemUnavailable event so I could just add code to the handler for that which manufactures a "fake" item to display when there's nothing else to display as in;

    void OnFeedItemUnavailable(object sender, AtomFeedItemUnavailableEventArgs args)
    {
      Dispatcher.BeginInvoke(new Action(() =>
      {
        displayControl.DataContext = new AtomFeedItem()
        {
          Author = "none",
          AuthorImageUri = new Uri("pack://application:,,,/question.jpg"),
          Title = string.Format("No activity for {0:0} seconds, check your options",
            args.UnavailableTime.TotalSeconds),
          PublishedDate = DateTime.Now
        };
      }));
    }

where I'm just making up a data item because none is available. The only "odd" thing about this is that I've added an existing image question.jpg to the project and set it to be built as a resource to embed it into the assembly and then I can then use the pack: URI in order to make use of that image.

This means that when there is no data I now see something like this;

so that's one of my issue-list items sorted.

Thinking about what to do about the initial blank display - it seems simple to initially mark the control as hidden and only display it when the first feed item arrives (even if it is a made-up feed item when there are no feed items available).

That's fine...however I still have the problem with images. How to know when an image is really ready for display because I don't want to put my ItemDisplayControl onto the screen if it has still to load image for the author of the tweet from the web. I only want that thing to appear on the screen when the image is good and loaded.

For me, this introduces the idea that my ItemDisplayControl could fire some Ready style event when a user of the control can feel confident that it's good to put the control onto the screen knowing that its image will have been loaded.

How do we know when a WPF image has been loaded from the network?

The Image doesn't tell us this but the BitmapImage class does. Inside of my user control, I'm using an Image like this;

        <Image
          Stretch="Fill"
          MaxWidth="96"
          MaxHeight="96"
          Width="Auto"
          Height="Auto"
          Margin="2,2,2,2"
          Source="{Binding AuthorImageUri}">
        </Image>

so I'd assume that I can do something like;

        <Image
          Stretch="Fill"
          MaxWidth="96"
          MaxHeight="96"
          Width="Auto"
          Height="Auto"
          Margin="2,2,2,2">
          <Image.Source>
            <BitmapImage
              UriSource="Source={Binding AuthorImageUri}" />
          </Image.Source>
        </Image>

and then I could add handlers to the events like DownloadCompleted and DownloadFailed on that BitmapImage which is what I need.

However...I don't think that I can directly bind that UriSource property like that ( see here ). Now, however I tried to do this with converters and so on I never quite managed to get this to work and so I resorted to code. I thought I'd handle the DataContextChanged event myself on the Image as in;

        <Image
          DataContextChanged="OnDataContextChanged"
          x:Name="imageAuthor"
          Stretch="Fill"
          MaxWidth="96"
          MaxHeight="96"
          Width="Auto"
          Height="Auto"
          Margin="2,2,2,2">

and then I can put some code behind that leaving my code for my ItemDisplayControl looking like;

  public partial class ItemDisplayControl : UserControl
  {
    public event EventHandler ControlReady;

    public ItemDisplayControl()
    {
      InitializeComponent();
    }
    void FireControlReady()
    {
      if (ControlReady != null)
      {
        ControlReady(this, null);
      }
    }
    private void OnImageDataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
      AtomFeedItem feedItem = (AtomFeedItem)e.NewValue;

      // The item may not have an image, in which case...we are done.
      if (!feedItem.HasImage)
      {
        FireControlReady();
      }
      else if (!feedItem.HasImageNeedingDownload)
      {
        // Some images are packed (i.e. pack://) into the executable. No
        // need to download them.
        imageAuthor.Source = new BitmapImage(feedItem.AuthorImageUri);
        FireControlReady();
      }
      else
      {
        BitmapImage bi = new BitmapImage();
        bi.BeginInit();
        bi.UriSource = feedItem.AuthorImageUri;
        bi.DownloadCompleted += (s, args) =>
          {
            imageAuthor.Source = bi;
            FireControlReady();
          };
        bi.DownloadFailed += (s, args) =>
          {
            FireControlReady();
          };
        bi.EndInit();
      }
    }
  }

The use of this control in the main Window then changes. Initially, I want it to be invisible and I want to handle its ControlReady event. Here's the updated snippet of XAML from the main UI which declares the control;

    <local:ItemDisplayControl
      x:Name="displayControl"
      Visibility="Hidden"
      ControlReady="OnItemDisplayReady" 
      Grid.Column="1"
      HorizontalAlignment="Center"
      VerticalAlignment="Center" />

and then I can handle that ControlReady event in my OnItemDisplayReady handler by just changing the visibility;

    void OnItemDisplayReady(object sender, EventArgs args)
    {
      ShowItemDisplayControl();
    }
    void ShowItemDisplayControl()
    {
      displayControl.Visibility = Visible;
    }

and I can make sure that I hide the control whenever we change its data context thereby forcing it to load a new image which is in the handlers for items becoming available/unavailable;

    void OnFeedItemAvailable(object sender, AtomFeedItemAvailableEventArgs args)
    {
      Dispatcher.BeginInvoke(new Action(() =>
        {
          HideItemDisplayControl();
          displayControl.DataContext = args.FeedItem;
          listSearchTerms.SelectedItem = args.SearchTerm;
          listSearchTerms.ScrollIntoView(args.SearchTerm);
        }));
    }
    void OnFeedItemUnavailable(object sender, AtomFeedItemUnavailableEventArgs args)
    {
      Dispatcher.BeginInvoke(new Action(() =>
      {
        HideItemDisplayControl();
        displayControl.DataContext = new AtomFeedItem()
        {
          Author = "none",
          AuthorImageUri = new Uri("pack://application:,,,/question.jpg"),
          Title = string.Format("No activity for {0:0} seconds, check your options",
            args.UnavailableTime.TotalSeconds),
          PublishedDate = DateTime.Now
        };
      }));
    }
    void HideItemDisplayControl()
    {
      displayControl.Visibility = Visibility.Hidden;
    }

and that all works quite nicely.

So, I've solved items (1), (3) and (4) of my original list - all I'd like now is some kind of transition between one item leaving and the next one arriving. I'll leave that to the next post.

In the meantime, the bits as they currently stand are here for download.

WPF and "Twistori": Part 5

mtaulty — Wed, 19 Nov 2008 11:35:46 GMT

Following on from the previous post I wanted to take the UI that I have so far;

and attempt to style that ListBox over on the right hand side. The first thing I'd do with it is to remove its background;

which stops it being a big white area of the screen. Then I altered its border to use a linear gradient brush.

With that in place, I want to change the template for the CheckBox that is being displayed by the ListBox so I need to go and edit the ItemTemplate for the ListBox which I created in a previous post by just putting a Grid and a CheckBox in it;

and so the item template just looks like this;

and what I can then do is to edit the template of that CheckBox to replace it with my own "design" as in;

The template for the CheckBox looks like this;

and it has some triggers in that you can see certain actions being taken when the element HasContent or IsEnabled - these are probably not so relevant for me and will almost certainly disappear in my template but they are as below;

I want a template that's more based around a circular "tickbox" so I go ahead and define some UI for that as below;

and that's just a simple ellipse with a path drawn through it as a Tick mark and another one as a Cross mark and then there's a content presenter below it. I want to control the visibility of the marks depending on whether the CheckBox is checked or not and so I can set them both to be Visibility=Hidden and then control the visibility from a trigger as in;

Now, I've drawn my UI here at a fixed scale and so I tend to wrap a Viewbox around it just to get it to scale up a little and then made sure that Viewbox is doing uniform scaling (its Stretch property).

With that in place I want to tweak a few more properties. Firstly, I want to make sure that my ListBox has its HorizontalScrollBarVisibility set to Disabled (I don't want horizontal scrolling here) and its VerticalScrollBarVisibility set to Hidden (I might want the list to scroll vertically but I don't want the scrollbar visible). I also set a margin around the Grid in the ListBox ItemTemplate so that it spaced itself out a little and finally I want to set the Foreground for the CheckBox to white.

With all that in place, running my app now gives me;

It's moving along a little bit. However, I'd like to make sure that whenever a feed item comes in I highlight search the relevant search term over in the ListBox on the left hand side. From a coding perspective this is easy as in;

    void OnFeedItemAvailable(object sender, AtomFeedItemAvailableEventArgs args)
    {
      Dispatcher.BeginInvoke(new Action(() =>
        {
          displayControl.DataContext = args.FeedItem;
          listSearchTerms.SelectedItem = args.SearchTerm;
          listSearchTerms.ScrollIntoView(args.SearchTerm);
        }));
    }

to highlight the right item in the ListBox. However, it raises this bit of ugliness;

in that the listbox selected item now has this funny white rectangle around it. I don't want that so how to get rid of it? This selection rectangle is actually placed over the top of this thing by the Item Container and so we need to go and find the style for that thing by editing the Item Container Style;

and then within there editing the template;

which shows that we have a border (and some triggers) wrapped around our ListBox item;

I don't want that behaviour so I deleted the various triggers and then just added a single new one for the IsSelected event which would give the Border a little BorderBrush and a little Background as in;

and so that means that my UI now looks like this as/when a feed item comes in ( the green background isn't "so great" but I get away with it );

so that's better than the white rectangle anyway. I also figure that it might be nice if these items did a little animation and grew/shrank as and when they were made the selected item so I threw in a scale transform on the border;

added an animation to make the item grow with some easing...

and then threw in another one called "shrink" which did the reverse and used these as part of my triggers;

and I'm reasonably happy with my ListBox at that point.

There are still a number of "issues" though that I'd like to take a look at - that'll be in the follow on post.

For now, I've put the project here for download in the state that tries to match up with this blog post.

WPF and "Twistori": Part 4

mtaulty — Wed, 19 Nov 2008 11:26:45 GMT

Following up on this post it's time to make the thing look a little bit better than it does right now. Some of this will be purely cosmetic, some of it will end up requiring some code changes.

In the first instance, I'll go for some "cheap wins". I'll open up Expression Blend with my project and, first off, I'll go and grab a Windows-themed wallpaper from www.hdwallpapers.net (in the Computer section) such as this one;

then I go to my project in Blend and add an existing item;

and add that Image into the project. Having done that, what I usually do is right mouse on it to insert it into the scene;

with the image in the scene, I make sure it's selected and then I used Tools->Make Brush Resource to create myself a new ImageBrush;

With that created, I go and delete the image from the scene (not from the project!) and then I can go to the Window and set its background to be the Image Brush I just created as in;

and so now I've got a nice(r) background.

From there, it'd be nice to style my ItemDisplayControl UserControl that I built in the last post. Opening up that XAML file in the project...

Aside - there's a bunch of useful short-cuts in Expression Blend. I recommend reading the help file but, generally, I find that CTRL++ and CTRL+- are useful for zooming in and out. Selecting something in the "Objects/Timeline" tree and then hitting CTRL+0 is great for zooming in to one particular element (especially for templates) and then F6 is useful for changing the views and TAB/F4 are useful for getting UI out of your way.

gives me something that looks like this;

and so our UserControl is just a Grid with a StackPanel that has an Image, TextBlock and then there's another TextBlock.

In the first instance, I want to add some kind of "header" behind that StackPanel which I'll do just by adding a Rectangle to the same Grid cell but I want it behind the StackPanel in the z-order as in;

and then I can give that rectangle a bit of colour by changing its background, its stroke, its RadiusX, RadiusY, its Margin all in the properties panel. One of the things to say here is that when making colours for Backgrounds, Strokes etc. it's useful to make them as resources in Blend;

so that you can then re-use them rather than trying to re-create them. Having given my rectangle a bit of a fill;

I also want to wrap a little Border around my Image and give it both a bit of a margin and a bit of a drop shadow. That is;

Then I can style that border by giving it a stroke ( I re-used the one from my rectangle above ), I can give it a little Margin ( say 10 pixels ) and then I can add an effect to it making it a DropShadowEffect and setting properties as below;

I'd also like to style my fonts so I can take the TextBlock which is representing the Author and is a child of the StackPanel and change its font family to Gungsuh, the size to 36, the vertical alignment to Center, the foreground to a near-white colour.

For my other TextBlock which displays the contents of the Tweet, I change the font family to Segoe Print, the foreground colour to a near-black and the font-size to 48.

Running my app, the UI currently looks like;

It's looking a bit better (highly subjective! :-)) but the background is merging with the text so I think it's time to give that grid on my user control a background of its very own and maybe to apply a little drop-shadow to it as well repeating what I did earlier.

With that in place, the UI now looks like;

Not too bad although it has a bunch of "problems" that I'll come back to later.

Enough of trying to "style" this ItemDisplayControl, I'll move on to trying to style the ListBox and the items that it contains in the next post.

WPF and "Twistori": Part 3

mtaulty — Wed, 19 Nov 2008 11:19:58 GMT

Following on from my previous post, I wanted to create a WPF UI around what I'd done so far.

I'll step through this one a little bit. Making a new project;

adding a reference to my library for using twitter feeds;

now I want my WPF Window to maximise itself on the screen and to be the topmost window so I'd play with settings to achieve that and change the Window title whilst I'm there (even if it's not displayed).

<Window x:Class="BlogPostTwistori.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Mike's Twistori-Like App"
    Topmost="true"
    WindowState="Maximized"
    WindowStyle="None">
    <Grid>
        
    </Grid>
</Window>

Now maximised windows can be a pain to debug so I'd probably switch off Topmost whilst I'm working on the code and also it'd be nice to have a way to get rid of the application by pressing the ESCape key. If WPF defined an ApplicationCommands.Exit command then I think you'd be able to do this without writing any code but I don't think it has such a command. So...we can create one;

  static class CustomCommands
  {
    static CustomCommands()
    {
      exitCommand = new RoutedCommand("Exit", typeof(CustomCommands));
    }
    public static RoutedCommand Exit
    {
      get
      {
        return (exitCommand);
      }
    }
    static RoutedCommand exitCommand;
  }

and then we can add a binding for it to our Window (notice that we're bringing the local code namespace into the XAML here, I tend to use the prefix local for that);

<Window
  x:Class="BlogPostTwistori.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Mike's Twistori-Like App"
  xmlns:local="clr-namespace:BlogPostTwistori"
  Topmost="false"
  WindowState="Maximized"
  WindowStyle="None">
  <Window.InputBindings>
    <KeyBinding
      Key="ESC"
      Command="{x:Static local:CustomCommands.Exit}" />
  </Window.InputBindings>
  <Window.CommandBindings>
    <CommandBinding
      Command="{x:Static local:CustomCommands.Exit}"
      Executed="OnExit" />
  </Window.CommandBindings>
  <Grid>

  </Grid>
</Window>

and then we can add a handler for it;

  public partial class Window1 : Window
  {
    public Window1()
    {
      InitializeComponent();
    }
    private void OnExit(object sender, ExecutedRoutedEventArgs e)
    {
      Application.Current.Shutdown();
    }
  }

and so now we have a Window which can be closed by pressing the ESCape key (alongside the usual ALT+F4 and so on).

Ok, so setting up our main window so that it gets some data from the Twitter feeds;

  public partial class Window1 : Window
  {
    public Window1()
    {
      InitializeComponent();

      this.Loaded += OnLoaded;
    }
    void OnLoaded(object sender, RoutedEventArgs e)
    {
      // TODO: Handle exceptions from config loading?
      SearchTermsConfiguration config = SearchTermsConfiguration.LoadFromConfig();

      feedManager = new AtomFeedManager(config, new TimeSpan(0, 0, 5));

      feedManager.FeedItemAvailable += OnFeedItemAvailable;
      feedManager.FeedItemUnavailable += OnFeedItemUnavailable;
    }
    void OnFeedItemAvailable(object sender, AtomFeedItemAvailableEventArgs args)
    {
    }
    void OnFeedItemUnavailable(object sender, AtomFeedItemUnavailableEventArgs args)
    {
    }
    void OnExit(object sender, ExecutedRoutedEventArgs e)
    {
      Application.Current.Shutdown();
    }
    AtomFeedManager feedManager;
  }

It would now be handy to have somewhere to display my list of search terms. Adding a ListBox and some grid columns to the UI;

<Window
  x:Class="BlogPostTwistori.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Mike's Twistori-Like App"
  xmlns:local="clr-namespace:BlogPostTwistori"
  Topmost="false"
  WindowState="Maximized"
  WindowStyle="None">
  <Window.InputBindings>
    <KeyBinding
      Key="ESC"
      Command="{x:Static local:CustomCommands.Exit}" />
  </Window.InputBindings>
  <Window.CommandBindings>
    <CommandBinding
      Command="{x:Static local:CustomCommands.Exit}"
      Executed="OnExit" />
  </Window.CommandBindings>
  <Grid
    x:Name="mainGrid">
    <Grid.ColumnDefinitions>
      <ColumnDefinition
        Width="0.2*" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ListBox
      Margin="10"
      ItemsSource="{Binding}"
      x:Name="listSearchTerms">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <CheckBox
              IsChecked="{Binding IsIncluded}"
              Content="{Binding Term}" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
  </Grid>
</Window>

and I need to make sure that my OnLoaded function (or something) sets up the DataContext for that ListBox that's called listSearchTerms as in this last line of code here;

    void OnLoaded(object sender, RoutedEventArgs e)
    {
      // TODO: Handle exceptions from config loading?
      SearchTermsConfiguration config = SearchTermsConfiguration.LoadFromConfig();

      feedManager = new AtomFeedManager(config, new TimeSpan(0, 0, 5));

      feedManager.FeedItemAvailable += OnFeedItemAvailable;
      feedManager.FeedItemUnavailable += OnFeedItemUnavailable;

      listSearchTerms.DataContext = config;
    }

Ok...so I have something that runs and displays UI;

and that UI is bound to the right properties underneath so that should all work nicely. When a feed item arrives, I need something to display it in so let's add a quick user control;

and let's throw a little bit of UI in there as well;

<UserControl
  x:Class="BlogPostTwistori.ItemDisplayControl"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition
        Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel
      Orientation="Horizontal">
      <Image
        Stretch="Fill"
        MaxWidth="96"
        MaxHeight="96"
        Source="{Binding AuthorImageUri}" />
      <TextBlock
        Text="{Binding Author}" />
    </StackPanel>
    <TextBlock
      Grid.Row="1"
      TextWrapping="Wrap"
      Text="{Binding Title}" />
  </Grid>
</UserControl>

And I'll define one of these controls on my main UI as in;

<Window
  x:Class="BlogPostTwistori.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Mike's Twistori-Like App"
  xmlns:local="clr-namespace:BlogPostTwistori"
  Topmost="false"
  WindowState="Maximized"
  WindowStyle="None">
  <Window.InputBindings>
    <KeyBinding
      Key="ESC"
      Command="{x:Static local:CustomCommands.Exit}" />
  </Window.InputBindings>
  <Window.CommandBindings>
    <CommandBinding
      Command="{x:Static local:CustomCommands.Exit}"
      Executed="OnExit" />
  </Window.CommandBindings>
  <Grid
    x:Name="mainGrid">
    <Grid.ColumnDefinitions>
      <ColumnDefinition
        Width="0.2*" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ListBox
      Margin="10"
      ItemsSource="{Binding}"
      x:Name="listSearchTerms">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <CheckBox
              IsChecked="{Binding IsIncluded}"
              Content="{Binding Term}" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
    <local:ItemDisplayControl
      x:Name="displayControl"
      Grid.Column="1"
      HorizontalAlignment="Center"
      VerticalAlignment="Center" />
  </Grid>
</Window>

and then I just need to make sure that when a FeedItem arrives I set it as the DataContext for this user control as in;

    void OnFeedItemAvailable(object sender, AtomFeedItemAvailableEventArgs args)
    {
      Dispatcher.BeginInvoke(new Action(() =>
        {
          displayControl.DataContext = args.FeedItem;
        }));
    }

Note the switch to the dispatcher thread for this.

Ok...with that in place, I have a working application - ok, it looks like a complete bag of spanners but it's working;

Anyway...in the next post it'd be time to pop open Expression Blend and see if we can't make this look ever so slightly better.