Category Archives: Code

Welcome CustomMessageBox to the Windows Phone Toolkit

A big welcome to CustomMessageBox, a new control to the toolkit which is exactly what it sounds like, a customizable, Windows Phone-UI compliant, easy to use message box offering the following features:

  • Native look & feel including font sizes, layout, alignment and animations
  • Ability to display full screen or to only consume as much space as needed
  • Very simple “basic” mode with ability to easily extend it to complex scenarios
  • Customizable buttons without needing to re-template

Here is what it looks like, from the basic (a message and some buttons) to the complex (a full screen message box with an embedded Pivot):

imageimage

Getting Started

As of today (9/30/2012) you’ll need to download the latest source from CodePlex and recompile the toolkit assembly to use it but we’ll soon have an updated NuGet package for your convenience. As usual add a reference to the Microsoft.Phone.Controls.Toolkit.dll to your project and add the toolkit XML namespace to the top of your XAML:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Basic Usage

The basic usage is very similar to the default MessageBox and how you’re probably used to using dialogs in other UI platforms; set some properties, call Show(), handle the event that is raised when the user returns from the dialog.

Possible values to customize are:

  • Caption – sets the title caption of the message box
  • Message – the actual message to display to the user
  • LeftButtonContent, RightButtonContent – the buttons that appear on the bottom of the dialog, if you omit the text then the button won’t be shown.

To handle the user’s selection hook up the Dismissed() event and look at the e.Result value which is of type CustomMessageBoxResult indicating which, if any, button was tapped. If the user presses the back button vs. making a selection the result will be None.

Finally to kick-off the whole process call Show(). Show() is non-blocking so be aware that any code you put after the Show() call will run before the user has made a selection.

By default the the message box only takes up as much space as required but you can force it to full-screen by setting the property IsFullScreen to true.

Simple Example

To recreate the first message box in the screen shot do the following in code-behind:

CustomMessageBox messageBox = new CustomMessageBox()
{
    Caption = "Do you like this sample?",
    Message = "There are tons of things you can do using custom message boxes. To learn more, be sure to check out the source code at CodePlex.",
    LeftButtonContent = "yes",
    RightButtonContent = "no"
};
messageBox.Dismissed += (s1, e1) =>
    {
        switch (e1.Result)
        {
            case CustomMessageBoxResult.LeftButton:
                // Do something.
                break;
            case CustomMessageBoxResult.RightButton:
                // Do something.
                break;
            case CustomMessageBoxResult.None:
                // Do something.
                break;
            default:
                break;
        }
    };
messageBox.Show();

The title caption, message and buttons are configured, the Dismissed() event is assigned a handler and finally the Show() method is called to kick off the party.

Taking It Up A Notch

That’s all well and good but where is the real “custom” part of the CustomMessageBox? That comes in with the Content property where you insert your own content into the overall layout. You can define your extra content in either code-behind or as a XAML resource and then set it to the Content of the CustomMessageBox.

The content area exists below where the Message is displayed yet right above the buttons.

Let’s say we want to recreate this dialog:

image

Via Code-Behind

One way to go about it would be to create all the custom content inline at the time of invocation:

HyperlinkButton hyperlinkButton = new HyperlinkButton()
{
    Content = "Privacy Statement",
    Margin = new Thickness(0, 28, 0, 8),
    HorizontalAlignment = HorizontalAlignment.Left,
    NavigateUri = new Uri("http://silverlight.codeplex.com/", UriKind.Absolute)
};
TiltEffect.SetIsTiltEnabled(hyperlinkButton, true);
CustomMessageBox messageBox = new CustomMessageBox()
{
    Caption = "Allow this application to access and use your location?",
    Message = "Sharing this information helps us provide and improve the location-based services offered for this phone. We won't use the information to identify or contact you.",
    Content = hyperlinkButton,
    LeftButtonContent = "allow",
    RightButtonContent = "cancel"
};

The HyperlinkButton is created in code, tilt effect is set on the HyperlinkButton and to hook it together the HyperlinkButton is assigned to the Content property.

Via XAML

Another approach is to create it as a DataTemplate in either the page or application resources and when you configure the dialog set the ContentTemplate property which may prove easier for more complicated templates.

