Mike Taulty's Blog

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.

WPF and "Twistori": Part 2

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

Following on from the previous post, to get this work started I wanted to build a little library that supported what I wanted to do with the Twitter API.

There's probably already a .NET library out there but I didn't search for it and my needs were fairly small and specific.

The first thing that I wanted to do was to build a custom configuration file section to represent my configuration. In my configuration I wanted to be able to set;

The language to use for searching twitter
The set of search terms to search for. I wanted each search term to have the configuration options of;
1. On/Off - i.e. isIncluded when we do searching
2. Filter - i.e. I wanted to be able to filter to only include "positive" tweets, "negative" tweets, tweets that are explicitly either "positive" or "negative" and then "all" tweets.

I don't know what you do when you want a custom configuration file section but I know what I do. I use the Configuration File Section Designer which I wrote about here. If you don't use this designer then I guess that either;

You don't build custom configuration file sections in .NET. Fair enough.
You have a lot of spare time on your hands and don't like progress :-)

Seriously, it's brilliant and it's also a good example of what T4 templates can do for you.

And so...here's my "design" of my configuration file section or my .csd file;

what you can't see on the diagram is all the properties that are set on these items such as the code Namespace being SearchTermsConfig or that language is of type string and is required and so on and so forth.

What this ultimately gives me is a set of generated classes and, specifically, I can just write code like this;

    static void Main(string[] args)
    {
      SearchTermsConfiguration config = SearchTermsConfiguration.Instance;

      Console.WriteLine("language is {0}", config.language);

      foreach (SearchTerm term in config.SearchTerms)
      {
        Console.WriteLine("Term is {0}", term.Term);
        Console.WriteLine("IsIncluded is {0}", term.IsIncluded);
        Console.WriteLine("Filter is {0}", term.Filter);
      }
    }

against a config file like this;

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <configSections>
    <section name="searchTermsConfiguration"
             type="SearchTermsConfig.SearchTermsConfiguration,ConsoleApplication3"/>
  </configSections>

  <!-- Set language to "en", "fr", etc. -->

  <searchTermsConfiguration language="en">
    <searchTerms>
      <!-- isIncluded is a bool (true/false) which can be changed in the UI anyway -->
      <!-- filter is an enum which can be;
            Positive
            Negative
            PositiveAndNegative (not the same as "All" below)
            All
      -->
      <searchTerm term="Microsoft"
                  isIncluded="true"
                  filter="All"/>

      <searchTerm term="Windows"
                  isIncluded="true"
                  filter="All"/>

    </searchTerms>
  </searchTermsConfiguration>
</configuration>

and it just works :-) which is very cool. Ok, enough about the configuration section designer.

I didn't want to just use these classes inside the rest of my code so I wrote some companion classes such as this little enum to represent my simplistic filtering;

  [Flags]
  public enum SearchTermFilter
  {
    // Bit of a weird bitmask here. 0 means everything. Bits 1 and 2 filter it down.
    All                 = 0x0,
    Positive            = 0x1,
    Negative            = 0x2,
    PositiveAndNegative = 0x3,  // Only here so it can go in the config file.
  }

and this SearchTerm class which in many ways mimics what I have in the configuration file but adds some more things that'll be useful to me at a later point;

It's basically a class that can return the Term, whether it's currently valid (IsTermValid), whether it's currently in-use (IsTermIncluded), what the filter is (Filter, FilterIncludesNegative, FilterIncludesPositive) and the Uri that you need to use to hit Twitter to get an Atom feed for one of these things (AtomFeedUri).

I also wrote a little collection class which keeps hold of these SearchTerms for me and to load them from the configuration file (using the generated classes from the configuration section designer);

public class SearchTermsConfiguration : ObservableCollection<SearchTerm>
  {
    public static SearchTermsConfiguration LoadFromConfig()
    {
      SearchTermsConfiguration collection = new SearchTermsConfiguration();

      foreach (SearchTermsConfig.SearchTerm configItem in
        SearchTermsConfig.SearchTermsConfiguration.Instance.SearchTerms)
      {
        collection.Add(new SearchTerm()
        {
          Term = configItem.Term,
          IsIncluded = configItem.IsIncluded,
          Filter = 
            (SearchTermFilter)Enum.Parse(
              typeof(SearchTermFilter), configItem.Filter)
        });
      }
      return (collection);
    }
    public static string Language
    {
      get
      {
        return (SearchTermsConfig.SearchTermsConfiguration.Instance.language);
      }
    }
  }

and you can see in there that I "hide" the underlying generated classes such as SearchTermsConfig.SearchTerm in order to produce an ObservableCollection of my own SearchTerm class. You might also spot the string from the configuration file being turned into an instance of my SearchTermFilter enumeration.

With that in place, I need something that reads one of these Twitter feeds that correspond to a particular search term and so I wrote a little class called AtomFeedReader (bad name because it's more specific than the name implies). I won't include the whole source for it here but it looks like this and brings in another class with a bad name, AtomFeedItem;

The idea of this AtomFeedReader is that I construct it with a SearchTerm and then I can go and call DequeueTopItem. What it then does;

Checks its list of queuedItems to see if there is an AtomFeedItem at the top of that queue. If so, return it.
If not, begin an async download to hit Twitter, get the Atom feed for the search term, convert the items found there to AtomFeedItems and enqueue them hoping that someone will later call DequeueTopItem and then this time they'll get some data.

So...pretty simple stuff and AtomFeedReader is expected to be called on some kind of timer with the caller trying DequeueTopItem to see if anything's available. I'll come back to HasImageNeedingDownload at a later point as it's not obvious at all.

What I need now is a class to tie together multiple of these AtomFeedReader classes based on my configuration and poll them from time to time to see if they've got any interesting data. I wrote that class and it's not so big so I'll paste it here;

  public class AtomFeedManager
  {
    public event EventHandler<AtomFeedItemAvailableEventArgs> FeedItemAvailable;
    public event EventHandler<AtomFeedItemUnavailableEventArgs> FeedItemUnavailable;

    public AtomFeedManager(SearchTermsConfiguration searchTerms,
      TimeSpan timerInterval)
    {
      this.searchTerms = searchTerms;

      lastTimeOfFeedItem = DateTime.Now;
      
      currentIndex = new ModuloInt(searchTerms.Count);

      InitialiseReaders();

      OnTimerElapsed(null, null);

      timer = new Timer(timerInterval.TotalMilliseconds);
      timer.Elapsed += OnTimerElapsed;
      timer.Start();
    }
    void InitialiseReaders()
    {
      readers = new List<AtomFeedReader>();

      foreach (SearchTerm term in searchTerms)
      {
        readers.Add(new AtomFeedReader(term));
      }
    }
    void OnTimerElapsed(object sender, ElapsedEventArgs e)
    {
      int startIndex = currentIndex;
      AtomFeedReader reader = null;
      AtomFeedItem item = null;

      while (item == null)
      {
        reader = readers[currentIndex];
        item = reader.DequeueTopItem();

        currentIndex++;

        if (currentIndex == startIndex)
        {
          break;
        }
      }

      if (item != null)
      {
        lastTimeOfFeedItem = DateTime.Now;
      }

      if ((item != null) && (FeedItemAvailable != null))
      {
        FeedItemAvailable(this, new AtomFeedItemAvailableEventArgs()
        {
          SearchTerm = reader.SearchTerm,
          FeedItem = item
        });
      }
      else if ((item == null) && (FeedItemUnavailable != null))
      {
        FeedItemUnavailable(this, new AtomFeedItemUnavailableEventArgs()
        {
          UnavailableTime = DateTime.Now - lastTimeOfFeedItem 
        });
      }
    }
    List<AtomFeedReader> readers;
    SearchTermsConfiguration searchTerms;
    Timer timer;
    ModuloInt currentIndex;
    DateTime lastTimeOfFeedItem;
  }

You can see that it sets up a set of AtomFeedReader based on the SearchTermsConfiguration that's passed to it and then it ticks on a timer. On each timer tick, it goes to each AtomFeedReader and calls DequeueTopItem. It does this until any reader produces an item or until we've exhausted the set.

Then we fire one of two events - FeedItemAvailable or FeedItemUnavailable to notify any interested parties that we either found something interesting or we didn't. Those events either carry the details of the new AtomFeedItem that's become available or they carry a TimeSpan which says how long it is since we last saw a new AtomFeedItem from anywhere.

So...putting all these classes together into a library that I'll call TwitterAtomFeedLibrary I can go and write code against them like;

  class Program
  {
    static void WriteColour(ConsoleColor color,
      string formatString, params object[] args)
    {
      Console.ForegroundColor = color;
      Console.WriteLine(formatString, args);
      Console.ResetColor();
    }
    static void Main(string[] args)
    {
      // Load my configured search terms
      SearchTermsConfiguration config = SearchTermsConfiguration.LoadFromConfig();

      // Set up my feed manager on a 5 second interval
      AtomFeedManager feedManager = new AtomFeedManager(config, new TimeSpan(0, 0, 5));

      // Handle events
      feedManager.FeedItemAvailable += (s, e) =>
        {
          WriteColour(ConsoleColor.Yellow, "Feed item available for search term {0}",
            e.SearchTerm.Term);

          WriteColour(ConsoleColor.Green, "\tAuthor:{0}", e.FeedItem.Author);
          WriteColour(ConsoleColor.Green, "\tAuthor Image:{0}", e.FeedItem.AuthorImageUri);
          WriteColour(ConsoleColor.Green, "\tTitle: [{0}]", e.FeedItem.Title);
          WriteColour(ConsoleColor.Green, "\tPublished Date: {0}", e.FeedItem.PublishedDate.ToShortDateString());
        };

      feedManager.FeedItemUnavailable += (s, e) =>
        {
          WriteColour(ConsoleColor.Cyan, "No feed items available for {0} seconds",
            e.UnavailableTime.TotalSeconds);
        };

      // Sit back and relax
      Console.ReadLine();
    }
  }

and it throws out content like this from the Console;

Now that I've got this AtomFeedManager class and its friends like SearchTerm I can go and put a WPF UI onto them which is where I'll head in the next post.

Meanwhile, the sourcecode from this post (with the little test program code above) is all here for download.

WPF and "Twistori": Part 1

mtaulty — Wed, 19 Nov 2008 11:10:13 GMT

I don't really use Twitter but I'm surrounded by folks that do and I'm more and more aware of its impact as if you turn up to any kind of event or gathering these days then you'll know that someone will come along and say whether it's being reported well/badly in the various tweets that it's generating.

Because of this, I wasn't aware of "Twistori" but Marc pointed it out to me the other week and said that it'd be cool if we had an internal application that did something similar that we could maybe use to display on a plasma TV somewhere or perhaps on a projector.

So, I set about building something simple with WPF that uses the Twitter (RESTful) API ( I stress that word "simple" as I didn't really want to go off into days and days of effort :-) and so I thought I'd share that here.

Ultimately, the application ended up looking like this;

and it has an application configuration file that looks like this;

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <configSections>
    <section name="searchTermsConfiguration"
             type="SearchTermsConfig.SearchTermsConfiguration,TwitterAtomFeedLibrary"/>
  </configSections>
  
  <!-- Set language to "en", "fr", etc. -->
  
  <searchTermsConfiguration language="en">
    <searchTerms>
      <!-- isIncluded is a bool (true/false) which can be changed in the UI anyway -->      
      <!-- filter is an enum which can be;
            Positive
            Negative
            PositiveAndNegative (not the same as "All" below)
            All
      -->
      <searchTerm term="Microsoft"
                  isIncluded="true"
                  filter="All"/>

      <searchTerm term="Windows"
                  isIncluded="true"
                  filter="All"/>

    </searchTerms>
  </searchTermsConfiguration>
</configuration>

which drives what it does which is, essentially;

Wake up every N seconds
Visit the next search term in the list up on the left (Microsoft, Windows, etc) that has flagged itself as being active
Check to see if we have some stored ATOM items for that search term. If not, go grab up some of those things from Twitter and move to the next term whilst they download asynchronously
Once we find an ATOM item, display it in the area on the right of the screen and highlight which search term it relates to in the listbox on the left hand side of the screen.

so, it's pretty simple and the UI largely involves a ListBox, some CheckBoxes, some TextBlocks, an Image and a few layout panels and animations.

Note that the background image is taken from www.hdwallpapers.net so I'm not sure whether I should really be distributing it like this and I'll take it out if someone asks me to.

Here's the app for download. All bugs mine (of course) and I know there's one or two in there. The next post will start to look at putting something very similar to this together.

Windows 7: Starting at the Beginning

mtaulty — Tue, 11 Nov 2008 17:51:52 GMT

My previous post around the location and sensor platform in Windows 7 came a little bit out of context so apologies for that although I have since watched the PDC session and it's well worth watching.

However...if you want to start at the beginning with Windows 7 then there's the Developer Guide which you can download from here;

Developer Guide

and you should also make sure that you're subscribed to Yochay's blog which is up here;

The Windows 7 Blog for Developers