Summary

• WebClient will always return on the UI thread if called from the UI thread
• WebRequest will always return on a background thread

The investigation

To test this I created a super-simple app that fetches some stuff using WebClient and WebRequest, from the UI and from a background worker.

The code:

public partial class MainPage : PhoneApplicationPage
{
    private readonly int _uiThreadId = Thread.CurrentThread.ManagedThreadId;

    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        WriteThreadInfo("UI");

        Dispatcher.BeginInvoke(() => WriteThreadInfo("dispatcher"));

        RunUiRequests();

        LaunchWorkerRequests();

        base.OnNavigatedTo(e);
    }

    private void RunUiRequests()
    {
        var request = WebRequest.CreateHttp("http://www.jayway.com");
        request.BeginGetResponse(RequestCallbackFromUI, null);

        var client = new WebClient();
        client.DownloadStringCompleted += client_DownloadFromUIStringCompleted;
        client.DownloadStringAsync(new Uri("http://www.jayway.com", UriKind.RelativeOrAbsolute));
    }

    private void LaunchWorkerRequests()
    {
        var worker = new BackgroundWorker();
        worker.DoWork += (sender, ex) =>
                                {
                                    Thread.Sleep(2000);

                                    WriteThreadInfo("worker");

                                    var request = WebRequest.CreateHttp("http://www.jayway.se");
                                    request.BeginGetResponse(RequestCallbackFromWorker, null);

                                    var client = new WebClient();
                                    client.DownloadStringCompleted += client_DownloadFromWorkerStringCompleted;
                                    client.DownloadStringAsync(new Uri("http://www.jayway.com", UriKind.RelativeOrAbsolute));

                                };
        worker.RunWorkerAsync();
    }

    private void client_DownloadFromWorkerStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        WriteThreadInfo("webclient from worker");
    }

    private void RequestCallbackFromWorker(IAsyncResult ar)
    {
        WriteThreadInfo("webrequest from worker");
    }

    void client_DownloadFromUIStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        WriteThreadInfo("webclient from UI");
    }

    private void RequestCallbackFromUI(IAsyncResult ar)
    {
        WriteThreadInfo("webrequest from UI");
    }

    private void WriteThreadInfo(string threadName)
    {
        var id = Thread.CurrentThread.ManagedThreadId;
        Debug.WriteLine("{0,-28} Thread is {1} ({2})",
                        threadName,
                        id,
                        (id == _uiThreadId) ? "UI" : "background");
    }
}

 

And one set of results from running this is:

UI                           Thread is 257753342 (UI)

dispatcher                   Thread is 257753342 (UI)

webrequest from worker       Thread is 255066402 (background)

As you can see, the WebClient returns on the UI thread when called from the UI thread, but when called from the worker thread – it returns on a background thread.

I hope you feel enlightened – I do

Deciding what to show

Since the app was going to be used throughout the conference, showing something about what’s coming up would be nice. At first we were thinking about showing upcoming session titles with speaker names etc – maybe one randomized at a time. But then, we ended up with something more personal and more graphical – thumbnails of upcoming speakers. Here’s what the tile looks like:

front:           back:

Hence the front of the tile shows the speakers, and the back of the tile shows at what time the next sessions start. Instead of just using the back of the tile – we opted for giving the user as immediate information as possible – so whenever he/she would look at their start screen – something useful would be there, not just the app logo. This we think is a viable solution for this kind of short-term usage app, but maybe is not suitable for a lifetime app, like your bank, that you will (hopefully) keep forever and will not use every 5 minutes.

We put a finale in there as well; after the conference was over – the tile changed to:

front:          back:

Nice huh? When the conference is over – the conference logo comes back as the app’s front tile and a nice message shows on the back. Maybe the message is a bit too much, but I think it’s a nice pointer to un-pin the app from your start screen. An app should be on the start screen for a reason– and this conference app does not really belong there once the conference is over.

Install size vs bandwidth usage

We bundled all speaker images with the app. This creates a larger file to install, but gives less data to download when updating the tile, and less hassle if you compare with downloading and caching. With lots of people coming from abroad, we thought it would be better to rely the dodgy conference wireless once during installation instead of on each tile update.

Implementing the tile

The of-the-shelf solution for updating a tile is very well documented here: updating the tile and running in the background. What can be a bit tricky is creating a fully customized tile, which is done by rendering a background image for the tile using WriteableBitmap. The blog post Customize a Windows Phone 7 Live Tile by John P Alioto helped me on the way.

The OnInvoke method first checks whether to reset the tile and remove the background agent, then launches the canvas setup on the current dispatcher. When not running on the dispatcher, cross threading issues keep popping up.

protected override void OnInvoke(ScheduledTask task)
{
    if (CheckConferenceEndedAndDisableAgent(task))
    {
        NotifyComplete();
        return;
    }

    Deployment.Current.Dispatcher.BeginInvoke(SetupCanvas);
}

private bool CheckConferenceEndedAndDisableAgent(ScheduledTask task)
{
    if (!ConferenceTimeCalculator.HasConferenceEnded())
        return false;

    var tileData = new StandardTileData
                       {
                           BackgroundImage = new Uri("Background.png", UriKind.RelativeOrAbsolute),
                           Title = APP_TITLE,
                           BackTitle = "welcome back!",
                           BackContent = APP_TITLE + " is over"
                       };
    var tile = ShellTile.ActiveTiles.First();
    tile.Update(tileData);

    Debug.WriteLine("conference has ended, removing scheduled task");
    ScheduledActionService.Remove(task.Name);
    return true;
}

private void SetupCanvas()
{
    _canvas = new Canvas
                  {
                      Height = TILE_SIDE,
                      Width = TILE_SIDE
                  };

    var bmp = new BitmapImage
                  {
                      CreateOptions = BitmapCreateOptions.None
                  };

    bmp.ImageOpened += OnBackgroundBmpOpened;
    bmp.UriSource = new Uri("Background.png", UriKind.RelativeOrAbsolute);
}

as you can see, the SetupCanvas only opens the background image then returns. Since the original tile file Background.png is a content file – we have to wait for the ImageOpened event to be raised before trying to render it – otherwise the result will only be black.

So, when the image is opened, we open all the images for all the speakers:

private void OnBackgroundBmpOpened(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("background opened");
    var image = new Image
                    {
                        Source = (BitmapImage)sender,
                        Width = 173,
                        Height = 173
                    };

    Canvas.SetLeft(image, 0);
    Canvas.SetTop(image, 0);
    _canvas.Children.Add(image);

    Deployment.Current.Dispatcher.BeginInvoke(LaunchOpenOfAllSpeakerImages);
}

public void LaunchOpenOfAllSpeakerImages()
{
    _nbrOfSpeakers = _speakers.Count;
    Debug.WriteLine("starting tile update for {0} speakers",
                    _nbrOfSpeakers);
    foreach (var speaker in _speakers)
        GetSpeakerBitmap(speaker);
}

private void GetSpeakerBitmap(ISpeaker speaker)
{
    var bmp = new BitmapImage { CreateOptions = BitmapCreateOptions.None };
    bmp.ImageOpened += OnSpeakerBmpOpened;

    //live
    //bmp.UriSource = new Uri(speaker.ImageUri, UriKind.RelativeOrAbsolute);

    //cached
    bmp.UriSource = new Uri("/images/speakers/" + speaker.Id + ".jpg", UriKind.RelativeOrAbsolute);
}

private void OnSpeakerBmpOpened(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("image opened");
    var mySpeakerIndex = _nbrOfSpeakers;
    _nbrOfSpeakers -= 1;

    AddImageToCanvas(mySpeakerIndex, (BitmapImage)sender);

    if (_nbrOfSpeakers == 0)
        RenderComposedBitmap();
}

private void AddImageToCanvas(int mySpeakerIndex, BitmapImage bitmapImage)
{
    var image = new Image
                    {
                        Source = bitmapImage,
                        Width = 57,
                        Height = 57,
                        Stretch = Stretch.UniformToFill,
                        Opacity = 1
                    };

    _canvas.Children.Add(image);
    Canvas.SetLeft(image, 58 * (mySpeakerIndex % 3));
    Canvas.SetTop(image, 58 * (mySpeakerIndex / 3));
}

