Mark Monster's Blog

Mimic the Game Hub Application Bar with a Behavior on the BindableApplicationBar

Sun, 20 May 2012 14:40:29 +0200

A couple of days ago Sébastien Lachance wrote an excellent article about mimicking the application bar of the game hub. Really interesting for one of my applications which makes use of a minimal applicationbar that’s also transparant. However quite often the texts of the menu are difficult to read when they don’t have a solid backgroud. That’s exactly what is solved in the game hub: a transparant applicationbar, but when expanded to view the menu it has a solid background. And Sébastien also found a solution how to fix this in our own applications.

However Sébastien is using the ApplicationBar, I’m using the wrapper around the ApplicationBar, called BindableApplicationBar that’s part of the Phone7.Fx project. So how to solve this?

The ApplicationBar and BindableApplicationBar both implement the IApplicationBar interface which prescribes the StateChanged event that is used by Sébastien in his solution. So it looks like we can use the same event, let’s look a little bit closer…

Seems that the code inside the BindableApplicationBar never fires the StateChanged event, so let’s fix this with a little bit of code in the BindableApplicationBar. Please be aware that you need to use the source version of the BindableApplicationBar to be able to fix this. So let’s subscribe the underlying ApplicationBar first, we do this in t he constructor of the BindableApplicationBar by adding one line.

public BindableApplicationBar()
{
    _applicationBar = new Microsoft.Phone.Shell.ApplicationBar();
    _applicationBar.StateChanged += HandleStateChanged;
    Loaded += BindableApplicationBarLoaded;
}

Now we still need to implement the HandleStateChanged method, which is a pretty straight forward implementation you’ve probably seen thousands of times.

private void HandleStateChanged(object sender, ApplicationBarStateChangedEventArgs e)
{
    if (StateChanged != null)
    {
        StateChanged(this, e);
    }
}

So we now have a BindableApplicationBar that has all the features we need to mimic the ApplicationBar of the game hub. The rest of the implementation could be similar to Sébastien’s code. However I thought this is a typical thing that you can easily implement and reuse in a Behavior. I’m not writing behaviors daily, so I thought giving a look at the blog of the Behavior Master himself, Joost van Schaik. About a year ago he wrote a pattern for safe event detachment in behaviors.

So I started with this pattern as a basis. However my eagerness to make this Behavior perfect by immediately using this pattern caused me a lot of trouble. The pattern also tries to safely remove the events when the AssociatedObject aka Control is unloaded. The control I use is of a special type, the BindableApplicationBar, which immediately calls the unloaded event, don’t know why, but it took me almost an hour to find this out. In the end I did a step back and removed the Safe Pattern, and came to the following behavior. The essence is in the highlighted line where I set the BarOpacity property.

public class TransparantToFillApplicationBarBehavior : Behavior<BindableApplicationBar>
{
    private double? _originalBarOpacity;

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.StateChanged += StateChanged;
    }

    private void StateChanged(object sender, ApplicationBarStateChangedEventArgs e)
    {
        if (!_originalBarOpacity.HasValue)
            _originalBarOpacity = AssociatedObject.BarOpacity;
        AssociatedObject.BarOpacity = e.IsMenuVisible ? 1 : _originalBarOpacity.Value;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.StateChanged -= StateChanged;
        base.OnDetaching();
    }
}

And now you want to use it in your BindableApplicationBar, of course.

<ApplicationBar:BindableApplicationBar Mode="Minimized"
                                        BarOpacity="0.6"
                                        IsVisible="{Binding LoggedIn}" BackgroundColor="{StaticResource PhoneBackgroundColor}">
    <i:Interaction.Behaviors>
        <ApplicationBar:TransparantToFillApplicationBarBehavior />
    </i:Interaction.Behaviors>
    <ApplicationBar:BindableApplicationBarMenuItem Text="about+settings"
                                                    Command="{Binding AboutCommand}" />
</ApplicationBar:BindableApplicationBar>

And the end result is like this. Transparent when the menu is collapsed.

And non-transparent when the menu is visible.

Google Analytics on your Windows Phone App in 1 minute

Wed, 16 May 2012 22:33:49 +0200

Yes 1 minute. So let’s start immediately.

1 - Open the NuGet Package Manager Console and type:

Install-Package MSAF.GoogleAnalytics

2 - Next, register a new application / web property inside Google Analytics.

Then copy the Property ID that starts with UA-.

3 - Past that Property ID inside the App.xaml at this place.

<analytics:GoogleAnalyticsService WebPropertyId="UA-12345-6" />

That’s it. Yes, totally. And? Did you do it under the minute?

Background information

I’ve been in contact with Michael Scherotter for some time about NuGet and MSAF, thanks for the support Michael. Basically the MSAF project is really powerful and can be applied to your Windows Phone project quite easily when you know how to do this. I’ve written about it a couple of times. However when we upgraded to Mango all dlls were upgraded except the Google.WebAnalytics dll. The mismatch in versions was causing a lot of problems because some libraries were asking for a 7.0 version of System.Windows.Interactivity and some were asking for the 7.1 version. I fixed that for the NuGet release, everything is 7.1 based.

Advanced tracking

I also added the code to track a little bit of basic information. You can find that in the GoogleAnalyticsService class in the Analytics folder after applying the NuGet package. There is support for up to 5 Custom Variables. Yes I removed the AppId/ProductId that’s included by default leaving only 4 Custom Variables. You can still add the AppId Custom Variable by your own choice, but I removed it because I have one Google Analytics Web Property per App, so it was useless.

When you want to track your analytics from for example your ViewModel you do something like this.

IAnalyticsTracker tracker = new AnalyticsTracker();
tracker.Track("EventCategory","EventName","EventValue optional");

Reset the back of your Tile through push

Tue, 21 Feb 2012 21:26:52 +0100

Have you ever created the back of your tile with a Push notification? You just add some xml in the Notification Message that you send to the Notification Channel.

<wp:BackBackgroundImage>http://someurlinthewild.com/BackTileBackground.png</wp:BackBackgroundImage>
<wp:BackTitle>Back</wp:BackTitle>
<wp:BackContent>Content</wp:BackContent>

Yeah that’s easy. Ever tried to get rid of it using a Push notification? Yeah, trying to push without content. Thought that should work as well, didn’t. Leaving the full Xml elements from the Push Notification? Didn’t work either. You explicitly have to add an attribute Action and give it the value Clear, like this:

<wp:BackBackgroundImage Action="Clear"></wp:BackBackgroundImage>
<wp:BackTitle Action="Clear"></wp:BackTitle>
<wp:BackContent Action="Clear"></wp:BackContent>

This works for the Title and Count properties for the front of your tile as well. This can all be found in the documentation for Push Notifications as well, but today it took me some time to figure this out.

Unified Ad for Windows Phone - Part 4 - GenericAdProviderForXaml

Tue, 14 Feb 2012 21:31:29 +0100

Alright, we have signed up to a lot of Ad Providers in Part 1, setup the Unified Ad control in Part 2 and even implemented the Remote Ad Provider configuration in Part 3. What’s next?

The Generic Ad Provider for Xaml

Think of the Generic Ad Provider as a very simple AdProvider. It can show Xaml and that’s basically it. You could use this Ad Provider for example to market your own applications within your own applications. So a piece of Xaml with a little bit of text and an HyperlinkButton that links to a Uri. And after a minute the Ad Provider will rotate to the next Ad Provider. The Xaml can be much more complex, we will come up to that in a moment. But first see a small example Ad in Xaml.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      Width="480"
      Height="80"
      Background="{StaticResource PhoneBackgroundBrush}">
    <Border BorderBrush="{StaticResource PhoneAccentBrush}"
            BorderThickness="1">
        <Grid>
            <TextBlock Text="WP Unified Ad"
                       Foreground="{StaticResource PhoneAccentBrush}" Margin="0"
                       VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>
            <HyperlinkButton NavigateUri="http://wpunifiedad.codeplex.com"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch">
            </HyperlinkButton>
        </Grid>
    </Border>
</Grid>

Where do we put the Xaml?

Ideal it would be on a remote server. But if you don’t have the remote server or you want to have a fallback ad in case the remote server isn’t available you can use the OfflineContent property of the GenericAdProvider.

If you do have the remote server you can set the XamlUri property to the remote Url. In case you want to some more intelligent stuff, like a special ad for each country, or making sure you do something special for the current application, you can make use of the format parameters. The first {0} argument will be replaced by the ApplicationID and the second {1} argument will be replace by the CountryCode. So let’s say I have a server app that returns ads for me, my XamlUri could be configured like this:

http://someurlontheinternet.com/ProvideAd?Country={1}&AppId={0}

If you don’t need one or both arguments you could omit them off course.

Using Phone Styles

If you want to make sure that the advertisements have the same color palette as the Phone settings you can even make use of the usual Phone Resources. Like this example where the Background is set to the PhoneBackgroundBrush and the Border and Text to the PhoneAccentBrush.

<Grid Width="480"
        Height="80"
        Background="{StaticResource PhoneBackgroundBrush}">
    <Border BorderBrush="{StaticResource PhoneAccentBrush}"
            BorderThickness="1">
        <Grid>
            <TextBlock Text="WP Unified Ad"
                        Foreground="{StaticResource PhoneAccentBrush}"
                        Margin="0"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        FontSize="35" />
        </Grid>
    </Border>
</Grid>

How to add links

The easiest way to add a link is to put a HyperlinkButton on top of the full Xaml. You don’t have to give it a visual appearance as long as you make it stretch to the full Ad space. Put the Uri you want to link to in the NavigateUri. What? Yes put the Uri in the NavigateUri. But won’t that only work for navigation inside the application, from page to page? Yes but this is improved navigation.

“http://anythingontheweb.com” and “https://anythingontheweb.com” will start the WebBrowserTask
“marketplace://search/some content” will start the MarketplaceSearchTask with “some content” as query.
“marketplace://review” will start the MarketplaceReviewTask for the current application.
“marketplace://detail” will start the MarketplaceDetailTask for the current application.
“marketplace://detail/5f171b43-6ea8-e011-a53c-78e7d1fa76f8” will start the MarketplaceDetailTask for the application with the mentioned ID.

This will enable you to create simple ads that show a webpage. But if you want more, like for example market your other apps you can do this as well.

Complex Ads

I’m not the best designer, but I know a little about Xaml. So I was interested to see if I could get a more complex Ad working. The below Ad for example has a Storyboard attached that changes the opacity of two elements. Sounds easy, it is easy. Just think about what more nice things you can do instead.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="480"
      Height="80"
      Background="{StaticResource PhoneBackgroundBrush}">
	<Grid.Resources>
		<Storyboard x:Name="Storyboard" AutoReverse="True" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="One">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Two">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Grid.Resources>
    <Border BorderBrush="{StaticResource PhoneAccentBrush}"
            BorderThickness="1">
        <Grid>
            <Grid x:Name="One">
        		<TextBlock Text="WP Unified Ad"
        			Foreground="{StaticResource PhoneAccentBrush}" Margin="0"
        			VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>
        	</Grid>
            <Grid x:Name="Two" Opacity="0">
            	<TextBlock Text="by Mark Monster"
            		Foreground="{StaticResource PhoneAccentBrush}" Margin="0"
            		VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"/>
            </Grid>
            <HyperlinkButton NavigateUri="http://wpunifiedad.codeplex.com"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"/>
        </Grid>
    </Border>
</Grid>

Unified Ad for Windows Phone - Part 3 - Remote Ad Provider configuration

Mon, 13 Feb 2012 20:52:07 +0100

Did you read the previous parts?

Part 1 – Introduction

Part 2 – Basic Usage

Done? Let’s continue with Part 3, configure the Ad Providers from a remote location.

Step 1, Add the RemoteAdProviderStrategy

Okay, let’s forget about the default AdProviderStrategy. The default just rotates between the different AdProviders, we want more. First we set the AdProviderStrategy property of the AdControl. Just like this.

<Ads:AdControl.AdProviderStrategy>
    <Strategy:RemoteAdProviderStrategy xmlns:Strategy="clr-namespace:MC.Phone.Ads.Strategy;assembly=MC.Phone.Ads" />
</Ads:AdControl.AdProviderStrategy>

Step 2, Create a configuration file

It could very well be that you already have a functional configuration file. When you for example made use of Windows Phone 7 Ad Rotator you already have a configuration file that’s fully compatible with the Unfied Ad. But if you want the full power of the Unified Ad you have to use a different configuration file structure. Xml files explain best by showing an example file.

<?xml version="1.0" encoding="utf-8" ?>
<AdSettings>
  <CountryDescriptors>
    <AdCountryDescriptor Country="US, GB">
      <Probability Value="70" AdProvider="None" />
      <Probability Value="10" AdProvider="AdMob" />
      <Probability Value="10" AdProvider="MobFox" />
      <Probability Value="10" AdProvider="AdDuplex" />
    </AdCountryDescriptor>
    <AdCountryDescriptor Country="DE">
      <Probability Value="15" AdProvider="PubCenter" />
      <Probability Value="15" AdProvider="AdMob" />
      <Probability Value="20" AdProvider="AdDuplex" />
      <Probability Value="50" AdProvider="None" />
    </AdCountryDescriptor>
    <AdCountryDescriptor>
      <Probability Value="20" AdProvider="PubCenter" />
      <Probability Value="20" AdProvider="AdMob" />
      <Probability Value="20" AdProvider="AdDuplex" />
      <Probability Value="20" AdProvider="Smaato" />
      <Probability Value="20" AdProvider="MobFox" />
    </AdCountryDescriptor>
  </CountryDescriptors>
</AdSettings>

Let examine the last AdCountryDescriptor element lines 16-22. Because this AdCountryDescriptor element doesn’t have a Country property this will be the default configuration to fall back to when there isn’t any other that matches the country of the user.

Inside the AdCountryDescriptor elements there are Probabilty elements, they consist of two values: a probability and an AdProvider name. You can best compare the Probabilty with the chance in percentage that the specific Ad Provider is chosen during AdRotation. If you don’t want an AdProvider to be shown during rotation you either put the probability to 0, but better just remove the element. The AdProvider property is the name of the AdProvider that has to be filled in. Currently that would be one of these AdProviders: AdMob, MobFox, AdDuplex, PubCenter, Smaato, InnerActive, None and GenericAdProviderForXaml.

