El color dels somnis

Five Minute Silverlight 5 Aides-Memoire #4 – Mouse Click Count

2011-04-21T18:34:00.001+01:00

Rainbow Rectangle
 <Rectangle Width="154"
           Height="77"
           MouseLeftButtonDown="RectangleMouseLeftButtonDown">
    <Rectangle.Fill>
        <LinearGradientBrush x:Name="GradientFill" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Offset="0" Color="Red" />
            <GradientStop Offset="0.1667" Color="Orange" />
            <GradientStop Offset="0.334" Color="Yellow" />
            <GradientStop Offset="0.5001" Color="Green" />
            <GradientStop Offset="0.6668" Color="Blue" />
            <GradientStop Offset="0.8335" Color="Indigo" />
            <GradientStop Offset="1" Color="Violet" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="ClickCountTextBlock"
           Foreground="White"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
           FontSize="40"
           Opacity="0.4"
           Text="" />
 

Click Count in MouseEventArgs
 private void RectangleMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.ClickCountTextBlock.Text = e.ClickCount.ToString();
    var topLeft = new Point(0, 0);
    var topRight = new Point(1, 0);
    var bottomLeft = new Point(0, 1);
    var bottomRight = new Point(1, 1);
 
    switch (e.ClickCount)
    {
        case 2:
            this.GradientFill.StartPoint = topRight;
            this.GradientFill.EndPoint = bottomLeft;
            break;
        case 3:
            this.GradientFill.StartPoint = bottomRight;
            this.GradientFill.EndPoint = topLeft;
            break;
        case 4:
            this.GradientFill.StartPoint = bottomLeft;
            this.GradientFill.EndPoint = topRight;
            break;
        default:
            this.GradientFill.StartPoint = topLeft;
            this.GradientFill.EndPoint = bottomRight;
            break;
    }
}
 

Technorati Tags: .NET,Silverlight,Silverlight 5 Beta,C#,Double-Click,Triple-Click,ClickCount

Five Minute Silverlight 5 Aides-Memoire #3 – Out-of-Browser Native Windows

2011-04-21T17:34:00.001+01:00

Native Window creation in code
 private void ButtonClick(object sender, RoutedEventArgs e)
{
    if (!Application.Current.IsRunningOutOfBrowser)
    {
        return;
    }
 
    var newGrid = new Grid
    {
        Background = new SolidColorBrush(Colors.White),
        HorizontalAlignment = HorizontalAlignment.Stretch,
        VerticalAlignment = VerticalAlignment.Stretch
    };
 
    var newTextBlock = new TextBlock
    {
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Center,
        Text = "New TextBlock in a new Window..."
    };
 
    newGrid.Children.Add(newTextBlock);
 
    new Window { Content = newGrid, Visibility = Visibility.Visible, Width = 300, Height = 300 };
}
 

Technorati Tags: .NET,Silverlight,Silverlight 5 Beta,C#,Native Window

Five Minute Silverlight 5 Aides-Memoire #2 – Implicit DataTemplates

2011-04-20T10:13:00.001+01:00

Data Classes
 /// <summary>
/// The cartoon character.
/// </summary>
public class CartoonCharacter
{
    /// <summary>
    /// Gets or sets the forename.
    /// </summary>
    /// <value>The forename.</value>
    public string Forename { get; set; }
}
 
/// <summary>
/// The flintstone.
/// </summary>
public class Flintstone : CartoonCharacter { }
 
/// <summary>
/// The griffin.
/// </summary>
public class Griffin : CartoonCharacter { }
 
/// <summary>
/// The simpson.
/// </summary>
public class Simpson : CartoonCharacter { }
 

XAML
 <Grid x:Name="LayoutRoot"
      Background="White">
    <Grid.Resources>
        <Style x:Key="SimpsonStyle"
               TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Comic Sans MS" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="FontStyle" Value="Italic" />
        </Style>
        <DataTemplate DataType="this:Simpson">
            <Border Background="Yellow">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource SimpsonStyle}"
                               Text="{Binding Forename}" />
                    <TextBlock Margin="5,0,0,0"
                               Style="{StaticResource SimpsonStyle}"
                               Text="Simpson" />
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate DataType="this:Flintstone">
            <Border Background="Orange">
                <Border.RenderTransform>
                    <TransformGroup>
                        <SkewTransform AngleX="-20" />
                        <ScaleTransform ScaleX="2"
                                        ScaleY="0.75" />
                        <TranslateTransform X="30" />
                    </TransformGroup>
                </Border.RenderTransform>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Forename}" />
                    <TextBlock Margin="5,0,0,0"
                               Text="Flintstone" />
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate DataType="this:Griffin">
            <Border BorderBrush="DarkSlateBlue" BorderThickness="2">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Forename}" FontSize="18">
                        <TextBlock.Effect>
                            <BlurEffect />
                        </TextBlock.Effect>
                    </TextBlock>
                    <TextBlock Margin="5,0,0,0"
                               FontSize="22" CharacterSpacing="5"
                               Text="Griffin">
                        <TextBlock.Effect>
                            <DropShadowEffect />
                        </TextBlock.Effect>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Grid.Resources>
    <ListBox x:Name="CartoonCharactersListBox"
             Margin="50,20"
             BorderBrush="Blue"
             BorderThickness="2"
             ItemsSource="{Binding}" />
</Grid>
 

Yeugh!!

Technorati Tags: .NET,Silverlight,Silverlight 5 Beta,XAML,Style,Binding,DataTemplate

Five Minute Silverlight 5 Aides-Memoire #1 – Style Setter Binding

2011-04-20T06:39:00.001+01:00

Code Snippet
 <Grid x:Name="LayoutRoot"
      Background="White">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.Resources>
        <Style x:Key="VariableFontTextBlockStyle"
               TargetType="TextBlock">
            <Setter Property="Foreground" Value="DarkOrange" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="{Binding ElementName=FontSizeSlider, Path=Value}" />
        </Style>
    </Grid.Resources>
    <TextBlock x:Name="SampleTextBlock"
               Grid.Row="0"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Style="{StaticResource VariableFontTextBlockStyle}"
               Text="No Mr Bond - I expect you to die" />
    <Slider x:Name="FontSizeSlider"
            Grid.Row="1"
            MaxWidth="500"
            Margin="100,30"
            Maximum="64"
            Minimum="8"
            Value="12" />
</Grid>
 

Technorati Tags: .NET,Silverlight,Silverlight 5 Beta,XAML,Style,Binding

Building Silverlight Chord Factory: Part 3 – The View and Windows Phone 7

2011-04-15T13:49:00.001+01:00

Despite my good intentions, it’s been a year since I posted the second part of my set of posts on Building Silverlight Chord Factory (see Part 1 and Part 2). The third part – on the View in the Model-View-ViewModel (MVVM) triptych has been a bit delayed, mainly by work and other pressures, but also by my attention being diverted by the arrival of Windows Phone 7 (WP7).

My practice of exploring new development platforms and languages by converting my hobby project – the Openfeature Chord Factory – kicked in and the application got yet another transformation. Which worked out quite well as it illustrated some of the power and benefits of the MVVM pattern. Converting the Silverlight Chord Factory code to WP7 Silverlight code was pretty simple and the main area of change – the View – was nicely isolated from the remaining code allowing the XAML markup to be adapted to the WP7 Control Toolkit easily and the custom controls in the app to work with virtually no modifications for the new platform.

So now this belated post can be both a look at the original View and at the adaptions involved in moving the app to the WP7 platform.

Here are a few screenshots of the Silverlight application in a couple of incarnations, running in a browser:

Note the unfinished musical stave controls…

Screenshots of Silverlight ChordFactory application

And here are screenshots of the Wp7 application:

Screenshots of WP7 app

Leaving aside my relative lack of UI/UX design capability, you can see that basically the User Experience is the same for both versions of the ChordFactory app. And in some of the UI itself the styling is exactly the same – the keyboard keys for example.

In fact I was able to reuse large chunks of the Openfeature Silverlight music controls (Keyboard, Octave and PianoKey controls) that I developed for the browser app because they consist of generic, compatible XAML markup and C# code. The Views in either case are of course nothing more than the markup/styling with bindings to the appropriate data sources in the ViewModel. With the Model and ViewModel classes being completely platform independent, they needed no redevelopment at all.

So I was able to get the WP7 ChordFactory app up and running in not much more than an easy afternoon of working on it. The majority of the work required lay in adding XNA code to play piano note samples added to the app so that the user can hear the selected chord or scale. Something I couldn’t do as easily with the browser version and hadn’t got around to implementing with MediaElements. Registering with the App Hub and submitting the app took a few trips back and forth to cross all the ‘Ts’ and dot all the ‘Is’, but the app is now live here:

Openfeature ChordFactory

Technorati Tags: WP7,Window Phone 7,C#,Silverlight,Chord,Music,Piano,XAML

Building Silverlight Chord Factory: Part 2 – The ViewModel

2010-04-13T15:54:00.001+01:00

This is part 2 in my series of posts on building the latest MVVM incarnation of my ChordFactory hobby project; in Part 1 I discussed modelling musical chord and scale data in XML – the Model in the MVVM (Model-View-ViewModel) pattern. In this post I will look at the next part of the pattern – the ViewModel.

Loading the data

In the MVVM pattern, data is held in properties of the ViewModel to allow the Views to data-bind UI elements directly onto those properties. In the ChordFactory application, the mechanics of loading the data from the XML and building the Chords and Scales collections to supply the View-Model are implemented using the Repository pattern with individual repository classes, deriving from a repository base class, for the Chords and the Scales collections. These classes implement private static methods to load their respective data and then surface the collections retrieved via public methods that return ObservableCollections of Chords and Scales respectively.

REPOSITORY BASE CLASS
 public class RepositoryBase
{
    protected static Stream GetResourceStream(string resourceFile)
    {
        Uri uri = new Uri(resourceFile, UriKind.RelativeOrAbsolute);
 
        StreamResourceInfo info = Application.GetResourceStream(uri);
        if (info == null || info.Stream == null)
            throw new ArgumentException("Missing resource file: " + resourceFile);
 
        return info.Stream;
    }
}
 

CHORD REPOSITORY
 public class ChordRepository : RepositoryBase
{
    private readonly ObservableCollection<Chord> observableChords = new ObservableCollection<Chord>();
 
    public ChordRepository(string chordDataFile)
    {
        LoadChords(chordDataFile).ForEach(observableChords.Add);
    }
 
    private static List<Chord> LoadChords(string chordDataFile)
    {
        using (Stream stream = GetResourceStream(chordDataFile))
        using (XmlReader xmlRdr = XmlReader.Create(stream))
            return (from chordElem in XDocument.Load(xmlRdr).Element("Chords").Elements("Chord")
                    select
                        Chord.CreateChord((string) chordElem.Element("Description"),
                                          chordElem.Element("NoteList").Elements("NoteIndex").Select(
                                              x => int.Parse(x.Value)).ToList())).ToList();
    }
 
    public ObservableCollection<Chord> GetChords()
    {
        return observableChords;
    }
}
 

SCALE REPOSITORY
 public class ScaleRepository : RepositoryBase
{
    private readonly ObservableCollection<Scale> observableScales = new ObservableCollection<Scale>();
 
    public ScaleRepository(string scaleDataFile)
    {
        LoadScales(scaleDataFile).ForEach(observableScales.Add);
    }
 
