In a little app I’m working on to exercise some new Mango features I needed to create the message “bubble” and oddly enough didn’t stumble across any samples I could easily use even though a large number of apps have recreated this style, most likely because it’s so easy to do.

Here was my first take and it’s very hard-coded to the above look but it should be trivial to change it around.  Also there are dozen ways you could make this more reusable, either as a template for a ContentControl or as a new control.  If anyone has any suggestions for improvements or a better resource I’d love to see it!

XAML

<!-- bubble -->
<Grid Grid.Column="1"
		Margin="12,6,12,0">
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<Path Data="M 16,12 16,0 0,12"
			Fill="{StaticResource PhoneAccentBrush}"
			HorizontalAlignment="Right"
			Margin="0,0,12,0"
			UseLayoutRounding="False"
			VerticalAlignment="Top" />
	<!-- Your actual content here -->
	<StackPanel Grid.Row="1"
				Background="{StaticResource PhoneAccentBrush}">
		<TextBlock Text="{Binding Mood}"
					Style="{StaticResource PhoneTextNormalStyle}"
					FontWeight="Bold"
					TextWrapping="Wrap"
					Margin="6,12,6,6"
					HorizontalAlignment="Left"
					VerticalAlignment="Top" />
		<TextBlock Text="{Binding LastUpdated, StringFormat='g'}"
					HorizontalAlignment="Right"
					VerticalAlignment="Top"
					Margin="6,0,6,6"
					Style="{StaticResource PhoneTextSubtleStyle}"
					FontFamily="Segoe WP SemiLight" />
	</StackPanel>
</Grid>

Note for the sharp-eyed I’m using a feature that is new for Mango that exists in Silverlight 4 which is default string formatting in bindings.

In Mango we added the ability to interact with the shell’s native progress indicator along the top of the page.  This is a great way to maintain UI consistency with the phone as well as get a smooth progress animation because the system is handling the animation vs. the Silverlight runtime.  Here I’m recreating the ‘save to phone’ menu item you can see in the pictures hub by adding a “Saving picture…” progress indicator:

There are some great articles on using the new ProgressIndicator out there and I won’t do yet another intro blog post but I did want to share a little extension method I wrote to grab it from the page and avoid some of the annoying initialization code that you end up writing over and over again.

Some of my favorite ProgressIndicator articles so far for those looking to explore this in more depth are:

• Creating a global ProgressIndicator experience using the Windows Phone 7.1 SDK Beta 2
• Binding the WP7 ProgressIndicator in XAML

And here is my little extension method I’ve found useful on a few pages:

public static class Extensions
{
    public static ProgressIndicator GetProgressIndicator(this PhoneApplicationPage page)
    {
        var progressIndicator = SystemTray.ProgressIndicator;
        if (progressIndicator == null)
        {
            progressIndicator = new ProgressIndicator();
            SystemTray.SetProgressIndicator(page, progressIndicator);
        }
        return progressIndicator;
    }
}

I’m playing with using some of the various code snippet websites out there and this is embedded from Smipple. I’d love to see more Windows Phone snippets pop up on these sites.

UPDATE: Scratch the idea of embedding Smipple snippets via embed code, it looks awesome but seems to tweak my formatting, going back to good old syntax highlighted.