Multi-Platform Mobile ChordFactory?

I have the hardware, but do I have the time to take Windows Phone ChordFactory and port it to iOS and Android?

I thought I might look at Xamarin Studio and see how easy it is…...

Windows 8 ChordFactory - latest screenshots

Getting better and adding features, like notation and settings persistence.

ChordFactory on Windows 8

Coming soon - once I get the hang of async data loading and all the visual state support required


Not exactly the height of Metro design excellence either.

LINQ Outer Joins

I found out today how to do outer joins in LINQ and thought I’d save it as an Aide Memoire post.

Given a typical Foreign-Key relationship:

class Preference
{
    public int Id { get; set; }
    public string Description { get; set; }
}

class Person
{
    public int Id { get; set; }
    public string Forename { get; set; }
    public string Surname { get; set; }
    public int? PreferenceId { get; set; }
}

 

And this sample data:

    var peopleList = new List<Person>();
    peopleList.Add(new Person {Id = 77, Forename = "Fred", Surname = "Flintstone", PreferenceId = 2 });
    peopleList.Add(new Person {Id = 154, Forename = "Barney", Surname = "Rubble", PreferenceId = 1 });
    peopleList.Add(new Person {Id = 308, Forename = "Wilma", Surname = "Flintstone" });
    peopleList.Add(new Person {Id = 462, Forename = "Betty", Surname = "Rubble", PreferenceId = 1 });
    peopleList.Add(new Person {Id = 616, Forename = "Bam Bam", Surname = "Rubble", PreferenceId = 4 });
    peopleList.Add(new Person {Id = 770, Forename = "Pebbles", Surname = "Flintstone" });

    var preferenceList = new List<Preference>();
    preferenceList.Add(new Preference {Id = 1, Description = "Coffee"});
    preferenceList.Add(new Preference {Id = 2, Description = "Tea"});
    preferenceList.Add(new Preference {Id = 3, Description = "Hot Chocolate"});
    preferenceList.Add(new Preference {Id = 4, Description = "Fruit Juice"});

 

The obvious LINQ query:

    var peopleWithPreferences = from p in peopleList
                            join pr in preferenceList
                            on p.PreferenceId equals pr.Id
                            select new  {p.Forename, p.Surname, pr.Description};

 

Produces results that contain only the inner joined pairs of people and their beverage preference:

Forename  Surname     Description
Fred      Flintstone  Tea
Barney    Rubble      Coffee
Betty     Rubble      Coffee
Bam Bam   Rubble      Fruit Juice
 

In order to retrieve the full list of people with their beverage preference if they have one, the LINQ query becomes:

    var peopleAnyPreferences = from p in peopleList
                            join pr in preferenceList
                            on p.PreferenceId equals pr.Id into joinedPreferences
                            from j in joinedPreferences.DefaultIfEmpty()
                            select new  {p.Forename, p.Surname, pref = j != null ? j.Description : string.Empty};

 

Forename  Surname     Description
Fred      Flintstone  Tea
Barney    Rubble      Coffee
Wilma     Flintstone
Betty     Rubble      Coffee
Bam Bam   Rubble      Fruit Juice
Pebbles   Flintstone

 

The differences being the intermediate results joinedPreferences and its use with the DefaultIfEmpty extension, with a null check for the nullable column.

---

UPDATE: From a technique shown in this post by Jim Wooley:

A way of avoiding the need for intermediate results, using old-fashioned T-SQL style joins via a LINQ Where extension:

var betterPeopleAnyPreferences = from p in peopleList 
                    from pr in preferenceList
                    .Where(x => p.PreferenceId == x.Id)
                    .DefaultIfEmpty()
                    select new  {p.Forename, p.Surname, pref = pr != null ? pr.Description : string.Empty};

System.Collections.Generic.List<T> ForEach method is missing in Windows 8 Runtime

It seems that the handy ForEach method has been removed from the List of T class in the WinRT. According to Wes Haggard of the .NET Framework Bas Class Library (BCL) Team:

“List<T>.ForEach has been removed in Metro style apps. While the method seems simple it has a number of potential problems when the list gets mutated by the method passed to ForEach. Instead it is recommended that you simply use a foreach loop.”

Which is a shame, as I use this method quite a bit to invoke method group calls to do one-time iterations over Lists, like this:

keywordResults.ForEach(this.searchActivity.Keywords.Add);

