Over a million developers have joined DZone.

Text Button That Tilts When You Tap It

· Mobile Zone

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:

 

 

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}