    private static List<Scale> LoadScales(string scaleDataFile)
    {
        using (Stream stream = GetResourceStream(scaleDataFile))
        using (XmlReader xmlRdr = XmlReader.Create(stream))
            return (from ScaleElem in XDocument.Load(xmlRdr).Element("Scales").Elements("Scale")
                    select
                        Scale.CreateScale((string)ScaleElem.Element("Description"),
                                          ScaleElem.Element("NoteList").Elements("NoteIndex").Select(
                                              x => int.Parse(x.Value)).ToList())).ToList();
    }
 
    public ObservableCollection<Scale> GetScales()
    {
        return observableScales;
    }
}
 

Data in the ViewModel

The ViewModel uses the Repositories to load the data and provides it as bindable collections together with other bindable properties such as the currently selected items in the collections and implementation of change notification so that bound UI can respond to updates in the ViewModel.

CHORDS VIEW-MODEL
 public class ChordsViewModel : INotifyPropertyChanged
{
    private readonly ObservableCollection<Chord> chords;
    private readonly ObservableCollection<Scale> scales;
    private List<int> selectedChord;
    private List<int> selectedScale;
    private RootNotes rootNote;
    private Inversion inversion;
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    private readonly List<Inversion> inversions = new List<Inversion>
                                                      {
                                                          Inversion.Basic,
                                                          Inversion.First,
                                                          Inversion.Second,
                                                          Inversion.Third,
                                                          Inversion.Fouth
                                                      };
 
    
    public ChordsViewModel()
    {
        chords = new ChordRepository("/Openfeature.ChordFactory;component/Data/chords.xml").GetChords();
        scales = new ScaleRepository("/Openfeature.ChordFactory;component/Data/scales.xml").GetScales();
    }
 
    public ObservableCollection<Chord> Chords
    {
        get { return chords; }
    }
 
    public ObservableCollection<Scale> Scales
    {
        get { return scales; }
    }
 
    public List<Inversion> Inversions { get { return inversions; } }
 
    public List<int> SelectedChord
    {
        get { return selectedChord; }
        private set
        {
            selectedChord = value;
            OnPropertyChanged("SelectedChord");
        }
    }
 
    public List<int> SelectedScale
    {
        get { return selectedScale; }
        private set
        {
            selectedScale = value;
            OnPropertyChanged("SelectedScale");
        }
    }
 
    public Inversion Inversion
    {
        get { return inversion; }
        set
        {
            inversion = value;
            OnPropertyChanged("Inversion");
        }
    }
 
    public RootNotes RootNote
    {
        get { return rootNote; }
        set
        {
            rootNote = value;
            OnPropertyChanged("RootNote");
        }
    }
 
    public void ChordSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        SelectedChord = ((Chord)e.AddedItems[0]).Notes;
    }
 
    public void InversionSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        Inversion = (Inversion)e.AddedItems[0];
    }
 
    public void RootNoteChanged(object sender, SelectionChangedEventArgs e)
    {
        RootNote = (RootNotes)e.AddedItems[0];
    }
 
    public void ScaleSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        SelectedScale = ((Scale)e.AddedItems[0]).Notes;
    }
 
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
 

Technorati Tags: .NET,C#,Chord,CodePlex,MVVM,Music,Piano,Scale,Silverlight,XAML

The Chords and Scales collection properties of the ViewModel are bound to UI elements, (initially ComboBoxes – UI/UX enhancement will have to come later), and their SelectionChanged events wired back to the ViewModel using the CallDataMethod behaviour from the excellent Expression Blend Samples on Codeplex:

COLLECTION PROPERTIES BINDINGS
 <StackPanel x:Name="BoundData" Orientation="Horizontal" Margin="10,10,10,20" >
    <ComboBox x:Name="ChordsList" ItemsSource="{Binding Chords}" DisplayMemberPath="Description" Margin="10,0">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <si:CallDataMethod Method="ChordSelectionChanged" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </ComboBox>
    <ComboBox x:Name="ScalesList" ItemsSource="{Binding Scales}" DisplayMemberPath="Description" Margin="10,0">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <si:CallDataMethod Method="ScaleSelectionChanged" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </ComboBox>
    <ComboBox x:Name="InversionsList" Margin="10,0" ItemsSource="{Binding Inversions}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <si:CallDataMethod Method="InversionSelectionChanged" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </ComboBox>
</StackPanel>
 

The ViewModel handles selection changes and sets its SelectedChord and SelectedScale properties appropriately. The piano keyboard which displays the notes from the selected chord and scale is written as a Silverlight Control and it too has SelectedChord and SelectedScale properties; these bind to the properties on the ViewModel with the same name. The keyboard control also responds to left-mouse clicks in order to allow the selection of the root note of the chord or scale.

So now I have my data loaded and in a bindable ViewModel, creating a user interface in XAML to represent it to the user of the Silverlight ChordFactory is next, together with some stuff about testing. That’s for part 3.

Building Silverlight Chord Factory: Part 1 – The Data Model

2010-03-05T07:25:00.024Z

Back in November 2008 I posted about converting my reference app Chord Factory to Silverlight – Chord Factory is a piano chord finder utility that I wrote years ago and I have been porting from one development platform to the next as a series of protracted learning exercises ever since. It started out as a VB6 WinForms app and has been through various .NET incarnations since. The Silverlight version went through partially complete Silverlight 2.0 and 3.0 versions in a fairly monolithic architecture and I always meant to produce a few posts about the code once I had it complete and had a published version on my website.
But before I had managed that (see the most recent incomplete version here) I became interested in overhauling the component design and re-architecting it as another learning exercise, this time to help me work through the concepts of producing loosely-coupled component designs using MVC/MVVM patterns and looking at concerns like unit testing & testability together with an attempt at expressing the data structures involved in XML.
I long since gave up trying to make the UI pretty – whilst I think I can distinguish good UI/UX from bad I am no designer, but I have managed to produce something that fits some of the MVVM principles and allowed me to understand how MVVM works and makes for testable components and clean data-binding. And before I get distracted again and feel the urge to overhaul the code again and douse everything in MEF, it is time for those long-delayed posts.

Representing note sequences as data

Without straying too much into music theory, chords and musical scales are basically sequences of notes – the 8 notes in a scale (e.g. the scale of C Major: C-D-E-F-G-A-B-C) or the 3, 4 or more notes in a chord (e.g. the chord of C Major: C-E-G) can be stored and positions or offsets in a sequence. However the progressive sequence is measured in pitch-steps of semitones from the starting note i.e. including the black notes (looking at the piano keyboard, the semitone sequence starting from the note C is: C, C#, D, Eb, E, F, F#, G, Ab, A, B, C, C#, D, Eb… and so on up the keyboard). So to store the sequence for the scale of C Major we need to store offsets for the 1st, 3rd, 5th, 6th, 8th, 10th, 11th and 12th semitones, and for the chord of C Major we need to store the offsets for the 1st, 5th and 7th. With this information for a scale or a chord we have the means to select or highlight on the UI representation of our piano keyboard the notes that make it up, starting at the base or root note – C in the previous examples.
We can now store these sequences of offsets for all the standard scales and chords that musicians have come up with and use them to produce representations of any variation from a particular root note. An XML schema for these sequences is simple to produce:

CHORD DATA SCHEMA
       <?xml version="1.0" encoding="utf-8"?> 
<xs:schema targetNamespace="http://tempuri.org/XMLSchema.xsd" 
           elementFormDefault="qualified" 
           xmlns="http://tempuri.org/XMLSchema.xsd" 
           xmlns:mstns="http://tempuri.org/XMLSchema.xsd" 
           xmlns:xs="http://www.w3.org/2001/XMLSchema"> 
  <xs:element name="ChordFactoryData"> 
    <xs:complexType> 
      <xs:sequence> 
        <xs:element name="Chords" type="Chords" /> 
        <xs:element name="Scales" type="Scales" /> 
      </xs:sequence> 
    </xs:complexType> 
  </xs:element> 
  <xs:complexType name="Chords"> 
    <xs:sequence> 
      <xs:element name="Chord" minOccurs="1" maxOccurs="unbounded" type="NoteSequence" /> 
    </xs:sequence> 
  </xs:complexType> 
  <xs:complexType name="Scales"> 
    <xs:sequence> 
      <xs:element name="Scale" minOccurs="1" maxOccurs="unbounded" type="NoteSequence" /> 
    </xs:sequence> 
  </xs:complexType> 
  <xs:complexType name="NoteSequence"> 
    <xs:sequence> 
      <xs:element name="SequenceType" type="SequenceType" maxOccurs="1" minOccurs="1" /> 
      <xs:element name="Description" type="xs:string" maxOccurs="1" minOccurs="1" /> 
      <xs:element name="NoteList" type="NoteList" maxOccurs="1" minOccurs="1" /> 
    </xs:sequence> 
  </xs:complexType> 
  <xs:complexType name="NoteList"> 
    <xs:sequence> 
      <xs:element name="NoteIndex" type="xs:int" minOccurs="1" maxOccurs="unbounded" /> 
    </xs:sequence> 
  </xs:complexType> 
  <xs:simpleType name="SequenceType"> 
    <xs:restriction base="xs:string"> 
      <xs:enumeration value="Chord" /> 
      <xs:enumeration value="Scale" /> 
    </xs:restriction> 
  </xs:simpleType> 
</xs:schema> 
     

The XML for a Major Chord would then look like this:

MAJOR CHORD
       <chords> 
  <chord> 
    <sequencetype>Chord</sequencetype> 
    <description>Major</description> 
    <notelist> 
      <noteindex>0</noteindex> 
      <noteindex>4</noteindex> 
      <noteindex>7</noteindex> 
    </notelist> 
  </chord> 
  
  ...more chords... 
  
</chords> 
     

and a Major Scale would look like this:

MAJOR SCALE
       <scales> 
  <scale> 
    <sequencetype>Scale</sequencetype> 
    <description>Major</description> 
    <notelist> 
      <noteindex>0</noteindex> 
      <noteindex>2</noteindex> 
      <noteindex>4</noteindex> 
      <noteindex>5</noteindex> 
      <noteindex>7</noteindex> 
      <noteindex>9</noteindex> 
      <noteindex>11</noteindex> 
      <noteindex>12</noteindex> 
    </notelist> 
  </scale> 
  
  ...more scales... 
  
</scales> 
     

Data Classes

In my MVVM implementation this Chord and Scale data is loaded into models that represent the Chord or the Scale and I can then produce collections of instances of all the Chords and Scales. Here are the simple models in C#:

DATA MODEL CLASSES
       public abstract class NoteSequence 
{ 
    public List<int> Notes { get; set; } 
    public string Description { get; set; } 
} 
  
public class Chord : NoteSequence 
{ 
    public static Chord CreateNewChord() 
    { 
        return new Chord(); 
    } 
  
    public static Chord CreateChord(string description, List<int> notes) 
    { 
        return new Chord 
        { 
            Notes = notes, 
            Description = description 
        }; 
    } 
  
    protected Chord() { } 
} 
  
public class Scale : NoteSequence 
{ 
    public static Scale CreateNewScale() 
    { 
        return new Scale(); 
    } 
  
    public static Scale CreateScale(string description, List<int> notes) 
    { 
        return new Scale 
        { 
            Notes = notes, 
            Description = description 
        }; 
    } 
  
    protected Scale() { } 
} 
     

In implementation, the Chord and Scale classes are no different and it could be argued that the respective data could be loaded into two collections of the more general NoteSequence class (which would have to be changed from its current abstract incarnation of course); but I prefer to keep them as separate classes as they are logically different and might diverge in the future.

So I now represent my chord and scale data as XML and I have a straightforward model for instantiating it in data objects. The next stage is to load that data into a ViewModel using data access code that will deserialize the XML into the objects. That will be in part 2.

Five Minute Silverlight 4 Aides-Memoire #7 – IDataErrorInfo

2009-12-14T16:01:00.005Z

The XAML:

DATA INPUT
       <Grid x:Name="LayoutRoot"> 
  <Grid.Resources> 
    <local:Person x:Key="NewJoiner" Age="49" Forename="Fred" Surname="Flintstone" /> 
  </Grid.Resources> 
  <Grid DataContext="{StaticResource NewJoiner}"> 
    <Grid.ColumnDefinitions> 
      <columndefinition Width="1*" /> 
      <columndefinition Width="5*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
      <rowdefinition Height="50" /> 
      <rowdefinition Height="50" /> 
      <rowdefinition Height="50" /> 
    </Grid.RowDefinitions> 
    <Grid.Resources> 
      <Style TargetType="TextBlock"> 
        <setter Property="Margin" Value="10" /> 
        <setter Property="HorizontalAlignment" Value="Right" /> 
        <setter Property="VerticalAlignment" Value="Center" /> 
      </Style> 
      <Style TargetType="TextBox"> 
        <setter Property="Margin" Value="10" /> 
        <setter Property="Width" Value="154" /> 
        <setter Property="HorizontalAlignment" Value="Left" /> 
        <setter Property="VerticalAlignment" Value="Center" /> 
      </Style> 
    </Grid.Resources> 
    <TextBlock Text="First Name" Grid.Row="0" Grid.Column="0" /> 
    <TextBlock Text="Last Name" Grid.Row="1" Grid.Column="0" /> 
    <TextBlock Text="Age" Grid.Row="2" Grid.Column="0" /> 
    <textbox x:Name="Forename" Grid.Row="0" Grid.Column="1" Text="{Binding Forename, Mode=TwoWay, ValidatesOnDataErrors=True}" /> 
    <textbox x:Name="Surname" Grid.Row="1" Grid.Column="1" Text="{Binding Surname, Mode=TwoWay, ValidatesOnDataErrors=True}" /> 
    <textbox x:Name="Age" Grid.Row="2" Grid.Column="1" Text="{Binding Age, Mode=TwoWay, ValidatesOnDataErrors=True}" /> 
  </Grid> 
</Grid> 
     

The code:

IMPLEMENTATION
       public class Person : IDataErrorInfo 
{ 
    public string Forename { get; set; } 
    public string Surname { get; set; } 
    public int Age { get; set; } 
    public string Error { get { return null; } } 
  
    public string this[string columnName] 
    { 
        get 
        { 
            string error = null; 
            switch (columnName) 
            { 
                case "Forename": 
                    if (string.IsNullOrEmpty(Forename)) 
                        error = "Forename required"; 
                    break; 
                case "Surname": 
                    if (string.IsNullOrEmpty(this.Surname)) 
                        error = "Surname required"; 
                    break; 
                case "Age": 
                    if (this.Age < 0 || this.Age > 130) 
                        error = "Invalid Age"; 
                    break; 
            } 
            return error; 
        } 
    } 
} 
     

The result:

Five Minute Silverlight 4 Aides-Memoire #6 – Right Mouse Event Support

2009-12-14T12:23:00.003Z

<Popup x:Name="PopupMenu" IsOpen="False">
    <ListBox x:Name="MenuItems">
        <ListBoxItem Content="Item 1" />
        <ListBoxItem Content="Item 2" />
        <ListBoxItem Content="Item 3" />
        <ListBoxItem Content="Item 4" />
    </ListBox>
</Popup>

public MainPage()
{
    InitializeComponent();
    MouseRightButtonDown += (s, e) => e.Handled = true;
    MouseRightButtonUp += MainPage_MouseRightButtonUp;
    MenuItems.MouseLeftButtonUp += MenuItems_MouseLeftButtonUp;
}

void MainPage_MouseRightButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    this.PopupMenu.HorizontalOffset = e.GetPosition(this).X;
    this.PopupMenu.VerticalOffset = e.GetPosition(this).Y;
    this.PopupMenu.IsOpen = true;
}

void MenuItems_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    PopupMenu.IsOpen = false;
    System.Diagnostics.Debug.WriteLine(((sender as ListBox).SelectedItem as ListBoxItem).Content);
}

Five Minute Silverlight 4 Aides-Memoire #5 – Rich Text Area Control

2009-12-14T12:07:00.004Z

<RichTextArea x:Name="Editor">
    <RichTextArea.Blocks>
        <Paragraph>
            <Run Foreground="Blue" Text="This is "/>
            <Run Foreground="Red" FontWeight="Bold" Text="some sample " />
            <Run FontStyle="Italic" Text="text" />
        </Paragraph>
        <Paragraph>
            <Run Text="Here is "/>
            <Run TextDecorations="Underline" Text="some more" />
        </Paragraph>
    </RichTextArea.Blocks>
</RichTextArea>

void UnderlineSelection_Click(object sender, RoutedEventArgs e)
{
    var currentValue = this.Editor.Selection.GetPropertyValue(TextElement.TextDecorationsProperty);
    TextDecorationCollection setValue = TextDecorations.Underline;
    if (currentValue != DependencyProperty.UnsetValue)
        setValue = (TextDecorationCollection)currentValue == setValue ? null : setValue;
    this.Editor.Selection.SetPropertyValue(TextElement.TextDecorationsProperty, setValue);
}

void ItalicSelection_Click(object sender, RoutedEventArgs e)
{
    var currentValue = this.Editor.Selection.GetPropertyValue(TextElement.FontStyleProperty);
    FontStyle setValue = FontStyles.Italic;
    FontStyle defaultValue = FontStyles.Normal;
    if (currentValue != DependencyProperty.UnsetValue)
        setValue = (FontStyle)currentValue == setValue ? defaultValue : setValue;
    this.Editor.Selection.SetPropertyValue(TextElement.FontStyleProperty, setValue);
}

void BoldSelection_Click(object sender, RoutedEventArgs e)
{
    var currentValue = this.Editor.Selection.GetPropertyValue(TextElement.FontWeightProperty);
    FontWeight setValue = FontWeights.Bold;
    FontWeight defaultValue = FontWeights.Normal;
    if (currentValue != DependencyProperty.UnsetValue)
        setValue = (FontWeight)currentValue == setValue ? defaultValue : setValue;
    this.Editor.Selection.SetPropertyValue(TextElement.FontWeightProperty, setValue);
}

Five Minute Silverlight 4 Aides-Memoire #4 – Clipboard Access

2009-12-04T07:22:00.002Z

private void PopButton_Click(object sender, RoutedEventArgs e)
{
    var newPara = new Paragraph();

    newPara.Inlines.Add(new Run { Text = Clipboard.GetText() });

    this.rightRichTextArea.Blocks.Add(newPara);
}

private void PushButton_Click(object sender, RoutedEventArgs e)
{
    Clipboard.SetText(this.leftRichTextArea.Selection.Text);
}

Five Minute Silverlight 4 Aides-Memoire #3 – WebCam/Microphone Device Support

2009-12-01T21:07:00.005Z

<UserControl.Resources>
    <Style x:Key="ListBoxStyle" TargetType="ListBox">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Image Margin="5" Source="{Binding}" Stretch="UniformToFill" Height="80" VerticalAlignment="Center"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<StackPanel Grid.Row="2" Grid.Column="0">
    <Button Content="Start WebCam" Click="StartWebCam_Click" Height="30" />
    <Button Content="Snapshot" Click="Snapshot_Click" Height="30" />
</StackPanel>
<Rectangle Grid.Row="0" Stretch="Fill" Grid.Column="1" x:Name="CapturedImage" />
<ListBox Grid.Row="1" Margin="10" Grid.RowSpan="2" Grid.Column="1" x:Name="Snapshots" Style="{StaticResource ListBoxStyle}"/>

private void StartWebCam_Click(object sender, RoutedEventArgs e)
{
    if (!CaptureDeviceConfiguration.AllowedDeviceAccess & !CaptureDeviceConfiguration.RequestDeviceAccess())
        return;

    VideoBrush videoBrush = new VideoBrush();
    videoBrush.SetSource(captureSource);
    CapturedImage.Fill = videoBrush;
    this.Snapshots.ItemsSource = snaps;
    captureSource.Start();
}

private void Snapshot_Click(object sender, RoutedEventArgs e)
{
    captureSource.AsyncCaptureImage((image) => { snaps.Add(image); });
}

Five Minute Silverlight 4 Aides-Memoire #2 – Printing

2009-12-01T20:45:00.003Z

private void Print_Click(object sender, RoutedEventArgs e)
{
    PrintDocument printDoc = new PrintDocument();

    // Name that will show in the spooler...
    printDoc.DocumentName = "Directory Tree";
    printDoc.PrintPage += new EventHandler<PrintPageEventArgs>(printDoc_PrintPage);
    printDoc.Print();
}

private void printDoc_PrintPage(object sender, PrintPageEventArgs e)
{
    // Needs a UIElement (visual tree)
    e.PageVisual = DirectoriesTreeView;

    // Setting true will ensure PrintPage is called again for subsequent pages
    e.HasMorePages = false;
}

Five Minute Silverlight 4 Aides-Memoire #1 – Drag and Drop

2009-11-30T12:18:00.004Z

Build a hierarchical treeview of files and directories dropped from a Windows Explorer window. Requires elevated trust running out of browser to avoid security exceptions when accessing the directory information in the FileInfo objects returned from the e.Data.GetData call.

<Grid x:Name="LayoutRoot" AllowDrop="True" Drop="LayoutRoot_Drop">
    <my:TreeView x:Name="DirectoriesTreeView" Margin="50" Width="500" />
</Grid>

private void LayoutRoot_Drop(object sender, DragEventArgs e)
{
    if (!Application.Current.HasElevatedPermissions  e.Data == null)
        return;

    FileInfo[] fileInfos = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
    if (fileInfos == null)
        return;
    List<FileInfo> sortedList = new List<FileInfo>(fileInfos);

    sortedList.Sort((x, y) =>
    {
        if (x.Attributes == FileAttributes.Directory && y.Attributes != FileAttributes.Directory)
            return -1;
        if (y.Attributes == FileAttributes.Directory && x.Attributes != FileAttributes.Directory)
            return 1;
        return x.Name.CompareTo(y.Name);
    });

    foreach (FileInfo fileInfo in sortedList)
    {
        var newNode = new TreeViewItem { Header = fileInfo.Name };
        DirectoriesTreeView.Items.Add(newNode);
        if (!fileInfo.Exists)
            ProcessDirectory(fileInfo, newNode);
    }
}

private static void ProcessDirectory(FileSystemInfo fileSystemInfo, TreeViewItem currentNode)
{
    DirectoryInfo directoryInfo = new DirectoryInfo(fileSystemInfo.FullName);

    foreach (FileSystemInfo childFileSystemInfo in directoryInfo.EnumerateFileSystemInfos())
    {
        var newNode = new TreeViewItem { Header = childFileSystemInfo.Name };
        currentNode.Items.Add(newNode);
        if (childFileSystemInfo.Attributes == FileAttributes.Directory)
            ProcessDirectory(childFileSystemInfo, newNode);
    }
}

Silverlight 4

2009-11-18T23:41:00.003Z

