Question

我有一个HubSection，它在运行时使用Visibility Collapsed / Visible动态显示/隐藏。我希望通过扩展和缩小而不是立即显示或隐藏它来为HubSection设置动画。

WinRT中的动画往往是一门科学，我还没有找到一个好的方法。

如果有人可以提供代码片段，我会很感激。如果可能的话，我宁愿将它保留给XAML，而不是将动画放在代码隐藏中。谢谢！

Answer 1

假设hubsection的可见性由视图模型的布尔属性控制，通过转换器绑定，那么解决方案比我想象的更简单。即使不是这种情况，我也确定您可以轻松修改以下解决方案。

您需要引用Behaviors SDK才能实现此功能。您可以通过转到参考＆gt;添加参考＆gt; Windows 8.1＆gt;扩展＆gt;行为SDK或在混合中打开项目并在yor hubsection上拖动DataTriggerBehavior来实现此目的。

必要的xmlns声明

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

<Page.Resources>
    <Converters:BoolToVisConverter x:Key="BoolToVisConverter"/>
    <Storyboard x:Name="Storyboard1">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="hubSection">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="400"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Hub Header="Hub">
        <Interactivity:Interaction.Behaviors>
            <Core:DataTriggerBehavior/>
        </Interactivity:Interaction.Behaviors>
        <HubSection Header="HubSection 0">
            <DataTemplate>
                <Grid/>
            </DataTemplate>
        </HubSection>
        <HubSection x:Name="hubSection" Header="HubSection 1" Visibility="{Binding MyProperty, Converter={StaticResource BoolToVisConverter}}" Width="400" Background="#FFB02626">
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding MyProperty}" Value="True">
                    <Media:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <DataTemplate>
                <Grid/>
            </DataTemplate>
        </HubSection>
    </Hub>
    <ToggleSwitch Header="ToggleSwitch" HorizontalAlignment="Left" Margin="824,249,0,0" VerticalAlignment="Top" IsOn="{Binding MyProperty, Mode=TwoWay}"/>

xaml定义了一个带有2个hubsections的hub，一个toggleswitch来操作viewmodel中的boolean属性，以及一个故事板来设置第二个hubsection的动画。

诀窍是使用DataTriggerBehavior而不是EventTriggerBehavior。

如果需要，您甚至可以直接绑定到DataTriggerBevavior的hubsection的visibility属性。

如何在WinRT Hub Control中更改可见性时为HubSection设置动画

1 个答案: