Text Button That Tilts When You Tap It

While designing a Windows Phone app, I came a across a simple design problem: how to display text control which will serve as a button. You can tap it, it will display visual cue i.e. it will tilt when tapped and the application will then perform some action.

If you want to catch the tap event on the text control, you must first set the IsHitTestVisible property to true. If you forget to set it, you will not receive anything in your event handler.

However, the text won’t display any visual cue that you have tapped it, it remains static. You can add the Silverlight Toolkit for WP7 package which contains the TiltEffect class. But it still won’t work. The text simply will not tilt.

Luckily for us, we can use the control that is usually used for such purpose – button. However, we must style it to hide the border. We will simply change the default template and set the desired text as its content. The XAML code looks like this:

<Button>
    <Button.Template>
        <ControlTemplate>
            <Grid>
                <ContentPresenter />
            </Grid>
        </ControlTemplate>
    </Button.Template>
    <Button.Content>
        <StackPanel>
            <TextBlock Style="{StaticResource PhoneTextLargeStyle}"
                        Text="Call number"
                        toolkit:TiltEffect.IsTiltEnabled="True" />
            <TextBlock Style="{StaticResource PhoneTextNormalStyle}"
                        Foreground="{StaticResource PhoneAccentBrush}"
                        Text="555-505234"
                        toolkit:TiltEffect.IsTiltEnabled="True" />
        </StackPanel>
    </Button.Content>
</Button>

The final result is visible on the following image: