Introducing: PhoneCompare for Windows Phone 7

I’ve built a new Windows Phone App that lets you compare 2 Windows Phone devices with all available specs right next to each other to see which is the best. You can also just check the specifications of one of the available windows phones at this moment when you are in a heated argument with friends or colleagues again where you are not sure if that phone had a 1.4GHZ processor or a 1.5 GHZ processor.

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Windows Phone developer introduction sessions at UTwente & TU/E

Last week I visited Twente University and today I went to the University of Eindhoven to do a session on building your first Windows Phone App. This post is mainly created for visitors of those sessions so they can download the slide deck and sample code we’ve created during the session.

imaginecup  utwente  tue

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Using the complementary color of the phone accent color in your WP7 app

I’m building a Windows Phone app where I want to compare 2 objects to each other visually by showing graphs on how good each of the objects is performing. because I like to use the accent color in my apps I was thinking of what would be a good second color for the other graph. Since I’m not a designer I did some research on colors and found out that every color has a complementary color that is exactly the opposite color of your primary color. (Probably some basic design knowledge I didn’t know that.

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.

complementary1complementary2complementary3complementary4complementary5complementary6complementary7complementary8complementary9complementary10

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.

image

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

complementary9

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

Happy Coding!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Build your first Windows Phone app sample code and powerpoint deck from my session @ Windesheim Zwolle

Yesterday I did a hands on Windows Phone development session to show students of the Windesheim in Zwolle how to build their first application.

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.

imaginecup windesheim

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Demo code and ppt deck from my Techdays talk on WP7 Push notifications, Live tiles and background agents available

It’s they day after the Techdays 2012 in the Netherlands and everyone is fully inspired by all the new knowledge they acquired at the event. I got questions from people asking for the powerpoint deck and my demo code so I told them I would upload it here. I had 2 sessions on the Techdays and both were on Windows Phone push notifications and live tiles. The session on the Geeknight was an introduction level session and in the session on Friday I showed all the details on how to use them with lots of code.

techdays_logo_2

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

TechdaysNL 2012 Lots of WP7, Win8, Metro and ASP.NET MVC sessions. Which sessions to pick?

This thursday Microsoft Techdays 2012 kicks off for Dutch developers working on the Microsoft platform. This year I’m speaking at 2 sessions on Windows Phone but I’m also going to visit other sessions during the 2 days of the conventions. Here is the schedule I made with sessions I’m planning on going to. It seems there are some really cool Windows Phone sessions but Windows 8 and ASP.NET MVC also has my interests. During the event I’ll keep you posted with updates on twitter and afterwards I’ll write my experiences in a new blogpost again. Here are the sessions I’m going to visit.

badge_speaking

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 11Mads 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 MetroBryan 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 4Scott 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 UnpluggedScott 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 PhoneMaarten 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 tilesGeert 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 DevelopmentFons 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 4Erik 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 WebAPIMatt 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 agentsGeert 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-EndTom 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 applicationsOlaf 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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Windows Phone 7 emulator skin switcher 1.2 released on Codeplex

Version 1.0 and 1.1 of my Windows Phone 7 emulator skin switcher were hosted on my SkyDrive but I got several requests from people to move it to Codeplex so I did that this afternoon.

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

phones

Enjoy!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Testing the SH WP ApplicationBar in an Multiselectlist MVVM scenario

If you’re developing for Windows Phone 7 and are using MVVM you’re probably familiar with the problem that you cannot bind the out of the box ApplicationBar because it is not a silverlight control. Since the early days of WP7 there are lots of solutions and workarounds to work with the application bar but most of them do have some (minor) downsides in using them. The application bar solutions that are used the most are probably the BindableApplicationBar from PhoneFX, another BindableApplicationBar or AppBarUtils.

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.

multiselectlist

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.

itemtemplate

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.

messages1 messages2

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Fixing the The Target “GetCopyToOutputDirectoryContentProjectItems” does not exist in the project exception when building your WP7 project

My colleague was installing the Windows Phone 7.1 SDK today and we received the following errors during installation plus a popup box that the bootstrapper had an exception:

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

sdk error

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 Smile 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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Windows Phone 7 Emulator Skin Switcher 1.0 Beta

In the last few weeks several people started creating their own skins for the Windows Phone 7 Emulator. Switching between different skins was a lot of work by copying files manually to the emulator directory every time you wanted to switch. From now on this is not needed anymore because you can use the Windows Phone 7 Emulator Skin Switcher application I’ve created.

wp7EmulatorSkinSwitcher

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:

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

lumia710whitelumia800pinklumia710black

 

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

Happy Coding

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter