My new app is called PhoneCompare and is available in all Windows Phone Marketplaces for 99 cents. you can also install a free trial that has 100% of the functionality but shows ads.

PhoneCompare has the following features:

• List all available Windows Phones
• Check specifications for a single phone to see its screen size, dimensions, weight, processor, storage, memory, battery and camera.
• Select 2 phones to compare all these specs next to each other
• Check the specs of your current phone
• Browse phones by brand
• View a list of new phones that are just released or are about to get released

My plans for the future are to also make it possible to rate phones so you can see which phones are rated the highest and I also want to store most used phones by visitors of the app. All this in version 1.1

If you have any feedback on this app please let me know by a comment on this post, by sending me a tweet @geertvdc or by rating or using the in app mail function

Enjoy!

Geert van der Cruijsen

        

My sample code and powerpoint deck including lots of resources to start developing for windows phone can be found here:

https://skydrive.live.com/redir.aspx?cid=ef12210979e9f6b0&resid=EF12210979E9F6B0!1485&parid=EF12210979E9F6B0!1463

During the session we created a twitter app that downloads the data from an xml feed asynchronous and placing this list of twitter items in a listbox. After that we created some sample data and created a template for the listbox so the twitter list looks nice.

Hopefully these sessions made you join the Windows Phone community and I expect to see your apps in the marketplace soon

If you have any questions regarding Windows Phone development please send me an email or contact me on twitter @geertvdc

Happy Coding!

Geert van der Cruijsen

        

Calculating this color is done by simple math. Your primary color + the complementary color should add up to hex value FFFFFF (white) so if you just remove the R G and B values of your color from the max value 255 you’ll end up with your complementary color.

So how to do this in your windows phone project? Let me first show you the results and after that I’ll explain how I created a resource you can use in blend to bind to your complementary color. Below are screenshots of a sample app (download at the end of this post) that displays the phone accent color and its complementary color. I’ve taken screenshots of every color so you can see what the results look like. The first rectangle shows the phone accent color while the second shows it’s complementary color.

So let’s see how to use this color in code. I’ve created a class calles “Resources” and I’ve added 2 public static properties in it. 1 called ComplementaryColor and 1 called ComplementaryColorBrush. You’ll use the Brush property mostly when binding but if you would like to have the color it’s also available.

   1: public class Resources

   2: {

   3:     private static Color _complementaryColor = new Color()

   4:     {

   5:  

   6:         R = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).R),

   7:         G = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).G),

   8:         B = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).B),

   9:         A = ((Color)Application.Current.Resources["PhoneAccentColor"]).A

  10:     };

  11:  

  12:     private static Brush _complementaryColorBrush = new SolidColorBrush(_complementaryColor);

  13:  

  14:     public static Color ComplementaryColor

  15:     {

  16:         get

  17:         {

  18:             return _complementaryColor;

  19:         }

  20:     }

  21:  

  22:     public static Brush ComplementaryColorBrush

  23:     {

  24:         get

  25:         {

  26:             return _complementaryColorBrush;

  27:         }

  28:     }

  29: }

The calculations of the complementary color is done by subtracting the R G and B values from the  max of 255 and they are stored in a new Color property. this color is then used in our ComplementaryColorBrush.

To use these properties in blend we’ll just add this class as a resource in the App.xaml file:

   1: <Application.Resources>

   2:     <ResourceDictionary>

   3:         <resources:Resources x:Key="Resources" d:IsDataSource="True"/>

   4:     </ResourceDictionary>

   5: </Application.Resources>

When we build our project and open up Expression blend we can now use this color by selecting the rectangle and going into the databinding menu for the fill property and then selecting the ComplementaryColorBrush.

There you go. when you run your project now you’ll see the complementary color of your selected phone accent color

You can download my sample application incudling source from my skydrive here

Happy Coding!

Geert van der Cruijsen

        

If you were at yesterdays session I hope you got inspired to start making Windows Phone apps and hope to see your apps in the Imagine Cup this year.

https://www.imaginecup.com/

The app we’ve build during the class was a simple twitter app that downloads json data asynchronous and parses the json objects to c# objects. We then bind a list of these TwitterItems to a listbox on the MainPage.xaml and create a ItemTemplate for the listbox items by using Expression Blend Sample data created from the  TwitterItem object.

The visual studio project and powerpoint deck can be downloaded here on my skydrive:

https://skydrive.live.com/redir.aspx?cid=ef12210979e9f6b0&resid=EF12210979E9F6B0!1480&parid=EF12210979E9F6B0!1463

The sample project contains a few extra steps that I didn’t have time for during the session itself but it shows how to post a message to a social network by using the ShareStatusTask and it also contains basic navigation.

During the session I also showed the use of a open source tool to generate classes from json. you can download this tool from codeplex here:

http://jsonclassgenerator.codeplex.com/

to use these classes you’ll need a dll compiled for windows phone. you can get that one here on codeplex:

http://json.codeplex.com/

If you have any question about the sample code or Windows Phone in general contact my by mail or send me a tweet at @geertvdc

Happy Coding!

Geert van der Cruijsen

        

The PowerPoint deck from my geeknight session on push notifications and livetiles  is available here: Download or View PPT

The PowerPoint deck from the level 300 Push notifications, live tiles and background agents session is available here: Download or View PPT

In both sessions I used the same demo project that can be downloaded here: Download ZIP file

My session that was held on Friday was also filmed for Channel 9. I’ll add a link to the video when it’s uploaded there.

Update: the session is now available on Channel 9. you can watch it here:

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/Push-notifications-live-tiles-and-background-agents-for-Windows-Phone-7

If you have any questions on implementing push notifications, live tiles or background agents send me a tweet on @geertvdc or comment on this post.

Happy Coding

Geert van der Cruijsen

        

Thursday February 16th

09:15 – 10:45 – Keynote

Ofcourse I’m going to visit the keynote session that kicks off the event. This year the keynote is presented by 5 speakers: Ben Riga, Brian Keller , Serge van Schie, Theo Rinsema, Bryan Agnetta

11:05 – 12:20 – What’s new in ASP.NET 4.5 + Visual Studio 11 – Mads Kristensen

I haven’t seen that much of asp.net 4.5 since my focus lately was on Windows Phone and Windows 8 development so I’m really curious on what Mads is going to show us here.

13:30 – 14:45 – Deep Dive into Metro – Bryan Agnetta

Since I already am quite up to date with Windows Phone Localization I’m skipping Ben Riga’s session on that subject (which is really important to know if you’re developing WP7 apps!) and going to widen my horizon to become a better “DeVigner” by improving my design skills in the session of Bryan Agnetta.

15:05 – 16:20 – A look at ASP.NET MVC 4 – Scott Guthrie

When “the Gu” is speaking on an event it’s not an option not to visit at least 1 of his sessions. I’m a big fan of ASP.NET MVC since the first technical preview but haven’t seen that much of the 4th version except for some videos from BUILD. Really looking forward on hearing what Scott has to say on this subject.

16:30 – 17:45 – Scott Guthrie Unplugged – Scott Guthrie

Really looking forward on this session. Scott is a reall “Gu”ru and I’m really curios on seeing him answer questions from the audience. I have some questions for him on his vision on the future of mobile and the web. Let’s see if he can answer it Another session that I would like to visit but is at the same time is: Fully leverage the Microsoft application platform with BizTalk, Server AppFabric and Azure AppFabric. Ah well I’ll watch that one on channel 9 later then.

GeekNight

19:15 – 19:55 – Beginnen met ontwikkelen voor Windows Phone – Maarten Struys

This session is in the same room as my session that held is right after this session. Ok I’m not a starting wp7 developer but It’s good to see this session so I can adapt my session to this one if a lot of people are staying after this session for my session.

20:05 – 20:45 – Push notifications en live tiles – Geert van de Cruijsen

Time to do my own session. In this session I’ll give an introduction to push notifications and live tiles in your Windows Phone applications. If you are a starting wp7 developer this is the session for you. If you are a more advanced wp7 developer come to my session on friday on the Techdays on the same subject.

20:55 – 21:35 – Stand Up Windows Phone Development – Fons Sonnemans

After my session Fons Sonnemans is doing the next session in the WP7 track. He’s going to build an application in 1 hour. Let’s see what he’s up to.

Friday February 17th

09:15 – 10:30 – Going mobile with ASP.NET MVC 4 – Erik van Appeldoorn

The debate on building native phone applications vs mobile web is an ongoing discussion. Let’s see what Erik can do using ASP.NET MVC4 for the mobile platform. Another session that got my attention is a session from my collegue Jesse Houwing: Code review features in TFS vNext so there is a chance I’m visiting that one instead.

10:50 – 12:05 – Building Services for Phone / Tablet using WebAPI – Matt Milner

This session can be really usefull if you are planning on doing push notifications for a mobile app for example or if you just want to create an app using your own created API for your website. WebAPI is a really nice new framework by Microsoft which I don’t know that much about right now. hopefully this session will give me some good info on that.

13:15 – 14:30 – Laat je Windows Phone 7 app tot leven komen met push notifications, live tiles en background agents – Geert van de Cruijsen

It’s time again to do a presentation myself. This session will explain all the ins and outs of push notifications, live tiles and background agents in your wp7 applications. If you don’t like Windows Phone visit my colleague Christiaan Veeningen’s session: Bouw Metro apps met Javascript voor Windows 8. In our original planning I was going to do this presentation together with him but doing 3 sessions was a bit to much for me to prepare for.

14:50 – 16:05 – Windows Phone Metro Design Session End-to-End – Tom Eddings, Dave Crawford

Another UX session I’m going to visit. My last project building Windows Phone applications where I worked together with Avanade UX colleagues really got me interested in the design parts so I’m exited on what Tom and Dave are going to tell us.

16:15 – 17:30 – Unit testing your Windows Phone 7 applications – Olaf Conijn

Picking a level 400 session as the last session on a Friday a smart choice? We’ll see. I already have experience in unit testing wp7 applications but I’m sure Olaf has some really nice tips for us.

So this is my list of sessions I’m visiting at the TechDays. Please let me know which ones you are visiting in the comments

Geert van der Cruijsen

        

From now on the latest version + source can be found on http://wp7emuskinswitcher.codeplex.com/

With the move to Codeplex I also upgraded the version to 1.2. here is the Changelog:

• Fixed a bug where the skin switcher broke the back button of the emulator when people used certain custom skins before they used the skin switcher.
• Added working volume, camera + power buttons on the Lumia 800 skins
• Added a White Lumia 800 skin made by Derek Orr
• Added a Zune HD skin made by Ben Pinkerton

Enjoy!

Geert van der Cruijsen

        

Up untill now I was using the PhoneFX BindableApplicationBar but I really disliked the problem that you can’t bind the visibility property of the ApplicationBarButtons to hide or show them when you need them. A common example where you use this is in a Scenario with a MultiSelectList on a page where you want to be able to hide the “Remove” button as long as you didn’t select an item yet and hide the “Select” button when you are already in the selection mode. This week I was reading a blogpost on Windows Phone Geek about the AdvancedApplicationBar and I read that this new ApplicationBar solution did support binding the Visibility of ApplicationBarButtons so it was time to put this one to the test.

In this post I’ll walk you through my the code I produced to get a nice MultiSelectList control (from the silverlight wp7 toolkit ) working with the applicationbar without writing any codebehind. I used MVVM light for this sample so an empty MVVM light project with references added to the Silverlight Toolkit and the SH WP ApplicationBar will be my starting point.

The idea is to build an application showing a MultiSelectList with some messages that you can select and delete by using the ApplicationBarButtons just as the build in Mail application does.

Lets first start of building some of the plumbing to get this application going. We’ll create a Message Class that is going to be our Class containing the information for each message. We’ll keep this Class plain and simple:

   1: public class Message

   2: {

   3:     public string Sender { get; set; }

   4:     public DateTime Date { get; set; }

   5:     public string Content { get; set; }

   6: }

We’ll also need a property in the ViewModel to expose a list of these Messages which we can fill with dummy data and that can be bound in the MultiSelectList. We’ll create a property in the ViewModel called Messages and will fill these for this small example in the constructor of the MainViewModel.

   1: /// <summary>

   2: /// Initializes a new instance of the MainViewModel class.

   3: /// </summary>

   4: public MainViewModel()

   5: {

   6:     for (int i = 0; i < 10; i++)

   7:     {

   8:         Message m = new Message();

   9:         m.Sender = "Sender " + i.ToString();

  10:         m.Date = DateTime.Now.AddHours(i);

  11:         m.Content = "This is a sample message " + i.ToString();

  12:         Messages.Add(m);

  13:     }

  14: }

  15:  

  16: /// <summary>

  17: /// The <see cref="Messages" /> property's name.

  18: /// </summary>

  19: public const string MessagesPropertyName = "Messages";

  20:  

  21: private ObservableCollection<Message> _messages = null;

  22:  

  23: /// <summary>

  24: /// Sets and gets the Messages property.

  25: /// Changes to that property's value raise the PropertyChanged event. 

  26: /// </summary>

  27: public ObservableCollection<Message> Messages

  28: {

  29:     get

  30:     {

  31:         return _messages;

  32:     }

  33:  

  34:     set

  35:     {

  36:         if (_messages == value)

  37:         {

  38:             return;

  39:         }

  40:  

  41:         _messages = value;

  42:         RaisePropertyChanged(MessagesPropertyName);

  43:     }

  44: }

Now the data is there it’s time to create the UI. One of the best parts of using MVVM is creating the UI in Expression Blend so lets use that. We’ll add a MultiSelectList Control to the page (it’s a control that comes in the silverlight toolkit for wp7) and bind the itemsource to the Messages property. We’ll also add the AdvancedApplicationBar from the SH WP library to the page and create 2 buttons to be used on the ApplicationBar, a select button and a delete button. Set the size of the MultiSelectList to Autosize –> full and make sure the AdvancedApplicationBar control is located in the Layoutroot. Set the text of the 2 ApplicationBarButtons to Select and Remove and also select an image for the buttons.

When you rebuild now you’ll see 10 lines of code in the multiselect list. Change the ItemTemplate for the MultiSelectList by creating an empty template and adding 3 textboxes to them binding them to our 3 fields in our Message Class: Sender, Date and Content. Give all of them a pretty style and we’re ready to go on.

Your Xaml for the contentgrid should look like this

   1: <Grid x:Name="ContentGrid"

   2:       Grid.Row="1" Height="537" VerticalAlignment="Top">

   3:     <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}"/>

   4:     <Sh:AdvancedApplicationBar>

   5:         <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png"/>

   6:         <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png"/>

   7:     </Sh:AdvancedApplicationBar>

   8: </Grid>

The Xaml for the ItemTemplate looks like this

   1: <phone:PhoneApplicationPage.Resources>

   2:     <DataTemplate x:Key="MessageTemplate">

   3:         <StackPanel>

   4:             <TextBlock TextWrapping="Wrap" Text="{Binding Sender}" Style="{StaticResource PhoneTextLargeStyle}"/>

   5:             <TextBlock TextWrapping="Wrap" Text="{Binding Date}" Style="{StaticResource PhoneTextAccentStyle}"/>

   6:             <TextBlock TextWrapping="Wrap" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}"/>

   7:         </StackPanel>

   8:     </DataTemplate>

   9: </phone:PhoneApplicationPage.Resources>

When we run our application now the output should be similar to this. You can tap on the left side of the screen to select items in the list just like you can in the build in mail application.

It is pretty weird to have the Remove button visible when you’re not in selection mode of the MultiSelectList and the same thing goes for the Select button that’s still visible when the MultiSelectList is in selectionMode. To fix this we’ll bind the Visibility property of these ApplicationBarButtons to a boolean property that is also 2 way bound to the IsSelectionEnabled property of the MultiSelectList.

To do this we first need to add a boolean property to the ViewModel called IsInSelectionMode

   1: /// <summary>

   2: /// The <see cref="IsInSelectionMode" /> property's name.

   3: /// </summary>

   4: public const string IsInSelectionModePropertyName = "IsInSelectionMode";

   5:  

   6: private bool _isInSelectionMode = false;

   7:  

   8: /// <summary>

   9: /// Sets and gets the IsInSelectionMode property.

  10: /// Changes to that property's value raise the PropertyChanged event. 

  11: /// </summary>

  12: public bool IsInSelectionMode

  13: {

  14:     get

  15:     {

  16:         return _isInSelectionMode;

  17:     }

  18:  

  19:     set

  20:     {

  21:         if (_isInSelectionMode == value)

  22:         {

  23:             return;

  24:         }

  25:  

  26:         _isInSelectionMode = value;

  27:         RaisePropertyChanged(IsInSelectionModePropertyName);

  28:     }

  29: }

When we have this property we can bind the property to the IsSelectionEnabled property of the MultiSelectList. For some reason this can’t be done in Blend since the DataBinding button is greyed out but coding it in Xaml does work. The binding looks like this in Xaml

   1: <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}" IsSelectionEnabled="{Binding IsInSelectionMode, Mode=TwoWay}"/>

The Visibility property of the ApplicationBarButtons isn’t a boolean type so we’ll need a converter to convert the boolean to a Visibility Property. I’m using 2 converters here. 1 is converting the boolean value True to Visibility.Visible and the other converter is also an inverter and is converting True to Visibility.Collapsed.

   1: /// <summary>

   2: /// Converts a boolean to Visibililty

   3: /// </summary>

   4: ///[ValueConversion(typeof(bool), typeof(Visibility))]

   5: public class BooleanToVisibilityConverter : IValueConverter

   6: {

   7:     #region IValueConverter Members

   8:  

   9:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  10:     {

  11:         Visibility result = Visibility.Collapsed;

  12:  

  13:         bool val;

  14:  

  15:         if (value != null &&

  16:             bool.TryParse(value.ToString(), out val))

  17:         {

  18:             result = val ? Visibility.Visible : Visibility.Collapsed;

  19:         }

  20:  

  21:         return result;

  22:     }

  23:  

  24:     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  25:     {

  26:         //You can't convert back

  27:         return null;

  28:     }

  29:  

  30:     #endregion

  31: }

  32:  

  33:  

  34: /// <summary>

  35: /// Converts a boolean to Collapsed Visibililty

  36: /// </summary>

  37: ///[ValueConversion(typeof(bool), typeof(Visibility))]

  38: public class BooleanInverterToVisibilityConverter : IValueConverter

  39: {

  40:     #region IValueConverter Members

  41:  

  42:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  43:         {

  44:             Visibility result = Visibility.Collapsed;

  45:  

  46:             bool val;

  47:  

  48:             if (value != null &&

  49:                 bool.TryParse(value.ToString(), out val))

  50:             {

  51:                 result = val ? Visibility.Collapsed : Visibility.Visible;

  52:             }

  53:  

  54:             return result;

  55:         }

  56:  

  57:         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  58:         {

  59:             //You can't convert back

  60:             return null;

  61:         }

  62:  

  63:         #endregion

  64:     }

Lets Bind the boolean value using the converter to the ApplicationBarIcons. Your Xaml should look like this:

   1: <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}"/>

   2: <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanToVisibilityConverter}}"/>

If you run the application again you should be able to see the icons showing up and hiding at the correct times now.

To finish this sample and blogpost up we want the Select button to put the MultiSelectMode in selection mode and the remove button should remove the selected items. Lets start with the Select button. We’ll create a RelayCommand in the viewmodel that puts the MultiSelectList into selectionMode.

   1: private RelayCommand _messageListToSelectModeCommand;

   2:  

   3: /// <summary>

   4: /// Gets the MessageListToSelectModeCommand.

   5: /// </summary>

   6: public RelayCommand MessageListToSelectModeCommand

   7: {

   8:     get

   9:     {

  10:         return _messageListToSelectModeCommand

  11:             ?? (_messageListToSelectModeCommand = new RelayCommand(

  12:                 () =>

  13:                 {

  14:                     IsInSelectionMode = true;

  15:                 }));

  16:     }

  17: }

On the Select ApplicationBarButton we’ll add an EventToCommand behavior that will trigger this RelayCommand. I did this in Blend but the Xaml that is created will look like this:

   1: <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}">

   2:     <i:Interaction.Triggers>

   3:         <i:EventTrigger EventName="Click">

   4:             <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding MessageListToSelectModeCommand, Mode=OneWay}"/>

   5:         </i:EventTrigger>

   6:     </i:Interaction.Triggers>

   7: </Sh:AdvancedApplicationBarIconButton>

Running the application again will show us that using the select button puts the MultiSelectList in selectionmode so that part is finished. It only took 1 line of code in the relaycommand.

Removing the items is a bit more work since you can’t do a 2 way binding on the SelectedItems of a MultiSelectList because it is not a dependency property. The best way to get this working is setting up a property in the Viewmodel that is going to contain the selected items and update this list every time the selectionchanged event is fired by another EventToCommandBehavior that triggers a RelayCommand called SelectedMessagesChangedCommand. The SelectedMessagesChangedCommand will update the ViewModel property that will later be used to delete the items.

   1: /// <summary>

   2: /// The <see cref="SelectedMessages" /> property's name.

   3: /// </summary>

   4: public const string SelectedMessagesPropertyName = "SelectedMessages";

   5:  

   6: private ObservableCollection<Message> _selectedMessages = null;

   7:  

   8: /// <summary>

   9: /// Sets and gets the SelectedMessages property.

  10: /// Changes to that property's value raise the PropertyChanged event. 

  11: /// </summary>

  12: public ObservableCollection<Message> SelectedMessages

  13: {

  14:     get

  15:     {

  16:         return _selectedMessages;

  17:     }

  18:  

  19:     set

  20:     {

  21:         if (_selectedMessages == value)

  22:         {

  23:             return;

  24:         }

  25:  

  26:         _selectedMessages = value;

  27:         RaisePropertyChanged(SelectedMessagesPropertyName);

  28:     }

  29: }

  30:  

  31: private RelayCommand<IList> _selectedMessagesChangedCommand;

  32:  

  33: /// <summary>

  34: /// Gets the SelectedMessagesChangedCommand.

  35: /// </summary>

  36: public RelayCommand<IList> SelectedMessagesChangedCommand

  37: {

  38:     get

  39:     {

  40:         return _selectedMessagesChangedCommand

  41:             ?? (_selectedMessagesChangedCommand = new RelayCommand<IList>(ExecuteSelectedMessagesChangedCommand));

  42:     }

  43: }

  44:  

  45: private void ExecuteSelectedMessagesChangedCommand(IList parameter)

  46: {

  47:  

  48:     SelectedMessages = new ObservableCollection<Message>(parameter.Cast<Message>());

  49: }

Make sure the EventToCommand behavior is passing the SelectedItems as a command property. This can all be done in Blend but here is the Xaml that should be generated by Blend

   1: <i:Interaction.Triggers>

   2:     <i:EventTrigger EventName="SelectionChanged">

   3:         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SelectedMessagesChangedCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItems, ElementName=multiselectList}"/>

   4:     </i:EventTrigger>

   5: </i:Interaction.Triggers>

Now we have the selected messages in our viewmodel we can use our last RelayCommand called DeleteSelectedMessagesCommand to remove the selected messages.

   1: private RelayCommand _deleteSelectedMessagesCommand;

   2:  

   3: /// <summary>

   4: /// Gets the DeleteSelectedMessagesCommand.

   5: /// </summary>

   6: public RelayCommand DeleteSelectedMessagesCommand

   7: {

   8:     get

   9:     {

  10:         return _deleteSelectedMessagesCommand

  11:             ?? (_deleteSelectedMessagesCommand = new RelayCommand(

  12:                 () =>

  13:                 {

  14:                     foreach (Message m in SelectedMessages)

  15:                     {

  16:                         Messages.Remove(m);

  17:                     }

  18:                 }));

  19:     }

  20: }

This needs to be triggered again from an EventToCommand behavior attached to the remove ApplicationBarButton.

   1: <i:Interaction.Triggers>

   2:     <i:EventTrigger EventName="Click">

   3:         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding DeleteSelectedMessagesCommand, Mode=OneWay}"/>

   4:     </i:EventTrigger>

   5: </i:Interaction.Triggers>

We can run our application again and when you press the remove button the selected items should be removed.

This sample proves the SH WP AdvancedApplicationBar is working pretty good and it proves it has features that I didn’t get to work in the BindableApplicationBar for example the Visibility of the ApplicationBarButtons. I think I’m going to use this ApplicationBar more often in my projects.

Hopefully this sample is usefull for you to see what the SH WP ApplicationBar is up to or just to get an impression on how to work with a bit more advanced ApplicationBar scenario’s using MVVM.

Sourcecode for the sample project can be downloaded here

Happy Coding

Geert van der Cruijsen

        

Setup could not install the following components:

• Microsoft XNA game Studio 4.0 Refresh
• Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0

We retried installing the SDK after a full uninstall and a reboot but this wouldn’t help. This error kept appearing. In the end my idea was that we didn’t need XNA any time soon so we would just let this rest and see if everything was still working. Visual studio 2010 opened up fine, Blend  was working All the templates for a  phone project were there so everything seemed ok.

A few hours later when my colleague opened up an already made project from source control and tried to build the project she informed me that she was getting build errors so I had a look. The exception was

The Target “GetCopyToOutputDirectoryContentProjectItems” does not exist in the project

I never heard of this error before and checked if the project was still building on my machine. Ofcourse it was so the problem was somewhere in her environment. I didn’t immediately make the connection of the XNA installation failure but after some searching I found out that it had to do with some of the MSBUILD .target files that Windows Phone 7.1 projects use that have dependencies on the XNA Game studio.

Getting XNA Game studio installed properly seemed the solution so we tried to get that fixed. The solution is in getting the XNA studio installed without use of the bootstrapper that was crashing and Aaron Stebner made a good post on how to do that here.

Follow all the steps in Aarons guide (the file from step 9 didn’t exist for me so I skipped it) and after this the project would build again.

Everyone happy and back to coding Hopefully this post can help someone else when they run into the same problems as we did because we’ve spend to much precious time to fix this.

Geert van der Cruijsen

        

Version 1.1 contains a total of 23 emulator skins from popular devices as the HTC Titan, HTC Radar, HTC Trophy, HTC Mozart, HTC HD7, Samsung Focus S, Samsung Omnia W, Samsung Omnia 7, Samsung Focus, Fujitsu IS12T in green and black, ZTE Tania, Nokia Lumia 710 and the Nokia Lumia 800.

Big thanks to Jeff Wilcox, Jeff Blankenburg, Danijel Malik, Georg Kalus and Pedro Lamas for adding their skins to the application.

You can download version 1.1 here now:

Update! version 1.2 is released and the project is moved to codeplex. you can find the newest version here: http://wp7emuskinswitcher.codeplex.com/

Total list of skins:

• Default skin – Microsoft
• Fujitsu IS12T Green – Geert van der Cruijsen
• Fujitsu IS12T Black – Geert van der Cruijsen
• Generic unbranded skin – Jeff Wilcox
• HTC Arrive (7pro) – Jeff Blankenburg
• HTC HD7 – Geert van der Cruijsen
• HTC Mozart – Danijel Malik
• HTC Radar Silver – Geert van der Cruijsen
• HTC Titan – Geert van der Cruijsen
• HTC Trophy – Geert van der Cruijsen
• Nokia Lumia 710 Black Blue – Geert van der Cruijsen
• Nokia Lumia 710 Black Yellow – Geert van der Cruijsen
• Nokia Lumia 710 White Black – Geert van der Cruijsen
• Nokia Lumia 710 White Blue – Geert van der Cruijsen
• Nokia Lumia 710 White Pink – Georg Kalus
• Nokia Lumia 800 Black – Pedro Lamas
• Nokia Lumia 800 Blue – Georg Kalus
• Nokia Lumia 800 Pink – Geert van der Cruijsen
• Samsung Focus – Jeff Wilcox
• Samsung Focus S – Geert van der Cruijsen
• Samsung Omnia 7 – Geert van der Cruijsen
• Samsung Omnia W – Geert van der Cruijsen
• ZTE Tania – Geert van der Cruijsen

If you created a skin or want to create a skin that’s not included and you want to get it listed in the application yet let me know and I’ll add it for you including your name and a link to your blog or website.

Here are some screenshots of newly added skins

If for some reason the application is not working and your emulator stopped working after usage of the application let me know and I’ll help you to get everything working again!

Happy coding!

Geert van der Cruijsen

        

You can download the application here: Download

Update! version 1.2 is released and the project is moved to codeplex. you can find the newest version here: http://wp7emuskinswitcher.codeplex.com/

This version is the first beta release with my first set of skins. I added 2 skins from Georg Kalus: the Blue Nokia Lumia 800 and the White/Pink Nokia Lumia 710. I’ve also included the Black Nokia Lumia 800 skin from Pedro Lamas

The complete list of skins included in the application now are:

• Default skin – Microsoft
• Nokia Lumia 710 Black Blue – Geert van der Cruijsen
• Nokia Lumia 710 Black Yellow – Geert van der Cruijsen
• Nokia Lumia 710 White Black – Geert van der Cruijsen
• Nokia Lumia 710 White Blue – Geert van der Cruijsen
• Nokia Lumia 710 White Pink – Georg Kalus
• Nokia Lumia 800 Black – Pedro Lamas
• Nokia Lumia 800 Blue – Georg Kalus
• Nokia Lumia 800 Pink – Geert van der Cruijsen

I’m planning on adding more skins in the near future but didn’t have time for it yet. If you have skins I can use please let me know by comment or on twitter

Hopefully this will make your Windows Phone 7 projects even more fun to test!

Happy Coding

Geert van der Cruijsen

        

First lets sum up what you can do by default and after that we’ll go into going beyond this and creating even better live tiles by adding multiple images or multiple texts to a live tile using the colors and fonts of your choice.

By default you can set the following properties on a live tile

• Title (shown in the bottom left)
• Count (black circle with a number between 1 and 99)
• BackGroundImage (image to show on your tile)
• BackTitle (shown in the bottom left on the backside of the tile)
• BackContent (piece of text shown on the backside of the tile)
• BackBackGroundImage (Image on the backside of the tile)

Ok this is pretty cool but what if we want to make something like Runkeeper does in their app as shown in the following picture:

So how do we generate such image on the client side in Silverlight? The trick behind all this is that you can render a user control as a WriteableBitmap and store this image in the isolated storage of your phone so you can use it as the tile BackGroundImage. The final working codesample is linked at the bottom of this post but I’ll show all code to build this example in this blogpost.

We start of creating a new Silverlight for Windows Phone project. Normally I would use MVVM but for this example I want to make it as simple as possible to focus on the tile part.

We’ll create a new UserControl called “TileControl” which is going to be used as our live tile and a “TileData” class to be used for containing the data we’ll be showing on the  live tile.

   1: public class TileData

   2: {

   3:     public string Text1 { get; set; }

   4:     public string Text2 { get; set; }

   5:     public string ImageSource { get; set; }

   6: }

Create the TileControl, set it to 173 by 173pixels and set the background to use PhoneAccentBrush so the live tile has the color the user has selected. Lets make our designers happy and open up the TileControl in expression blend so our designers (or if you are a devigner you!) can design our live tile with dynamic data.

Add a few text boxes and a image to the control so you have something like this:

   1: <Grid x:Name="LayoutRoot" Width="173" Height="173" Background="{StaticResource PhoneAccentBrush}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="24"/>

   3:     <TextBlock Margin="0,64,-17,-3" TextWrapping="Wrap" FontSize="64" HorizontalAlignment="Right" Width="70" Foreground="White"/>

   4:     <Image Margin="6,55,0,13" Width="100" HorizontalAlignment="Left"/>

   5: </Grid>

In the Data window click the icon “Create sample data from class” and select the TileData class.

Edit the sample data so we have some nice data to show. I used the following data:

   1: <CustomLiveTileExample:TileData xmlns:CustomLiveTileExample="clr-namespace:CustomLiveTileExample" 

   2: ImageSource="ApplicationIcon.png" 

   3: Text1="The first Text"

   4: Text2="9"/>

Now drag the fields from the test data window to the text and image control to bind them. After this your XAML should look like this and the design surface should already show a nice live tile with an image and 2 texts. In our code we’ll databind this control to a programmatically filled TileData object.

   1: <Grid x:Name="LayoutRoot" Width="137" Height="137" Background="{StaticResource PhoneAccentBrush}" d:DataContext="{d:DesignData /SampleData/TileDataSampleData.xaml}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="21.333" Text="{Binding Text1}"/>

   3:     <TextBlock Margin="0,50,-10,11" TextWrapping="Wrap" FontSize="48" HorizontalAlignment="Right" Width="70" Foreground="White" Text="{Binding Text2}"/>

   4:     <Image Margin="12,51,65,17" Width="60" Source="{Binding ImageSource}"/>

   5: </Grid>

The live tile is ready so lets head back to the main page of our application and add the logic to set the live tile. To trigger the creation of the live tile I’ve added a button on the page and attached a click event. in the button1_Click method I’ll add all code needed to create the live tile.

   1: private void button1_Click(object sender, RoutedEventArgs e)

   2:         {

   3:             TileControl frontTile = new TileControl();

   4:             TileData tileData = new TileData() { ImageSource = "/ApplicationIcon.png", Text1 = "The first text", Text2 = "8" };

   5:             frontTile.DataContext = tileData;

   6:  

   7:             frontTile.Measure(new Size(173, 173));

   8:             frontTile.Arrange(new Rect(0, 0, 173, 173));

   9:             var bmp = new WriteableBitmap(173, 173);

  10:             bmp.Render(frontTile, null);

  11:             bmp.Invalidate();

  12:  

  13:             var isf = IsolatedStorageFile.GetUserStoreForApplication();

  14:             var filename = "/Shared/ShellContent/tile.jpg";

  15:  

  16:             if (!isf.DirectoryExists("/Shared/ShellContent"))

  17:             {

  18:                 isf.CreateDirectory("/Shared/ShellContent");

  19:             }

  20:  

  21:             using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))

  22:             {

  23:                 bmp.SaveJpeg(stream, 173, 173, 0, 100);

  24:             }

  25:  

  26:             var data = new StandardTileData

  27:             {

  28:                 BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute)

  29:             };

  30:  

  31:             ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), data);

  32:         }

First we’ll create a TileControl object called frontTile, then we’ll fill it with our tileData by creating a TileData object and setting the DataContext to tileData. After this we’ll create a WriteableBitmap and set it to 173 by 173 pixels. Well use the Render method to render the usercontrol as a bitmap.

After that we’ll check if the directory in the isolated storage exists and if it doesn’t we’ll create it. After that we’ll open the tile file and use the SaveJpeg method to save the WritableBitmap as a .jpg file (bit of a shame you can’t do png that’s why we’ve set the background color to the PhoneAccentColor). after saving the image the only thing we need to do is Call Create on the ShellTile and we’re done.

Lets run the app, press the button and there it is, our dynamically created livetile.

Download Sample project:

Happy coding!

Geert van der Cruijsen

        

how to get started

Download the silverlight toolkit for windows phone and the Windows Phone Silverlight toolkit behavior extensions and install both libraries on your system.

After the installation start Expression Blend and create a new Windows Phone 7 Project.

In the projects window right click “References” and select “Add Reference”

Select the Microsoft.Phone.Controls.Toolkit.dll file and press “Open”

Select the PhoneToolkit.Extensions.Behaviors.dll and press “Open”

You should now have Microsoft.Phone.Controls.Toolkit.dll and PhoneToolkit.Extensions.Behaviors.dll in your References list.

Before the transition behaviors work you will have to change 1 thing in the code because that is just how the Silverlight Toolkit Transitions work. so open App.xaml.cs and locate the following Class: “PhoneApplicationFrame”

And Change it to “TransitionFrame”

Build the project and after building the new behaviors will be added to the Assets window.

You can drag and drop the new behaviors on your PhoneApplicationPage to enable the tilt effect or enable a page transition. In the Example below I’ve added the EnableTiltEffectBehavior to enable the tilting effect on every clickable usercontrol and I’ve added a TransitionTurnstileInBehavior to show a turnstile animation on entering the page and a TransitionTurnstileOutBehavior to show a turnstile animation on leaving the page.

The transition behaviors have 2 properties where you can set the animation for forward and backward transitions. by default the most common animations are selected.

To test if everything is working drag a button on the content grid and add a second page to your application. The button should now have a tilt effect and you should have turnstile animations when navigating between the pages.

If you want to disable the tilt effect for a specific usercontrol you can add the SuppressTiltEffectBehavior on that control and the control will no longer have a tilt effect.

I’ve added a complete sample application showing all the transitions and tilt effect behaviors on the codeplex site of the Windows Phone Toolkit Behavior Extensions

If anything isn’t working contact me on twitter or post a comment

Geert van der Cruijsen

        

This week I started working on a new project with a designer and he asked me how to insert the page transitions on a windows phone application page and I showed him that you’ll have to add a piece of XAML to your code and the page transitions will work. He asked me “Can’t I do this in the designer mode without touching any code?” I didn’t have any right answer for him so that’s why I’ve spend part of my weekend to build some behaviors that can be used to drag this functionality on pages in Expression Blend.

There are behaviors for every type of transition available in the silverlight toolkit. for each transitiontype there is an “in” and “out” behavior for entering and leaving the page. Besides the transition behaviors I’ve also created a behavior to turn the tilteffect on or off

• EnableTiltEffectBehavior
• SuppressTiltBehavior
• TransitionRollInBehavior
• TransitionRollOutBehavior
• TransitionRotateInBehavior
• TransitionRotateOutBehavior
• TransitionSlideInBehavior
• TransitionSlideOutBehavior
• TransitionSwivelInBehavior
• TransitionSwivelOutBehavior
• TransitionTurnstileInBehavior
• TransitionTurnstileOutBehavior

You can download the behaviors here: (important: you also need the silverlight toolkit for this to work)

http://phonetoolkitbehavior.codeplex.com/

On the codeplex site you’ll find a msi release containing the dll that you can include in your project to use these behaviors and I’ve also included a sample application. I’ll also upload the sample application to the marketplace so you can easily test out the performance etc without any trouble.

For a compete tutorial check this blogpost.

This is currently the first release so every feedback is welcome. please let me know by adding a comment here or contact me on twitter

Geert van der Cruijsen

        

If you like my template it’s a free template for WordPress called “Twenty Eleven 1.2” and you can just download it from the template gallery in WordPress.

Enjoy!

        

This is basic functionality but when I asked around I noticed most people don’t know about this feature so that’s why I wrote this blogpost.

By default in Expression Blend your app will show using the dark theme and the blue accent color. To see how your app looks in white just open the Device window by clicking “Window” –> “Device”

When the device window is opened you can switch to the light or dark theme by clicking one of the icons. You can also select the accent color from the pulldown box on the right.

The result:

Happy Coding! Designing!

Geert van der Cruijsen

        

Implementing the control is easy by just installing the SDK, create an account, adding the control to your page and filling in the applicationid and the adunitid. if you still need a guide this one explains all the details:

http://blogs.msdn.com/b/urmila/archive/2011/03/10/displaying-ads-on-windows-phone-7-apps-the-basics.aspx

So the control is added to the page and you’re ready to go. If you followed all the instructions the ads should show up fine. Not for you?

I had the same problem when I was testing my application. I did most of my testing in the emulator and the ads would show up fine right there. When I started testing on my phone I noticed that only the ad placeholder was shown for really short time and after that the ad was hidden. Trying to find out what the differences could be between my phone and the emulator my first thoughts were the Culture of the phone since my phone is running in Dutch Culture nl-NL and the emulator is running en-US by default. When I switched the culture on the emulator to being Dutch the ads also stop showing there.

So what is the problem and how did I fix it?

The Pubcenter Adcontrol has a nice event called “ErrorOccured” and you can subscribe to this event to see what is happening. (or just attach the debugger and set it to break on exceptions)

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:     adcontrol.ErrorOccurred += new EventHandler<Microsoft.Advertising.AdErrorEventArgs>(adcontrol_ErrorOccurred);

   5: }

   6:  

   7: void adcontrol_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)

   8: {

   9: }

In the adcontrol_ErrorOccurred eventhandler you can log your error the adcontrol is throwing or handle it the way you want to. The error I kept getting when using the Dutch Culture was:

Microsoft.Advertising.Mobile.Shared.AdException – No ad available.

My guess was that this was happening because there aren’t any Dutch ads yet so I tried to change the settings of the adcontrol by changing the CountryOrRegion, Language and even the Latitude and Longitude attributes to somewhere in the United States but this doesn’t help. I made a ticket at the Pubcenter helpdesk and they told me a new algorithm just went live and it can be that there aren’t to many ads yet so it’s possible to get a disappearing ad control once in a while when you’re running less common cultures. Trying to change the country or culture DOES NOT WORK so you’ll just have to wait (It’s not like Admob is a better alternative since that one isn’t working at all)

I would encourage everyone to just leave the ad in and the requests to the Pubcenter servers will show that there is a lot of space for ads to be sold so advertisers will jump in and use this space.

Nokia seems the first to jump in because the last few days I seem to receive Nokia Lumia ads when using a Dutch culture

Oh btw this method also works when you’re having other issues with your ad control ofcourse. just check the exception to see what’s going on. The one thing I keep forgetting every time I add the AdControl are the capabilities in the WMAppManifest.xml. when you do this you’ll get another AdException:

Microsoft.Advertising.Mobile.Shared.AdException – Required capabilities are missing from manifest (WMAppManifest.xml): ID_CAP_NETWORKING, ID_CAP_PHONEDIALER, ID_CAP_IDENTITY_USER, ID_CAP_MEDIALIB, ID_CAP_WEBBROWSERCOMPONENT.

Geert van der Cruijsen

        

Here is the story on how it all went down:

Since PinPin’s launch last week I’ve been loaded with feedback from people, most of them were positive but there was also a large group of people who weren’t able to get ATM locations. At first I didn’t have any idea how this was possible since I had tested at many locations in the Netherlands and had asked several colleagues to test the app and it worked for everyone.

Luckily  lots of people were able to find the feedback form in my app and when I received a mail from Marco who had a dev unlocked phone and was receiving the errors I found my chance to find out what was causing the bug. I made a version 1.1 and submitted it to the marketplace (that wasn’t smart because that’s why it took so long to get 1.2 out) but also mailed it to Marco so he could test. 1.1 had the option to save the errors and send a mail with the Error messages and a stacktrace so I could see what was going wrong.

With the error report I received from Marco I could see it was something in the response from the webservice I’m calling to get the ATM data but still couldn’t see what the error was exactly. I again added more logging to the app and asked Marco to test again. This time I could compare my request and response from the server to his and then I found out: The Dutch regional settings were screwing things up. Ofcourse this is a major concern for an app that is only used in the Netherlands

I fixed the bug but had to wait untill version 1.1 had passed certification before I could submit 1.2 Wednesday night 1.1 was approved and I immediately submitted 1.2. Today I received another mail from Microsoft that 1.2 also passed certification. From now on everyone should be able to use PinPin!

If you find any bug in version 1.2 please let me know and I’ll try to fix it asap again.

It can take a while before you’ll get the 1.2 update notification from your phone but you could also manually uninstall your current PinPin installation and reinstall from the marketplace you’ll download version 1.2.

Big thanks to Marco and everyone else who has send feedback concerning this bug. Hopefully you can enjoy PinPin now and if you do don’t try to rate and review the app, it only takes a few seconds!

Oh and if you didn’t have PinPin yet, you can download it here:

Geert van der Cruijsen

        

At this moment PinPin only works if you are located in the Netherlands because there is no worldwide ATM location data available. I’m still looking for this data so if someone knows where to get this please let me know.

Below are some screenshots of the application:

PinPin is available for FREE in the Windows Phone marketplace. download it by clicking the button below:

Special Thanks to Christiaan Veeningen for telling me to build this app

If like or dislike the app please let me know by rating the app or by submitting a review. You can also contact me through twitter @geertvdc or leave a comment here on my blog.

This is currently the first release of PinPin. I have more plans for the app in the future, here is a roadmap of what to come:

• Add Dutch language
• Get Directions (Will have to wait for Mango)
• Add more Bank logo’s
• Add more countries
• Review Comments I get from you!

Hopefully you’ll enjoy this new app!

Geert van der Cruijsen

        

After uploading my .xap file the app hub told me the “NeatralResourceLanguage” attribute was missing with the following error:

The [NeutralResourceLanguage] attribute is missing on the entry assembly. (2003)

Not sure what this error means I started looking in Visual Studio. and found the solution for the problem.

• In Visual Studio 2010 rightclick your project and choose properties
• At the application tab click the “Assembly information…” button
• Fill the Neutral Language in the popup
• Press ok!
• You’re ready to go!

It seems that the new App hub Checks up on more things than the old App hub did. The neutral language is probably something a lot of people will forget so hopefully this helps others who are receiving this error.

The Assembly information can also be changed manually the following way:

• Open the properties directory in your WP7 project
• Open the AssemblyInfo.cs file
• Add the following line at the end of the file:

[assembly: NeutralResourcesLanguage("en-US")]

using System.Resources;

Geert van der Cruijsen

        

I’ll try to update this post when I bump into stuff I didn’t write about yet.This post isn’t about describing all new stuff since there are already dozens of other great blog posts about that but I’ll try to write my opinions about how these features are working out or what I am still really missing in Mango.

Lots of small features that make your life easier:

One of the things I enjoy the most about Mango are the small things that really annoyed me with the 7.0 release of Windows Phone 7, for example the shutdown button that automatically turned of your phone even when the phone is locked. Now in Mango you have to slide down after pressing the power button so no more turning off your phone by accident. Also there is an option to set the pin timeout a bit longer so you don’t have to type in your pin every time you want to use your phone (15 minutes is max when you have policies applied).

One small feature I didn’t read about but seems missing is setting up the mail sync times. On my old phone I used to sync mail automatically with push mail between 7:00 and 23:00 so my phone wouldn’t make so much noise when it’s next to my bed when I’m sleeping. I haven’t found this feature so I think this is a big miss for the Mango release.

More Social:

Facebook integration was already great in 7.0 but it just got even better. The threading functionality sounds great but for some reason with US/English and Dutch live accounts something doesn’t seem to work. I really can’t wait for this to start working because seeing this in the movies is so nice!

The “Me” live tile became a lot more useful in Mango because you can get messages in the tile about new updates you have on Facebook. also when clicking on the tile you can use Facebook check in with only a few finger presses.

The use of groups is also added in Mango but I haven’t used this yet. I can keep up with my social updates but maybe this will change when twitter will start working in the retail version of Windows Phone 7.1 (In the Mango Beta twitter integration is not yet available).

Other integration will also be available like LinkedIn but this doesn’t seem to work for me in the Beta either.

Dutch Language:

Up until now I only had the English language available which is ok if you only type in English. Since 50% of my communication is in Dutch I really enjoy the added Dutch dictionary added in Mango!

Bing!

Before Mango I can’t say I actually used the Bing button other then pressing it by accident. but now 4 new cool features are added that seem to work really good. One of the features that I was really looking forward to is “Bing Vision”. With Bing Vision you can scan barcodes, qr codes, text but also books, cd’s and dvd’s. When you can a book you can automatically open apps like amazon to order this book or get more info about the book. Really great!

Besides Bing Vision there is also a button to listen to music like Shazam did in 7.0. Now this feature is build in and is working pretty good. There is also a “Nearby” feature added to Bing to get nearby restaurants, things to see, hotspots etc but there is no Dutch content yet so I only get the nearest locations in Germany….

The last option that is added to Bing is the voice to text search. but I don’t really see the big use of this. when I tested it it made a lot of mistakes and in the same time I could write it.

IE9:

What can I say… the old browser in wp7 was a disaster. All other mobile browsers were far superior but now IE9 mobile uses the exact same rendering engine as the desktop version so it is a great improvement. It can render HTML5. has more screen space because the address bar is moved to the bottom (Would hope there would be an option to hide it though to get even more space when reading for example). also when browsing in landscape mode you can now use the address bar which wasn’t possible in 7.0.  You can now also pin websites to your homescreen for fast access to certain websites you use often.

7.1 apps:

I have seen a lot of movies and demo’s about cool apps using Mango features but there is no possibility to test those myself except for writing your own apps of course (which I will do!) I do have really high expectations about these apps and all the new features

To do:

One major issue a lot of people were missing are tasks but now this is added to your calendar hub and can be synced with exchange.

Games hub:

I’ve read a lot about new features in the games hub and the integration with Xbox live but since my Xbox Gamer tag live id is Dutch it’s not possible to use this yet. The list of games is cleaned up though and is looking a lot better than it did in 7.0

What is not in but needs to be in?

The one super major thing I really need is Tethering. I can understand not all providers can appreciate this feature but I used it on windows mobile 6.5 and now with the same provider I can’t use it anymore. that’s a bit shame!

the other thing I already mentioned and that is setting up times to sync your stuff and times it shouldn’t but it seems I’m the only one wanting this feature

Loads more is in!

Steve Balmer promised us 500 new features so I only touched on this a little but but I hope you enjoyed reading my first opinions about Mango and the Beta. I see a bright feature for WP7

        

first of all of course is a demo. You can can check it here: http://www.vdcruijsen.net/demo/jquerycarousel/carouseldemo.html

so how does this work? We’ll start with the HTML used for the carousel:

<div id="carousel">

    <div class="carouselbody">

        <ul class="carouselcontainer">

            <li class="page"><div style="width:400px; height:300px; background-color:Green">test tab 1</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Red">test tab 2</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Orange">test tab 3</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Blue">test tab 4</div></li>

        </ul>

    </div>

    <ul class="pager">

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

    </ul>

</div>

The HTML is actually pretty easy, The first div is a container with an id called carousel so the script knows what belongs to the carousel and what not. you can set a height and width on this div to size your carousel. The carousel div contains 2 main parts. the carouselbody a container for all the carousel pages and the pager where you can define your pager links. this pager can also be put before the carouselbody if you want the pager or tabs above your pages.

The carouselbody has a unordered list containing all the actual pages. all the list items are shown have a css class called page so the script knows that inside is the content for a page. in the list item I’ve put some div with inline styling to show that you can put whatever you want inside this page list item.

the pager has links which have a pagerpage class. the script will automatically match the first available pagerpage link to the first page etc.

Below is the css I used in the demo. you can customize this to set pictures for the paging mechanism or set heights, colors etc. this current css is just an example. (some display elements are needed though, its best to start of with the supplied css and change it to your likings.)

#carousel { height: 400px; overflow:hidden; }

#carousel .carouselbody { float: left; width: 400px; height: 360px; overflow: hidden; position: relative; background-color:#212020;}

#carousel .carouselcontainer { list-style: none; padding: 0px; margin: 0px;  position: absolute; left: 0; top: 0; }

#carousel .carouselcontainer li{ float: left; margin: 0px ; border-width: 0px;}

#carousel .pager { overflow:hidden; list-style: none; clear: both; }

#carousel .pager li { float: left; }

#carousel .page

{

    display:none;

}

#carousel .currentpage

{

    display:block;

}

#carousel .pagerpage

{

    margin-left:2px;

    background-image:url('/Content/images/pager2.png');

    width: 20px;

    height: 20px;

    display:block;

    text-decoration:none;

}

#carousel .currentpagerpage

{

    background-image:url('/Content/images/pager.png');

    text-decoration:none;

}

So now the HTML and CSS is explained its on to the actual jQuery script which makes all this magic happen. You only need 1 line to change a div to a working carousel if you also include the other script pieces somewhere on the page. the line to add in your script that is executed on document.ready is the following:

$("#carousel").carousel();

this method will of course only work if the carousel method is available. This is added through the following code:

$.fn.carousel = function (options) {

    var defaults = {

        start: 0

    };

    var options = $.extend(defaults, options);

    $(this).find(".page:eq(" + (options.start) + ")").addClass("currentpage");

    $(this).find(".pagerpage:eq(" + (options.start) + ")").addClass("currentpagerpage");

    $(this).find(".pagerpage").bind("click", function () {

        $(this).parents(".pager").find(".currentpagerpage").removeClass("currentpagerpage");

        $(this).parents("#carousel").find(".currentpage").removeClass("currentpage");

        $(this).addClass("currentpagerpage");

        var index = $(this).parent().index();

        $(this).parents("#carousel").find(".page:nth-child(" + (index + 1) + ")").addClass("currentpage");

    });

};

the $.fn.carousel line makes the carousel method available in the rest of your jQuery code. I’ve added some options as an example to make the carousel start at a different page.

the first thing the script does is searching for the page on which it should start and adds the currentpage css class to this page so the page becomes visible. The script does the same for the active pager item.

after this the script binds click events to the pager links so the pager links can do their work when they are clicked. on each click event the current page is made invisible by removing the currentpage css class and after it puts the current page css class on the newly selected page.. that’s all

Hopefully this code is something you can use on your own website or otherwise learn from it or use pieces of it.

Geert van der Cruijsen

        

My app is almost finished and I was trying to set up the live tile and application icon. Of course I wanted to use the system color which the user has selected to display on the background of my live tile. How to do this? here is how, it is actually quite simple.

when you open your solution you’ll automatically get your background.png and applicationicon.png. both icons have a black/greyish background. like shown in the example below.

to switch the background to use the system color follow the following steps:

• Open up your background.png in any decent image editing tool like Paint.net.
• Use the magic marker to select the background

• press delete so you get a transparent background

• save the icon back to your visual studio solution.
• compile
• enjoy!

Ofcourse the next step would be to do the same for your application icon (the icon in the application list).

I tried it and it didn’t work… after some research I found out that this is for Microsoft and official partners only.. Bummer!!

Guess we are going to be stuck by using greyish application icons after all.. hopefully Microsoft will fix this in the future.

Hopefully this post was helpful to you. In my opinion there are to few good resources to be found on WP7 development so every small thing helps.

Geert van der Cruijsen

        

the hardware:

The phone is feeling really robust and the screen is looking really well. the captative screen works very good aswell. all menus and buttons are reacting really fast and Microsoft really did their best in getting the UI right.. And they did! After testing the Camera i have to say that this is probably the worst part of this phone. when it’s a bit dark the pictures get really bad. i also don’t like the “hardware”/tip buttons under the screen. ofcourse you dont need them that much but when i compare this to my girlfriends HTC Desire i have to say i prefer real hardware buttons.

booting it for the first time:

after booting it you get a small tutorial to set stuff up. i choose to skip the windows live id and to just get started. within 1 minute my phone was ready to go. I’ve started setting up my exchange mail since all my contacts/mail/agenda stuff is in there. the setup was also done really easy, just add an exchange account, add your username/password and press ok. everything just worked. after this i’ve added my facebook account. after i did that all contacts were synced and merged perfectly. my exchange contacts have facebook pictures etc. looking pretty slick.

After this i tried setting up my live id.. stubborn as i am i ofcourse added my dutch liveid to see what would happen.. first it would ofcourse sync my mail/contacts etc.. that was the positive part. then i tried to open the marketplace but that wasn’t working. i tried to deinstall the live id but that isn’t possible. so a hard reset was a fact (within 5 minutes after i first touched it).

after playing with facebook/mail/apps etc i tried the most important thing a phone has to do: call someone. to make this extra hard i called someone while i was on my way home through my parrot carkit. some windows phone 6.5′s wouldnt even make this test but sound quality was really good with my new phone. also the ui of the call screen and contact screen  is really well thought off.

next try: setting up a US based live id and adding my dutch live id after. Perfect. i get all the contacts/agenda/mail from my dutch live id and i can get to the marketplace through my US live id.

ofcourse i had to set my facebook/exchange stuff again but that was done in a few minutes.

after playing around with it for a few hours this evening i have a pretty good feeling about this. my conclusions for now:

pro’s:

• WP7 is really responsive and intuitive
• overall hardware is robust and looking nice
• everything just works (except dutch live id’s )
• most important thing calling works really good (nice contact screen, nice call screen)

cons:

• camera is a bit flaky
• power charge is on the side of the phone (i am left handed and can’t even hold it normally when the power cable is in….)
• Support for dutch marketplace / xbox live missing (will be there in april 2011)
• no tethering (will come someday)

i’ll update some more about the new phone after i’ve played with it a bit more after a few days (battery use for example)

Geert van der Cruijsen

        

I’ll explain how to build it by an example. for example you have a list of customers and a list of customer actions. What I wanted to build was a way to make it easier to add a customer action for a specific customer. To do this I added a custom column to the customer list containing a link to the edit form with the customer id as an url variable. Of course the out of the box you can’t create links or any other html with calculated fields so I added more javascript there.

to enable html as output of a calculated field just copy this piece of javascript and put it in a content editor webpart or paste it on your master page.

var theTDs = document.getElementsByTagName("TD"); 

var i=0; 

var TDContent = " "; 

while (i < theTDs.length)

{ 

  try

  { 

    TDContent = theTDs[i].innerText || theTDs[i].textContent; 

    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0))

    { 

      theTDs[i].innerHTML = TDContent; 

    } 

  } 

  catch(err){} 

  i=i+1; 

} 

Thanks Marijn Somers for this piece of code. original source: http://marijnsomers.blogspot.com/2010/01/write-html-code-in-sharepoint-via.html

so now my calculated field was a link in html. what did my calculated field look like?

="<DIV><a href=’../../Lists/CustomerActions/NewForm.aspx?Customer="&[Customer ID]&"’>Add Customer Action</a></DIV>"

First a DIV element since the javascript above only replaces elements starting with a <DIV> to html, then just a plain html link to the NewForm.aspx sending the customer id as an url parameter.

So now the changes in the customer list are done and we only need to add some more javascript at the NewForm.aspx or again just at your masterpage to get the parameter from the url and selecting the right lookup field value at the form.

I’ve created the following code  using Jquery:

var customer = $.getUrlVar("Customer");

if(customer != "")

{

  $("input[title='Customer']").val(customer);

  $("select[title='Customer']").children("option").each(function() {

    if($(this).text() == customer)

    {

      $(this).attr('selected', 'selected'); 

    }

  });

}

My customer actions list contained a Customer field which is a lookup to the Customer list by Customer ID. The script above gets the Customer ID from the url parameters first and then tries to set the lookup item. SharePoint renders lookup items in 2 different ways. as a select box when there are less then +/- 25 items and as a auto complete textbox when there are more then 25 items in the lookup list. Because of that I firs try to set the textbox to the right value and after that the select. I’m using the title attribute to locate the right input field because it gets the same name as the field from SharePoint by itself.

Now when I open the newform.aspx?customer=1234 my customer lookup field is automatically prefilled with 1234

Geert van der Cruijsen

        

if you try to acces the SPContext to early in the pipeline you’ll get a System.InvalidOperationException error.

The earliest you can use the SPContext is in the “PreRequestHandlerExecute” so don’t use it at the BeginRequest event what most people try to use when they want to add code as early in the pipeline as possible

code:

   1: public class RequestHandlingHttpModule : IHttpModule, IRequiresSessionState

   2: {

   3:  

   4:     public void Dispose() {}

   5:  

   6:     public void Init(HttpApplication application)

   7:     {

   8:         application.BeginRequest += application_BeginRequest;

   9:         application.PreRequestHandlerExecute += new EventHandler(application_PreRequestHandlerExecute);

  10:     }

  11:  

  12:     void application_PreRequestHandlerExecute(object sender, EventArgs e)

  13:     {

  14:         string webUrl = SPContext.Current.Web.Url;

  15:     }

  16:  

  17:     void application_BeginRequest(object sender, EventArgs e)

  18:     {

  19:         // do not use SPContext here it will throw a System.InvalidOperationException 

  20:         // this event is fired before PreRequestHandlerExecute so code that doesn't uses SPContext goes here

  21:     }

  22:  

  23: }

Geert van der Cruijsen

        

In your server side code it’s really hard to change these kinds of things because this is standard SharePoint functionality and you can’t change it server side. So the solution is to fix it using javascript and to make that easier I’m using JQuery.

first I’ll show you the results below and then how I did it using a small JQuery script.

before:

after:

Below is the JQuery script to change the position of the edit menu to the left. the only thing you have to do is save this code to a js file, include the reference to the js file and a reference to the JQuery library js file on your masterpage and you’re done.

   1: $(document).ready(function() {

   2:     SPEditMenuFix();

   3: });

   4:  

   5: function SPEditMenuFix() {

   6:     $(".ms-WPHeader").each(function() {

   7:         var first = $(this).children("td:first").clone(true);

   8:         var last = $(this).children("td:last").clone(true);

   9:         $(this).children("td:first").replaceWith(last);

  10:         $(this).children("td:last").replaceWith(first);

  11:     });

  12: }

Enjoy!

Geert van der Cruijsen

        

because I had so many spam comments I had to remove all of them so sorry for everyone who posted real comments because they are also gone now.

BlogEngine.Net 1.6.1 (download from codeplex) feels like its a lot more mature then the 1.4.5 version I had before. Lets see how well it will go in the future.

Because of the switch I had to change the theme because the old one didn’t work that well with this new version so i downloaded a new theme from http://www.blogenginetheme.com/ and changed a bit to my liking. When i have time i’ll change it a bit more.

If you are still using an old version of BlogEngine.Net I would advise you to upgrade to 1.6.1 because it’s looking pretty good and upgrading was easy. (costed me 2 hours including deleting of spam  )

Enjoy my new weblog

Geert van der Cruijsen

        

I’ve been looking through al the sessions on the first day of the DevDays 2010 at the world-forum The Hague, The Netherlands and I’ve picked the ones I’m going to.

First off starting with the Keynote of course by Anders Hejlsberg and the keynotes title is: “Trends and Future Directions in Programming Languages”.

After the keynote at 11:05 I’m going to see the session by Scott Hanselman called “ASP.NET MVC 2: Basics, Introduction”. Hopefully there are some new things for me to see although I know quite a bit about the MVC framework already If not… Scott is always a cool guy to listen to so i see no problems.

At 13:30 I’ll be going to the session by Alex Thissen called “Secure Coding”. It never hurts to know something about security

The next session at 15:05 is by Anders Hejlsberg again. The session is called “C# 4.0 and beyond”. I would really like to know what is beyond.

The last session of the DevDays at 16:40 I’m going to see is by Scott Hanselman. It’s called “ASP.NET MVC 2: Ninja Black Belt Tips”. Since I’m already a ASP.NET MVC ninja i would like to learn from the master how to get my black belt.

In the evening there are a couple of sessions at the “Geeknight”. The Geeknight sessions are sessions for the real geeks and are about programming for fun, home automation, etc.

Sessions at the Geeknight I’m going to are:

Ofcourse starting with the geeknight keynote by Tony Krijnen and Daniel van Soest at 18:30.

after the keynote “I’m going to learn how to make my blog suck less” by Scott Hanselman (wow 3 sessions on 1 day )

the last session at 21:00 is the hardest choice. i have to choose between “If the ‘Free Lunch’ is Over, Can we Still Afford to Eat? How to Power Boost your Applications “ or “Microcontrollers for .Net programmers” or “Using .NET to Program your Hobby Web-services”. I really don’t know what to expect from the first session, my interests aren’t with microcontrollers and the last session is about webservices which i do like but it’s a level 100 session and I think there isn’t going to be that much new stuff to be heard there.

so for now my choice is with “If the ‘Free Lunch’ is Over, Can we Still Afford to Eat? How to Power Boost your Applications “ by Rutger van Beusekom.

I really can’t wait for DevDays 2010 to start.

Maybe I’ll see you there!

Geert van der Cruijsen

        

So here is an update of mine about how to use JQuery in SharePoint to do some fancy tricks. I’ll post some more of these tricks later on and I’ll try to be more active as a blogger again. (In which I’ll probably fail)

Have you ever tried to change some of SharePoint’s default controls like the image picker?

Well I have. My customer wanted a image picker that worked exactly like the normal one except for 1 change. It shouldn’t show the selected image as an image but it should only show the URL of the selected image. I tried to change this at server side first by inheriting from the default SharePoint image picker control. This was a rather annoying job as i didn’t seem to get the right result this way. you cannot extend the rich image picker from sharepoint but only the default image picker that doesn’t have the image library function behind it.

When i was looking at the html that was rendered by SharePoint i thought it would be easier to change the html with jquery as with serverside code and this is the result. just save this source to a .js file and include it into your masterpage or aspx page and all selected images in the image picker will be changed to only show the url of the image.

///<reference path="jquery-1.3.2.min-vsdoc.js" />

$(document).ready(function() {

    HideImages();

});

function HideImages() {

    $("span[id $= '_RichImageField_ImageFieldDisplay']").each(function() {

        var url = $(this).find("img").attr("src");

        $(this).find("a").hide();

        $(this).append("<span class='imgurl'>" + url + "</span>");

        $(this).find("a").each(function() {

            $(this).find("img").each(function() {

                $(this).load(function() {

                    $(this).parent().hide();

                    var imgurl = $(this).attr("src");

                    $(this).parent().parent().find(".imgurl").text(imgurl);

                });

            });

        });

    });

}

It’s as easy as that.

More JQuery fun to post in the future.

Geert van der Cruijsen

        

In ASP.NET MVC every page has its specific controller and views that can handle the data for the page that is requested. for example when you’re building a web shop you’ll probably have a ProductController that handles everything that has to do with the Products in your shop. But when you are browsing a web shop product page you would also like to see other data that has nothing to do with products, for example your shopping basket, current login state etc. Should you add this logic to the ProductController? imo you shouldn’t since the Products controller only responsibility should be the products. So how should we handle this in the MVC framework?

My first idea that came to mind to solve this problem was doing an Ajax request to for example, the shopping basket controller on your view when you would like a shopping basket added to your page. This can be in some situations the best way to do it but in some cases you might not want to use Ajax since then this content can’t be indexed by search engines for example.

An example how to use Ajax widgets is found here: http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=310

My main goal was to be able to add widgets to a page without the controller of that page knowing about these widgets. I found some solutions to this called partial requests found here: http://blog.codeville.net/2008/10/14/partial-requests-in-aspnet-mvc/

These partial requests weren’t my favorites also since i didn’t want to put this logic in the view so i developed my own CMS like solution for this problem.

My idea was that a page can have several page zones and page zones contain widgets. widgets and complete page zones should be reusable by other pages so i stored these in my CMS database. how my database is build up you can see in the image below

A widget should be able to render itself so i made an abstract BaseWidget class that has a Render Method. A widget can also be a call to a different controller so i made a SubController class that inherits from BaseWidget. The SubController Widget has an Controller, Action and ID so it can call the controller it belongs to.

   1: public abstract class SubControllerWidget : BaseWidget

   2: {

   3:     public string Controller { get;  set; }

   4:     public string Action { get;  set; }

   5:     public object ID { get; set; }

   6: 

   7:     public SubControllerWidget(string Controller, string Action) : base()

   8:     {

   9:         this.Controller = Controller;

  10:         this.Action = Action;

  11:         this.ID = null;

  12:     }

  13: 

  14:     public SubControllerWidget(string Controller, string Action, object ID)

  15:         : base()

  16:     {

  17:         this.Controller = Controller;

  18:         this.Action = Action;

  19:         this.ID = ID;

  20:     }

  21: 

  22:     public override void Render(System.Web.Mvc.ViewContext vc)

  23:     {

  24:         vc.RouteData.Values["controller"] = Controller;

  25:         vc.RouteData.Values["action"] = Action;

  26:         vc.RouteData.Values["id"] = ID;

  27:         IHttpHandler handler = new MvcHandler(vc.RequestContext);

  28:         handler.ProcessRequest(System.Web.HttpContext.Current);

  29:     }

  30: 

  31:     public abstract void SetSettings(WidgetSettings settings);

  32: }

To build a specific widget just inherit a widget from SubControllerWidget and you are ready to go. Set the Controller, Action and ID to call and that specific controller will be called.

To add these page zones and widgets to the pages dynamically i’ve created a CMSController that overrides the OnActionExecuted method so it can insert the page zones and widgets to the model that’s been send to the View.

   1: protected override void OnActionExecuted(ActionExecutedContext filterContext)

   2: {

   3:     if (ViewData.Model == null)

   4:     {

   5:         ViewData.Model = new CMSViewModel();

   6:     }

   7:     string controller = filterContext.RequestContext.RouteData.Values["controller"] != null ? filterContext.RequestContext.RouteData.Values["controller"].ToString() : "";

   8:     string controllerAction = filterContext.RequestContext.RouteData.Values["action"] != null ? filterContext.RequestContext.RouteData.Values["action"].ToString() : "";

   9:     string controllerActionid = filterContext.RequestContext.RouteData.Values["id"] != null ? filterContext.RequestContext.RouteData.Values["id"].ToString() : "";

  10:     IList<PageZone> zones = _cmsRep.GetPageZonesForPage(controller, controllerAction, controllerActionid);

  11: 

  12:     CMSViewModel page = (CMSViewModel)ViewData.Model;

  13:     if (page.PageZones == null)

  14:     {

  15:         page.PageZones = zones;

  16:     }

  17:     else

  18:     {

  19:         foreach (PageZone zone in zones)

  20:         {

  21:             page.PageZones.Add(zone);

  22:         }

  23:     }

  24: 

  25: 

  26:     base.OnActionExecuted(filterContext);

  27: }

So now all widgets beloning to a page will be retrieved from the CMSRepository and are added to the CMSViewModel so now it’s the View’s turn to render all widgets.

In my master page I’ve added the following line that is responsible for rendering all widgets:

<% Html.RenderPageZones(Model); %>

For that to work I’ve created a few html extension methods to render the page zones.

   1: public static class HtmlCMSExtensions

   2: {

   3:     public static void RenderPageZones(this HtmlHelper html, CMSViewModel page)

   4:     {

   5:         if (page != null && page.PageZones != null)

   6:         {

   7:             foreach (PageZone zone in page.PageZones)

   8:             {

   9:                 html.RenderPartial("PageZone", zone);

  10:             }

  11:         }

  12:     }

  13: 

  14:     public static void RenderWidgetsInZone(this HtmlHelper html, PageZone zone)

  15:     {

  16:         if (zone != null && zone.Widgets != null)

  17:         {

  18:             foreach (IWidget widget in zone.Widgets)

  19:             {

  20:                 widget.Render(html.ViewContext);

  21:             }

  22:         }

  23:     }

  24: }

In my PageZone view i’ve added the other html extension method called RenderWidgetsInZone so all widgets are rendered by itself.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<VanDerCruijsen.MVC.CMS.Model.PageZone>" %>

<div id="<%= Html.Encode(Model.Name) %>">

name:<%
   1: = Html.Encode(Model.Name)

%>

<%
   1:  Html.RenderWidgetsInZone(Model);

%>

</div>

This is the way I use to create widgets on my ASP.NET MVC pages. If you have any recommendations or better ways how to do it please let me know.

When I have the time I’m going to build an admin controller to be able to add widgets and pagezones via the webinterface since now the only option is to add them in the database by hand.

My sources aren’t really cleaned up so if you want a working source/solution please send me mail or leave a comment.

Geert van der Cruijsen

        

It’s been a while since my last post (again ) but I’ve been quite busy testing out the new ASP.NET MVC Framework. I have to say i really like it. Currently I’m building my own little CMS framework on top of the MVC framework so it becomes easier to use widgets or other non main data items on your pages. As soon as it’s in a show able form I’ll  post it on my blog.