<DataTemplate x:Key="HyperlinkContentTemplate">
    <HyperlinkButton Content="Privacy Statement"
                        Margin="0,28,0,8"
                        HorizontalAlignment="Left"
                        NavigateUri="http://silverlight.codeplex.com/"
                        TargetName="_blank" />
</DataTemplate>

Now the code-behind looks like this:

CustomMessageBox messageBox = new CustomMessageBox()
{
    Caption = "Allow this application to access and use your location?",
    Message = "Sharing this information helps us provide and improve the location-based services offered for this phone. We won't use the information to identify or contact you.",
    ContentTemplate = (DataTemplate)this.Resources["HyperlinkContentTemplate"],
    LeftButtonContent = "allow",
    RightButtonContent = "cancel"
};

More Samples

You can find more examples, including the source to the “What Can I Say?” screenshot I showed above, in the Toolkit Samples project which you can either get via downloading the latest source or looking at it directly on CodePlex.

As always feedback is appreciated via either comments here or on CodePlex. We review each piece of feedback and we do get to them, if sometimes a little later than we’d like. Our goal is to make it so you can focus on writing your application vs. having to recreate the UI you see on the phone.

C# and Sublime Text 2 PROTIPS

Given how powerful, fast and easy Sublime Text 2 is I find myself editing a great deal of my C# & XAML code in it and then switching to Visual Studio to launch the application.  Along those lines I’ve picked up a few C# Sublime tips.

1. Update Your C# Bundle

The syntax and snippet bundle that comes with Sublime is a bit out of date and more importantly it doesn’t correctly identify methods so you are missing a huge chunk of the power of the Ctrl+R “jump to method” hotkey.  Grab an updated bundle over on GitHub.

This is a TextMate bundle so you’ll need to do some slicing and dicing to get it to play nicely with Sublime, most notably move the files in the Syntax and Preferences folders into the root of the C# package.  If you need more details than that just hit me up and I’ll add the step-by-step.

2. Add msbuild as a Build System

I do a build sometimes as a quick and dirty syntax & sanity check and it’s nice to be able to trigger it from Sublime vs. having to swap back to VS.  I whipped this up and dropped it into my /Sublime Text 2/Packages/User folder as “msbuild.sublime-build”.

F7 to compile, F4 to jump to each compiler error (I know, I know, you don’t have bugs but that other coder…).

I’m using a hard-coded msbuild location, that’s stinky and a better solution would be to use environment variables and such but… Works On My Two Machines That Are Sync’d With Dropbox.

If you have a Sublime project open (which is really a collection folders that act as a scope for searches, I resisted them foreva but am now an addict) this will call msbuild at the project root, otherwise it’ll look in the same folder as the file you’re editing.

3. Create Some Snippets

Visual Studio 2010 ships with some awesome and must-have C# snippets.  I haven’t tried to recreate them all in Sublime (I really do like VS you know) but there are some tricks Sublime can do that Visual Studio just can’t.  One nice one is being able to whip up some regex magic on replacements which comes in handy for things like changing the casing between private and public variables.  An example will work better:

Also VS doesn’t support XAML snippets and that about makes me cry every time I have to type yet another angle bracket so go ahead and create some tasty XAML snippets.  I dropped a few into a zip here.

Have any other protips for working with C# or XAML inside of Sublime? I’d love to hear them and if you have any questions about my workflow don’t be shy.

How to make the Windows Phone Toolkit ToggleSwitch Header wrap

I’m going through the Windows Phone Toolkit bugs fixing some of the low hanging fruit and came across this bug where a ToggleSwitch with a long header is clipped.  The proper Metro behavior is that it should wrap which is easy enough to do on a TextBlock.  The rub though is that the Header is represented by a ContentControl, not a TextBlock.

ContentControl makes it easy to put whatever you’d like into the Header; images, other controls, buttons, etc. and is the standard Silverlight way of representing content.  This is great for an open-ended environment like the Silverlight plug-in where each app has it’s own UI but on the phone you want as close to the Metro UI as you can get.  In a perfect world (or just one with a time machine) we would have made Header a TextBlock with wrapping turned on but, well, we didn’t.  We’re still debating if we should just make the switch and deal with the fall out but until then here is a super simple way to ensure your Header text wraps when it needs to:

<toolkit:ToggleSwitch Header="This is an example of a really long description label for localization">
    <toolkit:ToggleSwitch.HeaderTemplate>
        <DataTemplate>
            <TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
                        FontSize="{StaticResource PhoneFontSizeNormal}"
                        Foreground="{StaticResource PhoneSubtleBrush}"
                        TextWrapping="Wrap"
                        Text="{Binding}" />
        </DataTemplate>
    </toolkit:ToggleSwitch.HeaderTemplate>
</toolkit:ToggleSwitch>

Which gets you:

image

If you’re going to do any type of localization I recommend you make this change to all your ToggleSwitch controls.

Unable to Clear East Asian Text from a TextBox in Windows Phone (or always clear your TextBox focus)

We’ve received several reports of apps that don’t clear out their text even though the app author is setting the Text property to an empty string.  I did a little poking and it’s due to a combination of the application bar and IME.  The onscreen keyboard (SIP) enters a composition mode when working with East Asian languages that allows for quickly entering complex words and phrases and it ends once the SIP is dismissed.  If the text is modified programmatically while it’s in this mode it’ll behave unpredictably, the most obvious issue being that it doesn’t update to reflect the text you’ve set in your code behind.

You can tell if a TextBox is in this mode by the underline underneath the current character you’re editing:

image

Because the ApplicationBar isn’t drawn or managed by Silverlight focus won’t properly be taken away from the currently active control (the TextBox) and any attempt to change the text via the Text property will put the TextBox into the state I mentioned above.  The most common way this happens is performing some action on the text such as sending a message and then attempting to clear it out.

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    ChatUpFriend(MessageTextBox.Text);
    MessageTextBox.Text = "";
}

Luckily the work around is easy, force the SIP to be dismissed before clearing the Text property and everything will work as expected.  The most common/easiest way is to set focus to the page itself:

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    // Set focus to the page ensuring all TextBox controls are properly commited
    // and that the IME session has been correctly closed.
    this.Focus();
    ChatUpFriend(MessageTextBox.Text);
    MessageTextBox.Text = "";
}

I recommend putting this code anywhere you’re clearing out a TextBox as you never know what language your users will be typing in.

Sublime Text: Fashion and Form Text Editing

I have an odd love of text editors,though considering I love to code perhaps it’s not that odd at all. I’ve gone through quite a few over the years, I was a huge TextPad fan for a long time and I still pull it up now and then but then I saw a bunch of screen shots of TextMate on Mac and realized the bar had been reset. From there I was on a search for an editor that was both smart AND sexy and I went through a bunch of editors looking for “the right one”, from E Text Editor (nice but made me install cygwin for full power) to Intype (beautiful and had a great start but languished for a year though I hear they’re working again in earnest) and finally to Sublime Text 2 which is what this post is all about.

I’ve been using Sublime for about a year, since roughly Build 2020 of Subliime Text 2 and the project just keeps getting better and better. I highly recommend you grab the development builds and install the latest as they come down the pipe. Sublime is even nice enough to let you know when there are new builds available.

Sublime Text Main

Why Use Anything Besides Visual Studio?

Why indeed since I sling a lot of C# during my day? First is the speed, VS does a lot for you and sometimes you pay that cost and when I just want to work with text I reach for Sublime.

Snippet support. It’s super fast to create new snippets as well as build in some intelligence via regex. It’s probably just me but creating new snippets in VS always seems like a heavy process but it’s so easy with Sublime I find myself creating them for any block code more than two lines long. I have one cool snippet for creating new properties with a backing private variable and it takes care of creating both the public and private variables and correctly casing each one, something I don’t believe you can do in VS.

Multiple Selection. This is a must have for any modern editor and it’s best if you see it in action but roughly if you Ctrl select multiple words and then start typing all of the selected items will start updating. Great for quickly changing types such swapping from a Grid to StackPanel in XAML.

Auto-Complete. You won’t lose any of your fancy auto-complete either, Sublime uses the current syntax bundle to parse your files and determine what should be considered key words.

Jump To. Ctrl+P to jump to any file in your project. Ctrl+, to jump to any symbol. Ctrl+Shift+P to look at all available commands and snippets. Awesome and super fast.

Project Management. Drag & drop a folder into Sublime and now all your jump to features become much more powerful as you can move between files in your project.

And so much more. Seriously. Support for TextMate bundles, great color themes, code-folding, macro support, margin guides, a ton of extensibility, active forums, weekly updates, etc.

Pro-Tips & Downloads

  1. Keep your Sublime configuration in sync between computers with DropBox (see Using Dropbox to sync Sublime Text settings across Windows computers).
  2. If you use VS don’t forget to setup Sublime as an External Tool. I’m constantly moving between VS & Sublime and since both programs are great about picking up changes this is a great combo.
  3. Install Sublime Package Control. Think of it as gems or NuGet for Sublime. After you install it browse some of the cool packages available. My current favs are:
    • Sublime TFS – check out, commit & via history for files under TFS control.
    • sublime-github – A great list of commands for managing your Gists from Github.
    • SublimeAStyleFormatter – A pretty code formatter for C#.
    • Theme – Soda - A nice dark theme for the entire editor itself.
  4. Check out what others are saying (Rob Conery)
  5. Check out this great list of pro-tips (Sublime Text 2 Tips and Tricks (Updated))
  6. If you edit in XAML here is a XAML bundle I ported (it’s basically a copy of the XML bundle and a porting of some of the TextMate snippets from the Microsoft Gestalt project).

Using RestSharp with AgFx in your Windows Phone app

I’m using the excellent REST library RestSharp for all my REST and OAuth calls.  I’m also using the amazing data caching framework AgFx written by Shawn Burke which handles caching your web requests, something that goes from a nice to have to critical when writing high performance Windows Phone apps.

Out of the box AgFx handles all your requests so it can do it’s caching thing, getting in the front of each request to determine if it should give you a cached version instead of hitting the web, if it should invalidate the cache, if it should give you a cached version and then make a live request, etc.  This is how you want it but sometimes you want more control over how those live requests are made.  In my case I’m using OAuth and requesting protected resources that require OAuth access tokens and RestSharp has some very nice methods for both authenticating and making those pesky protected calls.  The question is how to slip RestSharp into the middle of the AgFx mechanism?

AgFx Out of the Box

Your basic AgFx call looks like this:

ZipCodeVm viewModel = DataManager.Current.Load<ZipCodeVm>(txtZipCode.Text);

Which eventually executes code like this (which you the developer has written):

public LoadRequest GetLoadRequest(ZipCodeLoadContext loadContext, Type objectType)
{
    // build the URI, return a WebLoadRequest.
    string uri = String.Format(ZipCodeUriFormat, loadContext.ZipCode);
    return new WebLoadRequest(loadContext, new Uri(uri));
}

AgFx will call GetLoadRequest() to get a LoadRequest which it’ll use when it needs to fetch live data.  This example is using the default WebLoadRequest which uses HttpWebRequest under the covers to fetch the data but as long as you return an object that descends from LoadRequest you can use whatever requesting mechanism you like.

RestSharpLoadRequest

That’s where RestSharp comes in.  Instead of hand-crafting HTTP requests including hand-crafting headers and building POST payloads I’m going to let RestSharp do the heavy lifting by creating a custom RestSharpLoadRequest.  It’s based heavily on the WebLoadRequest in AgFX, right down to the comments and took all of 15 minutes to code up.  It’s not that exciting of a class but you can download it and view it on github as a gist:

An AgFx LoadRequest that uses RestSharp to make the actual request, supports passing in OAuth tokens

Download it and drop it into your application as is (well, I’d probably change the namespace to something more appropriate).  Sorry about it being a tar.gz file, maybe I’ll ping Phil Haack now that he works there to offer up .zips for gists as well.

WOW, sorry folks, I didn’t realize I’d created the Gist as private, if you tried to view it before you should have better luck now.

RestSharpLoadRequest in Action

I’m going straight to a meaty example where I create a few parameters to throw on the URL and pass in all my OAuth token goodness:

public LoadRequest GetLoadRequest(ShelfLoadContext loadContext, Type objectType)
{
    var resource = BuildResource(
        "review/list.xml",
        new Dictionary()
        {
            {"v", "2"},
            {"id", loadContext.UserId},
            {"page", loadContext.Page.ToString()},
            {"shelf", loadContext.Shelf}
        });
    return new RestSharpLoadRequest(
        loadContext,
        resource,
        Client.Current.ConsumerKey,
        Client.Current.ConsumerSecret,
        Client.Current.AccessToken,
        Client.Current.AccessTokenSecret);
}

Don’t worry about the BuildResource call, that’s simply building up your REST API end-point (aka “resource”).  The only difference from the standard usage of AgFx is instead of a WebLoadRequest I’m using RestSharpLoadRequest.

And there you have it, now you can lean on RestSharp inside of the AgFx framework.  Also If you’re using Hammock as your REST library as choice it should take all of 15 minutes to whip up a HammockLoadRequest following the same basic principles.

UPDATE (02.14.2010): The way I was handing parameters above was just plain weird, the RestRequest object that I’m using inside of RestSharpLoadRequest already has robust AddParameter() logic so I exposed it.  The above code now looks like this:

public override LoadRequest GetLoadRequest(ShelfLoadContext loadContext, Type objectType)
{
    var request = new RestSharpLoadRequest(
        loadContext,
        GoodReadsClient.Current.BuildResource("review/list.xml"),
        GoodReadsClient.Current.ConsumerKey,
        GoodReadsClient.Current.ConsumerSecret,
        GoodReadsClient.Current.AccessToken,
        GoodReadsClient.Current.AccessTokenSecret);
    request.AddParameter("key", GoodReadsClient.Current.ConsumerKey);
    request.AddParameter("shelf", loadContext.Shelf);
    request.AddParameter("v", "2");
    request.AddParameter("id", loadContext.UserId);
    request.AddParameter("page", loadContext.Page.ToString());
    return request;
}

Not only does it leverage existing code it follows the pattern most RestSharp/Hammock users are used to, namely you create the request and then you add on parameters.

Selecting into an ObservableCollection in LINQ: a ToObservable() extension method for Enumerable

I love me to some LINQ, especially some LINQ to XML (otherwise known as XLinq) for parsing meaty XML files into objects.  Anywhere there is XML parsing going on in my app you’ll see code similar to this:

var list = (from review in reviews.Descendants("review")
            select new BookReview
            {
                StartedAt = (string)review.Element("started_at"),
                Book = (from b in review.Elements("book")
                        select new Book((string)b.Element("id"))
                        {
                            Title = (string)b.Element("title"),
                            CoverUrl = new Uri((string)b.Element("image_url")),
                            NumberOfPages = (string)b.Element("num_pages"),
                            AverageRating = (string)b.Element("average_rating"),
                            Description = (string)b.Element("description").Value,
                            Authors = (from a in b.Descendants("author")
                                        select new Author
                                        {
                                            Name = (string)a.Element("name")
                                        }).ToObservable<Author>()
                        }).SingleOrDefault()
            }).ToList();

This is a medium complexity example, I’m selecting a list of BookReview objects which contains a Book which in turn has a collection of Author objects. 

One thing to pay attention to is that the default return type for a collection of items returned via Linq is a Enumerable and if you’re using a different collection type you’ll need to use one of the built-in extension methods to convert it to the appropriate collection type.  You can see where I’m doing this on the last line above with the call to ToList().

There are built-in extension methods to convert to List, Dictionary, Array and a bevy of others but not ObservableCollection, which you’re probably using in some form if you’re data binding your collection to your UI.  You could select into an Enumerable and then manually add each item into your ObservableCollection but that’s no fun and it’s much simpler to just write your own Enumerable extension method to take care of it:

public static class Enumerable
{
    public static ObservableCollection<TSource> ToObservable<TSource>(this IEnumerable<TSource> source)
    {
        return new ObservableCollection<TSource>(source);
    }
}

I’m using it in the first sample to convert the Authors collection.  Hope you find this useful, I know I use it all the time in my Windows Phone apps!

By the way it’s also a “gist”, a version controlled snippet, over on github.com:  LinqExtensions.cs.