If you want no ads to be displayed for a certain percentage of the time you should use the None AdProvider. In a future post we will discuss the GenericAdProviderForXaml, for now just see it as a remote location where you put some Xaml that will be displayed as an Ad.

So we now have a default configuration, what about specific country configurations? Yes important of course, by specifying the Country attribute of the AdCountryDescriptor element you can specify to which countries a specific configuration belongs. Which could be one country, or multiple countries. Each country is only allowed once in the configuration but you can specify multiple countries for one configuration by separating the country-codes by a “,”. For the country-codes make sure you use the two-letter codes from the ISO_3166-1, so for the UK this is GB.

Step 3, Where to put this configuration file?

Put it somewhere on a webserver where it’s accessible through http or https. Though if you don’t want to configure it remotely but ship this Xml file as part of your application that’s fine as well. But be aware that the only way to change your shipped configuration file is by shipping a new version of your application. But to have local configuration file makes sense even if you have a remote configuration file. When for example your remote config file cannot be accessed (could be any reason) the RemoteAdProviderStrategy will fallback to the local configuration file. So let’s configure the strategy accordingly.

<Ads:AdControl.AdProviderStrategy>
    <Strategy:RemoteAdProviderStrategy xmlns:Strategy="clr-namespace:MC.Phone.Ads.Strategy;assembly=MC.Phone.Ads"
                                        LocalProviderSettingsUri="Ads/AdSettings.xml"
                                        RemoteProviderSettingsUri="http://someurlinthewild.com/ads.xml" />
</Ads:AdControl.AdProviderStrategy>

The RemoteProviderSettingsUri needs to be filled with the remote location url. So put the file somewhere on an internet website, your own is probably the best so that you can easily change it when you want to. The local provider settings can be used as alternative to the remote location in case you don’t want to remotely configure your ads but it could also be used as fallback when the remote url is not available for some reason. For the LocalProviderSettingsUri you need to be aware that it’s an ResourceUri, not an internet Uri. This means that if your xml file has a BuildAction “Content” you can put a simple relative Uri in there, like in the above example. If you would add the Xml file with BuildAction “Resource” you would have to use an Uri like this “/MC.Phone.Ads.Example;component/Ads/AdSettings.xml”.

Hope this explains the Remote Ad Provider configuration a little bit. Please post any questions.

Unified Ad for Windows Phone - Part 2 - Basic Usage

Wed, 08 Feb 2012 21:46:37 +0100

Time for Part 2 of the Unified Ad for Windows Phone series. Also read part 1 for the introduction of the Unified Ad for Windows Phone. We covered the reason why we want the Unified ad for Windows Phone control and also registered for a couple of Ad Providers. Let’s start with implementing the Unified ad control in our application.

Install the NuGet Package for Unified Ad for Windows Phone

Start managing your NuGet Packages for your Windows Phone project. Search for “wpunifiedad” and click install.

Go to one of your pages, for example “MainPage.xaml” and add the following Xaml in for example the ContentPanel Grid.

<Ads:AdControl x:Name="AdBasic"
                FallbackAdProviderName="AdDuplex"
                IsTest="True"
                xmlns:Ads="clr-namespace:MC.Phone.Ads;assembly=MC.Phone.Ads"
                xmlns:PubCenter="clr-namespace:MC.Phone.Ads.PubCenter;assembly=MC.Phone.Ads.PubCenter"
                xmlns:Smaato="clr-namespace:MC.Phone.Ads.Smaato;assembly=MC.Phone.Ads.Smaato"
                xmlns:MobFox="clr-namespace:MC.Phone.Ads.MobFox;assembly=MC.Phone.Ads.MobFox"
                xmlns:AdMob="clr-namespace:MC.Phone.Ads.AdMob;assembly=MC.Phone.Ads.AdMob"
                xmlns:Provider="clr-namespace:MC.Phone.Ads.Provider;assembly=MC.Phone.Ads"
                xmlns:AdDuplex="clr-namespace:MC.Phone.Ads.AdDuplex;assembly=MC.Phone.Ads.AdDuplex">
    <Ads:AdControl.AdProviders>
        <Provider:GenericAdProviderForXaml XamlUri="http://remoteurlontheinternet.com/Ad.xaml?appid={0}" />
        <Provider:NoneAdProvider />
        <AdDuplex:AdDuplexAdProvider App="" />
        <AdMob:AdMobAdProvider AdUnit="" />
        <MobFox:MobFoxAdProvider Publisher="test" />
        <Smaato:SmaatoAdProvider AdSpace="0"
                                    Publisher="0" />
        <PubCenter:PubCenterAdProvider Application=""
                                        AdUnit="" />
        <!--InnerActive is not really suitable for the Ad Rotation because it doesn't have any events to react on.-->
        <!--<InnerActive:InnerActiveAdProvider App="" />-->
    </Ads:AdControl.AdProviders>
</Ads:AdControl>

Lines 12 to 22 are the AdProviders that are available for the Unified ad control. Just remove the elements for the AdProviders that you’re not using or planning to use. For now also remove the GenericAdProviderForXaml element. This ad provider will be discussed separately in a next part. Also take a look at line 3, it is now configured to be run in Test mode. Now let’s start configuring the different ad providers.

AdDuplex configuration

After you added a new application to AdDuplex you will see the App ID. Copy this value to the App property of the AdDuplexAdProvider.

AdMob configuration

When you completed the configuration of a new site/app in AdMob you will see a so called Publisher ID. Copy this value to the AdUnit property of the AdMobAdProvider.

MobFox configuration

For MobFox you should copy the Publisher ID from the app to the Publisher property of the MobFoxAdProvider.

Smaato configuration

For Smaato you should fill in both the AdSpace and the Publisher number in the SmaatoAdProvider. Copy the AdSpaceId from the application list for your application to the AdSpace property for the SmaatoAdProvider. Copy the PubisherId below at that screen to the Publisher property for the SmaatoAdProvider.

PubCenter configuration

The PubCenter configuration consist of two parts. An Application, where you need to copy the Application ID to the Application property of the PubCenterAdProvider. And an Ad Unit where you need to copy the ID of the Ad Unit to the AdUnit property of the PubCenterAdProvider.

InnerActive configuration

InnerActive can be configured, but I cannot recommend using it in combination of the Unified Ad control. Inner Active doesn’t have any events that can be listened to like: NoAd, NewAd or AdEngaged. And because of this it’s impposible to let it rotate with the other Ad Providers. When you want to configure it though, you can. Copy the App Name and put it in the App property of the InnerActiveAdProvider.

Test or not?

You can put your AdControl in production mode by setting the IsTest property to False or completely removing the property from the Xaml.

The next part will be about the Remote Ad Provider configuration.

Unified Ad for Windows Phone - Part 1 - Introduction

Tue, 07 Feb 2012 21:13:42 +0100

About a month ago I started a new investigation about which Ad Provider I should use. Things I wanted.

- Best eCPM

- Best Fill Rate

- Easy to use

Some of the things that are causing problems is the Ad Availability per Country. Depending on where your app is used more or less localized ads are used. So we know that the Microsoft PubCenter has a high eCPM for the US, it is low for The Netherlands. There are more of those problems with other Ad Providers. I heard there was a solution for this problem. Use the Ad Rotator for Windows Phone 7 which can be found on Codeplex. I did give it a try but at that moment AdMob was not supported (mostly because there were some AdMob specific problems) and also MobFox and Smaato weren’t supported. Those were the specific Ad Providers I was interested in.

My initial though would be, let’s try to modify the source a little bit, to get support for MobFox and Smaato in. But after looking into the source I was warned, almost all the code was in the Code Behind for the AdControl. While I am not against the usage of the Code Behind, I’m pro extensibility. The code I saw was far from maintainable and extensibility is done by adding more code. So when more AdProviders will be added code will be less and less maintainable.

Unification

When I look at the differences between the AdControls, they more or less do the same, but in a different way. All of them have a TestMode, but enabling the testmode is different for each AdControl. Same for the events they have. I want to have a unified ad control that does handle these ‘Complexities’ for me and the rest of the world. There isn’t such a control yet, so why not use the good parts of wp7adrotator (the remote configuration, multiple adproviders) and create something that suits my needs better. So I did.

The Windows Phone Unified Ad control is universal in the following ways.

Properties:

- Country – Will be passed to all the AdProviders that support Country or Location as input

- IsTest – Will be pass to all the AdProviders that support a way of TestMode. Some have a simple boolean field, others require to set the PublisherId to be set to a specific value.

Events:

- NewAd – When a new ad is available this event will be fired, even though the different AdProviders have different events to notify the user, like: NewAdAvailable, AdLoaded, ControlAdRefreshed.

- NoAd – When no ad is availabe this event will be fired, even though the different AdProviders have different events to notify the user, like: AdFailed, ControlErrorOccurred, AdError.

- AdEngaged – When an ad is engaged or clicked this event will be fired, even though the different AdProviders have different events to notify the user, like: AdClick, ControlAdEngaged, ControlIsAdEngagedChanged, AdLeavingApplication.

Best Fill Rate

To get the best fill rate the Windows Phone Unified Ad control supports ad provider rotation. As soon as an Ad Provider is not providing an ad the next Provider will be asked to provide an ad. This will enable you to get a higher fill rate compared to using just one ad provider. You can even roll in your own custom ad based on Xaml.

Best eCPM

Every single Ad Provider changes it’s eCPM from time to time. But they even have different eCPMs per country. Same as they might have, or might not have ads for a particular country at all. To get the best of both worlds Windows Phone Unified Ad control supports AdProviders per Country. Similar to the wp7adrotator, but instead the Country is used and not so much the full culture. If you already have configuration files for wp7adrotator you can use those as well, they are supported in the Windows Phone Unified Ad control as well.

Supported AdProviders

All Ad Providers that currently have an Ad Control for Windows Phone 7 are supported. Register with the ones you like best. Inner-Active support is experimental because they have no way to find out there’s an ad displayed or not, yet.

There are two special Ad Provider implementations.

- None – This ad provider is used to not show an ad at all. Can be very handy during testing phase, when testing the application and not the advertisements. But could also be used to show no ads for a certain percentage of the app usage.

- GenericAdProviderForXaml – This ad provider is used to show some custom Xaml that’s loaded from a remote url. Can be very handy to market your own applications within your own applications.

What’s next?

Next part will be about the basic usage of the Windows Phone Unified Ad Control. If you can’t wait? You can find the source and an example project with the Windows Phone Unified Ad control on codeplex. If you want to start right away you can add the NuGet Package called WPUnifiedAd. Also the homepage contains a basic guide that will help as well.

Part 3 will be about using the Remote Ad Provider Configuration. Future parts will come on how to make use of the GenericAdProviderForXaml

Wow, I actually couldn’t write JavaScript, what I wrote smelled…

Tue, 10 Jan 2012 21:47:38 +0100

Alright, I’m not really a JavaScript developer, but do they even exists? I think there probably are a few JavaScript developers in this world, but most of the developers that I know of are developing for the Web. Developing for the Web in it’s widest sense. Most of the time there’s a server technology like ASP.NET, ASP.NET MVC, PHP or something else. A lot of times people actually feel like they are a WHATEVER-SERVER-TECHNOLOGY developer. I felt the same.

But lately the client-side technologies become more and more important. Yes most web developers know a little bit of HTML, and if we’re lucky there’s some knowledge on CSS as well. Yeah we also write JavaScript. uh actually we write jQuery script. Yes we are lucky to have a library like jQuery, but in the end most of don’t know much about JavaScript at all. Yeah we write functions, sometimes. But that’s about it, we don’t write, maintainable, easy to read JavaScript code. Our JavaScript smells.

And if we want to make use of the full HTML5 stack either for web or for example in a Windows 8 Metro application, our code needs to be maintainable. I can assure you, it’s not going to be 10 lines of JavaScript for a JavaScript Metro application.

To == or to ===?

I know C# so I’m using the double equals to check if left and right are equal. WRONG! I really need to admit I didn’t know I was wrong until a few months ago. So chances are some of you, my readers, don’t know it either. To quote Douglas Crockford’s book on JavaScript:

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable.

So from now on I will be using triple-equals instead of double-equals.

Of course there’s a lot more in The Good Parts book, I can recommend you buying it.

Object Oriented Programming uh Closures

Most of the JavaScript code I write are just functions, and functions might call other functions, some anonymous some named. The end result is either a large amount of functions, are just a couple of functions with more than 100 lines of code.

Is this maintainable? Hell no!

So why don’t I write code in JavaScript like I do in C#? Uh is that possible at all? I recall everybody telling me JavaScript is not an object oriented language. I still have to agree JavaScript doesn’t have all of the object oriented language characteristics to call it a fully object oriented language. But still.

JavaScript objects can be created in different ways, but you’ll have to know a little bit more about some of the JavaScript language features to be able to get things working like you expect.

Some things were completely new to me like Closures: JavaScript Closures for Dummies

Take some time to get to know the above JavaScript features.

With the above concepts you can learn a little bit about JavaScript patterns, which help you when you want to write your own JavaScript library.

Really interesting articles that can help, but if you need more, you should definitely take a look at the pluralsight course for Structuring JavaScript Code.

PS. Don’t feel hurt, there are exceptions to what I write here. Actually if there weren’t good JavaScript devs out there the rest of the world, like me, couldn’t learn from their expertise.

How to cancel (overwrite) a successful Marketplace update submission?

Sat, 07 Jan 2012 22:41:17 +0100

It was a day after I submitted an update to one of my apps to the marketplace where I found out about a bug. This was a functional bug which didn’t affect Marketplace testing. I already knew that I couldn’t cancel a running submission, so I already learned the Hard Way to never Auto Publish, but do a Manual Publish after successful testing.

Tip: Do a Manual Publish after successful testing. This makes sure you are in control!

Alright, what happened to me recently is that I made a small code change that causes problems a Background Task for about 50% of the time. I didn’t find this during initial testing. A small case of using the less than sign instead of the greater than sign. I found out about this bug after I submitted the app to the marketplace. So I waited until the submission was successful (or failed).

The Marketplace team successfully tested my application and I was in control (see tip). What can I do?

Publish the application: I obviously don’t want this, there’s a bug in the app.
Edit catalog details: Doesn’t help me either.
Edit product details: That should help…

So I went for “Edit product details”, but sadly that didn’t work, because it helped me to Step 2 and not Step 1 where I could upload a new Application Package.

Alright, time for some hacking I would say. It might be risky, so use it at your own risk.

