Category Archives: User Interface

Localizable Balloon Tooltip Control

I wanted to create a tooltip in the style of the balloons used in Windows Phone apps like Messaging. Almost immediately, I realized it needed to be localizable, which would mean adjustable in width to accomodate text lengths in different languages.

In the past I’ve bound XAML elements, such as WPF menus to the ActualWidth of another element, e.g:

Width="{Binding ActualWidth, ElementName=window, Mode=Oneway}"

However, in this case I couldn’t get the desired result, which is to have a bit of padding on either side of the text. What documentation I read suggested that ActualWidth would take into account Margin settings. But I had to resort to a hack in the code-behind, adding a line to the constructor:

public MessageBoxControl()

TextGrid.Width = MsgText.ActualWidth + 16;

Here’s the XAML:

<UserControl x:Class="Controls.MessageBoxControl"
 FontFamily="{StaticResource PhoneFontFamilyNormal}"
 FontSize="{StaticResource PhoneFontSizeNormal}"
 Foreground="{StaticResource PhoneForegroundBrush}"
 d:DesignHeight="56" d:DesignWidth="440">

<Grid x:Name="LayoutRoot" Background="Transparent" IsHitTestVisible="False" Height="56"
 Width="{Binding ActualWidth, ElementName=TextGrid, Mode=OneWay}" MaxWidth="440">

 <RowDefinition Height="32" />
 <RowDefinition Height="24" />

<Grid Name="TextGrid" Background="#FFD68B" Grid.Row="0" MinWidth="200" MaxWidth="440">
 <TextBlock Name="MsgText" Foreground="#2368B0" FontSize="24" Height="32" MaxWidth="424"
 HorizontalAlignment="Center" TextTrimming="WordEllipsis"
 Text="{Binding Path=LocalizedResources.ResetMessage, Source={StaticResource LocalizedStrings}}"/>

<Grid Grid.Row="1">
 <Path Name="Tail" Fill="#FFD68B" Data="M-1,-1,24,24,24,-1,-1,-1"
 HorizontalAlignment="Left" Width="24" Height="24" Margin="24 0" />


Note that a MaxWidth is assigned to Grid and Text elements. Also, the TextTrimming attribute is set. This is meant to safeguard against exceeding the width of the display in Portrait mode. 

And a sample screen shot of a (hopefully accurate) French translation of “Hold to reset to 0:00”:



“We are overloaded with childish mythologies like ‘the cloud’; a soft, fuzzy metaphor for enormous infrastructural projects of undersea cables and power-hungry data farms.” – Timo Arnall

Even in rebutting a metaphor, one can have difficulty avoiding metaphors, e.g. “data farms.”

I’ve largely ignored term “no ui” because it’s a crock and a waste of time. As for terms like “the cloud” anyone that develops against remote servers/storage knows better. Yet it’s not the worst shorthand in the world to describe some set of services and storage that can be so varied but is definitely not “here” or local to the user or their devices. From a developer standpoint, all I care about is making sure my users don’t get screwed. That involves handling a lot of edge case scenarios, both in terms of some users and occasional tasks or conditions confronted by any user. While aesthetics, input and appropriate functionality are all important, my main goal is to create software “that just works.”

To give an example of that, someone once figured out that you could use Adobe Photoshop’s lighting filters to created shaded relief maps and Adobe’s programmers were attentive enough to make something unanticipated like that work, but almost certainly they never thought about creating the filters for use by cartographers.


Incidentally (in, Jared Spool has come around more to a notion of transparency rather than invisibility. So while Arnall may be right in citing Spool’s 2009 article as seminal in the No UI movement, it would be good for him to update his information. Spool, IMO, has some good things to say and even if it’s indirect inspiring developers and designers to do better work.