C# 如何在wp8中向网格添加动画

C# 如何在wp8中向网格添加动画,c#,windows-phone-8,C#,Windows Phone 8,我有一个网格控件。单击按钮时,此网格将可见。在后端代码中,我在单击按钮时向网格添加了子元素。我希望此网格以特定模式加载,并带有特定动画。请提出解决办法 <Grid x:Name="menuholder" Height="Auto" Canvas.ZIndex="1" Grid.RowSpan="5" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,15,0"> </Gri

我有一个网格控件。单击按钮时,此网格将可见。在后端代码中,我在单击按钮时向网格添加了子元素。我希望此网格以特定模式加载,并带有特定动画。请提出解决办法

<Grid x:Name="menuholder" Height="Auto" Canvas.ZIndex="1" 
      Grid.RowSpan="5" HorizontalAlignment="Right" 
      VerticalAlignment="Top" Margin="0,0,15,0">
</Grid>

可以为网格创建情节提要

样品

<phone:PhoneApplicationPage
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid x:Name="grdAnimated" Background="Red" HorizontalAlignment="Right" Height="100" Width="200">
                <Grid.Resources>
                    <Storyboard x:Name="grdStoryBoard">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grdAnimated">
                            <EasingDoubleKeyFrame KeyTime="0" Value="900"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </Grid.Resources>
                <Grid.RenderTransform>
                    <CompositeTransform TranslateY="900" />
                </Grid.RenderTransform>
            </Grid>

        </Grid>
   </Grid>

</phone:PhoneApplicationPage>
可以相应地更改动画类型 参考:

借助Blend可以很好地创建故事板
请参阅:

您可能正在制作您想要的动画,但您没有提供您尝试过的内容或所需结果的任何详细信息。你们看过故事板了吗?我看过故事板,但无法满足我的要求。也就是说,我的网格大部分来自右上角,必须在其位置可见。我不知道这意味着什么。你能更好地描述你想要实现的动画吗?如果你不能用故事板,我怀疑你需要用定时器(我不推荐)手动操作。如果你想给自动调整大小的控件的高度设置动画,你就不能。您需要决定是否尝试不同的效果,或者使用以下内容:我通过上述解决方案成功加载网格动画我想卸载它,或者删除带有特定动画的子控件我应该添加哪些额外代码
<phone:PhoneApplicationPage
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid x:Name="grdAnimated" Background="Red" HorizontalAlignment="Right" Height="100" Width="200">
                <Grid.Resources>
                    <Storyboard x:Name="grdStoryBoard">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grdAnimated">
                            <EasingDoubleKeyFrame KeyTime="0" Value="900"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </Grid.Resources>
                <Grid.RenderTransform>
                    <CompositeTransform TranslateY="900" />
                </Grid.RenderTransform>
            </Grid>

        </Grid>
   </Grid>

</phone:PhoneApplicationPage>
grdStoryBoard.Begin();