1. Start with the Edit catalog details url, copy the applicationId and the parentApplicationInstanceId.

2. Replace the applicationId and the parentApplicationInstanceId in the following url.

https://windowsphone.create.msdn.com/AppSubmission#/PageUpload&mode=Update&applicationId=00000000-0000-0000-0000-000000000000&parentApplicationInstanceId=00000000-0000-0000-0000-000000000000

3. Then follow that link. But do nothing else.

4. Go back to the original page where the “Edit product details” didn’t go to step 1, but to step 2. In my situation it did suddenly go to step 1 and I was able to upload a new Application Package.

I’m now waiting again for the Marketplace testing. I hope this will help some people who have a similar problem.

The problem of the Windows Phone 7 ApplicationBar and not (yet) updated Bindings

Fri, 16 Dec 2011 19:00:00 +0100

As a MVVM enthusiast I’m trying to use MVVM as much as possible, but not for things that are almost impossible to do with MVVM. But simple things, like a TextBox Text property is always bound to a ViewModel’s property. That’s something that works very well…until you start having ApplicationBar buttons and menu items.

A lot of people already know that the ApplicationBar is something special, it’s not just a control like other stuff in your application. When clicking a button on the ApplicationBar the Binding is not yet updated. This is basically because the focus which is on the TextBox for example won’t be changed when clicking ApplicationBar buttons. This is different compared to normal buttons that you put somewhere on your page.

The Solution?

I’ve read different solutions on the web. For example, force focus on a different control by calling the Focus method on a Control. While this is working, I found a technically nicer solution. By getting the Binding of the current focused control and updating that binding.

I wrote a small helper class that implements this Binding updating.

public static class ApplicationBarHelper
{
    public static void UpdateBindingOnFocussedControl()
    {
        object focusedElement = FocusManager.GetFocusedElement();
        if (focusedElement != null && focusedElement is TextBox)
        {
            var binding = (focusedElement as TextBox).GetBindingExpression(TextBox.TextProperty);
            if (binding != null)
                binding.UpdateSource();
        }
    } 
}

The first thing you do in the Event handlers for the ApplicationBar Click events is call.

ApplicationBarHelper.UpdateBindingOnFocussedControl();

What about the BindableApplicationBar?

A lot of use MVVM enthusiasts are using the BindableApplicationBar that’s part of the Phone7.Fx library. Can we use this in combination with the BindableApplicationBar? Yes we can, actually the best way would be to have this integrated with the BindableApplicationBar itself. I have just downloaded the source and manipulated two methods in two classes.

public class BindableApplicationBarIconButton : FrameworkElement, IApplicationBarIconButton
{
    // Other code that hasn't been changed in this class.

    void ApplicationBarIconButtonClick(object sender, EventArgs e)
    {
        ApplicationBarHelper.UpdateBindingOnFocussedControl();
        if (Command != null && CommandParameter != null)
            Command.Execute(CommandParameter);
        else if (Command != null)
            Command.Execute(CommandParameterValue);
        if (Click != null)
            Click(this, e);
    }
}

public class BindableApplicationBarMenuItem : FrameworkElement, IApplicationBarMenuItem
{
    // Other code that hasn't been changed in this class.

    private void ApplicationBarMenuItemClick(object sender, EventArgs e)
    {
        ApplicationBarHelper.UpdateBindingOnFocussedControl();
        if (Command != null && CommandParameter != null)
            Command.Execute(CommandParameter);
        else if (Command != null)
            Command.Execute(CommandParameterValue);
        if (Click != null)
            Click(this, e);
    }
}

What does featuring in the Marketplace do with your app?

Wed, 07 Dec 2011 19:00:00 +0100

A lot of Windows Phone developers probably already know, but some might not. There is a very interesting tool in the market to monitor your application for Downloads, Ranking and Reviews: Distimo Monitor. You can for example compare your application with your competition and conquer the world. Besides that Distimo also shows you when your application was featured in the Marketplace. A couple of the apps I created have been featured so far, but let’s look at Fokke & Sukke app and the target market (The Netherlands).

Is my app featured?

You can watch closely how the marketplace looks either on the Phone or in Zune to see if your app is featured.

But in the end, this is not very doable. Don’t forget that your app can be featured in every market separately. So what else? We have the distimo monitor which shows events for your application. You can see when a new version was released and when your app was featured.

The featured periods are:

12/10 – 18/10
02/11 – 08/11
30/11 – 06/12

My app is featured, now what?

It’s cool to see that this app has been featured that often, but what does it mean? Let’s take a look at the Ranking in those periods.

You can easily see the areas when the app was featured by the green regions. But more important, you can see that in the first and third period being featured meant that the ranking went up immediately.

How to give an element focus when something happens?

Mon, 05 Dec 2011 21:44:00 +0100

I had a very simple problem: On loading of particular screen I wanted to give a TextBox focus. It’s freaking easy to do this in the code behind. Most of my applications are actually MVVM applications and in that case it’s not something for the ViewModel, it’s logic that belongs to the view. But how about a Behavior?

I want to give a specific control focus when something happens on something else. So that should be a TargetedTriggerAction<T>, T should be Control, because that’s something you can give focus. How easy can it be?

public class FocusOnEvent : TargetedTriggerAction<Control>
{
    protected override void Invoke(object parameter)
    {
        Target.Focus();
    }
}

Is that all? Yes it is, or actually, I want to make it even easier, add the default trigger using the DefaultTriggerAttribute. Default should be the Loaded event, so let’s add that single line.

[DefaultTrigger(typeof(FrameworkElement), typeof(EventTrigger), "Loaded")]
public class FocusOnEvent : TargetedTriggerAction<Control>
{
    protected override void Invoke(object parameter)
    {
        Target.Focus();
    }
}

Now we have this easy code, how do we use it? Just add a little bit of xaml to your page / control, just like any other behavior.

<i:Interaction.Triggers>
    <i:EventTrigger>
        <Behaviors:FocusOnEvent TargetName="TitleTextBox" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Some second thoughts, is it required to take the Safe event Detachment base class for Windows Phone Behaviors by Joost van Schaik into consideration? No it’s not required, because we’re not manually attaching handlers to the events, that’s all done by the TargetedTriggerAction itself. Hope you guys think this little bit of code is useful.

Does Windows 8 support Gif images and Animated Gif images?

Tue, 29 Nov 2011 21:51:55 +0100

To some of us it may sound like a strange question, but developers which are used to Silverlight or Windows Phone development know why I ask this question. In both Silverlight and Windows Phone Gif images aren’t directly supported. Don’t ask me why, I don’t know why. Luckily Silverlight and Windows Phone developers are helped by an open source project called Image Tools which enables support for Gif and Animated Gif.

Windows 8 – HTML5 + JS

For a starter I just downloaded an ordinary gif-image from the internet and with no knowledge about how to add an image to a Windows 8 application I used my web-knowledge.

<img src="/images/window.gif" />

And yes it does work. What about an animated gif? So I recall an interesting animated gif on Shawn Wildermuth’s blog, his head-shot. So without do anything else than changing the source of the image tag I created it started working. A surprise? Not really I already heard that the rendering engine for Windows 8 applications that are build in HTML5 + JS is based on IE, so this is what I did expect.

Windows 8 – XAML + C#

So I used my Silverlight knowledge to do in XAML what I did in HTML5, add an image.

<Image Source="/Images/window.gif" />

A really fast surprise it started working in the design view of the xaml document even before I ran the project. And also after running the application it seems to work perfectly. And the animated gif? It appears in the designer as well, but doesn’t animate in there. Also when running the application the animation doesn’t work.

Just a quick thought: Silverlight doesn’t support gif at all, what about WPF? After some googling it seems that WPF does support gif images, but not really the animated gifs. But there are people who created solutions that should work to enable animated gifs in WPF. So let’s see how much of that is possible in Windows 8.

The solution for WPF makes use of the GifBitmapDecoder which isn’t there in Windows 8. But I found something that sounds similar the BitmapDecoder. I tried to get the a small proof-of-concept working, but failed so far. I invite you to solve this Animated Gif problem using the information I’ve given. Please share your solution with the readers of this post.

Conclusion

We all know WinRT isn’t finished, we are just looking at a developer preview. If I recall it correctly WinRT should have the same features in XAML+C# as in HTML5+JS. Will this small difference in features be tackled in the final release?

Statistics for your Windows Phone application (Google Analytics)

Fri, 21 Oct 2011 22:16:44 +0200

Alright, I’ve tried a couple of different systems to get the statistics for the apps I created.

Google Analytics custom way

I started more than a year ago with a unreliable option using Google Analytics. This option was unreliable because it didn’t handle things like no connectivity and was depending on the WebBrowser control. Technically this was an option, but there are better options.

Flurry Analytics

My first applications actually did go live with Flurry Analytics for the stats. This worked perfectly fine for some time, until I introduced a application version that only supported Mango. Strangely I never got stats for that version. In the end I heard more people complaining that the Flurry Analytics library didn’t work with Phones running on Mango. I was not happy because it took weeks before I got a response from Flurry about the problem. They asked if I was interested in doing some beta-testing. I honestly didn’t have interest in beta-testing after that long time. I hear some rumors that it’s still not working, but I’m not sure, I’ve given up Flurry Analytics.

PreEmptive Runtime Intelligence

Alright, then I heard people say, why don’t you use PreEmptive’s Runtime Intelligence. It’s free and actually an Enterprise Product. I tried it, and actually liked it. The documentation on how to use it was not top-level, but with a little bit of trying out I got things working. But even better the tool integrates an Obfuscation tool to obfuscate the code. But then it started to take longer to get the stats processed. The last time my stats were processed is at October 6th, that’s 13 days ago, way to long. I understand that it can take some time, 24 hours is pretty acceptable. But more, every user of Runtime Intelligence got an e-mail to say that the conditions are about to change in two months time. This is basically because Microsoft has changed the contract with PreEmptive, but still, the new conditions are not clear, yet. Will it be paid, will it be limited? We don’t know yet. So for me, it’s time to look for a solid Analytics solution that I know will be free and will be supported by tools in the market.

Google Analytics with Microsoft Silverlight Analytics Framework

Alright, I’ve chosen to go back to Google Analytics and follow the comments I got from my readers on my custom Google Analytics tracking post. They suggest to make use of Microsoft Silverlight Analytics Framework. This framework supports a couple of very important scenario’s.

Offline scenarios
Support for multiple analytics services, including:
- Comscore
- Google Analytics
- PreEmptive Solutions

Where I already have experience with implementing analytics using the custom PreEmptive tools I wouldn’t try that again, how long will it be free? I also have some experience with Comscore for one of my customers. I don’t understand how to read the reports so that’s not really an option for me, neither is it free. So Google Analytics it is, I know how to read the reports, and I’ve got a lot of experience implementing it for websites. Let’s start with the implementation in a Windows Phone application.

Step 1 Downloading and Referencing

You can download the source or the installation package. Be aware that the source doesn’t contain the source code for the Analytics Services like Google Analytics. So recommended will be the download of the installation package. After the installation you can find the libraries in: C:\Program Files (x86)\Microsoft SDKs\Microsoft Silverlight Analytics Framework\

You’ll need to reference the following libraries when working with Google Analytics:

Microsoft.WebAnalytics.dll
Microsoft.WebAnalytics.Behaviors.dll
System.ComponentModel.Composition.dll
System.ComponentModel.Composition.Initialization.dll
System.Windows.Interactivity.dll

Note: I’ve had some trouble with conflicting System.Windows.Interactivity libraries. It’s distributed with Expression Blend, MVVM Light and also with the Microsoft Silverlight Analytics Framework. I think there needs to be a solution so that the distribution should no longer be required for the different frameworks. I specially had a conflict when using Microsoft Silverlight Analytics Framework (made for Windows Phone SDK 7.0) in combination with MVVM Light 4 Preview (made for Windows Phone SDK 7.1). I did fallback to the previous version of MVVM Light 3 to remove the conflict.

Step 2 Create the IApplicationService and use reference it in App.xaml

Let’s start with gathering some generic information I want to gather from my users. To be honest I want to do this for all my applications. So this static class get's some information about the device. The PhoneHelper class can be found inside the Coding4fun library which also has other nice stuff. You could use this also for difference between Trial and Paying users.

public static class AnalyticsProperties
{
    public static string DeviceId
    {
        get
        {
            var value = (byte[]) DeviceExtendedProperties.GetValue("DeviceUniqueId");
            return Convert.ToBase64String(value);
        }
    }

    public static string DeviceManufacturer
    {
        get { return DeviceExtendedProperties.GetValue("DeviceManufacturer").ToString(); }
    }

    public static string DeviceType
    {
        get { return DeviceExtendedProperties.GetValue("DeviceName").ToString(); }
    }

    public static string Device
    {
        get { return string.Format("{0} - {1}", DeviceManufacturer, DeviceType); }
    }

    public static string OsVersion
    {
        get { return string.Format("WP {0}", Environment.OSVersion.Version); }
    }

    public static string ApplicationVersion
    {
        get { return PhoneHelper.GetAppAttribute("Version").Replace(".0.0", ""); }
    }
}

So let’s continue with our IApplicationService that wraps the WebAnalyticsService provided by the Analytics Framework. Just to prevent that my applications start to depend to much on Microsoft Silverlight Analytics Framework, I don’t want to change too much code when I need or want to switch next time. I explicitly set the Page Tracking to false because I want to be in control when and what to track. Further more I’m setting the CustomVariables that you might recognize from Google Analytics. There is a maximum of 5 Custom Variables and because the GoogleAnalytics library also puts the ApplicationId inside the Custom Variables you end up having only four for your application. That’s one of the reasons why I have the Device Type and Manufacturer concatenated in the Device property, choose carefully what you want to track. Next is the interesting part of Initializing MEF, I’m not an expert on MEF but basically it’s a kind of IoC container but differently. We will make use of the composition possibilities that we get from using MEF in a moment. The last part is the WebPropertyId which is passed to Google Analytics, this is the Google Analytics Property Id which is in the form of UA-XXXXX-X. So make sure you register a Google Analytics Web Property

public class AnalyticsService : IApplicationService
{
    private readonly IApplicationService _innerService;
    private readonly GoogleAnalytics _googleAnalytics;

