Testing the SH WP ApplicationBar in an Multiselectlist MVVM scenario

Posted on 06/01/2012 by Geert van der Cruijsen

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:

public class Message
{
    public string Sender { get; set; }
    public DateTime Date { get; set; }
    public string Content { get; set; }
}

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.

/// <summary>
/// Initializes a new instance of the MainViewModel class.
/// </summary>
public MainViewModel()
{
    for (int i = 0; i < 10; i++)
    {
        Message m = new Message();
        m.Sender = "Sender " + i.ToString();
        m.Date = DateTime.Now.AddHours(i);
        m.Content = "This is a sample message " + i.ToString();
        Messages.Add(m);
    }
}
  
/// <summary>
/// The <see cref="Messages" /> property's name.
/// </summary>
public const string MessagesPropertyName = "Messages";
  
private ObservableCollection<Message> _messages = null;
  
/// <summary>
/// Sets and gets the Messages property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public ObservableCollection<Message> Messages
{
    get
    {
        return _messages;
    }
  
    set
    {
        if (_messages == value)
        {
            return;
        }
  
        _messages = value;
        RaisePropertyChanged(MessagesPropertyName);
    }
}

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

<Grid x:Name="ContentGrid"
      Grid.Row="1" Height="537" VerticalAlignment="Top">
    <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}"/>
    <Sh:AdvancedApplicationBar>
        <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png"/>
        <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png"/>
    </Sh:AdvancedApplicationBar>
</Grid>

The Xaml for the ItemTemplate looks like this

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="MessageTemplate">
        <StackPanel>
            <TextBlock TextWrapping="Wrap" Text="{Binding Sender}" Style="{StaticResource PhoneTextLargeStyle}"/>
            <TextBlock TextWrapping="Wrap" Text="{Binding Date}" Style="{StaticResource PhoneTextAccentStyle}"/>
            <TextBlock TextWrapping="Wrap" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>
    </DataTemplate>
</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

/// <summary>
/// The <see cref="IsInSelectionMode" /> property's name.
/// </summary>
public const string IsInSelectionModePropertyName = "IsInSelectionMode";
  
private bool _isInSelectionMode = false;
  
/// <summary>
/// Sets and gets the IsInSelectionMode property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public bool IsInSelectionMode
{
    get
    {
        return _isInSelectionMode;
    }
  
    set
    {
        if (_isInSelectionMode == value)
        {
            return;
        }
  
        _isInSelectionMode = value;
        RaisePropertyChanged(IsInSelectionModePropertyName);
    }
}

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.

/// <summary>
/// Converts a boolean to Visibililty
/// </summary>
///[ValueConversion(typeof(bool), typeof(Visibility))]
public class BooleanToVisibilityConverter : IValueConverter
{
    #region IValueConverter Members
  
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Visibility result = Visibility.Collapsed;
  
        bool val;
  
        if (value != null &&
            bool.TryParse(value.ToString(), out val))
        {
            result = val ? Visibility.Visible : Visibility.Collapsed;
        }
  
        return result;
    }
  
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        //You can't convert back
        return null;
    }
  
    #endregion
}
  
  
/// <summary>
/// Converts a boolean to Collapsed Visibililty
/// </summary>
///[ValueConversion(typeof(bool), typeof(Visibility))]
public class BooleanInverterToVisibilityConverter : IValueConverter
{
    #region IValueConverter Members
  
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Visibility result = Visibility.Collapsed;
  
            bool val;
  
            if (value != null &&
                bool.TryParse(value.ToString(), out val))
            {
                result = val ? Visibility.Collapsed : Visibility.Visible;
            }
  
            return result;
        }
  
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //You can't convert back
            return null;
        }
  
        #endregion
    }

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.

private RelayCommand _messageListToSelectModeCommand;
  
/// <summary>
/// Gets the MessageListToSelectModeCommand.
/// </summary>
public RelayCommand MessageListToSelectModeCommand
{
    get
    {
        return _messageListToSelectModeCommand
            ?? (_messageListToSelectModeCommand = new RelayCommand(
                () =>
                {
                    IsInSelectionMode = true;
                }));
    }
}

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:

<Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding MessageListToSelectModeCommand, Mode=OneWay}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</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.

/// <summary>
/// The <see cref="SelectedMessages" /> property's name.
/// </summary>
public const string SelectedMessagesPropertyName = "SelectedMessages";
  
private ObservableCollection<Message> _selectedMessages = null;
  
/// <summary>
/// Sets and gets the SelectedMessages property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public ObservableCollection<Message> SelectedMessages
{
    get
    {
        return _selectedMessages;
    }
  
    set
    {
        if (_selectedMessages == value)
        {
            return;
        }
  
        _selectedMessages = value;
        RaisePropertyChanged(SelectedMessagesPropertyName);
    }
}
  
private RelayCommand<IList> _selectedMessagesChangedCommand;
  
/// <summary>
/// Gets the SelectedMessagesChangedCommand.
/// </summary>
public RelayCommand<IList> SelectedMessagesChangedCommand
{
    get
    {
        return _selectedMessagesChangedCommand
            ?? (_selectedMessagesChangedCommand = new RelayCommand<IList>(ExecuteSelectedMessagesChangedCommand));
    }
}
  
private void ExecuteSelectedMessagesChangedCommand(IList parameter)
{
  
    SelectedMessages = new ObservableCollection<Message>(parameter.Cast<Message>());
}

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

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SelectedMessagesChangedCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItems, ElementName=multiselectList}"/>
    </i:EventTrigger>
</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.

private RelayCommand _deleteSelectedMessagesCommand;
  
/// <summary>
/// Gets the DeleteSelectedMessagesCommand.
/// </summary>
public RelayCommand DeleteSelectedMessagesCommand
{
    get
    {
        return _deleteSelectedMessagesCommand
            ?? (_deleteSelectedMessagesCommand = new RelayCommand(
                () =>
                {
                    foreach (Message m in SelectedMessages)
                    {
                        Messages.Remove(m);
                    }
                }));
    }
}

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

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
        <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding DeleteSelectedMessagesCommand, Mode=OneWay}"/>
    </i:EventTrigger>
</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

Creating dynamic Windows Phone 7 live tile images client side

Posted on 12/12/2011 by Geert van der Cruijsen

One of the best parts of windows phone that makes Windows Phone stand out are the live tiles. Microsoft enables you to do a few out of the box customizations to the live tiles but when you want to go all out most people think you’ll need to generate the images on a server using ASP.NET and then send them to the application as a notification. This is not always the case, you can also create custom tiles client side running on your phone to show custom messages or imitate the outlook tile for example with a number of how many unread messages you have.

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: runkeeper live tile

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.

public class TileData
{
    public string Text1 { get; set; }
    public string Text2 { get; set; }
    public string ImageSource { get; set; }
}

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:

<Grid x:Name="LayoutRoot" Width="173" Height="173" Background="{StaticResource PhoneAccentBrush}">
    <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="24"/>
    <TextBlock Margin="0,64,-17,-3" TextWrapping="Wrap" FontSize="64" HorizontalAlignment="Right" Width="70" Foreground="White"/>
    <Image Margin="6,55,0,13" Width="100" HorizontalAlignment="Left"/>
</Grid>

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

create sample data

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

<CustomLiveTileExample:TileData xmlns:CustomLiveTileExample="clr-namespace:CustomLiveTileExample" 
ImageSource="ApplicationIcon.png" 
Text1="The first Text"
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.

<Grid x:Name="LayoutRoot" Width="137" Height="137" Background="{StaticResource PhoneAccentBrush}" d:DataContext="{d:DesignData /SampleData/TileDataSampleData.xaml}">
    <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="21.333" Text="{Binding Text1}"/>
    <TextBlock Margin="0,50,-10,11" TextWrapping="Wrap" FontSize="48" HorizontalAlignment="Right" Width="70" Foreground="White" Text="{Binding Text2}"/>
    <Image Margin="12,51,65,17" Width="60" Source="{Binding ImageSource}"/>
</Grid>

blend tile

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.