Quite unexpectedly, at least I wasn’t expecting it, today saw the announcement of the first beta of Silverlight 4 at PDC09 in Los Angeles. Barely has version 3 made it out there, but we have a new beta to play with together with another rev of Blend to support it (and .NET 4 in general).
A quick run through the main features in the beta:

Printing – Full access to the regular print facilities of the host machine – the print dialog and print preview features – so long to all the writable bitmaps and HTML bridge hacks
Webcam/microphone support – Subject to UAC/user confirmation, you can now programmatically get access to connected devices, capture video, stills and audio input streams
A Rich TextBox control – the WPF RTF control makes its appearance in Silverlight – embed other UI Elements, control text Runs and other formatting such as Text Decorations
Clipboard Access – Programmatic access to the clipboard – again subject to UAC
Right Mouse Context Menus – Full control of a customisable context menu – add whatever you want to it and respond to selection events
Drag-Drop Drop-Target support Silverlight apps can now act as drag-drop drop-targets receiving file information for the dropped file object(s)
MVVM Commanding – Finally proper implementation of the ICommand interface – no longer a need to kludge it via bindings to helper classes
IDataErrorInfo/Validation support – Integration of the support for the IDataErrorInfo interface in Silverlight’s DataBinding giving a validation framework for input controls to leverage in consistently surfacing data input errors with asynchronous data validation
String Formatting in Binding Extensions – As with WPF, Silverlight has been retrofitted with improved formatting support in the binding extension to give better control over stuff like date, time and other formatting for locales and long and short formatting
Out of Browser improvements: HTML content - Hosting of HTML content within the Silverlight app; Notifications (aka toast) support; Elevated Trust (again via UAC) access to the My Documents, My Videos, My Pictures special folders; Cross domain access and Full keyboard access in Full Screen mode
Better tooling and integration of RIA/ADO Services/WCF/MEF

Lots to check out and try out – exciting stuff!

Five Minute Silverlight 3 Aides-Memoire #5 – Based on Styles

2009-08-11T07:26:00.001+01:00

    <UserControl.Resources>
        <Style x:Key="ColouredContentControlStyle" TargetType="ContentControl">
            <Setter Property="Height" Value="30" />
            <Setter Property="Width" Value="100" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="FontStyle" Value="Italic" />
        </Style>
        
        <Style x:Key="ColouredCheckBoxStyle" BasedOn="{StaticResource ColouredContentControlStyle}" TargetType="CheckBox">
            <Setter Property="Width" Value="154" />
        </Style>
        
        <Style x:Key="RedButtonStyle" BasedOn="{StaticResource ColouredContentControlStyle}" TargetType="Button">
            <Setter Property="Foreground" Value="Red" />
        </Style>
        <Style x:Key="GreenButtonStyle" BasedOn="{StaticResource ColouredContentControlStyle}" TargetType="Button">
            <Setter Property="Foreground" Value="Green" />
        </Style>
        <Style x:Key="YellowCheckBoxStyle" BasedOn="{StaticResource ColouredCheckBoxStyle}" TargetType="CheckBox">
            <Setter Property="Foreground" Value="Yellow" />
        </Style>
        <Style x:Key="OrangeRadioButtonStyle" BasedOn="{StaticResource ColouredContentControlStyle}" TargetType="RadioButton">
            <Setter Property="Foreground" Value="Orange" />
            <Setter Property="Width" Value="190" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <StackPanel Orientation="Vertical" Margin="20">
            <Button Style="{StaticResource RedButtonStyle}" Content="Red Button" />
            <CheckBox Style="{StaticResource YellowCheckBoxStyle}" Content="Yellow CheckBox" />
            <RadioButton Style="{StaticResource OrangeRadioButtonStyle}" Content="Orange RadioButton" />
            <Button Style="{StaticResource GreenButtonStyle}" Content="Green Button" />
        </StackPanel>
    </Grid>

Five Minute Silverlight 3 Aides-Memoire #4 – Merged Resource Dictionaries

2009-08-11T07:25:00.001+01:00

ButtonStyles.xaml:

<ResourceDictionary 
    x:Name="ButtonsStyles" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
    <Style x:Key="RedButton" TargetType="Button">
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Margin" Value="10" />
    </Style>
    <Style x:Key="GreenButton" TargetType="Button">
        <Setter Property="Foreground" Value="Green" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Margin" Value="10" />
    </Style>
</ResourceDictionary>

CheckBoxStyles.xaml:

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="CheckBoxStyles"
    >
    <Style x:Key="YellowCheckBox" TargetType="CheckBox">
        <Setter Property="Foreground" Value="Yellow" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Margin" Value="10" />
    </Style>
    <Style x:Key="OrangeCheckBox" TargetType="CheckBox">
        <Setter Property="Foreground" Value="Orange" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Margin" Value="10" />
    </Style>
</ResourceDictionary>

MainPage.xaml:

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ButtonStyles.xaml" />
            <ResourceDictionary Source="CheckBoxStyles.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>
    <StackPanel Orientation="Horizontal">
        <Button Grid.Row="0" Grid.Column="0" Style="{StaticResource RedButton}" Content="Red Button" />
        <Button Grid.Row="0" Grid.Column="1" Style="{StaticResource GreenButton}" Content="Green Button" />
        <CheckBox Grid.Row="1" Grid.Column="0" Style="{StaticResource YellowCheckBox}" Content="Yellow CheckBox" />
        <CheckBox Grid.Row="1" Grid.Column="1" Style="{StaticResource OrangeCheckBox}" Content="Orange CheckBox" />
    </StackPanel>
</Grid>

Five Minute Silverlight 3 Aides-Memoire #3 – Element-to-element binding

2009-08-06T20:36:00.001+01:00

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Image Grid.Column="0" HorizontalAlignment="Left" Margin="50,50,0,0" Width="200" Height="200" Source="OpenfeatureLizardSquare.jpg">
            <Image.Projection>
                <PlaneProjection x:Name="ImagePlaneProjection"/>
            </Image.Projection>
        </Image>
        <Slider Value="{Binding RotationX, Mode=TwoWay, ElementName=ImagePlaneProjection}" Grid.Row="1" Grid.Column="0" x:Name="XSlider" Minimum="-360" Maximum="360" Margin="50,10" />
        <Slider Value="{Binding RotationY, Mode=TwoWay, ElementName=ImagePlaneProjection}" Grid.Row="1" Grid.Column="1" x:Name="YSlider" Minimum="-360" Maximum="360" Margin="50,10" />
    </Grid>

Five Minute Silverlight 3 Aides-Memoire #2 – Pixel Effects

2009-08-05T21:16:00.001+01:00

    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Image HorizontalAlignment="Left" Grid.Column="0" Margin="50,50,0,0" Width="200" Height="200" Source="OpenfeatureLizardSquare.jpg">
            <Image.Effect>
                <BlurEffect Radius="15"/>
            </Image.Effect>
        </Image>
        <Image HorizontalAlignment="Left" Grid.Column="1" Margin="50,50,0,0" Width="200" Height="200" Source="OpenfeatureLizardSquare.jpg">
            <Image.Effect>
                <DropShadowEffect ShadowDepth="10"/>
            </Image.Effect>
        </Image>
    </Grid>

Five Minute Silverlight 3 Aides-Memoire #1 – 3D Projection

2009-08-05T21:04:00.001+01:00

    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Image HorizontalAlignment="Left" Margin="50,50,0,0" Width="200" Height="200" Source="OpenfeatureLizardSquare.jpg">
            <Image.Projection>
                <PlaneProjection RotationX="-25" RotationY="45"/>
            </Image.Projection>
        </Image>
    </Grid>

3D projections in Silverlight 3 Beta – part 2

2009-06-10T23:29:00.001+01:00

In my previous post on 3D projections in Silverlight 3 Beta, I created a basic PhotoCube that had images on the faces of a rotating cube created using the new 2D/3D PlaneProjection capabilities available in Silverlight 3.

I thought I’d do a bit more and add some animation to the cube’s rotation and also do away with the slider and rotate the cube using the mouse. I thought it would be nice if the cube rotated slowly all the time, regardless of any mouse interaction, so the first thing to do was to set up an animation to do that. Because I want to be able to manipulate this animation whilst the various mouse events are firing to allow me to control of the cube’s rotation independent of the ‘background’ rotation, I need to define it at the page level:

private Storyboard slowStoryboard;
readonly Dictionary<Image, double> yRotations = new Dictionary<Image, double>();
private double mouseStart;
private bool mouseIsDown;

public PhotoCubePage()
{
    InitializeComponent();

    SetUpRotations();
    slowStoryboard = CreateSlowRotation();
    slowStoryboard.Begin();
}

private Storyboard CreateSlowRotation()
{
    Storyboard newStoryboard = new Storyboard { Duration = new Duration(TimeSpan.FromSeconds(15)) };
    newStoryboard.RepeatBehavior = RepeatBehavior.Forever;

    foreach (var imageRotation in yRotations)
    {
        var animation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(15)), BeginTime = new TimeSpan(0) };
        newStoryboard.Children.Add(animation);
        Storyboard.SetTarget(animation, (imageRotation.Key.Projection as PlaneProjection));
        Storyboard.SetTargetProperty(animation, new PropertyPath("(PlaneProjection.RotationY)"));
        animation.To = imageRotation.Value + 360;
    }

    return newStoryboard;
}

private void SetUpRotations()
{
    foreach (Image image in ImageGrid.Children.Cast<Image>())
    {
        yRotations.Add(image, ((PlaneProjection)image.Projection).RotationY);
        image.MouseLeftButtonDown += ImageMouseLeftButtonDown;
        image.MouseLeftButtonUp += ImageMouseLeftButtonUp;
        image.MouseMove += ImageMouseMove;
    }
}

The animation is performed on each image as it will be for the mouse control, but a 15 second duration makes the cube turn slowly and I want a full rotation of 360 degrees. Setting the RepeatBehavior to Forever ensures that the animation doesn’t stop when it completes a complete rotation. The setup of the Dictionary of Images and their initial RotationY values has been moved to a method to tidy it up, and I now hook up the mouse events here as I need to respond to these on each image surface.

In the mouse down event I record the X-position of the mouse, pause the slow-moving animation and capture the mouse. In the mouse move event, I calculate the mouse movement in the Y-direction and do an rough calculation based on the width of a face of the cube and the amount of mouse movement, to decide on the animation of the faces of the cube which I feed into the cube animation method. In the mouse up event I release mouse capture and restart the slow rotation of the cube.

private void ImageMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    mouseStart = e.GetPosition(this).X;
    slowStoryboard.Pause();
    mouseIsDown = ((UIElement)sender).CaptureMouse();
}

private void ImageMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    mouseIsDown = false;
    ReleaseMouseCapture();
    slowStoryboard = CreateSlowRotation();
    slowStoryboard.Begin();
}

private void ImageMouseMove(object sender, MouseEventArgs e)
{
    if (mouseIsDown)
    {
        double mouseMovement = mouseStart - e.GetPosition(this).X;
        double rotation = mouseMovement / FrontImage.Width * 90;
        AnimateRotation(rotation, 1);
    }
}

private void AnimateRotation(double movement, double seconds)
{
    var duration = new Duration(TimeSpan.FromSeconds(seconds));
    var storyboard = new Storyboard { Duration = duration };

    foreach (var imageRotation in yRotations)
    {
        var animation = new DoubleAnimation { Duration = duration, BeginTime = new TimeSpan(10) };
        storyboard.Children.Add(animation);
        Storyboard.SetTarget(animation, (imageRotation.Key.Projection as PlaneProjection));
        Storyboard.SetTargetProperty(animation, new PropertyPath("(PlaneProjection.RotationY)"));
        animation.To = ((PlaneProjection)imageRotation.Key.Projection).RotationX + imageRotation.Value + movement;
        animation.EasingFunction = new ElasticEase { EasingMode = EasingMode.EaseOut, Oscillations = 3, Springiness = 6 };
    }

    storyboard.Begin();
}

Just so that all the code is shown, here is the fairly simple XAML for the page:

    <Grid x:Name="LayoutRoot" Background="DarkGray">
        <Grid x:Name="ImageGrid" >
            <Image x:Name="FrontImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/silverlight.jpg">
                <Image.Projection>
                    <PlaneProjection CenterOfRotationZ="-77" RotationY="0"/>
                </Image.Projection>
            </Image>
            <Image x:Name="LeftImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/OpenfeatureLizardSquare.jpg">
                <Image.Projection>
                    <PlaneProjection CenterOfRotationZ="-77" RotationY="90"/>
                </Image.Projection>
            </Image>
            <Image x:Name="BackImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Waterfall.jpg">
                <Image.Projection>
                    <PlaneProjection CenterOfRotationZ="-77" RotationY="180"/>
                </Image.Projection>
            </Image>
            <Image x:Name="RightImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Tulip.jpg">
                <Image.Projection>
                    <PlaneProjection CenterOfRotationZ="-77" RotationY="270"/>
                </Image.Projection>
            </Image>
        </Grid>
    </Grid>

The result is that the cube turns slowly whilst the mouse is not being used to manipulate it and while the mouse is used to drag it the cube responds with animated movement; I use one of the pre-canned easing functions to give the animation a ‘springy’ feeling at the end of each movement. Notice that the animation method calculates the move-to value for each animation by adding the original position of the image/face to the movement value AND the current value of the RotationY which has been affected by the slow rotation.

And here’s the result:

You may have noticed that although I have called the thing I am rotating a cube and in the first post there were actually six images, I have done away with the top and bottom of my cube in the latest mark-up. This is because they are not really visible whilst the ‘cube’ is rotating on just the Y-axis; I had intended to make it a proper cube and allow rotation along 2 axes (which would have given me full articulation of the cube, or even 3 – to allow me to move the cube in and out of the screen), but there is a problem when it comes to allowing movement in more that one direction.

The problem lies in the fact that once an image plane has been rotated along one axis, rotation in another one happens in relation to the original position, not the new one, so that the faces that become the sides of the cube, the back of the cube, the top and the bottom all need to be transformed in different ways to maintain the illusion of a solid shape in 3D space. For example, after the original Y-axis rotation to setup the cube’s sides and the X-axis rotation to setup the cube’s top and bottom, to rotate the cube along the X-axis, the sides need to be rotated along the Z-axis (i.e. the one that runs through their centre) and this assumes that they aren’t transformed further in the Y-axis themselves, by a slider or my attempts at animating them with mouse movement. In fact the maths for calculating the positions of the faces of the cube are quite complex; from dipping into Charles Petzold’s book: 3D Programming for Windows and quickly getting bogged down with quaternions and rotation matrices, it was clear the maths were beyond the scope of this post, so I chickened out and did away with the top and bottom of the cube and abandoned the notion of full articulation (for now). So we have ended up what might be better called a ‘PhotoPrism’ that rotates only along the Y-axis.

This new name did give me the idea for a further refinement of the cube: if the thing is a prism, there is no reason why it can’t have a variable number of faces, from 3 upwards – the maths for calculating the positioning and angles of rotation for the faces would be much easier.

Hmm, watch this space…

3D projections in Silverlight 3 Beta

2009-05-20T19:16:00.001+01:00

I had a quick play with the new Plane Projection feature in the Silverlight 3 beta. Like many others, my first experiments were with taking a rectangular image and flipping it around the X, Y & Z axes (these suffixes will be denoted by * for mentions of properties from now on to save typing the variants). It is useful to think of these as long poles running in the respective directions with objects being transformed around these ‘spindles’ using the Rotation* properties. The CenterOfRotation* properties allow a displacement from the centre of the axis so that an element traces a circle around an axis when rotated rather than flips on that axis, so:

        <Image Stretch="Uniform" Source="images/Tulip.jpg" Opacity="1" Height="154" Width="154">
            <Image.Projection>
                <PlaneProjection RotationY="120" />
            </Image.Projection>
        </Image>
        <Image Stretch="Uniform" Source="images/Leaves.jpg" Opacity="0.5" Height="154" Width="154">
            <Image.Projection>
                <PlaneProjection RotationY="240" />
            </Image.Projection>
        </Image>
        <Image Stretch="Uniform" Source="images/Leaves.jpg" Height="154" Width="154">
            <Image.Projection>
                <PlaneProjection RotationY="120" CenterOfRotationZ="100"/>
            </Image.Projection>
        </Image>
        <Image Stretch="Uniform" Source="images/Tulip.jpg" Height="154" Width="154">
            <Image.Projection>
                <PlaneProjection RotationY="240" CenterOfRotationZ="100" />
            </Image.Projection>
        </Image>
        <Path Data="M77,0 L77,154" Fill="#FF000000" StrokeThickness="1" Stroke="#FF000000" />

Produces the following:

The first 2 images rotate around the Y axis (I have added a Path line to mark its position and altered their opacity slightly to make things clearer), but the second 2 have had their Z positions (in and out of the screen, as it were) brought forward by 100 before being rotated around the Y axis. The grey background is the Grid that holds the images and you can see that the changes to the images’ projections can take them beyond their containing element.

Armed with this small amount of knowledge, I wanted to see if I could make a photocube and rotate it with animations or sliders so that the photos on all sides of the cube could be seen. Here’s the code:

<Grid.RowDefinitions>
    <RowDefinition Height="30" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="ControlsPanel" Grid.Row="0" Orientation="Horizontal">
    <TextBlock Text="Y Rotation : " Margin="2" VerticalAlignment="Center" />
    <Slider x:Name="YSlider" Margin="2" VerticalAlignment="Center" Minimum="0" Maximum="360" Width="150" Value="0" ValueChanged="YSlider_ValueChanged"/>
</StackPanel>
<Grid x:Name="ImageGrid" Grid.Row="1">
    <Image x:Name="FrontImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Front.png">
        <Image.Projection>
            <PlaneProjection CenterOfRotationZ="-77" RotationY="0"/>
        </Image.Projection>
    </Image>
    <Image x:Name="LeftImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Left.png">
        <Image.Projection>
            <PlaneProjection CenterOfRotationZ="-77" RotationY="90"/>
        </Image.Projection>
    </Image>
    <Image x:Name="BackImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Back.png">
        <Image.Projection>
            <PlaneProjection CenterOfRotationZ="-77" RotationY="180"/>
        </Image.Projection>
    </Image>
    <Image x:Name="RightImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Right.png">
        <Image.Projection>
            <PlaneProjection CenterOfRotationZ="-77" RotationY="270"/>
        </Image.Projection>
    </Image>
    <Image x:Name="TopImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Top.png">
        <Image.Projection>
            <PlaneProjection CenterOfRotationZ="-77" RotationX="90" />
        </Image.Projection>
    </Image>
    <Image x:Name="BottomImage" Visibility="Visible" Width="154" Height="154" Stretch="Fill" Source="Images/Bottom.png">
        <Image.Projection>
            <PlaneProjection CenterOfRotationZ="-77" RotationX="270" />
        </Image.Projection>
    </Image>
</Grid>

public partial class PhotoCubePage : Page
{
    readonly Dictionary<Image, double> yRotations = new Dictionary<Image, double>(6);
    
    public PhotoCubePage()
    {
        InitializeComponent();

        foreach (Image image in ImageGrid.Children.Cast<Image>())
        {
            yRotations.Add(image, ((PlaneProjection)image.Projection).RotationY);
        }
    }

    private void YSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        foreach (var imageRotation in yRotations)
        {
            ((PlaneProjection) imageRotation.Key.Projection).RotationY = imageRotation.Value + ((Slider) sender).Value;
        }
    }
}

Produces the following:

I used basic images with text on them so I could verify the positioning and rotation of the cube’s sides, but it looks nicer with some images:

Next time – some mouse handling to rotate the cube, some animation easing for the cube’s movement and why it is much harder to rotate the cube along more than one axis…

The new features in Silverlight 3 – 3D Projections

2009-03-19T21:52:00.001Z

Lots of interesting new stuff in the beta of Silverlight 3 – the 2D plane into 3D projection property that has been added to the UIElement class is obviously going to provide lots of opportunity to enhance control templates with mouse over and selected states in VSM. It is pretty easy to knock up a poor-man’s carousel type effect with a few buttons and a template with PlaneProjection transitions:

etc...
</ControlTemplate>

<Grid x:Name="LayoutRoot" Background="White" Width="400">
<Grid.Resources>
</Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button x:Name="Button1" Content="Fred" Grid.Column="0" Style="{StaticResource FlipButton}" />
    <Button x:Name="Button2" Content="Barney" Grid.Column="1" Style="{StaticResource FlipButton}" />
    <Button x:Name="Button3" Content="Wilma" Grid.Column="2" Style="{StaticResource FlipButton}" />
    <Button x:Name="Button4" Content="Betty" Grid.Column="3" Style="{StaticResource FlipButton}" />
    <Button x:Name="Button5" Content="Pebbles" Grid.Column="4" Style="{StaticResource FlipButton}" />
</Grid>

The key thing is to target the UIElement’s Projection.ProjectionPlane property and to animate its RotationX, RotationY and RotationZ properties to transform the 2D plane of the element in the X, Y & Z dimensions. Setting the CentreOfRotationX, CentreOfRotationY & CentreOfRotationZ properties determines when the movement ‘hinges’ and the rotations are in degrees from the normal, untransformed state (i.e. 0 degrees).

Five minutes obviously doesn’t make for a control – but interesting to play with the effect and I expect to see it crop up in many a control and Silverlight app in the future.

Great Minds…

2009-01-12T23:35:00.001Z

Having joined the millions of others who have downloaded and installed the Windows 7 beta recently, I noticed that one of the new features is the ability to have the desktop wallpaper change automatically at selectable intervals. This is functionality that I implemented in a little app that I wrote a few years ago as a bit of a C#.NET learning exercise and put up on my website. I called it the Openfeature WallpaperChanger and it is available here.

It allows you to pick a set of images to use as desktop wallpapers and set the interval after which the app will select the next one and make it the Windows wallpaper; it also allows you to randomise the order and set the tile/stretch options for filling the screen. I had always intended to rework it as a Vista gadget, but I guess there won’t be a need to if Microsoft are going to make the functionality a feature of the OS.

This is not the first time this has happened either – I had a hunt around but couldn’t find a copy of an app I wrote some time in the early 1990s which consisted of a 2-3 pixel wide UI bar that docked to one side of the Windows desktop and slide out to a larger surface when the mouse was moved over it to reveal a notepad icon, a printer icon and a wastepaper basket icon. Dragging files from the File Manager to the bar and dropping them on one of the icons would allow viewing, printing or deleting them. This was Windows 3/3.11 Workgroups and predated Windows 95 and the auto-hide taskbar by a year or two.

Now I’m not for a moment suggesting that Microsoft spies were snooping on my hobby developer activities on each of these occasions - the phrase “don’t flatter yourself, dear” comes to mind - but I do think certain ideas have their time and emerge spontaneously, meme-like, in more than one place at the same time.

And I guess anyway that there will be plenty of people who will claim that these sorts of features were already in the Apple Mac OS for others to steal long before they appeared in Windows and there will be others still who don’t reckon much to UX features like auto-hide, or cycling wallpapers anyway so maybe “fools seldom differ”.

Creating a Chord Factory in Silverlight 2

2008-11-24T23:19:00.002Z

Years ago I created a Windows Forms application that displayed piano chords and musical scales graphically as a sort of pet project/learning exercise. It was written in VB6.0 (I said it was years ago) and contained an image of a piano keyboard and a musical stave. Selecting a root note, either by clicking a key or using a ComboBox, and picking a chord and/or scale, it would show the notes in the chord and/or scale on the keyboard and on the stave. It is still available for download here and will install and run under Vista - although as you can see from the image it fails to install the musical font used to display the clef symbols.

The Openfeature Chord Factory main screen. That should be a G rather than an O.

As well as showing chords it also harnessed the power of the Windows Multi Media API to play them using the MIDI synthesizer of the PC sound card or to an attached MIDI device. Over time I added further enhancements such as chord-inversions, chord progressions and a help file. I was and still am quite proud of it.

I recently decided to revisit Chord Factory after all these years and have a look at re-implementing it in Silverlight 2 - using XAML to achieve better graphical presentation of the piano keyboard and musical stave and data binding to better store and represent the musical data for the chord shapes and scales. I suspected that the lack of access to the Windows API would make it necessary to find another way of playing the chords, but thought the the Silverlight MediaElement might offer a way around this limitation.

It's not quite finished yet, but I thought it might make the subject of a few posts on how I did it and I'm starting with this one. I have done quite a bit on it so far and the work-in-progress is already up on the web at my Openfeature web site here.

More to come...

20 Tips for Producing Releasable Controls

2008-11-24T16:51:00.004Z

I thought I would publish the slides from the presentation I put together for last year's Developer Day, on producing releasable controls. It covered attributing and enhancing custom and user controls in order to get them to a level good enough for public or commercial release.

The slide deck is here, but I thought I might also elaborate a bit with a write-up of the hand-written notes I had for presenting.

The idea was to show how to bridge the gap between functional controls for WinForms, Web, WPF etc., that might be good enough for internal project use, and releasable ones that better support deployment and use in the Visual Studio toolbox with all the design-time support that makes a control easier and nicer to use. Simple attributes, extensions and practices that enhance a control to make it look and behave better when used by other developers.

The 20 tips are:

1. The Description Attribute, 2. The Category Attribute, 3. The Browsable Attribute - Use these simple attributes to decorate a control's properties to affect how (and whether) they appear in the property browser of Visual Studio.

4. The ToolboxBitmap Attribute - Add a 16x16 bitmap to your project and reference it using this attribute to avoid the default cog toolbox image.

5. The DefaultValue Attribute, 6. The ResetXxxx Method, 7. The ShouldSerializeXxxx Method - This is how you enable the Reset option in the context menu for a property in the property browser and govern how that property's state is serialized into the designer code for a control. If you want to provide the ability to reset a property, then you need a default to reset it to and if you have a default property, what is the point in serializing the value of that property for a control instance in a form or page, if the property's value is the same as the default. The DefaultValue attribute allows you to set a default (which must be a literal value) and the two methods allow you to get around the need for the default to be a literal value which is often the case where a property's type is an enumeration or a stored value (often resource strings localisation resources). Having implemented these methods, the designer will magically call them when providing the reset functionality for the property browser and when serializing the state of the control.

8. Extend the DefaultValue Attribute - This is a refinement of the above approach to getting around the literal restriction on using DefaultValue. Here you roll your own version of the attribute that can take arguments to allow resource retrieval for the default value rather than a literal.

9. The DefaultProperty Attribute, 10. The DefaultEvent Attribute - Determine which property is scrolled to and highlighted by default in the property browser and which event stub is generated when the control is double-clicked in the designer.

11. The ToolboxItemFilter Attribute - Used to restrict visibility of a control to particular designers in Visual Studio - if you use the Require value of the ToolboxItemFilterType enumeration then the control will only appear in the toolbox when that designer is open.

12. The Bindable Attribute, 13. Implement INotifyPropertyChanged - These help the IDE with hints for the property browser when displaying bindable properties - marking a property as bindable means that you have undertaken to have implemented property change notification for it and ensures that it is included in the list of default binding properties at the top of the property browser.

14. The setter value comparison pattern - This simple pattern helps avoid unnecessarily exercising setter code and erroneously firing property changed events, by checking that the new value is actually different to the old value.

15. The RefreshProperties Attribute - If a change in one of your properties has an effect on the display of others in the property browser or the control's appearance on the design surface then you can use this attribute to signal to the IDE that the property browser should re-query all the property values of the control and/or repaint the control in the designer.

16. Use Sandcastle - Microsoft now makes available the toolset it uses for generating the MSDN reference and help files from XML documentation comments in code. You can use Sandcastle to produce professional docs from your control's XML comments (which of course you should be providing for the sake of intellisense support and the IDE Object Browser).

17. Setup/Toolbox registration - This has perennially been an area of pain and confusion in the past and continues to be to this day. The links here point to sources of help, but the whole subject is inevitably bound up in permissions and issues with target machines and their configuration.

18. TypeConverter - Where your properties are not simple CLR types and the IDE does not know how to present and manage their values in the property browser you can supply one of the standard set of TypeConverters or indeed your own custom TypeConverter to help. In this example the property is a class instance with its own properties and using the ExpandableObjectConverter allows the IDE to know that it can 'drill-down' into the property to expose the property's own properties as an expanded list. TypeConverters specify to the IDE how to convert from a type to a string and back again so that the IDE knows how to serialise and present property values in the property browser window.

19. TypeEditor - Where a property is not easily entered as a string from the property browser a TypeEditor can be used to provide a UI for setting the property. The IDE already has TypeEditors for types such as Color where it will drop down a selector dialog with tabs for system, web and custom colour selection. You can write your own TypeEditors for custom display and editing of your properties and use the TypeEditor attribute to indicate to the IDE that the property has a special editor to display for setting its value.

20. Smart Tags - Common tasks for a control sited on the designer surface can be accessed via a little right-arrow icon if you supply a list of tasks using the smart tags support available in the Visual Studio IDE. The two books I name-check there Pro .NET 2.0 Windows Forms and Custom Controls by Matthew MacDonald and Windows Forms 2.0 Programming by Chris Sells and Michael Weinhardt contain good walkthroughs of how to set these up and provide the UI for them.

Organising Silverlight XAML Resources

2008-09-04T12:09:00.001+01:00

I recently had to work through a large number of XAML files and rationalise the use of styles in a medium-size Silverlight application.

The original files had been produced with Expression Blend, and although some effort had been put into reusing common features such as fonts and colours, the resulting XAML was a mixture of named styles used as static resources and inline setting of properties. There was also repetition of styles across files within the project both in name and in content.

Styles with the same key within a resource hierarchy will override each other with the definition nearest the element winning out and it is easy, unintentionally, to quickly accumulate styles with the same contents but different keys unless you're careful.

An obvious inclination in this sort of situation is to centralise everything and to eliminate all duplication in order to tidy up things up. Styles and other resources used in more than one page or control can be placed in the App.xaml file of an application and accessed as static resources from XAML across the project. In this way if a change is required to the house style, like changing to a new standard font or colour-scheme, a single change in the central resources and a recompile is all that is required for the changes to apply throughout the entire project. And don't forget that one resource can make use of another; so, for example, a font name can be declared as a named resource and all other style resources can reference it as a static resource:

<Sys:String x:Key="HouseFont">
  Verdana
</Sys:String>
<Sys:String x:Key="BigTextSize">
  56
</Sys:String>

<Style x:Key="BigButtonStyle" TargetType="Button">
  <Setter Property="FontFamily" Value="{StaticResource HouseFont}" />
  <Setter Property="FontSize" Value="{StaticResource BigTextSize}" />
</Style>

...

<Button Style="{StaticResource BigButtonStyle}" />

On the whole this works fine, and the really nice thing is that the resource management features in Expression Blend make using and maintaining the resources easy. When creating new styles in the designer you can opt to store them centrally and when editing styles or templates it is easy to apply previously saved resources and avoid adding ad hoc styling.

At the same time, however, it is important to bear in mind the intentions of the designer of the application's visuals - my first, over-rigorous attempts at eliminating duplication of styles where the property values were all the same led to some problems because I didn't realise that two styles with exactly the same contents could still be two different styles. Take this example, where two styles contain the same setters and values:

<Style x:Key="ProductDescriptionTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="{StaticResource HouseFont}" />
    <Setter Property="FontSize" Value="{StaticResource MediumTextSize}" />
    <Setter Property="Foreground" Value="{StaticResource BrightTextColour}" />
    <Setter Property="TextWrapping" Value="NoWrap" />
</Style>
        
<Style x:Key="ThumbnailSubTitleTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="{StaticResource HouseFont}" />
    <Setter Property="FontSize" Value="{StaticResource MediumTextSize}" />
    <Setter Property="Foreground" Value="{StaticResource BrightTextColour}" />
    <Setter Property="TextWrapping" Value="NoWrap" />
</Style>

I first assumed these were obvious candidates for merging and renaming to a single style for use on product descriptions and thumbnail subtitles, but logically they are different, and to replace these two styles with a single generally named one locks the style of two conceptual different areas of the look and feel together artificially and arbitrarily - what if the designer of the UI later decides that thumbnail subtitles should be italicised? Would she expect all product descriptions to appear in italics? Rather obviously not. Clearly if a style is needed in more than one place because common aspects of visual design appear through the pages of an application then it makes sense to store it centrally in the application's resources and reference it everywhere it is needed, but elements that happen to have the same set of style properties but are not related to each other might have their styles stored centrally but they shouldn't have their styles merged arbitrarily.

So whilst it is important to rationalise repetition of genuinely duplicate style definitions, it is also important to realise that coincidence of content is not always equality of identity.

Another lesson I learnt was that over-centralisation could become cumbersome; I began by collecting styles in a grand sweep through the application and depositing them all in the App.xaml file on the general principle that styles stored centrally are available everywhere throughout the application if required. But what if they aren't required everywhere? What if styles are only of relevance to a particular page? As I progressed in my task I realised that general styles with names such as 'TitleTextBlock' occurred in several places with different setter content - moving them to a central location meant the need to rename them with prefixes to differentiate them and keep the compiler from objecting.

Under these circumstances it proved important to establish whether they needed to be held centrally at all - if they were only used in a particular page then it seemed better to leave them there and obviate the need for a prefix. On the other hand if they were used in several places and yet still had a conflicting name then a prefix seemed appropriate but adding a prefix based on the page where it was originally found before moving it into App.xaml led to confusing results - why was a style called 'BuyIt_TitleTextBlock' being used in the PrintDetails page? In these circumstances it was important to establish if the style was truly serving the the same purpose in all the locations it was being used and if so to give it a more accurate name that described its purpose rather than where it originated - in this case I settled on 'SummaryTitleTextBlock'.