For situations like this, the mutation issue doesn’t arise and it would be safe to use the ForEach method if it existed. So I did an extension method implementation of the functionality by taking a look at the decompiled code of the method in earlier versions of the .NET Framework:

public void ForEach(Action<T> action)
{
  if (action == null)
    ThrowHelper.ThrowArgumentNullException(ExceptionArgument.match);
  for (int index = 0; index < this._size; ++index)
    action(this._items[index]);
}

Using this as a starting point it was fairly easy to come up with an extension method version:

public static void ForEach<T>(this IEnumerable<T> list, Action<T> action)
{
    if (action == null)
    {
        throw new ArgumentNullException("action");
    }

    foreach (var t in list)
    {
        action(t);
    }
}

Now I can use the extension to give me the same ForEach functionality on IEnumerable objects such as List<T> as I had before.

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

Rainbow Rectangle

1. <Rectangle Width="154"
2.            Height="77"
3.            MouseLeftButtonDown="RectangleMouseLeftButtonDown">
4.     <Rectangle.Fill>
5.         <LinearGradientBrush x:Name="GradientFill" StartPoint="0,0" EndPoint="1,1">
6.             <GradientStop Offset="0" Color="Red" />
7.             <GradientStop Offset="0.1667" Color="Orange" />
8.             <GradientStop Offset="0.334" Color="Yellow" />
9.             <GradientStop Offset="0.5001" Color="Green" />
10.             <GradientStop Offset="0.6668" Color="Blue" />
11.             <GradientStop Offset="0.8335" Color="Indigo" />
12.             <GradientStop Offset="1" Color="Violet" />
13.         </LinearGradientBrush>
14.     </Rectangle.Fill>
15. </Rectangle>
16. <TextBlock x:Name="ClickCountTextBlock"
17.            Foreground="White"
18.            HorizontalAlignment="Center"
19.            VerticalAlignment="Center"
20.            FontSize="40"
21.            Opacity="0.4"
22.            Text="" />

Click Count in MouseEventArgs

1. private void RectangleMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
2. {
3.     this.ClickCountTextBlock.Text = e.ClickCount.ToString();
4.     var topLeft = new Point(0, 0);
5.     var topRight = new Point(1, 0);
6.     var bottomLeft = new Point(0, 1);
7.     var bottomRight = new Point(1, 1);
8.  
9.     switch (e.ClickCount)
10.     {
11.         case 2:
12.             this.GradientFill.StartPoint = topRight;
13.             this.GradientFill.EndPoint = bottomLeft;
14.             break;
15.         case 3:
16.             this.GradientFill.StartPoint = bottomRight;
17.             this.GradientFill.EndPoint = topLeft;
18.             break;
19.         case 4:
20.             this.GradientFill.StartPoint = bottomLeft;
21.             this.GradientFill.EndPoint = topRight;
22.             break;
23.         default:
24.             this.GradientFill.StartPoint = topLeft;
25.             this.GradientFill.EndPoint = bottomRight;
26.             break;
27.     }
28. }

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

Native Window creation in code

1. private void ButtonClick(object sender, RoutedEventArgs e)
2. {
3.     if (!Application.Current.IsRunningOutOfBrowser)
4.     {
5.         return;
6.     }
7.  
8.     var newGrid = new Grid
9.     {
10.         Background = new SolidColorBrush(Colors.White),
11.         HorizontalAlignment = HorizontalAlignment.Stretch,
12.         VerticalAlignment = VerticalAlignment.Stretch
13.     };
14.  
15.     var newTextBlock = new TextBlock
16.     {
17.         HorizontalAlignment = HorizontalAlignment.Center,
18.         VerticalAlignment = VerticalAlignment.Center,
19.         Text = "New TextBlock in a new Window..."
20.     };
21.  
22.     newGrid.Children.Add(newTextBlock);
23.  
24.     new Window { Content = newGrid, Visibility = Visibility.Visible, Width = 300, Height = 300 };
25. }

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

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

Data Classes

1. /// <summary>
2. /// The cartoon character.
3. /// </summary>
4. public class CartoonCharacter
5. {
6.     /// <summary>
7.     /// Gets or sets the forename.
8.     /// </summary>
9.     /// <value>The forename.</value>
10.     public string Forename { get; set; }
11. }
12.  
13. /// <summary>
14. /// The flintstone.
15. /// </summary>
16. public class Flintstone : CartoonCharacter { }
17.  
18. /// <summary>
19. /// The griffin.
20. /// </summary>
21. public class Griffin : CartoonCharacter { }
22.  
23. /// <summary>
24. /// The simpson.
25. /// </summary>
26. public class Simpson : CartoonCharacter { }

 