and finally, when all images have been opened, we render the image and update the tile:

private void RenderComposedBitmap()
{
    Debug.WriteLine("rendering composed bitmap");
    var writeableBitmap = new WriteableBitmap(173, 173);

    writeableBitmap.Render(_canvas, null);
    writeableBitmap.Invalidate();

    WriteJpg(writeableBitmap);
    UpdateTile();
}

private void UpdateTile()
{
    var tile = ShellTile.ActiveTiles.First();
    var data = new StandardTileData
                   {
                       Title = "",
                       BackTitle = APP_TITLE,
                       BackgroundImage = new Uri("isostore:/" + TILE_BACKGROUND_IMAGE_URI, UriKind.RelativeOrAbsolute),
                       BackContent = "next sessions: " + _sessionstart
                   };
    tile.Update(data);
    NotifyComplete();
}

The Control Canvas is used for layout of the tile. As guys who love Grid’s and dynamic layout – we first tried using a Grid with three columns and three rows, but could not get the images to render correctly. During a Windows Phone Code Camp at Jayway, Dag König nicely pointed us towards the Canvas which he had used in his Month Tile app – works beautifully. It’s probably just some Measure/Arrange-calls together with an Invalidate to get a Grid-powered tile to render correctly, left as exercise for the reader

That’s it! Hope this inspires or helps someone out there. L8r g8rs!

The problem

An app created before July 18th 2011 will not have the AssemblyInfo attribute NeutralResourcesLanguage and submitting an update to this app will give you the error:

Error 2003: The [NeutralResourceLanguage] attribute is missing on the entry assembly.

The fix

So, the fix for this is simple – add the attribute in AssemblyInfo.cs. (can also be done through selecting in a drop down in app properties)

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

The quirk

English it not always English. There is something called location groups. If you’re lucky – you’ll now pass through submission. If you’re not, you’ll end up with:

Error 1047: An update cannot support fewer languages than the previous app instance supported.

Whoah, what is this? For me, this was because I had stated the language as English (International) when submitting the first time. The rules are:

I learned this from the MSDN forum page helpful tips on language processes during app submission. To quote: If the parent instance was marked as “English (International)”, you need to use [NeutralResourcesLanguage(“en”)], if it was “English”, use [NeutralResourcesLanguage(“en-US”)] or [NeutralResourcesLanguage(“en-CA”)], in other cases use two-letter language name.

Summary

My final statement ended up as:

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

This bit me when submitting updates – I really hope this helps you avoid or find the problem quickly

Bye!

Now, onto the topic of the hour: Beta submission.

Empirical timing results

I have during the past months submitted numerous apps to the Marketplace as beta – and come to the conclusion: (this probably will just be true for the near future AND the region I’m in – Sweden)

1) Beta submission takes 4 hours to complete – the app then becomes “published”

2) It takes another 8 hours before the app becomes available for download!

Error when trying to download right after submission completed

Before the 8 hours, hitting the deep link gives Marketplace error: 805a0194. An explanation of the error can be found in this StackOverflow response: it’s a 404 – not found.

Why is it like this? I don’t know. Probably propagation of the xap package onto download servers. Annoying – but more bearable once you see the system in it.

Go publish those apps!

What are implicit styles?

A style that has a target type but no x:Key is treated as implicit and will be applied to all descendant elements in the visual tree.

Why should I use an implicit style?

I think it’s very nice to not have to set the style on each and every control in a section of your app that you want exactly the same look on. Instead just create an implicit style in one of the parent elements and let the good times roll

What does an implicit style look like in XAML?

<Grid Grid.Row="1" VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.Resources>
        <Style TargetType="TextBlock"
               BasedOn="{StaticResource PhoneTextNormalStyle}">
            <Setter Property="FontSize" Value="21"/>
            <Setter Property="Foreground" Value="Pink"/>
        </Style>
    </Grid.Resources>
    <TextBlock Grid.Row="0" Text="styles"/>
    <TextBlock Grid.Row="1" Text="blend"/>
    <TextBlock Grid.Row="2" Text="wow"/>
</Grid>

the above XAML will produce:

But if we change the style to having a key:

<Style x:Key="PinkStyle" TargetType="TextBlock"
BasedOn="{StaticResource PhoneTextNormalStyle}">

we instead get:

so – it has to be an “anonymous” style.

It’s all about looks - applying the style e.v.e.r.y.w.h.e.r.e

So – what will happen if we put the style in App.xaml? You guessed it – visual tree propagation galore! All your textblocks will get the style.

<Application.Resources>
    <Style …>
        …
    </Style>
</Application.Resources>

There you go! I don’t use this all the time – but it can make the XAML nice and tidy if you are repeating many controls on a page that should share the same looks.

Happy styling!

Fix: Set the startup object on the app project’s properties page

In the .csproj file, this corresponds to the SilverlightAppEntry element:

<SilverlightAppEntry>PhotoDiary.App</SilverlightAppEntry>

I would call it a bug, that you cannot rename a project and have the SilverlightAppEntry update accordingly. But luckily, the work-around is simple.

Have a nice day!

About the rich text box

In mango there is a control called RichTextBox, that boost a lot of functionality like right to left text and inline formatting. I’m going to focus on adding an inline link to an external web page, as for example in a tweet. Before mango this wasn’t possible to do in a text box. There was workarounds like using the wrap panel from the Silverlight for Windows Phone toolkit or write your own control and add the text word by word).

The RichTextBox consists of a bunch of child elements and a set of properties that handles text flow and overall style. In the textbox you will add Paragraphs of text that can be broken down into text parts with attributes like bold, italic, Inline images, etc. There is also the Run that can have it’s on style when it comes to font, size and so on. That way it’s quite easy to build up a complex text. However, there is no support for it in blend so you have to dig into the XAML or code to get what you want:

<RichTextBox>
    <Paragraph>
        The quick <Bold>brown</Bold>
        fox <Italic>jumped</Italic>
        over the <Underline>lazy</Underline>
        dog.
    </Paragraph>
</RichTextBox>

And on the phone you will get a little line of text like this:

You could do a lot more with it with both fonts and colors but the problem comes when you want to bind to it. You could do this in a few ways as well, if the text use some kind of markup you could have a converter do the work for you and translate this to elements needed or you can do (as I will show) an injection directly into the textbox. The XAML for what I want is like this:

<RichTextBox>
    <Paragraph x:Name="TweetParagraph"/>
</RichTextBox>

So I the result I want is to inject links and accented text so that I can present a tweet to the user. This end result I want is something like this:

Mostly it just the matter of breaking down the text in words (just split on space) and then add them one by one in the rich text box. This is done in a loop for each word, added to a paragraph in the rich text box like this:

foreach (var tweetWord in tweetWords)
{
    if (tweetWord.StartsWith("http://"))
        TweetParagraph.Inlines.Add(GetAsLink(tweetWord + " "));
    else
        TweetParagraph.Inlines.Add(GetAsRun(tweetWord + " "));
}

I also identified words that start with # or @ and add these with accent color. You could of course add them with click functionality as well to handle things like navigating and showing a twitter user etc but I think you get the idea.

private Run GetAsRun(string tweetWord)
{
    if (tweetWord.StartsWith("#") || tweetWord.StartsWith("@"))
        return GetAsAccentedRun(tweetWord);

    return new Run { Text = tweetWord };
}

private Run GetAsAccentedRun(string tweetWord)
{
    return new Run
               {
                   Foreground = _accentColor,
                   Text = tweetWord
               };
}

But now for the actual link

At first I hade trouble with it, normally a link just points around in your application. It don’t target the browser and that goes for a hyperlink as well. So my first solution was to catch the click event and on that create a new browser task with the URL. But this seems a bit awkward for just a web link. And indeed there was a simple solution to make sure it opened in a browser window.