private void button1_Click(object sender, RoutedEventArgs e)
        {
            TileControl frontTile = new TileControl();
            TileData tileData = new TileData() { ImageSource = "/ApplicationIcon.png", Text1 = "The first text", Text2 = "8" };
            frontTile.DataContext = tileData;
  
            frontTile.Measure(new Size(173, 173));
            frontTile.Arrange(new Rect(0, 0, 173, 173));
            var bmp = new WriteableBitmap(173, 173);
            bmp.Render(frontTile, null);
            bmp.Invalidate();
  
            var isf = IsolatedStorageFile.GetUserStoreForApplication();
            var filename = "/Shared/ShellContent/tile.jpg";
  
            if (!isf.DirectoryExists("/Shared/ShellContent"))
            {
                isf.CreateDirectory("/Shared/ShellContent");
            }
  
            using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))
            {
                bmp.SaveJpeg(stream, 173, 173, 0, 100);
            }
  
            var data = new StandardTileData
            {
                BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute)
            };
  
            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), data);
        }

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.

app1 app2

Download Sample project:

Happy coding!

Geert van der Cruijsen

Tutorial: How to use the Silverlight Toolkit transitions without writing XAML by using the Toolkit behavior extensions

Posted on 04/12/2011 by Geert van der Cruijsen

In my last post I announced the new Codeplex project I’ve started called the Windows Phone Silverlight toolkit behavior extensions. In this post I’ll explain how to use the behaviors in this project in Expression Blend to create beautiful page transitions supplied by the Silverlight Toolkit for windows Phone without writing any code or XAML!

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” add reference 2

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

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

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.

behavior

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.

objectsandtimeline

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

Started a new Codeplex project: Windows Phone Silverlight Toolkit Behavior Extensions

Posted on 04/12/2011 by Geert van der Cruijsen

Of all windows phone development that is done in the world I think almost everyone is using the Windows Phone Silverlight Toolkit you can get from Codeplex. This toolkit adds a lot of new controls and also other cool features as page transitions and a tilt effect on usercontrols so users will get more feedback when clicking in the UI.

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

Microsoft Pubcenter not showing ads in your windows phone 7 app?

Posted on 17/11/2011 by Geert van der Cruijsen

The free apps I had in the marketplace were running Google’s Admob as adprovider because when I wrote the apps Microsoft Pubcenter wasn’t available in the Netherlands yet. When I was upgrading my Apps to Mango I found out that version 4.0.4 that is currently the latest release of the Windows Phone Admob SDK is broken will always give you exceptions when you include this control. Seeing Google wasn’t to keen on fixing this since it was mentioned a lot in admob sdk Google groups I decided to switch to Microsoft Pubcenter because it came available for Dutch people.

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)

public MainPage()
{
    InitializeComponent();
    adcontrol.ErrorOccurred += new EventHandler<Microsoft.Advertising.AdErrorEventArgs>(adcontrol_ErrorOccurred);
}
  
void adcontrol_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)
{
}

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

MIX 09 Keynote: Introducing Silverlight 3.0 (Beta available NOW!!!)

Posted on 18/03/2009 by Geert van der Cruijsen

When I came home about an hour ago I turned on my mediacenter pc to listen to some mp3's when I thought.. Hey wasn't MIX 09 starting today? Maybe I can check out some video's already like I could with the pdc.

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

Silverlight Design Pattern: the Model View ViewModel (MVVM)

Posted on 09/03/2009 by Geert van der Cruijsen

Hi There,

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:

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

Geert van der Cruijsen

Silverlight 2 and Flash 10 put to the test

Posted on 02/11/2008 by Geert van der Cruijsen

Today a colleague of mine send me a link of a very cool site: http://www.shinedraw.com/

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

Silverlight 2 Control Toolkit ready for download

Posted on 29/10/2008 by Geert van der Cruijsen

Yesterday Microsoft released the first version of the Silverlight Extended controls suite on Codeplex.

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

Silverlight 2 Release Candidate Available

Posted on 27/09/2008 by Geert van der Cruijsen

Last night Microsoft released the first release candidate for Silverlight 2.0.

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.

New Silverlight controls

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

Comparison of Microsoft Silverlight 2 and Adobe Flex by an Adobe Evangelist

Posted on 26/07/2008 by Geert van der Cruijsen

I've found a nice read on a comparison between Microsoft's Silverlight and Adobe Flex by an Adobe Evangelist who took a 3 day Silverlight 2 training.

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:

“The first thing I really like is the concept of threading. Being able to spawn off complex tasks without choking the main thread is pretty cool. You could, for example, show a really smooth animation when you are loading a bunch of data in a separate thread.”

“A Silverlight application can directly communicate with the HTML document it is hosted on by simply setting a parameter.”

“Being able to code in either C# or VB.NET is also a great feature. Especially since these two languages are pretty familiar to people developing for the Windows platform. I’m not one of them, but I found that C# is similar to ActionScript. Next to those languages you also have XAML, which does more or less the same things as MXML.”

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

Code in XAML and C# is really verbose.”

“Styling controls is an absolute nightmare! I honestly think that this is going to be Silverlight’s Achilles’ heel!”

“Another thing that I really couldn’t grasp is the lack of HTML tag support in text fields.”

“I know the Expression tools are still in beta, but it has to be said that all the tools (including Visual Studio, which is no longer in beta) felt extremely buggy and incomplete.”

“Over these three days, I got a strong feeling that Silverlight was created by people who don’t know anything about designers.”

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:

Microsoft Silverlight	Adobe Flex
<Button> <Button.RenderTransform> <RotateTransform Angle="45"/> </Button.RenderTransform> </Button>	<Button rotation="45"/>

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

Display Picture Metadata in your Silverlight 2.0 Deepzoom Application

Posted on 30/04/2008 by Geert van der Cruijsen

As i promised 2 days ago here’s my post about how to display metadata of sub images in your Silverlight Deepzoom Application. I already typed this post yesterday but because of a stupid mistake i lost my post and now I have to type it again (but I think I’ll make it a bit shorter)

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.

<ZOrder>2</ZOrder>

<Description>Uitzicht van hotelkamer</Description>

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

Build your own Silverlight 2.0 Deepzoom application and host it with “Silverlight Streaming”

Posted on 28/04/2008 by Geert van der Cruijsen

A few weeks back on MIX'08 Microsoft showed us a stunning demo including new technologies like Seadragon and Silverlight 2.0.

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

Volta or Silverlight 2.0

Posted on 21/04/2008 by Geert van der Cruijsen

Last Wednesday evening we had a presentation at the Avanade Netherlands office about Volta and what Volta could do for us in the future. The demo in the presentation showed us the possibilities that Volta can bring to software developing on the web. After this presentation we had a cool discussion about the question if Volta will really make it to the daily life of web based software development.

In my opinion with my current knowledge about Volta is that a lot of pro’s of Volta are also taken away by using Silverlight 2.0 on the client instead of html/javascript. I’ll sum up most pro’s of using Volta and then compare then to the use of Silverlight 2.0. Ofcourse most things said in this post are just my current ideas and opinions on the 2 projects which are far from complete products today.

Some pro’s on volta are: Dynamic/easy switching of the place where code is being executed. You can add a single line of code in a class and make it completely run on the client instead of on the server. If you want your code to run on the client Volta will generate javascript from your .net code after it’s compiled to the IL.

This power of volta makes it easy to just generate all your javascript instead of writing it all by yourself. Everyone knows writing/debugging loads of javascript can be a pain in the ass so of course it’s nice to program in C# or any other .net language you like. You can even set breakpoints on the c# code which you created and step through this when you are actually running generated javascript at that time.

Volta can also generate javascript which is compatible with the browser which is doing the current request so you don’t have to think about cross browser compatibility anymore.

All in all at the time Volta will be a fully grown product you can write your whole web application in 1 language instead of also having to write javascript to get your fancy web 2.0 look and feel on your web app.

After seeing the presentation about Volta I thought the only big feature Volta can bring is the possibility to dynamically change parts of code to run on the client or server. The other nice features are also brought to us with Silverlight 2.0 which makes it possible to write C# for the client side instead of javascript. In my opinion Silverlight even has more and better options to do this because you have more powerfull tools in the Silverlight runtime which make it possible to make even fancier tools then you can in Javascript. One big example of something Silverlight can do which javascript will never do is that you can make real statefull apps instead of the stateless pages you’ll keep building in Javascript. Opening sockets to the server will never been done by javascript while it is easy to do in Silverlight 2.0