    public AnalyticsService()
    {
        _googleAnalytics = new GoogleAnalytics();
        _googleAnalytics.CustomVariables.Add(new PropertyValue { PropertyName = "Device ID", Value = AnalyticsProperties.DeviceId });
        _googleAnalytics.CustomVariables.Add(new PropertyValue { PropertyName = "Application Version", Value = AnalyticsProperties.ApplicationVersion });
        _googleAnalytics.CustomVariables.Add(new PropertyValue { PropertyName = "Device OS", Value = AnalyticsProperties.OsVersion });
        _googleAnalytics.CustomVariables.Add(new PropertyValue { PropertyName = "Device", Value = AnalyticsProperties.Device });
        _innerService = new WebAnalyticsService
                            {
                                IsPageTrackingEnabled = false,
                                Services = { _googleAnalytics, }
                            };
    }

    public string WebPropertyId
    {
        get { return _googleAnalytics.WebPropertyId; }
        set { _googleAnalytics.WebPropertyId = value; }
    }

    #region IApplicationService Members

    public void StartService(ApplicationServiceContext context)
    {
        CompositionHost.Initialize(
            new AssemblyCatalog(
                Application.Current.GetType().Assembly),
            new AssemblyCatalog(typeof(AnalyticsEvent).Assembly),
            new AssemblyCatalog(typeof(TrackAction).Assembly));
        _innerService.StartService(context);
    }

    public void StopService()
    {
        _innerService.StopService();
    }

    #endregion
}

You can then add this ApplicationService to the ApplicationLifetimeObjects in the App.xaml file.

<Application.ApplicationLifetimeObjects>
    <!--Required object that handles lifetime events for the application-->
    <shell:PhoneApplicationService Launching="ApplicationLaunching"
                                    Closing="ApplicationClosing"
                                    Activated="ApplicationActivated"
                                    Deactivated="ApplicationDeactivated" />
    <Analytics:AnalyticsService WebPropertyId="UA-XXXXX-X" />
</Application.ApplicationLifetimeObjects>

This also enables automatic tracking Launch, Closing, Activated and Deactivated events in Google Analytics. So we don’t have to do anything manually to enable that part.

Step 3 Start tracking usage of features

Besides the starting and stopping of your application you probably want to track the usage of features in your app. You can make use of the TrackAction Behavior for example which can be found in Microsoft.WebAnalytics.Behaviors. But I actually like to have this kind of stuff in code which makes it easier for me to get an overview of what I’m tracking. So I wrote this simple AnalyticsTracker class that makes use of MEF to import the WebAnalytics stuff.

public class AnalyticsTracker
{
    public AnalyticsTracker()
    {
        CompositionInitializer.SatisfyImports(this);
    }

    [Import("Log")]
    public Action<AnalyticsEvent> Log { get; set; }

    public void Track(string category, string name)
    {
        Track(category, name, null);
    }

    public void Track(string category, string name, string actionValue)
    {
        Log(new AnalyticsEvent { Category = category, Name = name, ObjectName = actionValue });
    }
}

Usage is pretty straightforward.

AnalyticsTracker tracker = new AnalyticsTracker();
tracker.Track("Advertisement", "Refreshed", adUnit);

Step 4 Analyse the data

Alright start with Top Events

Cool but in which countries?

Of course there much more analytics that you can see inside of Google Analytics, this is just a start.

Improve the YSlow score - remove the ETags

Tue, 18 Oct 2011 21:04:28 +0200

There are a lot of resources on the web which tell you how to create a fast website. You can measure the speed with for example YSlow. Do you want reasons? Maybe it’s good to read for example Scott Hanselman’s blog or his recent podcast in which he interviews Steve Souders the creator of YSlow.

I’m not here to discuss the reasons, but one of the things that can improve the speed of your website is to get rid of the ETags. ETags are essentially a kind of checksum that can be used to determine if a file on the server has changed. I wanted to improve my YSlow score, and part of the way to improve it was removing the ETag. But how?

Manipulate the HTTP headers through configuration?

1. Remove the header

<httpProtocol>
    <customHeaders>
        <remove name="ETag" />
    </customHeaders>
</httpProtocol>

Doesn’t work. The header is still sent.

2. Set the header explicitly to empty string

<httpProtocol>
    <customHeaders>
        <add name="ETag" value="" />
    </customHeaders>
</httpProtocol>

Doesn’t work either. The header is still sent.

What does work? A HTTP Module?

Alright, let’s try it, write a small HTTP Module and manipulate the headers before they are sent to the client. I just tried to remove the tag.

public class RemoveETagModule : IHttpModule
{
    public void Dispose() { }

    public void Init(HttpApplication context)
    {
        context.PreSendRequestHeaders += OnPreSendRequestHeaders;
    }

    void OnPreSendRequestHeaders(object sender, EventArgs e)
    {
        HttpContext.Current.Response.Headers.Remove("ETag");
    }
}

Of course we need to configure it. So add the below code to your web.config file.

<system.webServer>
  ...
  <modules runAllManagedModulesForAllRequests="true">
      <add name="RemoveETag" type="MM.Website.Web.Modules.RemoveETagModule, MM.Website.Web" />
  </modules>
  ...
</system.webServer>

Did it work? So let’s run Fiddler.

Yes, it’s gone.

Adding Tactile Feedback to your app the easy way

Tue, 13 Sep 2011 08:59:26 +0200

About a week ago there was a very good article with tips to make your wp7 app a killer app. Tip 24 was about tactile feedback. Tactile feedback can be something like 30 milliseconds running the VibrateController. That’s very easy, just like this:

VibrateController vibrateController = VibrateController.Default;
vibrateController.Start(new TimeSpan(0, 0, 0, 0, 30));

Because I just want to call one method instead of two lines of code, I created a small static method.

public static void GiveTactileFeedback()
{
    VibrateController vibrateController = VibrateController.Default;
    vibrateController.Start(new TimeSpan(0, 0, 0, 0, 30));
}

Alright, but now I had to add this method call to every Button Click, ListBox SelectionChanged, and ApplicationBar menu or button use. Probably there are some more places where I want to give a little bit of feedback. So I’m thinking about a solution, a generic solution. I remember how easy it was to apply the TiltEffect. So my mind was going the direction of a similar solution. So I started with some Attached Dependency Properties, the same mechanism that’s used to implement the TiltEffect. So enable it for example in the root of your Phone Page and only suppress the effect if you don’t want to apply it a special occasion.

<phone:PhoneApplicationPage ... 
                            WPUI:TactileFeedbackEffect.IsTactileFeedbackEnabled="true">

And suppress it in this way.

<Button Content="Feedback surpressed"
        WPUI:TactileFeedbackEffect.SuppressTactileFeedback="true" />

Basically I want to walk through all the children of the element that have the IsTactileFeedbackEnabled property set to true. So I started walking recursively through the Visual Tree.

public static IEnumerable<FrameworkElement> GetSelfAndChildren(this FrameworkElement node)
{
    var elements = new List<FrameworkElement>();
    int childrenCount = VisualTreeHelper.GetChildrenCount(node);
    elements.Add(node);
    for (int i = 0; i < childrenCount; i++)
    {
        var childFe = VisualTreeHelper.GetChild(node, i) as FrameworkElement;
        if (childFe != null)
        {
            elements.AddRange(GetSelfAndChildren(childFe));
        }
    }
    return elements;
}

Using this Visual Tree of elements to check against controls that should support the Tactile Feedback: ButtonBase (root of all buttons), Selector (root of the different types of ListBoxes), PhoneApplicationPage (only way to get a hold of the ApplicationBar’s buttons and menu items). For the menu items and buttons, it’s just simply attaching to the Click event. The Selector has a SelectionChanged event to which we can listen. Not that much of rocket science.

The initial idea I had was to make use of the Loaded event of the Element that has the DependencyProperty applied to start walking though the visual tree. But what happened when the Visual Tree changes? Caused for example by Data Binding changes, or any of the other ways that enable you to manipulate the Visual Tree. So I attached to the LayoutUpdated event as well, I had to hack a bit, because the sender in the LayoutUpdated event is always null.

In het end I came to the conclusion that I didn’t have a way to suppress feedback on the ApplicationBar items.This is mainly because the ApplicationBar items are not inheriting from DependencyObject.

Full code is below for both the VisualTreeHelper and the TactileFeedbackEffect. Please let me know if you have any questions or improvements.

/// <summary>
/// Simple helpers for walking the visual tree
/// </summary>
internal static class TreeHelpers
{
    public static IEnumerable<FrameworkElement> GetSelfAndChildren(this FrameworkElement node)
    {
        var elements = new List<FrameworkElement>();
        int childrenCount = VisualTreeHelper.GetChildrenCount(node);
        elements.Add(node);
        for (int i = 0; i < childrenCount; i++)
        {
            var childFe = VisualTreeHelper.GetChild(node, i) as FrameworkElement;
            if (childFe != null)
            {
                elements.AddRange(GetSelfAndChildren(childFe));
            }
        }
        return elements;
    }
}

public class TactileFeedbackEffect : DependencyObject
{
    /// <summary>
    /// Set this Attached Dependency Property to true to enable tactile feedback on an element and it's children.
    /// </summary>
    public static readonly DependencyProperty IsTactileFeedbackEnabledProperty = DependencyProperty.RegisterAttached
        (
            "IsTactileFeedbackEnabled",
            typeof (bool),
            typeof (TactileFeedbackEffect),
            new PropertyMetadata(OnIsTactileFeedbackEnabledChanged)
        );

    /// <summary>
    /// Set this Attached Dependency Property to true to suppress tactile feedback on the element.
    /// </summary>
    public static readonly DependencyProperty SuppressTactileFeedbackProperty = DependencyProperty.RegisterAttached(
        "SuppressTactileFeedback",
        typeof (bool),
        typeof (TactileFeedbackEffect),
        new PropertyMetadata(false));

    static TactileFeedbackEffect()
    {
        TactileFeedbackItems = new List<Type>
                                    {typeof (ButtonBase), typeof (PhoneApplicationPage), typeof (Selector)};
    }

    private TactileFeedbackEffect()
    {
    }

    public static List<Type> TactileFeedbackItems { get; private set; }

    public static bool GetIsTactileFeedbackEnabled(DependencyObject source)
    {
        return (bool) source.GetValue(IsTactileFeedbackEnabledProperty);
    }


    public static void SetIsTactileFeedbackEnabled(DependencyObject source, bool value)
    {
        source.SetValue(IsTactileFeedbackEnabledProperty, value);
    }

    public static bool GetSuppressTactileFeedback(DependencyObject source)
    {
        return (bool) source.GetValue(SuppressTactileFeedbackProperty);
    }


    public static void SetSuppressTactileFeedback(DependencyObject source, bool value)
    {
        source.SetValue(SuppressTactileFeedbackProperty, value);
    }

    private static void OnIsTactileFeedbackEnabledChanged(DependencyObject target,
                                                            DependencyPropertyChangedEventArgs args)
    {
        if (target is FrameworkElement)
        {
            if ((bool) args.NewValue)
            {
                (target as FrameworkElement).Loaded += (s, e) =>
                                                            {
                                                                var senderDo = s as DependencyObject;
                                                                TryAttachFeedback(senderDo);
                                                                if (senderDo is FrameworkElement)
                                                                    (senderDo as FrameworkElement).LayoutUpdated +=
                                                                        (s2, e2) =>
                                                                            {
                                                                                TryDetachFeedback(senderDo);
                                                                                TryAttachFeedback(senderDo);
                                                                            };
                                                            };
            }
            else
            {
                TryDetachFeedback(target);
            }
        }
    }

    private static void TryAttachFeedback(DependencyObject target)
    {
        foreach (FrameworkElement element in (target as FrameworkElement).GetSelfAndChildren())
        {
            foreach (Type t in TactileFeedbackItems)
            {
                if (t.IsAssignableFrom(element.GetType()))
                {
                    if ((bool) element.GetValue(SuppressTactileFeedbackProperty) != true)
                    {
                        if (element is ButtonBase)
                        {
                            (element as ButtonBase).Click += TactileFeedbackEffectClick;
                        }
                        if (element is PhoneApplicationPage)
                        {
                            var page = element as PhoneApplicationPage;
                            if (page.ApplicationBar != null)
                            {
                                foreach (IApplicationBarMenuItem button in
                                    page.ApplicationBar.Buttons ?? new List<IApplicationBarMenuItem>())
                                {
                                    button.Click += TactileFeedbackEffectApplicationBarClick;
                                }
                                foreach (IApplicationBarMenuItem menuItem in
                                    page.ApplicationBar.MenuItems ?? new List<IApplicationBarMenuItem>())
                                {
                                    menuItem.Click += TactileFeedbackEffectApplicationBarClick;
                                }
                            }
                        }
                        if (element is Selector)
                        {
                            (element as Selector).SelectionChanged += TactileFeedbackEffectSelectionChanged;
                        }
                    }
                }
            }
        }
    }

    private static void TryDetachFeedback(DependencyObject target)
    {
        foreach (FrameworkElement element in (target as FrameworkElement).GetSelfAndChildren())
        {
            foreach (Type t in TactileFeedbackItems)
            {
                if (t.IsAssignableFrom(element.GetType()))
                {
                    if ((bool) element.GetValue(SuppressTactileFeedbackProperty) != true)
                    {
                        if (element is ButtonBase)
                        {
                            (element as ButtonBase).Click -= TactileFeedbackEffectClick;
                        }
                        if (element is PhoneApplicationPage)
                        {
                            var page = element as PhoneApplicationPage;
                            if (page.ApplicationBar != null)
                            {
                                foreach (IApplicationBarMenuItem button in
                                    page.ApplicationBar.Buttons ?? new List<IApplicationBarMenuItem>())
                                {
                                    button.Click -= TactileFeedbackEffectApplicationBarClick;
                                }
                                foreach (IApplicationBarMenuItem menuItem in
                                    page.ApplicationBar.MenuItems ?? new List<IApplicationBarMenuItem>())
                                {
                                    menuItem.Click -= TactileFeedbackEffectApplicationBarClick;
                                }
                            }
                        }
                        if (element is Selector)
                        {
                            (element as Selector).SelectionChanged -= TactileFeedbackEffectSelectionChanged;
                        }
                    }
                }
            }
        }
    }

    private static void TactileFeedbackEffectSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        GiveTactileFeedback();
    }

    private static void TactileFeedbackEffectApplicationBarClick(object sender, EventArgs e)
    {
        GiveTactileFeedback();
    }

    private static void TactileFeedbackEffectClick(object sender, RoutedEventArgs e)
    {
        GiveTactileFeedback();
    }

    public static void GiveTactileFeedback()
    {
        VibrateController vibrateController = VibrateController.Default;
        vibrateController.Start(new TimeSpan(0, 0, 0, 0, 30));
    }
}