I’ve also written an article about the ASP.NET MVC framework for the Dutch .Net Magazine (in Dutch) so if you are a reader of the magazine check out page 22 of the June 2009 release (#25)

The Title of my article is: “Volledige controle over je webapplicatie met het ASP.NET MVC Framework” (“Total control over your web app using the ASP.NET MVC Framework”)

The article will also come online sometime but the official site (also used to sign up for the free magazine) www.dotnetmag.nl is still showing #23 as the newest one.

When the pdf is put online I’ll add the link to this post.

I’ve focused on writing about how to build an ASP.NET MVC application using TDD because I think this is one of the major advantages over the “old” way of building web applications in ASP.NET.

If you have any feedback or comments about the article please let me know!

Geert van der Cruijsen

        

My colleague started searching and came up with this link:

http://www.microsoft.com/downloads/details.aspx?FamilyID=53289097-73ce-43bf-b6a6-35e00103cb4b&displaylang=en

Pretty cool huh? I haven’t seen any official press releases from Microsoft but since you can download it it seems that it has been released! 

My guess is that it will be announced on MIX today or tomorrow but I couldn’t wait to share it with you already J 

Geert van der Cruijsen  

        

When I browsed to http://live.visitmix.com/ the Keynote was played LIVE in silverlight Scott Guthrie was already talking about StackOverflow.com and after that he started talking about Silverlight 3.0

Silverlight 3.0 is going to bring us some pretty cool stuff like Hardware 3d acceleration and multitouch support. These functions ofcourse are pretty cool but are they really usefull? one of the most important things Scott also announced was SEO optimization for Silverlight 3.0.

In Silverlight 3.0 you will be able to store points in your applications from where you can browse from and to by using your forward / back buttons but you're also able to create a bookmark and ofcourse the most important part is that it can be indexed by search websites so they can link to specific locations in the silverlight 3.0 app.

Another cool thing in Silverlight 3.0 is that if you build an application using some external libraries that the libraries can and will be downloaded only when they are used. and when you use the same library in a different silverlight app it will use your already downloaded version instead of pulling it from the server again saving bandwidth.

Sketchflow is a new feature build in Blend 3.0 which will enable you to create sketches of your design rapidly by dragging and dropping wiggely controls (pencil drawn looking controls) on a screen. You can also create a flow of the application fluently by creating several screens and connecting them together. After this you can add functionality to some navigation buttons (without writing code) to navigate from 1 screen to another. After this you can change your sketches to real working code and you’re done!

Multi Tier Data is another new feature which is working like a proxy representation of your data on the server inside your silverlight app. You can databind your controls to the proxy data and if you update the data it will automatically be synced with the server. It’s also possible for the server to push changes in the data to the client so you don’t have to poll the server anymore.

Scott rounded up his presentation telling that the current silverlight 3.0 package is smaller than the current silverlight 2.0 package and the beta 1 is released today! You can download it at:
http://silverlight.net/getstarted/silverlight3/default.aspx

Scott didn’t say anything about a final release date but he did mention later this year (so probably q4)

I really like the changes and can’t wait to start playing with SL 3.0

Geert van der Cruijsen

        

The Customer where I'm currently working at asked me if i could build him a Silverlight 2 app. I've been playing around with Silverilght quite a bit but i haven't really used any design patterns so i came to the idea to search the web if there are any specific Silverlight design patterns.

The only really big pattern i found was the MVVM Model View Viewmodel pattern. This isn't a completly new design pattern (Martin fowler calls it the Presentation Model Pattern)

If you know the MVC pattern which you probably do know this is somewhat alike. The model is your layer which connects to the data and the view is ofcourse xaml based in silverlight. So what does the ViewModel do? The viemodel is used to build specific models for each view in your silverlight app so you can have full advantage of the strong databinding in Silverlight.

There are quite some resources about this pattern which i'll link down here:

• MVVM Webcast
• http://blogs.conchango.com/davidwynne/archive/2008/12/15/silverlight-and-the-view-viewmodel-pattern.aspx
• http://joshsmithonwpf.wordpress.com/2009/02/25/two-model-view-viewmodel-screencasts/
• http://msdn.microsoft.com/en-us/magazine/dd458800.aspx
• http://davidburela.wordpress.com/2008/10/19/silverlight-mvvm-dependency-injection/
• http://jonas.follesoe.no/YouCardRevisitedImplementingTheViewModelPattern.aspx

I'll be using this pattern at my current assignment and afterwards i'll blog about the results

Geert van der Cruijsen

        

On my current project we are building a customer facing SharePoint application which has to store files. These files are uploaded with biztalk so we have to set the permissions manually so only the user who the file belongs to has rights to open te file.

We are storing the username of the owner of the file in the metadata of the sharepoint item and we are going to use this to set the permissions after the file is uploaded to sharepoint by Biztalk.

After adding the file we've set up a SharePoint Workflow to move the files to a specific location and we've come up with the idea to also change the permissions in this workflow. How we did this? here's the code to change the permissions of a SharePoint SPItem in the workflow:

   1:  workflowProperties.Item.BreakRoleInheritance(false);

   2:   

   3:  workflowProperties.Item.File.MoveTo(currentFolder + "/" + workflowProperties.Item.File.Name);

   4:   

   5:  SPRoleDefinitionCollection rolecollection = web.RoleDefinitions;

   6:  SPRoleAssignmentCollection roleAssignments = workflowProperties.Item.RoleAssignments;

   7:   

   8:  SPUser user = web.EnsureUser("aspnetsqlmembershipprovider:"+workflowProperties.Item.Properties["Username"].ToString());

   9:  SPRoleAssignment roleAssignment = new SPRoleAssignment(user as SPPrincipal);

  10:  SPRoleDefinitionBindingCollection roleDefBindings = roleAssignment.RoleDefinitionBindings;

  11:  roleDefBindings.Add(rolecollection.GetByType(SPRoleType.Reader));

  12:  roleAssignments.Add(roleAssignment);

We are using an aspnetsqlmembershipprovider to store the external users so thats why we add this to the sharepoint username.

Geert van der Cruijsen

        

Long time since i’ve written my last post… well here’s my excuse: Ofcourse december is filled with the holidays etc but i also went on vacation back to Thailand again in January for 3 weeks. I had a great time there but nothing techie to write about around there

After i came back i wanted to switch hosting providers because my old one (www.sohosted.com) didn’t support mssql and for some things I’m working on i want to do with mssql and Linq. I’ve been experimenting with the asp.net mvc framework again and i have to say i really like it. (I hope i have time to write more on that subject soon on this blog)

My new hosting provider is Digitalibiz (www.digitalibiz.com) and the main reason i went to them is because 1 they are cheap and 2 they have mssql support and 3 they allow multiple domains on 1 account.

When you are reading this message the dns is finally changed to my new hosting so i can get rid of the old one. Tnx people at Sohosted for the good hosting i had there for multiple years but it was time to move on. I hope Digitalibiz will be as good as they were.

Geert van der Cruijsen

        

The guy who build the site is a webdeveloper with 6 years experience in building flash apps and 1 year of Silverlight experience. On his blog are a lot of apps build both in Flash and Silverlight. Some examples are: loading a big external image into the silverlight / flash app and a fps stress test.

http://www.shinedraw.com/data-handling/flash-vs-silverlight-loading-external-image/

http://www.shinedraw.com/mathematics/flash-vs-silverlight-fps-meter-stress-test/

It's very cool to see that the output of both platforms is almost equal, though in most test Silverlight is performing a bit better then Flash 10.

Also if you look at the code that is used in both examples you have to say that programming in Silverlight is a more pleasant experience.

Both platforms have strengths and weaknesses. Microsoft has visual studio which is far out the best IDE out there. Adobe on the other had has the best tools for designers.

The battle for best rich internet platform rages on!

Geert van der Cruijsen

        

This control suite contains a number of special controls that are now available for the public to download and use in their own projects.

an example of what kind of controls are included in the toolkit:

• TreeView
• Charts
• Expander
• AutoComplete
• NumericUpDown

On the codeplex site there are online demos of all controls which are included in the toolkit and the controls are also documented in the wiki on the page.

 Example of how the Treeview looks and how you use it:

Example of the AutoCompleteBox and how to use it in your xaml code: 

You can check out the online demos at codeplex: Controls demo and the Charting Demo

I really think Microsoft did a great job at offering these controls to the community and it will make developing in silverlight easier for everyone.

I liked the Charting part the most and i really look forward in using that in my projects in the future. Just look at how nice these controls look and how easy you can fit them into your project:

Geert van der Cruijsen

        

There are a few new controls added in this release: the Combobox, passwordbox and the progressbar.

you can download the new silverlight release candidate at: http://silverlight.net/GetStarted/sl2rc0.aspx

on Scott Guthries weblog there is a nice explanation on how these new controls work.

the new silverlight Controls (Combobox, passwordbox and the progressbar)

note that only the developer tools and runtime are released and not regular silverlight runtime. This is done so developers have time to upgrade their applications before silverlight 2.0 RC1 is actually released to the public.

Happy coding!

Geert van der Cruijsen

        

We used Biztalk 2006 to receive the file, get the different files from the xml and then send them to SharePoint. In this blogpost I’ll explain how to do this with a small POC I made.

First off we started with a receive port which is able to receive the xml message (the binary port on the picture) we receive this message into a BinaryMessage message which is linked to the following schema

An example message is looking like this: (where the <document> should have the attachments as a base64binary string.

After receiving the message we want to loop through all the messages in the document so I created a foreach to read all the document elements from the xml.

The code to build the loop is the following:

InitializeLoop :

iteration = 1;

documentCount = xpath(BinaryFile,"count(/*[local-name()='BinaryFileToSharePointTest' and namespace-uri()='']/*[local-name()='Document' and namespace-uri()=''])");

first I set the iteration variable to 1 and I set the documentCount to the amount of document elements that are in the incoming xml file.

Message assignment

BinaryFileWithMetadata = BinaryFile;

binaryMessageCreator = new BinaryToSharePoint.Helper.BinaryMessageCreator();

selectXpath = "string(/*[local-name()='BinaryFileToSharePointTest' and namespace-uri()='']/*[local-name()='Document' and namespace-uri()='']["+ System.Convert.ToString(iteration)+"]/text())";

base64String = xpath(BinaryFile,selectXpath);

binaryMessageCreator.CreateBinaryMessage(BinaryFileWithMetadata,base64String);

configProperties = new VdCruijsenNet.Utilities.Sharepoint.ConfigPropertiesXML();

configProperties.AddProperty("Title","test");

BinaryFileWithMetadata(WSS.ConfigPropertiesXml) = configProperties.ToString();

BinaryFileWithMetadata(WSS.Filename) = "bestandsnaamTest "+System.Convert.ToString(iteration)+".pdf";

In the message assignment we first Create the new outgoing message for each of the documents in the incoming xml file. Then we select the base64binary string with an xpath expression and send it to the binaryMessageCreator.

The binaryMessageCreator creates a new System.Xml.Document (which isn’t a xml file but biztalk doesn’t know that from the base64binary string. For the source of the BinaryStreamFactory see below:

After creating the new Message of the type System.Xml.Document, which is actually a byte[] containing the file we add a filename and some metadata which can be stored in SharePoint we send the message with the send shape to sharepoint.

The SendPort is a “Windows SharePoint service” sendport which can automatically add the file to a sharepoint document library.

Sendport

Receiveport

As you can see it’s pretty easy to get the binary files from an xml file in Biztalk after you know how you can do it.

Happy Coding

Geert van der Cruijsen

        

Upgrading to 1.4.5 was pretty easy except 1 error i ran into. I’m using blogengine.net together with mysql since my provider doesn’t have mssql and I didn’t really like the xml based blogging. After setting everything up i kept on running into System.Threading.SemaphoreFullExceptions. After posting this on the Blogengine.net codeplex site some people mentioned this was a bug in the mysql.data.dll version 5.1.6 and if you upgrade to 5.2.2 everything should work fine again. So i did and you can see the results now.

I’ve also upgraded the layout of my weblog and added a http://life.vdcruijsen.net section to store my weblog about my life when I’m not developing software but am going out on vacation, trips or have something else to blog about.

Tnx to the Blogengine.net team for this great piece of software!

Geert van der Cruijsen

        

The weblog post starts of with summarizing the good and bad things of Silverlight but it's also nice to read the comments where a big discussion starts between Microsoft employees, Adobe employees and other developers/designers that have to choose between these 2 technologies.

Things he likes about Silverlight:

after that he tells us the things he doesn't like about Silverlight:

In my opinion Silverlight and Adobe Air/Flex can both be big and good in their own things and eventually they will start growing towards each other as .Net and Java are also doing. Adobe has its huge designers userbase while Microsoft has a very big developers userbase. I think Adobe will stay the best thing to use for really nice fancy looking webtools while Silverlight will focus itself on the real rich internet Applications instead of websites which will stay the big focus of Adobe.

I do agree with him that styling can be pretty hard for designers which aren't used to set all those properties and maybe Silverlight is a bit TOO extensible for them. As an example he shows how to change the rotation of an object in Silverlight and Flex:

I can see a designer will like the simple rotation property but Microsoft gives us (developers) the option to do all kinds of transformation on the object which is more extensible then the way it's done in Flex.

About the point where he is complaining about how buggy everything is, I think this changed in a good way from Silverlight 2 Beta 1 to Beta 2 and I'm sure that everything will be really stable at the final release. (of course Visual studio isn't in beta… but the Silverlight developer tools are so that's why Visual studio isn't always that stable while building Silverlight applications at the moment)

I do think Microsoft will have a hard time to get designers to change to Silverlight from their loved environment which they already know but only time will tell.

http://www.webkitchen.be/2008/07/17/silverlight-the-good-the-bad-and-the-ugly/

Geert van der Cruijsen

        

Update 08-06-2010: the last.fm gadget does not work anymore. Last.fm changed their client server protocols and therefore the gadget is not working anymore. I’m not using Last.fm anymore so i’m not planning on updating the gadget in the future

Last week my mailbox was flooded by mails of people who were telling me my Windows Vista Sidebar gadget to play Last.fm radio was broken.

I tested it myself and concluded that this was indeed the case. Last.fm changed their website last week and my guess is that they also changed their streaming service.

After a full night of debugging I found out what was the problem and I fixed it in a new version which can be now downloaded from the download area.

If you are interested in what was changed read on. The change was fairly simple, the protocol uses 2 handshakes to connect to the service. The first handshake is to connect to the scrobbling service. The second handshake is used to connect to the streaming service. Before last week requesting the mp3 stream was done by sending the sessionid of the first handshake. Now… it seems you have to send the sessionid you get with the second handshake. It took some time to figure this out but now everything seems to work fine again.

Protocol example:

Handshake 1 request:

http://ws.audioscrobbler.com/radio/handshake.php?version=1.4.2.58376&platform=win32&platformversion=Windows%20Vista&username=geertvdcruijsen&passwordmd5=
4d9309866b98863c3c3336e50392831b&language=en&player=winamp

Handshake 1 response from last.fm:

session=bbe5e763d1e1deb988595cecf1c21e9d stream_url=http://87.117.229.85:80/last.mp3?Session=bbe5e763d1e1deb988595cecf1c21e9d subscriber=0 framehack=0base_url=ws.audioscrobbler.com base_path=/radio info_message= fingerprint_upload_url=http://ws.audioscrobbler.com/fingerprint/upload.php permit_bootstrap=0

Handshake 2 request:

http://post.audioscrobbler.com/?hs=true&p=1.2&c=tst&v=1.3.1.1&u=geertvdcruijsen
&t=1217017120&a=2a060e72c7aae132e8fad06b741be806

Handshake 2 response from last.fm:

OK 7e5b82460d2a45e382b81c437ae6a87a http://post.audioscrobbler.com:80/np_1.2 http://87.117.229.205:80/protocol_1.2

Tune to the right radio channel:

http://ws.audioscrobbler.com/radio/adjust.php?session=bbe5e763d1e1deb988595cecf1c21e9d&url=lastfm://artist/muse

Response to channel change request from last.fm:

response=OK url=lastfm://artist/muse stationname= Muse’s Similar Artists discovery=true

Request metadata of stream:

http://ws.audioscrobbler.com/radio/xspf.php?sk=bbe5e763d1e1deb988595cecf1c21e9d
&discovery=0&desktop=1.3.1.1&time=1217017120321

I was happy to receive the mails of complaints because this is proof people are actually using my gadget Hopefully all problems are fixed now so happy listening!

Geert van der Cruijsen

        

After 2 months my client asked for a new subsite with a new document library where this workflow should also run. I installed this workflow here and expected everything would go as planned. When I tried to test the workflow I didn't see anything happen so I tried creating new items, changing them, even manually starting the workflow. Nothing happened. The metadata field which contains the workflow status was staying empty. When checking the log files I didn't see anything either.

I tried to reinstall the workflow. Deleted and recreated the site nothing seemed to help. During all this the workflow still worked fine in the other subsite and document library. When I recreated the workflow and checked the logfile again I finally found an error. (it seems Sharepoint only logs this error the first time you start the workflow and after that it doesn't do anything)

The error message in the logfile was the following:

Workflow Infrastructure        72fv Unexpected AutoStart Workflow: System.ArgumentException: De aangevraagde werkstroomtaakinhoudstype is niet gevonden op SPWeb.     at Microsoft.SharePoint.SPList.PrepForWorkflowTemplate(SPWorkflowTemplate wt)     at Microsoft.SharePoint.Workflow.SPWorkflowManager.StartWorkflowElev(SPListItem item, SPFile file, SPWorkflowAssociation association, SPWorkflowEvent startEvent, Boolean bAutoStart, Boolean bCreateOnly)     at Microsoft.SharePoint.Workflow.SPWorkflowAutostartEventReceiver.AutoStartWorkflow(SPItemEventProperties properties, Boolean bCreate, Boolean bChange, AssocType atyp)

this Dutch error (I really hate Dutch errors. you can't look them up on Google/MSDN:( )translated in English is 'The requested workflow task content type was not found on the SPWeb'. I found the exact translation because I was lucky and when I had the English error this gave me new hope to find a weblog with the answer (since weblogs seem the primary documentation for SharePoint 2007 )

I searched for the error and everything I could find was reinstalling the OffWFCommon feature. I tried this with the following commands but nothing changed. I also tried to uninstall and reinstall but this didn't help either

stsadm -o installfeature -filename OffWFCommon\feature.xml
stsadm -o activatefeature -filename OffWFCommon\feature.xml -url http://localhost/

This weblog told me the exact thing that was going on. the TaskListContentType wasn't installed on my tasks documentlibrary when I checked it by enabling content types chaning in the advanced settings of the tasks list. The ID of this content type is 0x01080100C9C9515DE4E24001905074F980F93160 which is the same as the OffWFCommon feature so it definitely had something to do with it. When I checked the content types of my task doclib that was working I noticed it had 2 content types attached. 1 called "Task" and 1 called "Workflow task content type" my Tasks library that wasn't working had a content type called "Tasks". I couldn't find any way how to add these content types because these are system content types and thus hidden.

Solution/Workaround:

Since I already wasted 1 and a half day on this problem my next try was to save the Tasks documentlibrary of the workflow that was working as a template. After that I deleted the workflow in the new document library and also deleted the Tasks list there. I added a new Tasks list by using the template I made and installed the workflow again for this documentlibrary. I tested it and guess what.. everything seemed to work fine. The solution isn't that pretty but I was glad it finally worked!

Hopefully someone with the same problem reads this before they waste to much time on this really awful problem. Also if you know  a better solution please let me know because I would really like to know how to really solve this problem.

Geert van der Cruijsen

        

I stepped into my car at 6:00 in the morning to be in Amsterdam at 9:00. In the Netherlands traffic is such a joke that it isn’t possible for me to be in Amsterdam at 9:00 because when i leave at 6:00 i’m there at 8:00 and when i go a bit later i’m already late for the first session because of all the traffic jams. So around 8 o’clock I entered the Rai and helped a bit at the Avanade stand to help kill the time before the first session.

At 9:00 the keynote started and David Platt told us Why software sucks. To wrap his story up he told us that developers write software that doesn’t function well because it doesn’t do it’s job like it is supposed to. We build to many “cool” features that nobody uses etc. His principle of software development is: KNOW THY USER FOR HE IS NOT THEE. All in all it was a interesting presentation about something everybody already knows or should know but still a lots of developers keep doing a bad job at it. If you want to know more about this subject check out David’s website or read his book called “Why Software Sucks”

The Second session I visited was an “Introduction to Silverlight 2” by Daniel Moth. He gave us a good overview of what silverlight 2 is going to do at release and what it can already do know. Since I already played around with the silverlight 2 beta I already knew some stuff he told and showed us in the demo’s but it was nice to see all aspects of what silverlight 2 is capable off. The demo’s he showed us were a Hello World example, a XAML introduction, The bridge between html/javascript and Silverlight 2, Networking capabilities in Silverlight and at the end he showed us how to acces the local file system. On Daniel’s blog is a nice summary of his presentation at DevDays so if you are interested in what Silverlight 2 can do check it out at http://www.danielmoth.com/Blog/2008/05/my-silverlight-session.html

After enjoying a nice lunch in the sun I visited a presentation about “Building Rich Internet Applications for WSS 3.0 and MOSS 2007“. This presentation was done by Patrick Tisseghem. Patrick is a SharePoint MVP and showed us to possibilities of using Silverlight in SharePoint. Before I went to the presentation I thought that this could be very useful because in my daily work I have to code against/in SharePoint quite a bit. The Silverlight support Patrick showed us didn’t came as anything new to me since Daniel Moth already showed us in his presentation that in Silverlight 2.0 you can acces webservices via the client side code. Patrick showed us how to use the standard webservices that SharePoint exposes and explained to us that we can build our own services to communicate with SharePoint. Since on my projects I already build several webservices on SharePoint this didn’t feel like anything new to me and it was mostly more of an introduction to Silverlight 2.0 that that it had something to do with SharePoint. Patrick also showed us what it takes to use Silverlight in SharePoint  but the steps you should take were a bit to specific in my opinion and you’ll have to look them up anyway as soon as you want to try it out yourself

The next session was by Ingo Rammer and was about “Combining WCF and WF in the 3.5 framework to build durable services“. I really liked this presentation since I work with WCF quite a lot on my projects and it was nice to see how to build workflow services using WF and WCF. Ingo showed us that in the 3.0 framework it wasn’t possible to build durable services and if you use duplex services things can go wrong when one of your services restart for some reason. He build a durable service that was serialized when the service shuts down and when it starts again it can be deserialized again so the service that is sending a response wont get any errors because the service has restarted.

The last session of the day was by Peter Himschoot and was about how to use REST and JSON in WCF. Peter showed us that it is really easy to use REST instead of soap to communicate to WCF services but I still don’t think that I’m going to use this very often since REST is specially build to be reached by everyone and most services I build require security and that something that’s lacking in REST. Rest isn’t supposed to be used for those services and Peter had a nice line for this: REST = REACH. meaning that if you have to communicate with software that’s build using older languages you probably use REST because most languages support the HTTP protocol.

All in all it was a nice day and I enjoyed myself and learned lots of new stuff. People who are going again tomorrow enjoy! I won’t be going tomorrow since I have to work on my project half a day before I go away for the weekend to Terschelling with my colleagues of Avanade Netherlands to have fun and drink some beers.

Geert van der Cruijsen

        

To start building your Silverlight 2.0 deepzoom application download Deepzoom Composer from Microsoft here. This tool works quite easy. just add some images in the “import” mode then drag them on your screen in the “compose” mode and then export your deepzoom Project.

If you want to be able to identify the different sub images in your Multiscaleimage object check the “Create Collection” checkbox.

After exporting this will be the result:

Now to load up this collection of pictures into your own project take a look at this weblog, there is a really good explanation on which steps to take and after you did all those steps i’ll explain how to show metada of the different subimages in the deepzoom application.

So if you are at this point you should have your own working deepzoom application and you want to add picture metadata to your project. If not go back to this weblog or try one of these.

The only way of identifying the different sub images in the big multiscaleimage is by the Z-Order of the different images. So how do you know which image has what Z-Order you ask? thats where the generated SparseImageSceneGraph.xml comes in which was generated by the Deepzoom Composer.

<SceneNode> 

  <FileName> P1000558.JPG</FileName> 

  <x>0,235460826165879</x>

  <y>0,00108692916410255</y> 

  <Width>0,218281177677285</Width>

  <Height>0,144923888547009</Height> 

  <ZOrder>2</ZOrder>

</SceneNode>

As you can see i added my own Description element to every SceneNode in the generated xml so we can use it in our project. We’ll use this xml file to query the ZOrder of the subimage and get the description as a result with the use of Linq.

To do this we’ll first have to open the xml file in our code behind page from the page.xaml.cs.

deepZoomObject.Loaded += delegate(object sender, RoutedEventArgs e)

{

    _xmlImageMetadata = XDocument.Load(“SparseImageSceneGraph.xml”);

};

After that we’ll add code to display the metadata when the mouse moves over a sub image in the multiscaleimage.

deepZoomObject.MouseMove += delegate(object sender, MouseEventArgs e)

{

    if (mouseButtonPressed) 

    {

        mouseIsDragging = true; 

    }

    else 

    {

        ImageName.Text = GetMetadata(e.GetPosition(deepZoomObject)); 

    }

    lastMousePos = e.GetPosition(deepZoomObject);

};

Then we add the function GetMetadata which queries the xml file and gets the description from it.

private string GetMetadata(Point point)

{

    Point p = deepZoomObject.ElementToLogicalPoint(point); 

    int subImageIndex = SubImageHitTest(p);

    if (subImageIndex >= 0) 

    {

        var q = from c in _xmlImageMetadata.Elements(“SceneGraph”).Elements(“SceneNode”) 

        where ((string)c.Element(“ZOrder”)) == (subImageIndex + 1).ToString()

        select (string)c.Element(“Description”); 

        if (q != null)

        { 

            return q.Single();

        } 

        else

            return “”; 

    }

    else 

        return “”;

}

This function uses the function SubImageHitTest which I copied from this weblog:

int SubImageHitTest(Point p)

{

    for (int i = 0; i < deepZoomObject.SubImages.Count; i++) 

    {

        Rect subImageRect = GetSubImageRect(i); 

        if (subImageRect.Contains(p))           

            return i; 

    } return -1;

}

Rect GetSubImageRect(int indexSubImage)

{

    if (indexSubImage < 0 || indexSubImage >= deepZoomObject.SubImages.Count)        

        return Rect.Empty;

    MultiScaleSubImage subImage = deepZoomObject.SubImages[indexSubImage]; 

    double scaleBy = 1 / subImage.ViewportWidth;

    return new Rect(-subImage.ViewportOrigin.X * scaleBy, -subImage.ViewportOrigin.Y * scaleBy, 1 * scaleBy, (1 / subImage.AspectRatio) * scaleBy);

}

if you build and start your application now you should be able to see your added metadata when you mouseover a sub image in the MultiscaleImage.

My working example can be found here: http://www.vdcruijsen.net/projects/SilverlightDeepzoom/test.html

sourcecode can be downloaded here:

(you’ll have to add your own deepzoom object since i removed that from the zip file)

Happy Coding!

Geert van der Cruijsen

        

This demo showed us the collection of memorabilia at Hardrock Cafe. The demo can be found at http://memorabilia.hardrock.com/

This demo really got my attention and after some searching on the internet i found out i wasn't the only one. There are hundreds of blogposts by people showing how you can build this for yourself and guess what: it's really easy!

I've spend some days in the weekend and this evening building my own version of a Silverlight Deepzoom Application. Most of my code is "borrowed" or copied from other blog posts which i'll list at the bottom of this post. My goal was to also be able to show metadata at the pictures and after some research it wasn't to hard to do this either. Since i didn't find any other blog posts who explained how to show metadata with your pictures i'll make a seperate blogpost about this tomorrow.

I've put some of my last vacation photo's online in my own deepzoom test application at: http://www.vdcruijsen.net/projects/SilverlightDeepzoom/test.html (source also linked on that page)

Download Source: 

As i said before i won't go explaining the code in this post because i'm gonna do that tomorrow in a separate post where i'll explain how to add metadata to your deepzoom application. if you want more information about Silverlight and Deepzoom check out the following links:

how it works: http://blogs.msdn.com/jaimer/archive/2008/03/31/a-deepzoom-primer-explained-and-coded.aspx

lots of how-to's: http://projectsilverlight.blogspot.com/

more info on silverlight 2.0 http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

Another cool thing i found out is that Microsoft is offering is a hosted environment for your silverlight applications. You can get up to 10GB of free space at Silverlight Streaming: http://silverlight.live.com/

You can upload your Silverlight manifest files + other resource files like video's to Silverlight Streaming and you can link your silverlight object on your own page. The silverlight object in my own example is also hosted at Silverlight Streaming.

If you have any questions or recommendations about this subject please dont hesitate to send me a mail about it.

Geert van der Cruijsen

        

When I looked in the SharePoint logfiles what was causing my workflows to crash it showed that the workflow couldn’t find values for some settings in the web.config. I couldn’t think off any reason why the workflow couldn’t read these settings about 50% of the times a workflow was started.

The workflow I created is automatically started after the change of an item in a specific document library. After some testing I found out that all workflows that I started by changing the item with the sharepoint webinterface worked fine but the items that were changed by an external source (a custom webservice I created but also the biztalk SharePoint Adapter webservice) crashed with the error that they couldn’t read the web.config.

The webservices that are causing the workflow to crash are in a different sharepoint webapplication and thus use a different web.config. When I added my settings in the web.config of this webapplication the workflows stopped crashing.

So it seems that the WF workflows are running in the process which changed the item in the sharepoint list which caused the workflow to start instead of the standard w3p process of SharePoint which I thought always was the case.

Happy coding!