Monthly Archives: April 2012

How to make the Windows Phone Toolkit ToggleSwitch Header wrap

Leave a reply

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)

Leave a reply

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.