Cache as Fallback using Reactive Extensions

Sat, 20 Aug 2011 10:50:20 +0200

In my previous article I wrote about how to use the Isolated Storage using Reactive Extensions. Let’s combine that with the ability to access online resources using Reactive Extensions.

What I want to achieve can be explained best by a picture. Basically if downloading of a resource fails it should fall back to the cache.

Let’s combine some code from the previous article.

First of all we want to download a resource from the internet, and if that’s successful we want to cache that data.

public static IObservable<MemoryStream> CacheAsFallback(Uri onlineResource, string cacheKey)
{
    IObservable<MemoryStream> observableOnlineResource = FromInternet(onlineResource);
    return observableOnlineResource
        .Select(stream =>
                    {
                        CacheResource(stream, cacheKey);
                        stream.Position = 0;
                        return stream;
                    });
}

Yes that’s all, it’s easy to combine Reactive Extensions (Rx) with Linq. So the above code will make sure that the resource that’s downloaded is cached before it’s returned to the caller. Please take a notion on the resetting of the stream position.

Catch an exception in Reactive Extensions

The next step is a little bit less seen in the Rx examples found on the web. Catch an exception and continue with a different Observable.

public static IObservable<TSource> Catch<TSource, TException>(
    this IObservable<TSource> source,
    Func<TException, IObservable<TSource>> handler
    )
    where TException : Exception

So Catch is an Extension method that accepts a Func<Exception, IObservable<T>>. In our case that would be an IObservable<MemoryStream>. If you want to catch only specific Exception types, you could do that as well, but I want to fall back in case of any error. Further more the FromCache Observable returns null when nothing is found. I want that to be translated to an Exception.

public static IObservable<MemoryStream> CacheAsFallback(Uri onlineResource, string cacheKey)
{
    IObservable<MemoryStream> observableOnlineResource = FromInternet(onlineResource);
    return observableOnlineResource
        .Select(stream =>
                    {
                        CacheResource(stream, cacheKey);
                        stream.Position = 0;
                        return stream;
                    })
        .Catch<MemoryStream, Exception>(
            exception => FromCache(cacheKey)
                                .Select(cacheStream =>
                                            {
                                                if (cacheStream == null)
                                                    throw new Exception("No cache");
                                                return cacheStream;
                                            }));
}

So now I can write below code to get a resource, and in case of network connectivity problems it will fallback to a cache value.

const string url = "http://mark.mymonster.nl/Content/photo.jpg";
IObservable<MemoryStream> observable = ObservableResource.CacheAsFallback(new Uri(url), "photo.jpg");
observable
    .ObserveOnDispatcher()
    .Subscribe(
        stream =>
            {
                if (stream != null)
                {
                    var image = new BitmapImage();
                    image.SetSource(stream);
                    TargetImage.Source = image;
                }
            },
        exc => Debug.WriteLine(string.Format("Oops: {0}", exc.Message)),
        () => Debug.WriteLine("Completed."));

Now let’s combine everything we have again, toggle below to view it.

public static class StreamExtensions
{
    public static MemoryStream ToMemoryStream(this Stream stream)
    {
        var br = new BinaryReader(stream);
        var outputStream = new MemoryStream();
        var buffer = new byte[1024];
        int cb;
        while ((cb = br.Read(buffer, 0, buffer.Length)) > 0)
        {
            outputStream.Write(buffer, 0, cb);
        }
        outputStream.Position = 0;
        return outputStream;
    }
}

public static class ObservableResource
{
    private const string CacheFolder = "cache";

    public static IObservable<MemoryStream> CacheAsFallback(Uri onlineResource, string cacheKey)
    {
        IObservable<MemoryStream> observableOnlineResource = FromInternet(onlineResource);
        return observableOnlineResource
            .Select(stream =>
                        {
                            CacheResource(stream, cacheKey);
                            stream.Position = 0;
                            return stream;
                        })
            .Catch<MemoryStream, Exception>(
                exception => FromCache(cacheKey)
                                    .Select(cacheStream =>
                                                {
                                                    if (cacheStream == null)
                                                        throw new Exception("No cache");
                                                    return cacheStream;
                                                }));
    }

    public static void CacheResource(MemoryStream toCache, string cacheKey)
    {
        string targetFile = Path.Combine(CacheFolder, cacheKey);
        using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
        {
            if (!isoFile.DirectoryExists(CacheFolder))
                isoFile.CreateDirectory(CacheFolder);
            if (isoFile.FileExists(targetFile))
                isoFile.DeleteFile(targetFile);
            using (IsolatedStorageFileStream outputStream = isoFile.CreateFile(targetFile))
            {
                toCache.WriteTo(outputStream);
            }
        }
    }

    public static IObservable<MemoryStream> FromCache(string cacheKey)
    {
        return new AnonymousObservable<MemoryStream>(
            observer =>
                {
                    string targetFile = Path.Combine(CacheFolder, cacheKey);

                    using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
                    {
                        if (!isoFile.FileExists(targetFile))
                        {
                            observer.OnNext(null);
                        }
                        else
                        {
                            using (IsolatedStorageFileStream inputStream =
                                isoFile.OpenFile(targetFile, FileMode.Open, FileAccess.Read))
                            {
                                observer.OnNext(inputStream.ToMemoryStream());
                            }
                        }
                    }
                    observer.OnCompleted();
                    return Disposable.Empty;
                });
    }

    public static IObservable<MemoryStream> FromInternet(Uri onlineResource)
    {
        return
            new AnonymousObservable<WebResponse>(
                observer =>
                    {
                        var httpWebRequest =
                            (HttpWebRequest) WebRequest.Create(onlineResource);
                        httpWebRequest.BeginGetResponse(
                            iar =>
                                {
                                    WebResponse response;
                                    try
                                    {
                                        var requestState = (HttpWebRequest) iar.AsyncState;
                                        response = requestState.EndGetResponse(iar);
                                    }
                                    catch (Exception exception)
                                    {
                                        observer.OnError(exception);
                                        return;
                                    }
                                    observer.OnNext(response);
                                    observer.OnCompleted();
                                }, httpWebRequest);
                        return Disposable.Empty;
                    })
                .Select(
                    response => response.GetResponseStream().ToMemoryStream());
    }
}

Isolated Storage as Cache using Reactive Extensions

Thu, 18 Aug 2011 21:52:58 +0200

A lot of people are used to write some data to the Isolated Storage to use it as a Cache. I’m doing that as well, it’s easy to write and read to the Isolated Storage. Some people just write text/xml data and want to put the content in a string. I have however a lot of situations where caching of images is important, so my approach doesn’t make use of a string but a MemoryStream instead. So I have a static method that writes a MemoryStream to a file in Isolated Storage.

private const string CacheFolder = "cache";
public static void CacheResource(MemoryStream toCache, string cacheKey)
{
    string targetFile = Path.Combine(CacheFolder, cacheKey);
    using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
    {
        if (!isoFile.DirectoryExists(CacheFolder))
            isoFile.CreateDirectory(CacheFolder);
        if (isoFile.FileExists(targetFile))
            isoFile.DeleteFile(targetFile);
        using (IsolatedStorageFileStream outputStream = isoFile.CreateFile(targetFile))
        {
            toCache.WriteTo(outputStream);
        }
    }
}

That’s the easy part writing. I must admit reading isn’t much more complicated, unless you want to read it in a special way, namely using Reactive Extensions (Rx). Reactive Extensions offer a different way to look at asynchronous code, instead of listening to events, it allows to subscribe to things that happen. In addition to this it supports Linq on observable objects. I’m not going to dig deep on Rx, there are other blogs that can do that much better. The mechanism described in this article is intended for use in Windows Phone, but should work in Silverlight as well.

Reactive Extensions (Rx) over WebRequest

So why did I want to do use Rx? It’s simple: I want to have a similar signature and way of usage of code when I access content online (Async required) and when I access content from the cache (Standard only sync access). So how do I access online content?

In this example, I’m downloading online content and setting the MemoryStream as the Source of a BitmapImage and put the BitmapImage as the source of an Image control. It’s a regular Rx way of reacting on an Observable, where I put a lambda to react on OnNext, OnError and OnCompleted. Further more because I’m interacting with the User Interface it’s important to run that code on the Dispatcher. Running code on the dispatcher can be done manually or you can use Rx combined with ObserveOnDispatcher method.

const string url = "http://mark.mymonster.nl/Content/photo.jpg";
IObservable<MemoryStream> observable = ObservableResource.FromInternet(new Uri(url));
observable
    .ObserveOnDispatcher()
    .Subscribe(
        stream =>
        {
            if (stream != null)
            {
                var image = new BitmapImage();
                image.SetSource(stream);
                TargetImage.Source = image;
            }
        },
        exc => Debug.WriteLine(string.Format("Oops: {0}", exc.Message)),
        () => Debug.WriteLine("Completed."));

So how does my ResourceHelper.OnlineResource method look like? I’m using an AnonymousObservable to construct an observable from the Async pattern in a WebRequest. Please don’t tell me I could use Observable.FromAsyncPattern, I’ve used it in the past, but have stopped using it, I’m now writing my own Observable code to be sure I’m in control.

public class AnonymousObservable<T> : IObservable<T>
{
    private readonly Func<IObserver<T>, IDisposable> _subscribeAction;

    public AnonymousObservable(Func<IObserver<T>, IDisposable> subscribeAction)
    {
        _subscribeAction = subscribeAction;
    }

    #region IObservable<T> Members

    public IDisposable Subscribe(IObserver<T> observer)
    {
        return _subscribeAction(observer);
    }

    #endregion
}

This anonymous Observable class is a simple implementation that get’s a lambda passed in which will be executed on Subscribe. So finally we have the FromInternet implementation combined with a operation that reads a stream to a MemoryStream.

public static IObservable<MemoryStream> FromInternet(Uri onlineResource)
{
    return
        new AnonymousObservable<WebResponse>(
            observer =>
                {
                    var httpWebRequest =
                        (HttpWebRequest) WebRequest.Create(onlineResource);
                    httpWebRequest.BeginGetResponse(
                        iar =>
                            {
                                WebResponse response;
                                try
                                {
                                    var requestState = (HttpWebRequest) iar.AsyncState;
                                    response = requestState.EndGetResponse(iar);
                                }
                                catch (Exception exception)
                                {
                                    observer.OnError(exception);
                                    return;
                                }
                                observer.OnNext(response);
                                observer.OnCompleted();
                            }, httpWebRequest);
                    return Disposable.Empty;
                })
            .Select(
                response => response.GetResponseStream().ToMemoryStream());
}

What you can see in the Lambda that get’s passed into the AnonymousObservable for Online Resources, it’s similar to what we would have done in the past, but now it’s calling observer.OnNext, observer.OnError and observer.OnCompleted operations. Further more you can see that I attached a Select operation we are used to in Linq to convert a WebResponse to a MemoryStream using the ToMemoryStream extension method.

public static class StreamExtensions
{
    public static MemoryStream ToMemoryStream(this Stream stream)
    {
        var br = new BinaryReader(stream);
        var outputStream = new MemoryStream();
        var buffer = new byte[1024];
        int cb;
        while ((cb = br.Read(buffer, 0, buffer.Length)) > 0)
        {
            outputStream.Write(buffer, 0, cb);
        }
        outputStream.Position = 0;
        return outputStream;
    }
}

Reactive Extensions (Rx) over Isolated Storage

So far it has all been preparation for the Reactive Extensions over Isolated Storage. Where the implementation is actually really simple, it’s now wrapped in an Anonymous Observable.

public static IObservable<MemoryStream> FromCache(string cacheKey)
{
    return new AnonymousObservable<MemoryStream>(
        observer =>
            {
                string targetFile = Path.Combine(CacheFolder, cacheKey);

                using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
                {
                    if (!isoFile.FileExists(targetFile))
                    {
                        observer.OnNext(null);
                    }
                    else
                    {
                        using (IsolatedStorageFileStream inputStream =
                            isoFile.OpenFile(targetFile, FileMode.Open, FileAccess.Read))
                        {
                            observer.OnNext(inputStream.ToMemoryStream());
                        }
                    }
                }
                observer.OnCompleted();
                return Disposable.Empty;
            });
}

This now enables me to get something from cache in the same way as I can get something from the internet. Please mark the “photo.jpg” is a key for accessing the cache, which in the end results in data. If you choose a different caching-strategy you should remind this is a cache key.

IObservable<MemoryStream> observable = ObservableResource.FromCache("photo.jpg");
observable
    .ObserveOnDispatcher()
    .Subscribe(
        stream =>
        {
            if (stream != null)
            {
                var image = new BitmapImage();
                image.SetSource(stream);
                TargetImage.Source = image;
            }
        },
        exc => Debug.WriteLine(string.Format("Oops: {0}", exc.Message)),
        () => Debug.WriteLine("Completed."));

You can find the full source code here, by toggling.

public static class StreamExtensions
{
    public static MemoryStream ToMemoryStream(this Stream stream)
    {
        var br = new BinaryReader(stream);
        var outputStream = new MemoryStream();
        var buffer = new byte[1024];
        int cb;
        while ((cb = br.Read(buffer, 0, buffer.Length)) > 0)
        {
            outputStream.Write(buffer, 0, cb);
        }
        outputStream.Position = 0;
        return outputStream;
    }
}

public static class ObservableResource
{
    private const string CacheFolder = "cache";

    public static void CacheResource(MemoryStream toCache, string cacheKey)
    {
        string targetFile = Path.Combine(CacheFolder, cacheKey);
        using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
        {
            if (!isoFile.DirectoryExists(CacheFolder))
                isoFile.CreateDirectory(CacheFolder);
            if (isoFile.FileExists(targetFile))
                isoFile.DeleteFile(targetFile);
            using (IsolatedStorageFileStream outputStream = isoFile.CreateFile(targetFile))
            {
                toCache.WriteTo(outputStream);
            }
        }
    }

