CODEWITHSUNDEEP
windows-phone-7storyboardwindows-phone-8windows-phone
zirkelc
zirkelc

Reputation: 1723

Windows Phone - Round button touch animation

I have created a round button using Blend. It works good but doesn't respond to a touch event. The button should become a bit smaller and set the opacity to 1.0, similar to the location button of Nokia Maps app.

This is my existing control template:

        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="50" Margin="{StaticResource PhoneTouchTargetOverhang}">
            <ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
                <ContentControl.RenderTransform>
                    <ScaleTransform x:Name="buttonScale" />
                </ContentControl.RenderTransform>
            </ContentControl>
        </Border>
    </ControlTemplate>

What is the right StoryBoard and where it needs to be inserted?

Upvotes: 1

Views: 2052

Answers (1)

Gary Johnson
Gary Johnson

Reputation: 885

The first thing I would suggest is creating the circle using an Ellipse rather than a Border with rounded edges. That way you won't need to keep tweaking CornerRadius if you decide the button needs to be a different size. You can overlap the Ellipse and the ContentPresenter in a Grid like so:

<ControlTemplate TargetType="Button">
    <Grid Background="Transparent">
       <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

To change how the button reacts visually to touch, you should use Visual States in Blend. With the button template opened, click on the States tab (or go to Window | States if not visible).

If you have the button template opened, you should see several built-in visual states for you to edit. Select the Pressed state, and you will go into Recording mode. Any changes to the template you make will appear when the button is pressed. You can tell you're in recording mode because of the red outline and notification around the main content window.

In this state, change what you want to see when the button is pressed. In your case, set the ellipse opacity to 100% and set the Scale Transform on the Grid to something smaller that fits your needs.

Make sure you click the Base state in the States tab to exit recording mode.

Now, when you press the button during runtime, the changes you recorded should show up. They'll also be instantaneous. To make a nice transition between states, go back to the States tab. and click the Add Transition button next to the Pressed state.

enter image description here

Add a transition for ->Pressed, and Pressed->. These are the transitions that will play when you enter and leave the pressed state. Here you can edit the transitions duration and easing function.

enter image description here

Personally I usually do something around 0.2s, with Quadratic Ease In/Out. Now when you press the button, there should be a slight animation between different visual states.

Good luck!

Upvotes: 3

Related Questions