So if javascript is going away in both cases what does Volta bring that silverlight can’t handle? The only big thing that is left is changing your code to run on the server/client by adding a line of code to your class. Ofcourse this can be a really powerfull thing but in my opinion this wont be used that often and especially not in enterprise applications where my focus on my job is at.

In my opinion Silverlight 2.0 can become a really big revolution on the web IF and only IF Microsoft does everything it can to get the silverlight plugin on ALL pc’s as soon as possible (ofcourse after Silverlight 2.0 is released) The plugin has to be available for every browser no matter what OS. No matter what type of computer. Desktop or mobile. Everyone with Linux and Firefox or Windows and IE will have to get this plugin which has same functionality. So in my opinion Microsoft should develop the plugin for all browsers instead of only for windows+IE and let the moonlight project reverse engineer this plugin for a plugin that runs on linux. Volta instead of Silverlight doesn’t have this problem because the javascript code that’s being generated already runs on all sort’s of browsers on all OS’es.

We’ll have to see what the future brings but my money is on Silverlight being installed on 95% of all pc’s in a year or 2 so we don’t have to generate Javascript but can just make flashy c# code on the client.

Another option can also be that Volta will be generating Silverlight code instead of javascript so we get the best of both worlds

Do you have a different opinion? Please let me know in a comment!

Microsoft releases beta versions of IE8 and Silverlight 2.0 at MIX 08

Posted on 06/03/2008 by Geert van der Cruijsen

Today Microsoft launched the public beta of Internet Explorer 8 at MIX’08. As i posted in a blogposting yesterday the big change in Internet Explorer 8 is the render engine which is running in “super standard mode” instead of quirks mode that IE7 uses. You can download the public beta here: http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx

One thing microsoft learned about the release of IE7 was that after the first Beta release of IE7 there were so many reactions, complaints and idea’s send by people that it was almost undoable to do something with all the input. With this release of IE8 Microsoft opened up there bug database to the public so everyone can see the known bugs and people can even help prioritize these bugs.

One of the new feature in IE8 apart from the render engine is the use of “webslices” (http://www.microsoft.com/windows/products/winfamily/ie/ie8/webslices.mspx) these webslices look like a sort of rss technology where you can subscribe yourself to a part of a website instead of an rss feed and the webslice technology will let you know when the data changed.

Microsoft also released the beta of Silverlight 2.0. Scott Guthrie made a nice post about that on his blog: http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

There are also some nice video’s on the website of MIX 08. These video’s and part of the website are made with silverlight 1.0 so check it out:

mix website: http://visitmix.com/2008/default.aspx

mix videos: http://sessions.visitmix.com/

Geert van der Cruijsen

Geert van der Cruijsen

a blog about Windows Phone 7 and .Net development

Category Archives: Silverlight

Testing the SH WP ApplicationBar in an Multiselectlist MVVM scenario

Creating dynamic Windows Phone 7 live tile images client side

Tutorial: How to use the Silverlight Toolkit transitions without writing XAML by using the Toolkit behavior extensions

how to get started

Started a new Codeplex project: Windows Phone Silverlight Toolkit Behavior Extensions

Microsoft Pubcenter not showing ads in your windows phone 7 app?

MIX 09 Keynote: Introducing Silverlight 3.0 (Beta available NOW!!!)

Silverlight Design Pattern: the Model View ViewModel (MVVM)

Silverlight 2 and Flash 10 put to the test

Silverlight 2 Control Toolkit ready for download

Silverlight 2 Release Candidate Available

Comparison of Microsoft Silverlight 2 and Adobe Flex by an Adobe Evangelist

Display Picture Metadata in your Silverlight 2.0 Deepzoom Application

Build your own Silverlight 2.0 Deepzoom application and host it with “Silverlight Streaming”

Volta or Silverlight 2.0

Microsoft releases beta versions of IE8 and Silverlight 2.0 at MIX 08