    public static IObservable<MemoryStream> FromCache(string cacheKey)
    {
        return new AnonymousObservable<MemoryStream>(
            observer =>
                {
                    string targetFile = Path.Combine(CacheFolder, cacheKey);

                    using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
                    {
                        if (!isoFile.FileExists(targetFile))
                        {
                            observer.OnNext(null);
                        }
                        else
                        {
                            using (IsolatedStorageFileStream inputStream =
                                isoFile.OpenFile(targetFile, FileMode.Open, FileAccess.Read))
                            {
                                observer.OnNext(inputStream.ToMemoryStream());
                            }
                        }
                    }
                    observer.OnCompleted();
                    return Disposable.Empty;
                });
    }

    public static IObservable<MemoryStream> FromInternet(Uri onlineResource)
    {
        return
            new AnonymousObservable<WebResponse>(
                observer =>
                    {
                        var httpWebRequest =
                            (HttpWebRequest) WebRequest.Create(onlineResource);
                        httpWebRequest.BeginGetResponse(
                            iar =>
                                {
                                    WebResponse response;
                                    try
                                    {
                                        var requestState = (HttpWebRequest) iar.AsyncState;
                                        response = requestState.EndGetResponse(iar);
                                    }
                                    catch (Exception exception)
                                    {
                                        observer.OnError(exception);
                                        return;
                                    }
                                    observer.OnNext(response);
                                    observer.OnCompleted();
                                }, httpWebRequest);
                        return Disposable.Empty;
                    })
                .Select(
                    response => response.GetResponseStream().ToMemoryStream());
    }
}

Silverlight / Windows Phone 7 Behavior to enhance Usability of TextBoxes

Wed, 13 Apr 2011 15:00:00 +0200

Yesterday I used an application on my Windows Phone which was very useful. When you gave focus to a TextBox it would immediately select all of the content of the TextBox. Though it’s not difficult to implement I found it very useful, and see it as a productivity enhancement for the users of the application.

The behavior is applied on any TextBox, and will attach to the GotFocus event and on the occurrence of the event it will execute the SelectAll method of the TextBox.

public class SelectAllOnFocusBehavior : Behavior<TextBox>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.GotFocus += GotFocus;
    }

    private void GotFocus(object sender, RoutedEventArgs e)
    {
        AssociatedObject.SelectAll();
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.GotFocus -= GotFocus;
    }
}

And using it is really simple. Just like any other Behavior add it to the Interaction.Behaviors collection of the TextBox where you want to apply this behavior.

<TextBox Text="Some content">
    <I:Interaction.Behaviors>
        <Behaviors:SelectAllOnFocusBehavior />
    </I:Interaction.Behaviors>
</TextBox>

The result could like like this, after giving focus to the TextBox.

Microsoft DevDays 2011 - I’m attending

Mon, 11 Apr 2011 21:07:36 +0200

Yes I’m attending the DevDays this year, but only one day. I will be representing Sixin in the Community Lounge on Thursday April 28th. The last day you can find Antoni Dol representing Sixin at the same place.

If my schedule allows it, I will try to attend a couple of sessions as well. I’m thinking about the following agenda.

9:15 – 10:45 Keynote by Rob Miles, Wade Wegner, Scott Hanselman and Ben Riga.

11:05 – 12:20 Windows Phone 7, title will be announced after Mix11 by Ben Riga.

13:30 – 14:45 Reactive Extensions for .NET for the Rest of Us by Mike Taulty. I’m really doubting how this session could be a level 300 session, I would expect it to be level 400. Rx had been mind blowing for me so far.

15:05 – 16:20 Science of Great UI by Mark Miller. Though I’m still a developer, not great at UI, but I want to improve my skills.

But of course see me at the for some talks around Silverlight, for example Silverlight 5, WP7, or anything else.

Validating our ViewModel

Tue, 22 Feb 2011 12:42:26 +0100

One of the key features that need to be implemented in a Line of Business application. Although Silverlight supports validation very well it’s not that easy compared to enabling Data Binding your ViewModel.

When we want our ViewModel to be fully Data Bindable we implement the INotifyPropertyChanged interface. It’s really an easy interface with an Event that needs to be called when the value of a property has changed. A lot of people don’t implement this interface themselves but use a framework like MVVM Light. I’m using that as well.

To make the validation work in a similar way we will have to implement INotifyDataErrorInfo. This is similar but I haven’t found a framework implementing it for me, so I wrote my own implementation of a ViewModelBase that both supports INotifyPropertyChanged and INotifyDataErrorInfo.

Declaring the validation rules

Now that we have a ViewModel which supports validation we need to use it in our ViewModels. Let’s say that we have a LoginViewModel, which requires a Username and Password to be filled in.

So we need to declare our properties Username and Password as Required. Besides that we also want the message text to be changed to something different than the default, so we set the ErrorMessage property.

public class Login : ViewModelBase
{
    private string _password;
    private bool _rememberMe;
    private string _userName;

    [Required(AllowEmptyStrings = false, ErrorMessage = "Username is required")]
    public string UserName
    {
        get { return _userName; }
        set
        {
            if (_userName != value)
            {
                ValidateProperty("UserName", value);
                _userName = value;
                base.RaisePropertyChanged("UserName");
            }
        }
    }

    [Required(AllowEmptyStrings = false, ErrorMessage = "Password is required")]
    public string Password
    {
        get { return _password; }
        set
        {
            if (_password != value)
            {
                ValidateProperty("Password", value);
                _password = value;
                base.RaisePropertyChanged("Password");
            }
        }
    }

    public bool RememberMe
    {
        get { return _rememberMe; }
        set
        {
            if (_rememberMe != value)
            {
                _rememberMe = value;
                base.RaisePropertyChanged("RememberMe");
            }
        }
    }
}

Alright this was the usage of one of the most rudimentary validation types. A small overview of all the different supported validation types.

- RequiredAttribute used to check if a property has a value and will return invalid in case of null, empty string, or only white space characters.

- DataTypeAttribute like it’s name the data type validator validates a value against certain ‘data types’: DateTime, Date, Time, Duration, PhoneNumber, Currency, Text, Html, MultilineText, EmailAddress, Password, Url, ImageUrl.

- RangeAttribute is used to validate int, decimal and double values which need to fall between certain min and max values.

- RegularExpressionAttribute can be used for more advanced scenario’s where you can write the full regular expression which should be used to validate against.

- StringLengthAttribute can be used to validate the length of a string in characters, you can specify both the maximum length and minimum length, but one of them is also possible. Be aware that a null value will be seen as valid!

- CustomValidationAttribute used in the most complex validation scenario’s. The CustomValidationAttribute needs to be used in conjunction with a static method which returns a ValidationResult. This static method can be used to implement your very complex validation rules.

And if the above validation types don’t fit, you can always derive from the ValidationAttribute and write your own implementation. It’s important to know that in case of a null-value the properties won’t be validated. This is something that’s not always helpful, specially in case of the CustomValidation where you want to implement a conditional required field validation. The Required validation does get fired in case of null-value.

Tools to enforce our ValidationAttributes

We have the Validator class that has a few static methods that can validate an object that’s decorated with ValidationAttributes. There is a method for validating a single property, which is handy in case you want immediate feedback on the change of the value of the property. And there is of course a method for validating the full object.

Time to implement the INotifyDataErrorInfo

To give everyone a clear understanding the implementation of INotifyDataErrorInfo will be a step by step implementation. If you’re only interested in the solution, you can of course skip this, and go to the end of the article.

ErrorsChanged event:

To start with the easy stuff, we need a way to notify that there are some errors. So besides the ErrorsChanged event we need a method to fire ErrorsChanged.

public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;

protected void NotifyErrorsChanged(string propertyName)
{
    if (ErrorsChanged != null)
        ErrorsChanged(this, new DataErrorsChangedEventArgs(propertyName));
}

GetErrors method and HasErrors property:

The GetErrors method needs to return errors for a specific property, so what we need is someway to store the errors. To store the errors I added a dictionary where the key would be the property name and the value would be a list of errror messages. GetErrors is in that case easily implemented by just returning data based on the key.

Further more the HasErrors is a matter of looking whether or not the dictionary has any data.

private readonly IDictionary<string, IList<string>> _errors = new Dictionary<string, IList<string>>();

public IEnumerable GetErrors(string propertyName)
{
    if (_errors.ContainsKey(propertyName))
    {
        IList<string> propertyErrors = _errors[propertyName];
        foreach (string propertyError in propertyErrors)
        {
            yield return propertyError;
        }
    }
    yield break;
}

public bool HasErrors
{
    get { return _errors.Count > 0; }
}

But how do we get some errors in the Dictionary?

As you have seen the implementation of INotifyDataErrorInfo is really straightforward, but we don’t do any validation yet. One of the scenario’s that’s very neat I would say is the ability to immediately give feedback to our users about validation problems. So when the value of a property is set (through two way binding for example) we want to validate immediately.

That’s not particularly difficult if we compare it to the normal MVVM property signature we only need to Validate a property. To keep it similar to the MVVM Light RaisePropertyChanged, we have to include the property name and value as well.

[Required(AllowEmptyStrings = false, ErrorMessage = "Username is required")]
public string UserName
{
    get { return _userName; }
    set
    {
        if (_userName != value)
        {
            ValidateProperty("UserName", value);
            _userName = value;
            base.RaisePropertyChanged("UserName");
        }
    }
}

Now we of course want to have an implementation for ValidateProperty. This implementation needs to validate only a specific property value against the rules for that property. We can make use of the Validator class that implements the actual checking against the validation rules. Together with two helper methods to add and remove validation messages from Errors collection we have the following code. We make use of the Validator to validate a property, and after we have the results we notify that Errors have been changed.

protected void ValidateProperty(string propertyName, object value)
{
    ViewModelBase objectToValidate = this;
    var results = new List<ValidationResult>();
    bool isValid = Validator.TryValidateProperty(
        value,
        new ValidationContext(objectToValidate, null, null)
            {
                MemberName = propertyName
            },
        results);

    if (isValid)
        RemoveErrorsForProperty(propertyName);
    else
        AddErrorsForProperty(propertyName, results);

    NotifyErrorsChanged(propertyName);
}

private void AddErrorsForProperty(string propertyName, IEnumerable<ValidationResult> validationResults)
{
    RemoveErrorsForProperty(propertyName);
    _errors.Add(propertyName, validationResults.Select(vr => vr.ErrorMessage).ToList());
}

private void RemoveErrorsForProperty(string propertyName)
{
    if (_errors.ContainsKey(propertyName))
        _errors.Remove(propertyName);
}

This works very well in the conjunction with the View, but somehow we also need to check if the full ViewModel is valid. This is especially important in when we hit for example the buttons that need to save our data to a “repository”. Besides the Validator.TryValidateProperty there also is a Validator.TryValidateObject. So let’s write a similar operation as the ValidateProperty, but now something we are able to use on Commands, so it needs to return a boolean where or not the ViewModel is valid. Again most of the magic is in the Validator.TryValidateObject, afterwards we split the full list of ValidationResults per property, to give feedback to our View.

public bool ValidateObject()
{
    ViewModelBase objectToValidate = this;
    _errors.Clear();
    var results = new List<ValidationResult>();
    bool isValid = Validator.TryValidateObject(objectToValidate,
                                                new ValidationContext(objectToValidate, null, null), results,
                                                true);
    if (!isValid)
    {
        IEnumerable<string> propertiesWithMessage = results.SelectMany(vr => vr.MemberNames);
        foreach (string property in propertiesWithMessage)
        {
            IEnumerable<ValidationResult> messages = results.Where(vr => vr.MemberNames.Contains(property));
            AddErrorsForProperty(property, messages);
            NotifyErrorsChanged(property);
        }
    }
    return isValid;
}

Problem to solve

Next is a problem we will need to solve. When the value of a property is null none of the validation attributes will be enforced, except the RequiredAttribute. This is really a problem for our CustomValidationAttribute when we implement a rule that should do something special in case of a null value.

After a better investigation I found out that all validation attributes are enforced when we validate a single property with the Validator class. Which isn’t happening when we use the full object validation implemented by the Validator class.

So why not solve it ourselves, by executing the Validate property method on all properties? Good idea, so I implemented it in our ViewModelBase. It’s pretty straightforward the first get all the properties, and then filter these to get the properties which have ValidationAttributes applied. End will be the call to validate the property for that specific value in line 12.

public bool ValidateObject()
{
    ViewModelBase objectToValidate = this;
    _errors.Clear();
    Type objectType = objectToValidate.GetType();
    PropertyInfo[] properties = objectType.GetProperties();
    foreach (PropertyInfo property in properties)
    {
        if (property.GetCustomAttributes(typeof (ValidationAttribute), true).Any())
        {
            object value = property.GetValue(objectToValidate, null);
            ValidateProperty(property.Name, value);
        }
    }

    return !HasErrors;
}

Full source

As always the full source of my ViewModelBase, which enhances the functionality of the MVVM Light ViewModelBase.

public abstract class ViewModelBase : GalaSoft.MvvmLight.ViewModelBase, INotifyDataErrorInfo
{
    private readonly IDictionary<string, IList<string>> _errors = new Dictionary<string, IList<string>>();

    protected ViewModelBase()
    {
    }

    protected ViewModelBase(IMessenger messenger)
        : base(messenger)
    {
    }

    #region INotifyDataErrorInfo Members

    public IEnumerable GetErrors(string propertyName)
    {
        if (_errors.ContainsKey(propertyName))
        {
            IList<string> propertyErrors = _errors[propertyName];
            foreach (string propertyError in propertyErrors)
            {
                yield return propertyError;
            }
        }
        yield break;
    }

    public bool HasErrors
    {
        get { return _errors.Count > 0; }
    }

    public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;

    #endregion

    protected void NotifyErrorsChanged(string propertyName)
    {
        if (ErrorsChanged != null)
            ErrorsChanged(this, new DataErrorsChangedEventArgs(propertyName));
    }

    protected void ValidateProperty(string propertyName, object value)
    {
        ViewModelBase objectToValidate = this;
        var results = new List<ValidationResult>();
        bool isValid = Validator.TryValidateProperty(
            value,
            new ValidationContext(objectToValidate, null, null)
                {
                    MemberName = propertyName
                },
            results);

        if (isValid)
            RemoveErrorsForProperty(propertyName);
        else
            AddErrorsForProperty(propertyName, results);

        NotifyErrorsChanged(propertyName);
    }

    private void AddErrorsForProperty(string propertyName, IEnumerable<ValidationResult> validationResults)
    {
        RemoveErrorsForProperty(propertyName);
        _errors.Add(propertyName, validationResults.Select(vr => vr.ErrorMessage).ToList());
    }

    private void RemoveErrorsForProperty(string propertyName)
    {
        if (_errors.ContainsKey(propertyName))
            _errors.Remove(propertyName);
    }

    public bool ValidateObject()
    {
        ViewModelBase objectToValidate = this;
        _errors.Clear();
        Type objectType = objectToValidate.GetType();
        PropertyInfo[] properties = objectType.GetProperties();
        foreach (PropertyInfo property in properties)
        {
            if (property.GetCustomAttributes(typeof (ValidationAttribute), true).Any())
            {
                object value = property.GetValue(objectToValidate, null);
                ValidateProperty(property.Name, value);
            }
        }

        return !HasErrors;
    }
}

Make use of WCF FaultContracts in Silverlight clients

Thu, 10 Feb 2011 20:52:15 +0100

I think every Silverlight developer has seen at least once, an exception showing a message “The remote server returned an error: NotFound” while connecting to a WCF Service. Alright, that message could have been a better message, but why are we getting this message?

Yes, you probably figured that out yourself, something is wrong with your WCF Service, and it’s not a missing WCF Service. Yes it feels something is seriously wrong, why do we get this strange NotFound message?

If anything goes wrong, the WCF Service returns some data, but also sets the HTTP Status code to 500. The browser HTTP stack doesn’t allow to read the data when the HTTP Status code is 500.

Solution 1:

There’s an easy solution to solve this: Don’t use the browser HTTP stack but the client HTTP stack instead. Just a matter of adding the below line of code in the Application_Startup method in the App.xaml.cs.

WebRequest.RegisterPrefix("http://", WebRequestCreator.ClientHttp);

Solution 2:

Because sometimes you don’t want to make use of the client HTTP stack but rather like the browser HTTP stack there’s a solution for that as well. If you’re using the browser HTTP stack you’ll get things like Windows Authentication and automatic Cookie handling.

Because of the extreme flexibility of WCF and really a lot of hook-points we can change the behavior of the HTTP Status code in case of errors. There’s a MSDN article which explains this in detail. The only real important part is line 18, which changes the Status code to 200 in case of Faults.

public class SilverlightFaultBehavior : BehaviorExtensionElement, IEndpointBehavior
{

   public void ApplyDispatchBehavior(ServiceEndpoint endpoint, EndpointDispatcher endpointDispatcher)
   {
       var inspector = new SilverlightFaultMessageInspector();
       endpointDispatcher.DispatchRuntime.MessageInspectors.Add(inspector);
   }

   public class SilverlightFaultMessageInspector : IDispatchMessageInspector
   {

       public void BeforeSendReply(ref Message reply, object correlationState)
       {
           if (reply.IsFault)
           {
               // Here the response code is changed to 200.
               var property = new HttpResponseMessageProperty { StatusCode = System.Net.HttpStatusCode.OK };

               reply.Properties[HttpResponseMessageProperty.Name] = property;
           }
       }

       public object AfterReceiveRequest(ref Message request, IClientChannel channel, InstanceContext instanceContext)
       {
           // Do nothing to the incoming message.
           return null;
       }


   }

   public void AddBindingParameters(ServiceEndpoint endpoint, BindingParameterCollection bindingParameters)
   {
   }

   public void ApplyClientBehavior(ServiceEndpoint endpoint, ClientRuntime clientRuntime)
   {
   }


   public void Validate(ServiceEndpoint endpoint)
   {
   }

   public override System.Type BehaviorType
   {
       get { return typeof(SilverlightFaultBehavior); }
   }

   protected override object CreateBehavior()
   {
       return new SilverlightFaultBehavior();
   }

}

Of course you need to configure the services to use this behavior.

<system.serviceModel>
	<extensions>
		<behaviorExtensions>
			<add name="silverlightFaults"
				type="Silverlight.Poc.SilverlightFaultBehavior, Silverlight.Poc, Version=1.0.0.0, Culture=neutral"/>
		</behaviorExtensions>
	</extensions>
	<services>
	...
	</services>    
	<behaviors>
		<endpointBehaviors>
			<behavior name="">
				<silverlightFaults/>
			</behavior>
		</endpointBehaviors>
		<serviceBehaviors>
			<behavior name="">
				<serviceMetadata httpGetEnabled="true" />
				<serviceDebug includeExceptionDetailInFaults="false" />
			</behavior>
		</serviceBehaviors>
	</behaviors>
	<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
</system.serviceModel>

Exception details

Next you might actual want to see the details of exceptions that occur in the service on the client. The simple solution is to just allow the service to include the exception details in Faults.

<serviceDebug includeExceptionDetailInFaults="true" />

You would want to do this in a development and maybe in a test environment, but not for production. In the production environment you’ll only want to provide known faults. Yes in a lot of situations there are known faults which in essence are very similar to application specific exceptions.

If you want to enable a known Fault on your WCF Service you will need to create a FaultContract and also decorate the ServiceContract with information about what kind of Faults in can expect. Let’s start with a simple FaultContract which is in this case a simple DataContract.

[DataContract]
public class AuthenticationFault
{
   [DataMember]	
   public string Reason { get; set; }
}

We decorate the Service with a FaultContract attribute which references the datacontract we created in the previous step.

[OperationContract]
[FaultContract(typeof(AuthenticationFault))]
List<Package> FindPackages(PackageQuery query);

Alright we now only need a way to fire a WCF Fault. This is similar to the way we fire normal exceptions, but an instance of the Fault DataContract will be added to the Fault.

throw new FaultException<AuthenticationFault>(new AuthenticationFault(), new FaultReason("Authentication failed."));

How to cancel the closing of your Silverlight application (in-browser and out-of-browser)

Sun, 30 Jan 2011 22:14:26 +0100

It’s almost two years ago when I wrote about the concept of canceling the the closing of a Silverlight application. In that era I was only trying to solve the problems that exist inside the browser. Like someone who accidently closes the tab, or types a new url in the tab of the Silverlight application. These things aren’t always a problem, but in Line of Business applications you would at least want to warn the user when he has unsaved data on the screen he’s about to close.

Nowadays we have Silverlight applications that run both in the browser and out-of-browser on the desktop. Of course some features can be different between the two versions of the application. But my intend is to have at least a feeling that 100% of the features are equal.

So I want to give my users a warning when they are exiting the application, either in-browser or out-of-browser. Even more, I want the warning to be much similar.

I want a simple message to be shown automatically. So let’s implement the ICloseHandler

public interface ICloseHandler
{
    string Message { get; set; }
    void Initialize();
}

Out of Browser

Although it might sound like a difficult task, it isn’t. Implementing a warning on exiting an out of browser app is as simple as listening to the Closing event of the MainWindow. In that occasion we simply show a messagebox and depending on the result we cancel the closing. The implementation of the ICloseHandler looks like this.

public class OutOfBrowserCloseHandler : ICloseHandler
{
    #region ICloseHandler Members

    public void Initialize()
    {
        Application.Current.MainWindow.Closing +=
            (s, e) =>
                {
                    MessageBoxResult boxResult = MessageBox.Show(
                        string.Format(
                            @"Are you sure you want to close the application?{1}{1}{0}",
                            Message, Environment.NewLine),
                        string.Empty,
                        MessageBoxButton.OKCancel);
                    if (boxResult == MessageBoxResult.Cancel)
                        e.Cancel = true;
                };
    }

    public string Message { get; set; }

    #endregion
}

The end result looks like this.

In browser

Alright, back to the browser. That’s where everything started for WPF/E, uh Silverlight. Though I wrote about a solution almost two years ago. I improved it a little bit, to make sure the solution isn’t that depended on the html that’s hosting the Silverlight application. During the initialization of the InBrowserCloseHandler the code attaches to the browser event called onbeforeunload, a piece of javascript will call back to the Silverlight application to get the message. To enable this we decorate a Silverlight method with the ScriptableMember attribute and we make sure that the InBrowserCloseHandler is registered as ScriptableObject.

public class InBrowserCloseHandler : ICloseHandler
{
    private const string ScriptableObjectName = "InBrowserCloseHandler";

    #region ICloseHandler Members

    public void Initialize()
    {
        HtmlPage.RegisterScriptableObject(ScriptableObjectName, this);
        string pluginName = HtmlPage.Plugin.Parent.Id;

        HtmlPage.Window.Eval(string.Format(
            @"window.onbeforeunload = function () {{
            var slApp = document.getElementById('{0}').getElementsByTagName('object')[0];
            var result = slApp.Content.{1}.OnBeforeUnload();
            if(result.length > 0)
                return result;
            }}",
            pluginName, ScriptableObjectName)
            );
    }

    public string Message { get; set; }

    #endregion

    [ScriptableMember]
    public string OnBeforeUnload()
    {
        return Message;
    }
}

The end result looks different for each browser. Below a few shots on the message shown by the browser. I can understand that you would want to be more in control of the look and feel of these messages. But sadly that’s not possible. However you could improve the looks of the out-of-browser message, but as I said before, I want the features between in-browser and out-of-browser to be similar, as much as possible.

Combined solution

Of course I also have a combined solution, that will do the thinking about either serving the in-browser, or out-of-browser implementation.

public class PowerfullCloseHandler : ICloseHandler
{
    private readonly ICloseHandler _closeHandler;

    public PowerfullCloseHandler()
    {
        if (!Application.Current.IsRunningOutOfBrowser)
            _closeHandler = new InBrowserCloseHandler();
        else
            _closeHandler = new OutOfBrowserCloseHandler();
    }

    #region ICloseHandler Members

    public string Message
    {
        get { return _closeHandler.Message; }
        set { _closeHandler.Message = value; }
    }

    public void Initialize()
    {
        _closeHandler.Initialize();
    }

    #endregion
}

Usage

And for the people who are interested in how to use it. I did add a field to the App.xaml.cs for the ICloseHandler and initialized everything in the Application_Startup.

private ICloseHandler _handler;

private void Application_Startup(object sender, StartupEventArgs e)
{
    RootVisual = new MainPage();


    _handler = new PowerfullCloseHandler();
    _handler.Initialize();
    _handler.Message = "Warning you're closing...";
}

Solving 3 problems with the ShellTileSchedule

Sun, 19 Dec 2010 21:03:07 +0100

Are the problems with the Shell Tile Schedule? Yes there are, at least I’m in the impression that there are some problems. Although we have those problems I really like the ShellTileSchedule because it enables an app to have an updated tile without the requirement to write server-side code to notify the client for a new tile. The smallest schedule that’s supported is 1-hour. In that situation every hour the tile will be updated with a tile located on the web (static url, which can return a dynamic image of course).

There are three problems I identified so far.

1. You can’t get the status of the ShellTileSchedule. Worse, although you started the schedule it might be stopped because for whatever reason (ex. phone is on Airplane mode) the downloading of the tile failed.

2. You have to wait at least 1 hour before the tile is updated for the first time.

3. After you stopped the ShellTileSchedule, the tile will be the last downloaded tile forever. It would be better if automatically the original tile (from the .xap package) is put back.

Combined a diagram to show the problems.

Solution 1 for problem 1

Alright, we can’t get the status. So what do we do? We store it locally, in the Isolated Storage. I really like the approach that’s explained by Joost van Schaik who created some extension methods for storing the settings in the Isolated Storage. He’s storing and retrieving to the Phone State on the Tomb Stoning events: Activated and Deactivated. I did store and retrieve from Isolated on all events: Activated, Deactivated, Launching and Closing.

That’s all about making sure we have a status. But still this status won’t be updated when the schedule stopped. The Windows Phone team suggests to start the schedule on every application start. The code of the Application_Launching event in the App.xaml.cs could look like this.

private void Application_Launching(object sender, LaunchingEventArgs e)
{
    Settings = this.RetrieveFromIsolatedStorage<SettingsViewModel>() ?? new SettingsViewModel();
    if(Settings.TileUpdatesEnabled)
    {
        new ShellTileSchedule
        {
            Interval = UpdateInterval.EveryHour,
            MaxUpdateCount = 0,
            Recurrence = UpdateRecurrence.Interval,
            RemoteImageUri = new Uri(@"http://mark.mymonster.nl/Uploads/2010/12/servertile.png"),
            StartTime = DateTime.Now
        }.Start();
    }
}

Joost mentions that the ViewModelBase of MVVM Light isn’t serializable. So I created a basic ViewModelBase that has the functionality that I’m always using in ViewModelBase (RaisePropertyChanged) and decorated it with the DataContract attribute.

[DataContract]
public class ViewModelBase : INotifyPropertyChanged
{
    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion

    protected void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Solution 2 for problem 2

Not many people know it’s possible, but Matthijs Hoekstra from Microsoft helped me in the direction to solve this problem.

Solution: Send a Push Notification from the phone itself. And afterwards close the channel and start the ShellTileSchedule.

It’s important that you send the Push Notification before the actual call to the start the ShellTileSchedule because the ShellTileSchedule is a kind of NotificationChannel of which only one can exist.

A lot of articles have been written already about how to do Push Notifications. After opening a NotificationChannel you will get a url. After that you send some xml to that url. The xml that has to be send looks like this.

?<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification">
  <wp:Tile>
    <wp:BackgroundImage>http://someserver/servertile.png</wp:BackgroundImage>
    <wp:Count>0</wp:Count>
  </wp:Tile>
</wp:Notification>

The setup of the xml in code:

public void SendTile(Uri notificationUrl, string tileUri, int? count, string title, Action onComplete)
{
    var stream = new MemoryStream();
    var settings = new XmlWriterSettings {Indent = true, Encoding = Encoding.UTF8};
    XmlWriter writer = XmlWriter.Create(stream, settings);
    writer.WriteStartDocument();
    writer.WriteStartElement("wp", "Notification", "WPNotification");
    writer.WriteStartElement("wp", "Tile", "WPNotification");
    if (!string.IsNullOrEmpty(tileUri))
    {
        writer.WriteStartElement("wp", "BackgroundImage", "WPNotification");
        writer.WriteValue(tileUri);
        writer.WriteEndElement();
    }
    if (count.HasValue)
    {
        writer.WriteStartElement("wp", "Count", "WPNotification");
        writer.WriteValue(count.ToString());
        writer.WriteEndElement();
    }
    if (!string.IsNullOrEmpty(title))
    {
        writer.WriteStartElement("wp", "Title", "WPNotification");
        writer.WriteValue(title);
        writer.WriteEndElement();
    }
    writer.WriteEndElement();
    writer.Close();
    byte[] payload = stream.ToArray();

	...
}

If you take a look at the Windows Phone 7 Training Kit you will see an example on how to do a Push Notification. It can be used almost one on one in the Windows Phone application itself. I removed some of the code (for the Raw and Toast Notifications) and refactored it to fit my needs.

So after the setup of the xml, the sending of the xml and setting of the HTTP headers looks like this:

public void SendTile(Uri notificationUrl, string tileUri, int? count, string title, Action onComplete)
{
	...
	
	byte[] payload = stream.ToArray();

    //Check the length of the payload and reject it if too long
    if (payload.Length > MaxPayloadLength)
        throw new ArgumentOutOfRangeException(
            string.Format("Payload is too long. Maximum payload size shouldn't exceed {0} bytes",
                            MaxPayloadLength));

    //Create and initialize the request object
    var request = (HttpWebRequest) WebRequest.Create(notificationUrl);
    request.Method = "POST";
    request.ContentType = "text/xml; charset=utf-8";
    //request.ContentLength = payload.Length;
    request.Headers["X-MessageID"] = Guid.NewGuid().ToString();
    request.Headers["X-NotificationClass"] = 1.ToString();
    request.Headers["X-WindowsPhone-Target"] = "token";

    request.BeginGetRequestStream(
        ar =>
            {
                //Once async call returns get the Stream object
                Stream requestStream = request.EndGetRequestStream(ar);

                //and start to write the payload to the stream asynchronously
                requestStream.BeginWrite(
                    payload, 0, payload.Length,
                    iar =>
                        {
                            //When the writing is done, close the stream
                            requestStream.EndWrite(iar);
                            requestStream.Close();

                            //and switch to receiving the response from MPNS
                            request.BeginGetResponse(
                                iarr =>
                                    {
                                        if (onComplete != null)
                                            onComplete();
                                    },
                                null);
                        },
                    null);
            },
        null);
}

Of course we shouldn’t forget the important part: Subscribing to the Notification channel. Take special notice to the Thread.Sleep in line 21. This is to make sure that the Tile update is completed before the unbinding, and more starting the ShellTileSchedule.

private void UpdateTileBeforeOperation(Uri imageUri, Action onComplete)
{
    HttpNotificationChannel channel = HttpNotificationChannel.Find("OneTime");
    if (channel != null)
        channel.Close();
    else
    {
        channel = new HttpNotificationChannel("OneTime");
        channel.ChannelUriUpdated +=
            (s, e) =>
                {
                    if (imageUri.IsAbsoluteUri)
                        channel.BindToShellTile(new Collection<Uri> {imageUri});
                    else
                        channel.BindToShellTile();

                    SendTile(e.ChannelUri, imageUri.ToString(), 0, "",
                                () =>
                                    {
                                        //Give it some time to let the update propagate
                                        Thread.Sleep(
                                            TimeSpan.FromSeconds(1));

                                        channel.UnbindToShellTile();
                                        channel.Close();
                                        //Do the operation
                                        if (onComplete != null)
                                            onComplete();
                                    }
                        );
                };
        channel.Open();
    }
}

Solution 3 for problem 3

The solution for problem 3 is similar to solution 2. But instead of a remote url the url is an relative url, local to the .xap file.

public void Stop(Action onComplete)
{
    UpdateTileBeforeOperation(new Uri("/Background.png", UriKind.Relative),
                                () => { if (onComplete != null) onComplete(); });
}

Again it allows you to include an action that will be called upon completion of the Stop method.

Full solution diagram

Alright, all problems solved. The diagram now looks like this.

Of course you want to have the full code for the SmartShellTileSchedule.

public class SmartShellTileSchedule
{
    private const int MaxPayloadLength = 1024;

    public UpdateRecurrence Recurrence { get; set; }

    public int MaxUpdateCount { get; set; }

    public DateTime StartTime { get; set; }

    public UpdateInterval Interval { get; set; }

    public Uri RemoteImageUri { get; set; }

    /// <summary>
    /// If the schedule is enabled (store this in application settings) this operation should be 
    /// called upon each application start.
    /// </summary>
    public void CheckForStart()
    {
        DelegateSchedule().Start();
    }

    /// <summary>
    /// This will enable the schedule and make sure the tile is updated immediately. Don't call 
    /// this operation on each application start.
    /// </summary>
    public void Start()
    {
        Start(null);
    }

    /// <summary>
    /// This will enable the schedule and make sure the tile is updated immediately. Don't call 
    /// this operation on each application start.
    /// </summary>
    /// <param name="onComplete">will be called upon completion</param>
    public void Start(Action onComplete)
    {
        UpdateTileBeforeOperation(RemoteImageUri, () =>
                                                        {
                                                            CheckForStart();
                                                            if (onComplete != null) onComplete();
                                                        });
    }

    /// <summary>
    /// This will stop the schedule and make sure the tile is replaced with the original logo-tile.
    /// Assumption is that the logo-tile is called "Background.png"
    /// </summary>
    public void Stop()
    {
        Stop(null);
    }

    /// <summary>
    /// This will stop the schedule and make sure the tile is replaced with the original logo-tile.
    /// Assumption is that the logo-tile is called "Background.png"
    /// </summary>
    /// <param name="onComplete">will be called upon completion</param>
    public void Stop(Action onComplete)
    {
        UpdateTileBeforeOperation(new Uri("/Background.png", UriKind.Relative),
                                    () => { if (onComplete != null) onComplete(); });
    }

    private void UpdateTileBeforeOperation(Uri imageUri, Action onComplete)
    {
        HttpNotificationChannel channel = HttpNotificationChannel.Find("OneTime");
        if (channel != null)
            channel.Close();
        else
        {
            channel = new HttpNotificationChannel("OneTime");
            channel.ChannelUriUpdated +=
                (s, e) =>
                    {
                        if (imageUri.IsAbsoluteUri)
                            channel.BindToShellTile(new Collection<Uri> {imageUri});
                        else
                            channel.BindToShellTile();

                        SendTile(e.ChannelUri, imageUri.ToString(), 0, "",
                                    () =>
                                        {
                                            //Give it some time to let the update propagate
                                            Thread.Sleep(
                                                TimeSpan.FromSeconds(1));

                                            channel.UnbindToShellTile();
                                            channel.Close();
                                            //Do the operation
                                            if (onComplete != null)
                                                onComplete();
                                        }
                            );
                    };
            channel.Open();
        }
    }

    private ShellTileSchedule DelegateSchedule()
    {
        return new ShellTileSchedule
                    {
                        Interval = Interval,
                        MaxUpdateCount = MaxUpdateCount,
                        Recurrence = Recurrence,
                        RemoteImageUri = RemoteImageUri,
                        StartTime = StartTime
                    };
    }

    public void SendTile(Uri notificationUrl, string tileUri, int? count, string title, Action onComplete)
    {
        var stream = new MemoryStream();
        var settings = new XmlWriterSettings {Indent = true, Encoding = Encoding.UTF8};
        XmlWriter writer = XmlWriter.Create(stream, settings);
        writer.WriteStartDocument();
        writer.WriteStartElement("wp", "Notification", "WPNotification");
        writer.WriteStartElement("wp", "Tile", "WPNotification");
        if (!string.IsNullOrEmpty(tileUri))
        {
            writer.WriteStartElement("wp", "BackgroundImage", "WPNotification");
            writer.WriteValue(tileUri);
            writer.WriteEndElement();
        }
        if (count.HasValue)
        {
            writer.WriteStartElement("wp", "Count", "WPNotification");
            writer.WriteValue(count.ToString());
            writer.WriteEndElement();
        }
        if (!string.IsNullOrEmpty(title))
        {
            writer.WriteStartElement("wp", "Title", "WPNotification");
            writer.WriteValue(title);
            writer.WriteEndElement();
        }
        writer.WriteEndElement();
        writer.Close();
        byte[] payload = stream.ToArray();

        //Check the length of the payload and reject it if too long
        if (payload.Length > MaxPayloadLength)
            throw new ArgumentOutOfRangeException(
                string.Format("Payload is too long. Maximum payload size shouldn't exceed {0} bytes",
                                MaxPayloadLength));

        //Create and initialize the request object
        var request = (HttpWebRequest) WebRequest.Create(notificationUrl);
        request.Method = "POST";
        request.ContentType = "text/xml; charset=utf-8";
        //request.ContentLength = payload.Length;
        request.Headers["X-MessageID"] = Guid.NewGuid().ToString();
        request.Headers["X-NotificationClass"] = 1.ToString();
        request.Headers["X-WindowsPhone-Target"] = "token";

        request.BeginGetRequestStream(
            ar =>
                {
                    //Once async call returns get the Stream object
                    Stream requestStream = request.EndGetRequestStream(ar);

                    //and start to write the payload to the stream asynchronously
                    requestStream.BeginWrite(
                        payload, 0, payload.Length,
                        iar =>
                            {
                                //When the writing is done, close the stream
                                requestStream.EndWrite(iar);
                                requestStream.Close();

                                //and switch to receiving the response from MPNS
                                request.BeginGetResponse(
                                    iarr =>
                                        {
                                            if (onComplete != null)
                                                onComplete();
                                        },
                                    null);
                            },
                        null);
                },
            null);
    }
}

Additional I also included my SettingsViewModel which is fully bindable.

[DataContract]
public class SettingsViewModel : ViewModelBase
{
    private ICommand _enforceTileUpdatesState;
    private bool _executing;
    private ICommand _setScheduleIfEnabled;
    private bool _tileUpdatesEnabled;

    [DataMember]
    public bool TileUpdatesEnabled
    {
        get { return _tileUpdatesEnabled; }
        set
        {
            if (value != _tileUpdatesEnabled)
            {
                _tileUpdatesEnabled = value;
                RaisePropertyChanged("TileUpdatesEnabled");
            }
        }
    }

    public bool Executing
    {
        get { return _executing; }
        set
        {
            if (value != _executing)
            {
                _executing = value;
                RaisePropertyChanged("Executing");
            }
        }
    }

    public ICommand SetScheduleIfEnabled
    {
        get
        {
            if (_setScheduleIfEnabled == null)
            {
                _setScheduleIfEnabled = new RelayCommand(
                    () =>
                        {
                            if (TileUpdatesEnabled)
                            {
                                Executing = true;
                                GetSchedule().CheckForStart();
                                Executing = false;
                            }
                        });
            }
            return _setScheduleIfEnabled;
        }
    }

    public ICommand EnforceTileUpdatesState
    {
        get
        {
            if (_enforceTileUpdatesState == null)
            {
                _enforceTileUpdatesState = new RelayCommand(
                    () =>
                        {
                            if (TileUpdatesEnabled)
                            {
                                Executing = true;
                                GetSchedule().Start(
                                    () =>
                                    Deployment.Current.Dispatcher.
                                        BeginInvoke(() => Executing = false));
                            }
                            else
                            {
                                Executing = true;
                                GetSchedule().Stop(
                                    () =>
                                    Deployment.Current.Dispatcher.
                                        BeginInvoke(() => Executing = false));
                            }
                        });
            }
            return _enforceTileUpdatesState;
        }
    }


    private SmartShellTileSchedule GetSchedule()
    {
        return new SmartShellTileSchedule
                    {
                        Interval = UpdateInterval.EveryHour,
                        RemoteImageUri =
                            new Uri(@"http://someserver/servertile.png"),
                        StartTime = DateTime.Now,
                        Recurrence = UpdateRecurrence.Interval
                    };
    }
}

Trigger a Storyboard on ViewModel changes

Tue, 14 Dec 2010 15:40:41 +0100

Interactions based on ViewModel changes are easy as soon as you understand how it works. A lot of people have been hiding and showing elements in the UI based on a boolean in the ViewModel which is converted to fit the Visibility property. Of course they used an IValueConverter that translates a bool to a Visibility enum.

But sometimes designers are tough, they don’t want to show and hide, they want to play a full animation. Of course I know about the ability to trigger a Storyboard by using EventTriggers (control Loaded or Clicked for example). But did you know about the DataTrigger?

DataTrigger

The DataTrigger comes Expression Blend, you’ll have to reference the Microsoft.Expression.Interactions library, which can be found here: C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries\Microsoft.Expression.Interactions.dll

It’s not really that complex to use. If you only want to start a Storyboard when a specific value is put in the bound property the binding looks very much like this.

<Grid x:Name="LoginGrid">
	<i:Interaction.Triggers>
		<ei:DataTrigger Binding="{Binding IsLoggedIn}" Value="true">
			<ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>
		</ei:DataTrigger>
	</i:Interaction.Triggers>
</Grid>

Operators

If you have something more specific where you want to use an operator other than equal it will be just a little bit different. The below only starts the storyboard when the value is less than 1.

<Grid x:Name="LoginGrid">
 	<i:Interaction.Triggers>
 		<ei:DataTrigger Binding="{Binding IsLoggedIn}" Value="1" Comparison="LessThan">
 			<ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>
 		</ei:DataTrigger>
 	</i:Interaction.Triggers>
</Grid>

You can use any of the following operators: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual.

Really complex scenario’s

Alright, it will start to become more complex when you have more than just on condition that needs to be applied. It would be more clear to make use of a PropertyChangedTrigger in that case, and additional set Conditions. The below example gets a trigger if the IsLoggedIn is changed, and than will apply the conditions, greater than 1 and less than 10 in this example. If the outcome of the conditions is true the Storyboard will start.

<Grid x:Name="LoginGrid">
 	<i:Interaction.Triggers>
 		<ei:PropertyChangedTrigger Binding="{Binding IsLoggedIn}">
 			<i:Interaction.Behaviors>
 				<ei:ConditionBehavior>
 					<ei:ConditionalExpression>
 						<ei:ComparisonCondition LeftOperand="{Binding IsLoggedIn}" Operator="GreaterThan" RightOperand="1"/>
 						<ei:ComparisonCondition LeftOperand="{Binding IsLoggedIn}" Operator="LessThan" RightOperand="10"/>
 					</ei:ConditionalExpression>
 				</ei:ConditionBehavior>
 			</i:Interaction.Behaviors>
 			<ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>
 		</ei:PropertyChangedTrigger>
 	</i:Interaction.Triggers>
</Grid>

Doing other things…

Yes this isn’t limited to the controlling of a storyboard. You can also use the GoToStateAction or any other action, mentioned here. But it’s not limited to built-in actions, you can build your own Trigger Action by implementing TriggerAction<T>.