private Hyperlink GetAsLink(string tweetWord)
{
    var hl = new Hyperlink
    {
        NavigateUri = new Uri(tweetWord),
        TargetName = "_blank",
        Foreground = _accentColor
    };

    hl.Inlines.Add(tweetWord);

    return hl;
}

The trick here is in the TargetName using the _blank as you do in a normal HTML link ensures that you open a new browser window, even if the link is placed in you Windows Phone application. And if you want that directly in XAML then it will look like this:

<Paragraph>
    <Hyperlink NavigateUri="http://jayway.com"
               TargetName="_blank">jayway.com</Hyperlink>
</Paragraph>

Neat!

Update 2: Now using the RTM SDK!
Update: Now using the new beta of the windows phone SDK!

I was trying out a few things on the windows phone 7 platform and wanted to come up with a simple application idea. There are numerous of simple list application examples out there like twitter and RSS readers but I wanted to try something different, something both useful and a bit more playful. And with a limited time.

So why not a planning poker application? Most of the graphics was already there like the coffee cup, infinity mark and the logo so it was simple to whip it together. But I still think there are a few interesting parts in this.

As it’s static data, there are no more than the numbers, coffee cup, question mark and the infinity sign.  I didn’t bother with any complicated view model, just went along with static buttons. And one big button as the currently selected card. I re-styled the button to make it look like a card and added the graphics and text. The big card is normally hidden but when I select a card it is populated with the selected cards content and the popped up.

The trick here is that if the selected card is an Image the I create a new image and assign it to the content and if its text I assign that directly to the content.

if (_currentCard.Content is Image)
  BigButton.Content = new Image
    {
      Source = ((Image)_currentCard.Content).Source,
      Height = 234,
      Width = 202
    };
else
  BigButton.Content = _currentCard.Content;

Next up is the animation. I wanted the card to flip over while I tuned up the dark overlay. The basic animation was easy to set, I just used a combination of scale and plane transforms to get the big card from the small size and up to the full screen view with a flip. It was a bit trickier to get the card to start and end the animation on the right spot. A little calculation together with naming of the places where I should modify the animation, with  an “x:Name” property, did the trick. Now I was able to modify it from code using the following to set the position:

int xValue = -180 + 120 *
    int.Parse(_currentCard.GetValue(Grid.ColumnProperty).ToString());
int yValue = -260 + 190 *
    (int.Parse(_currentCard.GetValue(Grid.RowProperty).ToString()) - 1);

((EasingDoubleKeyFrame)FindName("startX")).Value = xValue;
((SplineDoubleKeyFrame)FindName("endX")).Value = xValue;
((EasingDoubleKeyFrame)FindName("startY")).Value = yValue;
((SplineDoubleKeyFrame)FindName("endY")).Value = yValue;

It's not the most elegant code, with no safeguards when I cast between stuff, but I whipped it together during an afternoon and it was rewarding to see what could be accomplished with some 50 lines of code and a little blend. And who knows I might clean it up and publish it as soon as the devices are out and the market place is up.

Updated: Since the new beta of the developer tools came out a couple of days ago I updated the planning poker application. Most of the updates consist of exchanging 3-4 assembly references with one; Microsoft.Phone. And the the emulator turned out to quite a bit speedier, woohoo!

Updated 2: With the RTM release of the SDK, some more updates had to be made. Manifest validation has now been turned on, and some stuff in the manifest changed.

Final app here: JayPoker_rtm.zip

Description of how to transform a beta app to an RTM compliant app: http://10rem.net/blog/2010/09/16/announcing-the-windows-phone-7-release-wp7-silverlight-toolkit-and-xna-40

Time to plan the next sprint // Håkan Reis

So I started out a little quest to find some data around the phone and what dimensions you could expect. However, there are no single specification around from Microsoft, so the actual size of the screen may vary. Searching around web brought very little technical specifications, but you know a few facts: It’s going to be 480x800 pixels, and 16:9 form factor on the screen. So I did a couple of educated guesses and assumed a 3.8” screen. Interesting enough, this told me that it actually is going to have a whopping 240dpi resolution, that's close to a an old laser printer, and in full color – amazing.

