Apply Pointer up/down effect to windows phone 8.1 app

Question

I've migrated my windows phone 8 app to windows phone 8.1 runtime. Apparently the tilt effect is included. How would I add this to a custom control?

Thanks,

Answer 1

Hence you are targeting rintime, you may look at Windows.UI.Xaml.Media.Animation classes and espestially: PointerDownThemeAnimation and PointerUpThemeAnimation - there are simple examples there.

Mostly what you have to do is put those animations into VisualStates and VisualTransitions, simple example can look like this:

<Style x:Key="myControl" TargetType="Button">
    <Setter Property="Padding" Value="0,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent" Name="Grid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="Pressed" To="PointerOver">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="PointerOver" To="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="Pressed" To="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>