Finally a word about the suffixes on style keys: as the names used in the style keys grew to include distinguishing qualifiers, their lengths became a bit unwieldy - 'ThumbnailSummaryTitleHyperlinkButtonStyle' for example, at 41 characters, is a getting bit long; and more importantly unnecessarily long - what actual useful information is conveyed by the inclusion of the 'HyperlinkButton' type when that is clear from the TargetType attribute in the declaration of the style? Similarly, the inclusion of the word 'Style' itself adds nothing that we don't already know - the fact is that either where the style is declared or where it is used, it will be clear to anyone reading the code, what it is and to which element type it applies. The only place where resources are seen 'out of context' as it were, is in the Resources view of Expression Blend and here a useful icon indicates the TargetType and the tooltip for each resource gives details of its type. As such it seemed reasonable to shorten resource keys to their descriptive parts with 'ThumbnailSummaryTitleHyperlinkButtonStyle' becoming merely 'ThumbnailSummaryTitle' - until I came up against two 'ThumbnailSummaryTitle' instances - one for a TextBlock and one for a HyperlinkButton in which case the reintroduction of the TargetType suffix was justified to distinguish the two styles.

Technorati Tags: Silverlight,Styles,Resources,XAML

Travel By Thought: McCluskey - The Lost Album

2008-08-26T22:27:00.001+01:00

Looking through the Mini-Discs in my attic the other day I found the only surviving copy of a set of recordings I made over 10 years ago, when I was into writing and recording using computers and MIDI equipment.

I wrote 18 pieces based on 'themes' from the music of Orchestral Manoeuvres in the Dark and named them after one of the group's two main members - Andy McCluskey.

Listening to them after all this time, I am quite satisfied with the results - I only had a bedroom to record in, a few pieces of MIDI equipment and an Atari ST, but apart from the odd glitch here and there, the tracks still sound pretty reasonable efforts.

Anyway, to prevent them being lost for another 10 or more years, I have put them up on my web site for my easy access and for the world to stumble across in the unlikely event that anyone else is interested:

http://www.openfeature.co.uk/cnstrct/sound.htm

TechEd 2007 interim swag count

2007-11-07T21:25:00.000Z

Third day of TechEd 2007 and the swag-count is modest:

T-Shirts: 4
Baseball caps: 2
Misc: 1 Swaggily Fortunes winners plaque, 2 Beer cosies, 1 inflatable microphone (discarded due to slow-puncture)

The right-honourable GSF and I agree - not a vintage year...

Auto Properties & Object/Collection initializers - the presenter's friend

2007-11-07T14:26:00.000Z

From being here at TechEd2007, I have noticed one thing, if nothing else (actually I have noticed lots else) is that the presenters bashing out code in live demos love auto properties and the quick initialisation capabilities in C#3.0. It makes the job of getting straight down to the umpteenth

from a in b
where c
select d

so much easier. A bit like using dynamic SQL, it saves time/errors when cutting code in front of a live audience, and so it has cropped up in loads of sessions.

Coming from a coding environment where we produce web, win and ajax controls, however, I can't say that auto properties will be figuring much in my production code; for the one reason that they cannot be decorated with attributes. Attributes are essential when surfacing control properties for governing designtime stuff like visibility, serialisation and categorisation as well as runtime stuff like data binding. Even simple private member variables need stuff like this when they are encapsulated as public properties.

The initializers on the other hand are an excellent labour-saving piece of <motsDuJour>Syntactical Sugar</motsDuJour>. Given that all that happens when the syntax is compiled is that the longer-winded versions of the constructs are created in IL, they can be seen as akin to the using block's expansion to a try-finally dispose construct in the corresponding IL.

Good stuff.

Possession or omission with one exception - and that's all

2007-09-20T14:05:00.000+01:00

Pointless, I know, but I'm going to get this off my chest...

How is it that so many people cannot get the use of the apostrophe correct? The rules for its use are simple and have only one exception (example of which can be found in this sentence).

Possession - "Joan's painting (noun)", "England's captain"
Omission - "That's all folks", "Don't get me started", "Joan's painting (verb)"
Exception - "It's a long way to Tipperary", "The rules for its use"

And that's all - it's not for awkward plurals like abbreviations (DVDs not DVD's) or nouns ending in vowels (casinos not casino's)

IT IS SO SIMPLE!

I feel better for that...

MSCUI - The Microsoft Health Common User Interface

2007-07-20T08:59:00.000+01:00

Last week some of the fruits of the project I have been working on for the last 2 years at Microsoft UK, saw the public light of day as http://www.mscui.com/ and http://www.codeplex.com/mscui went live.

Microsoft have been working for some time now with the UK National Health Service to produce UI guidance for healthcare software and to produce a UI control toolkit for web and Windows development that embodies that design guidance.

Primarily centred around patient safety and standardisation of common interface elements, the guidance and tools are intended for health care ISVs to help them quickly and consistently produce web and Windows applications that conform to UK NHS standards that aid patient safety.

The stuff we devs have been working on - the web and Windows controls - are intended to enforce rules about formatting of information-display and standardising and validating the input of data to promote patient safety and reduce ambiguity. The web controls make use of AJAX and the Microsoft AjaxControlToolkit and both platforms share common specific data types and code for parsing input and standardisation of displayed information.

The intention in going public is to give the work and its output wider exposure and to create a community for feedback and input into an ongoing process of developing and extending the design guidance documentation (primarily through the http://www.mscui.com/ site) and practical support for it in the toolkit and again a community for feedback (through the http://www.codeplex.com/mscui site).

Anyway, the sites themselves describe and explain it better than I can here, but it is nice to see a public release to some of the stuff we've been doing over the past few months; and hopefully some of the stuff we are doing now, and as we move on, will make it out into the community via the same or a similar route.

See what I mean?

2007-07-19T10:47:00.001+01:00

OH NO! Not the BBC as well!

2007-07-19T10:23:00.000+01:00

I saw a piece on the BBC 10 o'clock news last about supplying new helicopters to the troop-effort in Afghanistan and couldn't believe my eyes as the graphics for the numbers and types of aircraft contained the loathsome "grocer's apostrophe": Merlin's, Chinook's etc. Good grief! Were all the literate staff at the BBC too busy panicking about cancelling phone-in competitions to proof-read the captions on their flagship news programme?

Has anybody checked whether there are still ravens at the Tower of London?

Technobile link

2007-06-28T17:57:00.001+01:00

The online version of my Guardian Technology Technobile article is here.

K&R Slaves

2007-06-26T10:51:00.001+01:00

Warning: anyone reading this might want to do so with a mental IMHO tag around the whole thing.

Long-suffering friends and colleagues know that I make no secret of disliking the code formatting convention known as K&R style (after Brian Kernighan & Dennis Ritchie and the code layout style first used in their seminal book The C Programming Language). However, although I personally believe that this:

function changeTarget(source){
    if (source === Targets.localTarget){
        var target = this._get_target(source);
        
        for(i = 0; i < this._log.ops; i++){
            if(this._log.ops[i].value === target){
                this._logs.selectedindex = i;
            }
        }
    }else{
        this._log.selectedIndex = -1;
    }
    
    if(this.get_mode() === SourceMode.Extended){
        this.addCssClass(this._popupElement, "Extended");
    }else{
        this.removeCssClass(this._popupElement, "Extended");
    }
}

...is much less readable and understandable than this:

function changeTarget(source)
{
    if (source === Targets.localTarget)
    {
        var target = this._get_target(source);
        
        for(i = 0; i < this._log.ops; i++)
        {
            if(this._log.ops[i].value === target)
            {
                this._log.selectedindex = i;
            }
        }
    }
    else
    {
        this._log.selectedIndex = -1;
    }
    
    if(this.get_mode() === SourceMode.Extended)
    {
        this.addCssClass(this._popupElement, "Extended");
    }
    else
    {
        this.removeCssClass(this._popupElement, "Extended");
    }
}

...I know that these things are a matter of preference and project/company standards.

No, what really annoys me are the reasons some people cite for preferring K&R over BSD/Allman code layout and the actual origins of the style itself.

There seem to be two main reasons people go for it - firstly they think it looks cool; as if making code look complicated and involved imparts some sort of geeky kudos - "look at that heavy-duty code! Must be pretty hairy stuff going on in there, best not to touch it or try to maintain it, best just to marvel at it" - however, as in the above examples, I'd go for clarity and readability any day because code shouldn't be "write-only" and needs to be comprehensible to others to allow for maintainability.

The second reason seems to be born of a "be like the big boys" motivation - "if its good enough for the giants of software like Kernighan and Ritchie, then who are we to argue?" and "all the code that comes out of the big guys at Microsoft is formatted that way", but hang on - a few issues:

The compacted style only emerged as a practicality of only having 80 column x 25 line displays and trying to get as much readable code into each screen or printed page as possible - we don't have that constraint anymore and who prints code listings these days anyway?

Kernighan and Ritchie never mandated or recommended that style - they were quite neutral in the original book about it:

"The position of braces is less important, although people hold passionate beliefs. We have chosen one of several popular styles. Pick a style that suits you, then use it consistently."

Yet somehow the style has become a sort of holy gourd.

Kernighan and Ritchie's original use of the style was inconsistent, (again because of constraints); the original C language didn't allow for the compacted braces style on functions that took arguments and K&R were quite happy to be pragmatic about things and adopt a BSD/Allman style for these cases

Microsoft's big boys don't always manage consistency either; whilst they ship the AjaxControlToolkit with lots of K&R style code in the JavaScript, their internal style and code review tools warn against elements of K&R styling when they appear in language files that the tools process (main example C#) and it is possible to fall foul of check-in policies for compliance with these code review tools on readability/maintainability grounds

Ultimately though, my point is that to go with K&R for reasons of emulation or hero-worship is spurious and slavish, and readability and comprehensibility are much better criteria by which to select a code formatting style and I will "take the Pepsi challenge" any day that BSD/Allman wins on that score - I might just have to wait for a few others to cast off their chains.

The fight continues...

2007-06-26T08:37:00.001+01:00

The Guardian say that they are going to publish a piece I wrote for their Technobile column which is published each Thursday in the Technology supplement. The article is an extended version of my rant about big corporations misspelling my surname in correspondence, which I previously posted here. My main motivation in sending it to them is the hope that wider exposure might result in someone identifying the makers of the CRM software that seems to be responsible for propagating the spelling error to so many companies. Then I can write to them and direct my bile more effectively.

(Active)ActiveSync

2007-05-02T09:07:00.000+01:00

Update on syncing my Treo 750 PDA phone:

There is at least additional software on the install CD to enable synching via Bluetooth - yeah right, like the Bluetooth stack is renowned for its rock-solid reliability and compatibility...

Well I wasn't too hopeful, but after the usual multitude of notifications about this, that and the other Bluetooth device all with individual (uncertified - of course) drivers, I got everything installed; and it all works!

Now, with only the occasional hiccup/lockup/Task Manager kill off (it is Bluetooth after all), I have a way of syncing and transferring stuff, albeit at modem speeds (well it is Bluetooth after all).

So although I won't be moving too many large files over to use in Picsel's dinky PDF viewer or ripping any DVDs to its miniSD card, I do at least have a way of getting stuff on and off the thing and a way of backing it up.

(in)ActiveSync

2007-04-17T14:51:00.000+01:00

Over the years I have owned one or two PDA-type mobile devices at various times, not really using them as the workhorses of office productivity that they are often portrayed as being, but more out of sporadic curiosity and out of an interest in their programmability.

Recently I got a Treo 750 as a replacement for my mobile phone and as it also runs Windows Mobile 5.0, I find myself effectively with another PDA. This time there is more of a chance of it becoming a real everyday tool for me as it pretty successfully combines a mobile phone with PDA Pocket PC functionality.

But, and here finally is my point, over the years ActiveSync has always been a bugbear in terms of reliability and stability of configuration and use - AND IT IS STILL NO BETTER IN ITS LATEST INCARNATION! Connected once, synched, never recognised again except as an USB device error. So now I am stuck trawling the forums looking for help in resolving the issue, un-installing/re-installing (didn't work), upgrading ActiveSync from 4.2 to 4.5 (didn't work), swapping to other USB ports and other machines (you've guessed it - didn't work)...

...frustrating.

Ah! Good old .net remoting...

2007-04-02T09:02:00.000+01:00

Looking at some .net remoting code recently reminded me of just how confusing and frustrating using it can be.

We were trying to diagnose why remoted events hooked up to a remoted object were failing after the standard 5 minutes initial lease time despite the fact that the remoted object had an overridden InitializeLifetimeService method that returned null - the standard way to setup an infinite lease on a remoted object.

Using debug tracing and explicit lease management with a sponsor class, we could prove that the remoted object was not dying, but nevertheless the events that it was firing seemed to be disconnected after the initial 5 minutes and we were getting a standard remoting infrastructure exception stating that the remote object didn't exist or was disconnected. How could it be that the remote object had an infinite lease but the events it was firing didn't?

The answer, as always with remoting, lay in understanding the hoops that the remoting infrastructure goes through in supporting cross-domain marshaling of calls, i.e. how it manages to make each side of the remoting relationship behave like it is communicating with a local instance of what is to either side, the remote object.

The curious thing is that even when a object that is remotable (i.e. derives from MarshalByRefObject) is started by a client that is not itself remotable, if the remoted object calls back to the client (as it must in order to fire an event back), then the remoted object must do so via the remoting infrastructure by communicating with a transparent proxy/real proxy local to itself which then forward the call via remoting back to the client.

In other words the client and server roles are reversed for this callback and there is effectively a remoted instance at the client to receive the call and it was this that was being created with the default 5 minute initial lease time.

This of course begs a couple of questions - firstly: what is being created on the client side as the receiver of the events? It can't be the client itself because it already exists, stays alive after the 5 minutes are up and doesn't derive from MarshalByRefObject and so cannot have a leased lifetime anyway. Secondly: how could we avoid whatever it was from dying after its 5 minute lease expired?

As it turned out the second question was easier to answer than the first, albeit with a somewhat inelegant solution.

A simple call to set the LifetimeServices.LeaseTime static property to a very large figure (say 1000 days) within the client app's initialization, sets the initial lease time for any MarshalByRefObject subsequently created in its AppDomain (including the dynamically created proxy that was previously timing out at the default lease time of 5 minutes) to what is effectively an infinite lease (unless you want to go 27 years without shutting the client app down!)

Of course a more elegant solution would be to actually have created our own client side MarshalByRefObject derived class to serve up the events to the client app and then to have overriden the InitializeLifetimeService method to return null as we do on the server side, but that really wasn't necessary as the only remoted functionality on the client end was the servicing of these events and we could safety define a long default lease for all remoted objects created in the AppDomain and achieve the same effect without another layer of indirection and the effort of creating and testing more code.

As for the answer to the first question...that's more difficult to answer; from debugging, it is clear that there is a TransparentProxy created on the server side which is used to fire events back to the client side, but what it is connected to, through the Remoting framework, down at the client side is difficult to establish (although I must admit I didn't spend too much time trying, after establishing the easy fix solution) - all the client is attached to, is an event that may or may not fire depending on whether it is connected to a valid source or not.

Perhaps someone more familiar with the Remoting framework knows more about the mechanics that go on under the hood when "doing events" on remotable objects and how non-remotable objects can effectively work as remote servers when the remote objects they create need to fire events back to them; it would be interesting to know...

Retro

2006-12-11T07:56:00.000Z

How weird to be back in the world of WinForms and ASP.NET control development, after so long in the realms of WPF betas and CTPs. Working on Windows and Web controls and components has a familiar and old-fashioned feel - like I know how to do everything that the spec requires, but that the results will be rather plain and rigid in appearance and behaviour.

Still there are compensations - not feeling that every surface will inevitably end up with a gradient fill; not having animations just because you can; having an infinitely higher level of confidence in the dev tools and the base class libraries which allows you to know that if things are going wrong it's definitely your own fault and not a buggy set of fundamental building blocks.

But it is also amazing how rusty you can get - leaving a branch of dev technology for a 12-18 month period brings on, for me at least, a Homer Simpson like phenomenon of the newer stuff pushing the old stuff out of the brain to make room; the shelf above my desk is currently groaning under the weight of tech books that I have had to bring to work as reference material.

And this is before taking into account the newer VS2005/CLR 2.0 stuff that I didn't really get to grips with as it was released - ASP.NET 2.0 is so different from 1.0/1.1 and because of the timing of its release, I never got the chance to enjoy the delights of Master Pages, Personalisation, the Provider model etc., etc.

The worry of course is that I will use older techniques or approaches to implement features and miss the opportunity to do things better by exploiting newer aspects of the technology - so rather than just using the tech books as reference material, I am carting them back and forth to and from work and trying to read them a bit more sequentially in order to get coverage of more than just the stuff I think of and go look up. So it's 'back to the classroom' so I can push all that WPF/XAML out of my brain again...ho hum.

CodeTidy Update

2006-10-25T07:50:00.000+01:00

Listening in catch-up mode to past DotNetRocks podcast shows as I commute into work in the car (Milton Keynes to TVP takes about 1.5 hours each way each day), I came across a recent episode with Mark Miller of Developer Express in which they referred to a DotNetRocks TV episode he did showing off DevExpress's DXCore plugin framework for Visual Studio.

I didn't even know they did the DNR TV , but it sounded like it might contain something useful on doing tools for the VS IDE, so I took a look at the show and was amazed to watch as they used the DXCore framework to basically build a first-cut of CodeTidy! The DXCore basically contains a whole bunch of classes that wrap the IDE and provide access to code and code windows in a nice, comprehensive and logical way. Mark took less than an hour to put together an add-in that could sort the members of the current class/type in the editor window by visibility (private, public etc.) and type (properties, mem vars etc.) and a bit of sub-sorting of one category within another.

The design approach he took wasn't quite how I would have done it, but that is not important; what was important was how easy the DXCore framework made it to do things like grab a method and all its attached XML comments and queue up a delete/move operation on it along with all the others to make the sort operation consistent and undoable - all courtesy of calls to DXCore. Incredible.

So...I have grabbed the sample code that they thoughtfully made available and have gotten hold of a copy of the DXCore install (it is free) and plan to refactor/build on it to make a CodeTidy I can use in daily coding.

The session also allowed Mark to show off the tools that DevExpress actually charge for - Refactor and CodeRush - which looked pretty impressive too. Refactor does what it says on the tin and CodeRush is like intellisense on steroids with masses of customisable keyboard shortcuts for frequently used actions like newing up class and vars, creating if, while, for/foreach blocks etc. Could be a purchase coming on...

Essential WPF - Chris Anderson

2006-10-25T07:34:00.000+01:00

I have been looking at draft chapters for Chris Anderson's forthcoming WPF book and it looks like it is going to be a great tech reference - lots of under-the-hood stuff and a nice logical progression through the major concepts.

More XAML-oriented than Charles Petzold's Applications = Code + Markup which I thought was (understandably) very code-behind oriented and procedural. Given that I think the most exciting thing about XAML and WPF is the declarative programming aspect, I think that books that focus on this side make more sense.

Original and Best - Chris Sells and Ian Griffiths original Programming WPF had the approach spot-on and I am really looking forward to their WPF-release update next year.

CodeTidy Kickoff

2006-09-28T14:56:00.000+01:00

Processing the code in a C# code file can be done in a few ways. Visual Studio has an extensibility/automation model that allows access to projects, solutions, modules, classes, code etc. as object collections; which would seem to be ideal for what I have in mind - not having to parse the stuff oneself.

However anytime I have looked at this in the past as a possible route for achieving the task of manipulating the raw code in a file I have come up against obstacles - most notably no support for locating and dealing with regions, some comments, namespace import (i.e. using) statements etc.

If I am to sort/arrange code without mucking up the containment of regions or orphaning comment lines, then I have to know about these parts of the text content of a code file and be able to manipulate them in the same way as the methods, properties etc. that are available as objects in the extensibility/automation model.

Parsing code files as raw text and recognising these 'contructs' manually seems like re-inventing the wheel and the sort of activity better done by people with more mathematical minds than mine, who thrive on lexical parser theory and and all that grammar/token recognition stuff.

So, what to do..? It would be nice to use the automation/extensibility model and fill in the gaps with a bit of manual parsing I suppose, but that leads to the need to effectively maintain my own 'meta-model' of the code being analysed that references/synchronises with the VS model but supplements it with information about the association of things like regions. Plus I need to take a fresh look at the VS model as I guess it has moved on and improved since I last looked at it (VS 2003) - though I'm pretty sure it still doesn't provide exposure of things like regions.

Further thinking required.

Pet Projects

2006-09-19T20:45:00.000+01:00

I am a big fan of pet projects; by which I mean hobby code that I have developed and continually re-develop in order to learn new and newer versions of developer technology.

I have done this in the past with a Windows wallpaper changer taskbar app and a piano scale and chord finder utility. These have gone through various VB, Delphi and C# versions. Each time the familiarity with the 'requirements' means that I can use them as a comfortable 'problem-space' in which to try to utilise new features and rework code.

I am just about to start a new pet project - this time to sort code (initially C#) in code files according to configurable rules. I've always wanted a utility that would allow me to organise/group code in order of construct type (e.g. properties, ENUM, methods etc.) or access (private, protected, public etc.), taking account of regions and respecting comments and areas like namespace containment of imports (using statements) and allowing alphabetic sorting within these groupings.

Eventually I hope to make this an add-in to Visual Studio that will help me to organise my code in place and at the same time master the dark art of VS automation...so CodeTidy is born.

Misnominalorthography

2006-06-29T09:58:00.000+01:00

<Rant>
Only those in similar circumstances can appreciate how damn annoying it is when people misspell your name. After years of suffering the frustration of having Mackie spelled as Mackay or Mackey (not to mention Gordan and Gorden), things have recently taken a much worse turn.

Somewhere, some business analyst or software developer has decided that they know best when it comes to the capitalisation of surnames that begin Mack... and have decreed that the K is to be capitalised. That same someone has managed to get their arbitrary rule incorporated into some of the most common CRM software in use in the UK. As a result, on countless mail-outs from the banks, high street stores, credit card companies and other large organisations, I have become Gordon MacKie.

Now, even when I point out this misspelling to them, by letter or in person when my details are being taken in a shop for entry into their customer database, the spelling cannot be changed as the software will not allow it; despite willing employees retyping the entry, as they type the k it automatically and stubbornly becomes a K

Argggggh!! Stop it!!

Stop dictating to me how to spell my name! I know how to spell my own bloody name!

Unless I and the Mackenzies, Mackinlays and other Macks of the world fight this, then it won't be long before the casual observer will assume that this is the correct rule for the spelling of our surnames. We need to resist this outrageous abuse before it's too late.
</Rant>

First post...

2006-04-03T20:08:00.000+01:00

I don't like blogs generally - in principle they are a great idea, in practice they are often not much more than an electronic version of vanity publishing. Just because you have an opinion doesn't mean that the whole world has to hear it or that your views are any more valid for being blogged. The Your shout approach only works if you know what you are talking about. All too often I find myself agreeing with Sid Vicious' response when he was asked about 'the man in the street' - track the quote down...Tony Wilson is fond of using it.