So on to the mockup, as soon as I got the dimensions right I started to print out a few pages, checking fonts and sizes (and got a surprise by how small the texts and icons got in the actual size). I used the skin from the emulator as base. Next, I wanted to get a feeling of it in the hand as well, so I started adding some depth. A few minutes later I found myself creating a cut-out paper prototype you see to the right here.

If you like you can cut out some slits  and do a left/right and a top/bottom sliding version. That way you can even use it to user test panoramic and pivot applications as well as that big sliding home screen.

So here it is the Windows Phone 7 series paper prototype (PDF and PSD format), enjoy.

Updated: A few other printouts added, XPS and PDF for both Letter and A4

Windows Phone 7 series paper prototype (zip with psd)
Windows Phone 7 series paper prototype (zip with XPS and PDF for Letter and A4)

After three days of the Microsoft Mix10 event the brain tend to overflow. So I sit down at a Starbucks and try to summarize my thoughts before my mind explodes.

It’s easy to get caught up in positive buzz during events like this but I really think Microsoft is doing a lot of things right here with Windows Phone 7 series, the next level of .NET and Silverlight and Internet Explorer 9, among other things. Some of it, I believe, accounts to all the focus on User Experience and the influence that Bill Buxton have on this.

Also if you want to catch any of the sessions most of them are up at the mix10 site already.

Silverlight release pace

This was a big surprise to me; Silverlight 4 is going to be released as early as next month end the release candidate (RC) is out now. I was more in the lines of a beta and the an RC in the summer and a release late 2010. But it seems they try to align and do a big release with .NET 4, VS2010 and Silverlight 4. As a bonus the Pivot control will be in the controls toolkit so that’s going to be fun to play with.

Silverlight 4 Tools RC | .NET 4 RC | VS2010 RC

About the Windows Phone 7 series

The development platform for Windows Phone 7 series was, of course, one of the biggest news on the starting keynote and lot of sessions around it followed. I think they are on the right track with the platform. A few surprises surfaced, like the inclusion of DirectX to utilize HW backed video decoding and the Windows Phone development tools being released for free.

But a few questions and problems surfaced as well, as you can se all over the web it seems they are not including cut & paste and market place being the only application deployment channel. Other things I thought about was:

• How is the user interface is going to perform in right to left markets.
• What the possibilities are to hook in other services, like for example Pandora, to provide music streams for the native Zune player.
• And I still have a few issues with lag in the interface as well as accidental clicks, lets just hope the will get this issues out the door before they release it.

The user experience work that has been put into the new OS is really cool, the decision to remove all chrome and go for a real clean and consistent look is really fresh. And the decision to let the back button work on all levels across the phone, in-applications as well as between was a stroke of genius.

Windows Phone Dev tools | UI Design guidelines

What about HTML 5 and IE 9

It was pretty obvious that they should release some news around Internet Explorer 9 and its take on HTML 5. It is just an early technology preview but I have to say I’m impressed by the results. They did tone down the JavaScript speed issues but quite frankly they were on par with the other browsers and at those speeds it really is less of an issue. What still is an issue is standards, and anything but a 100/100 score on Acid3 is a failure in my eyes.

What they did show was the brilliant work they have done on the GPU acceleration part. This really was amazing 720p HD video streaming on a netbook was blazing fast, they even manage to pump two 720p streams without a glitch, impressive. And rendering HMTL5, CSS3 and SVG with hardware acceleration really looks promising.

If anything it shows that the Internet Explorer team is still in the game and might really get a decent browser out the door.

IE9 platform preview

Expression Blend 4

The things I saw done with blend was quite cool, this tool has come a long way from the first release and is now a potent tool. The tight integration with Adobe was finally in place, just point to the assets and start editing it in Illustrator or Photoshop. What’s more impressive, if I got it right, was that you were able to bind to a text object from the imported Illustrator assets directly to the object in your ViewModel! This really puts design control back into the hands of the designer.

Expression Blend 4 beta

Get real

So what’s left for me now is to find the time to play with all these new toys and and experience for myself what they are capable of before it’s time to Get Real and start creating.

Have fun // Håkan Reis