XAML

1. <Grid x:Name="LayoutRoot"
2.       Background="White">
3.     <Grid.Resources>
4.         <Style x:Key="SimpsonStyle"
5.                TargetType="TextBlock">
6.             <Setter Property="FontFamily" Value="Comic Sans MS" />
7.             <Setter Property="FontSize" Value="16" />
8.             <Setter Property="Foreground" Value="Blue" />
9.             <Setter Property="FontStyle" Value="Italic" />
10.         </Style>
11.         <DataTemplate DataType="this:Simpson">
12.             <Border Background="Yellow">
13.                 <StackPanel Orientation="Horizontal">
14.                     <TextBlock Style="{StaticResource SimpsonStyle}"
15.                                Text="{Binding Forename}" />
16.                     <TextBlock Margin="5,0,0,0"
17.                                Style="{StaticResource SimpsonStyle}"
18.                                Text="Simpson" />
19.                 </StackPanel>
20.             </Border>
21.         </DataTemplate>
22.         <DataTemplate DataType="this:Flintstone">
23.             <Border Background="Orange">
24.                 <Border.RenderTransform>
25.                     <TransformGroup>
26.                         <SkewTransform AngleX="-20" />
27.                         <ScaleTransform ScaleX="2"
28.                                         ScaleY="0.75" />
29.                         <TranslateTransform X="30" />
30.                     </TransformGroup>
31.                 </Border.RenderTransform>
32.                 <StackPanel Orientation="Horizontal">
33.                     <TextBlock Text="{Binding Forename}" />
34.                     <TextBlock Margin="5,0,0,0"
35.                                Text="Flintstone" />
36.                 </StackPanel>
37.             </Border>
38.         </DataTemplate>
39.         <DataTemplate DataType="this:Griffin">
40.             <Border BorderBrush="DarkSlateBlue" BorderThickness="2">
41.                 <StackPanel Orientation="Horizontal">
42.                     <TextBlock Text="{Binding Forename}" FontSize="18">
43.                         <TextBlock.Effect>
44.                             <BlurEffect />
45.                         </TextBlock.Effect>
46.                     </TextBlock>
47.                     <TextBlock Margin="5,0,0,0"
48.                                FontSize="22" CharacterSpacing="5"
49.                                Text="Griffin">
50.                         <TextBlock.Effect>
51.                             <DropShadowEffect />
52.                         </TextBlock.Effect>
53.                     </TextBlock>
54.                 </StackPanel>
55.             </Border>
56.         </DataTemplate>
57.     </Grid.Resources>
58.     <ListBox x:Name="CartoonCharactersListBox"
59.              Margin="50,20"
60.              BorderBrush="Blue"
61.              BorderThickness="2"
62.              ItemsSource="{Binding}" />
63. </Grid>

 

Yeugh!!

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

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

Code Snippet

1. <Grid x:Name="LayoutRoot"
2.       Background="White">
3.     <Grid.RowDefinitions>
4.         <RowDefinition />
5.         <RowDefinition Height="Auto" />
6.     </Grid.RowDefinitions>
7.     <Grid.Resources>
8.         <Style x:Key="VariableFontTextBlockStyle"
9.                TargetType="TextBlock">
10.             <Setter Property="Foreground" Value="DarkOrange" />
11.             <Setter Property="FontWeight" Value="Bold" />
12.             <Setter Property="FontSize" Value="{Binding ElementName=FontSizeSlider, Path=Value}" />
13.         </Style>
14.     </Grid.Resources>
15.     <TextBlock x:Name="SampleTextBlock"
16.                Grid.Row="0"
17.                HorizontalAlignment="Center"
18.                VerticalAlignment="Center"
19.                Style="{StaticResource VariableFontTextBlockStyle}"
20.                Text="No Mr Bond - I expect you to die" />
21.     <Slider x:Name="FontSizeSlider"
22.             Grid.Row="1"
23.             MaxWidth="500"
24.             Margin="100,30"
25.             Maximum="64"
26.             Minimum="8"
27.             Value="12" />
28. </Grid>

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

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

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:

s

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