none
Win8中的ContentThemeTransition与SwipeHintThemeAnimation/SwipeBackThemeAnimation RRS feed

  • 问题

  • .Net中如何使用ContentThemeTransition还有SwipeHintThemeAnimation/SwipeBackThemeAnimation轻扫手势动画呢?

    自己测试的XAML一直不成功;想知道是在什么事件触发轻扫手势动画并开启动画板?

    希望能有代码做示例好让我给借鉴下!

    2013年1月23日 7:29

答案

  • Hi,

    ContentThemeTransition这个动画是指控件的内容发生改变的时候触发,即一个控件Content属性发生改变,你可以参考一下文档给出的例子,我实际测试了一下没有问题:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.contentthemetransition.aspx

    SwipeHintThemeAnimation/SwipeBackThemeAnimation我的理解是在你用手势滑动这个控件的时候,前一个有一个滑出位置的效果,后一个有一个滑入位置的效果。

    你可以看看这个视频:

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj649435.aspx

    代码的话参考文档中德:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.swipehintthemeanimation.aspx

    这个XAML有点小问题,矩形挡住了后面的TextBlock,你可以这样写:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <local:SwipeControl>
                <local:SwipeControl.Template>
                    <ControlTemplate TargetType="local:SwipeControl">
                        <StackPanel>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SwipeStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <SwipeBackThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedText" 
                                                            Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hinting">
                                        <Storyboard>
                                            <SwipeHintThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle Width="100" Height="100" Fill="{TemplateBinding Background}" />
    
                            <Rectangle x:Name="contentRectangle"
                        Width="100" 
                        Height="100" 
                        Fill="{TemplateBinding Foreground}" />
                            <TextBlock x:Name="SelectedText" 
                        Text="Selected" 
                        Visibility="Collapsed" 
                        Foreground="White" 
                        FontSize="20" 
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Center"  />
                        </StackPanel>
                    </ControlTemplate>
                </local:SwipeControl.Template>
            </local:SwipeControl>
            
        </Grid>

    代码部分都是没有问题的。复制进去运行就行。


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    2013年1月24日 10:05
    版主

全部回复

  • Hi,

    ContentThemeTransition这个动画是指控件的内容发生改变的时候触发,即一个控件Content属性发生改变,你可以参考一下文档给出的例子,我实际测试了一下没有问题:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.contentthemetransition.aspx

    SwipeHintThemeAnimation/SwipeBackThemeAnimation我的理解是在你用手势滑动这个控件的时候,前一个有一个滑出位置的效果,后一个有一个滑入位置的效果。

    你可以看看这个视频:

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj649435.aspx

    代码的话参考文档中德:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.swipehintthemeanimation.aspx

    这个XAML有点小问题,矩形挡住了后面的TextBlock,你可以这样写:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <local:SwipeControl>
                <local:SwipeControl.Template>
                    <ControlTemplate TargetType="local:SwipeControl">
                        <StackPanel>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SwipeStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <SwipeBackThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedText" 
                                                            Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hinting">
                                        <Storyboard>
                                            <SwipeHintThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle Width="100" Height="100" Fill="{TemplateBinding Background}" />
    
                            <Rectangle x:Name="contentRectangle"
                        Width="100" 
                        Height="100" 
                        Fill="{TemplateBinding Foreground}" />
                            <TextBlock x:Name="SelectedText" 
                        Text="Selected" 
                        Visibility="Collapsed" 
                        Foreground="White" 
                        FontSize="20" 
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Center"  />
                        </StackPanel>
                    </ControlTemplate>
                </local:SwipeControl.Template>
            </local:SwipeControl>
            
        </Grid>

    代码部分都是没有问题的。复制进去运行就行。


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    2013年1月24日 10:05
    版主
  • 3Q ,感谢您
    2013年1月29日 13:57