.net Windows Phone-我想要一个“网格”，当我点击它时可以制作一些动画

我想要一个

网格

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

---

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

您当然可以使用

MouseLeftButtonUp

&

MouseLeftButtonDown'或“操纵开始”

&

操纵完成

来处理触摸和释放。但它们并不总是准确的

另一种解决方案是使用

按钮

作为主机，将所需动画封装在其视觉状态组中

<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>

在上面的

按钮

样式中，我有一个

背景视觉

（一个

矩形

）作为

按钮

的背景，并将其初始

不透明度

设置为

0.2

。按下时，我只需将

不透明度

更改为

1

此外，按下按钮时，我还提供了整个

Root

部分

PlaneProjection

动画，以创建所需的倾斜效果。另一种方法是使用的

Tilt

效果，但前提是您正在处理WP8项目

---

希望这有帮助

您可以通过触发器自定义网格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.Interactivity”

0.5
1.
使用WPToolkit中的倾斜效果

See+1，这可能有效，但正如我在回答中所说，鼠标事件对于触摸设备并不理想。我也是这样做的。添加了一个按钮，该按钮删除了几乎所有典型的按钮属性（例如居中内容、填充和边距），但有一个动画，通过将其移动到右上角几个像素来突出显示平铺上的点击。

   <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