Windows Phone - 我想要一个“网格”在我点击它时做一些动画

Question

我想要一个Grid 在我点击它时做一些动画。这包括添加倾斜效果和更改其不透明度。松开手指后，一切都应该恢复到原来的状态。

实现这一目标的最佳方法是什么？

Answer 1

您当然可以使用MouseLeftButtonUp & MouseLeftButtonDown' or 'ManipulationStarted & ManipulationCompleted 来处理触摸和释放。但它们并不总是准确的。

另一种解决方案是使用Button 作为宿主，将您想要的动画封装在其视觉状态组中。

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="EmptyButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="Root" Background="Transparent">
                        <Grid.Projection>
                            <PlaneProjection/>
                        </Grid.Projection>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.4"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundVisual" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Root" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Root" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="BackgroundVisual" Fill="{TemplateBinding Background}" Opacity="0.4"/>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Button Style="{StaticResource EmptyButtonStyle}" Background="{StaticResource PhoneAccentBrush}" Width="360" Height="480"/>
</Grid>

在上面的Button 样式中，我有一个BackgroundVisual（一个Rectangle）作为Button 的背景，并将其初始Opacity 设置为0.2。按下时，我只需将Opacity 更改为1。

我还给了整个Root 一些PlaneProjection 按下时的动画，只是为了创建你需要的倾斜效果。另一种方法是使用WPToolkit 中的Tilt 效果，但前提是您正在处理一个WP8 项目。

希望这会有所帮助！

Answer 2

您可以通过Triggers来实现自定义Grid VisualStateManager。 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ec="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ic="clr- namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

   <Grid x:name="main"> 
        <VisualStateManager.CustomVisualStateManager> 
            <ic:ExtendedVisualStateManager/> 
        </VisualStateManager.CustomVisualStateManager> 

 <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisualStateGroup">
                              <VisualState x:Name="Selected">
                              <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="main">
                              <DiscreteObjectKeyFrame KeyTime="0:0:0">
                              <DiscreteObjectKeyFrame.Value>0.5
                              </DiscreteObjectKeyFrame.Value>
                              </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                              </VisualState>
                              <VisualState x:Name="UnSelected">
                              <Storyboard>
                              <ObjectAnimationUsingKeyFrames   Storyboard.TargetProperty="Opacity" Storyboard.TargetName="main">
                              <DiscreteObjectKeyFrame KeyTime="0:0:0">
                              <DiscreteObjectKeyFrame.Value>
                             1
                              </DiscreteObjectKeyFrame.Value>
                              </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                              </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                              <ec:GoToStateAction StateName="Selected"/>
                            </i:EventTrigger>
                            <i:EventTrigger EventName="MouseLeave">
                              <ec:GoToStateAction StateName="UnSelected"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
</Grid>
  use the Tilt effect from the WPToolkit