如何动画HubSection时，可见性改变在WinRT枢纽控制

Question

我有一个HubSection，在运行时使用可见性折叠/可见动态显示/隐藏。我想动画HubSection通过扩大和缩小，而不是只是立即显示或隐藏它。

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

如果有人可以帮助我的代码片段，我会很感激。如果可能的话，我更愿意将其保留为XAML，而不是将动画放在代码隐藏中。谢谢!

Answer 1

假设hubsection的可见性由视图模型的布尔属性控制，通过转换器绑定，那么解决方案比我想象的要简单。即使不是这样，我相信你也可以很容易地修改下面的解决方案。

你需要引用behavior SDK才能正常工作。你可以去参考>添加参考>Windows 8.1>扩展>行为SDK，或者通过在blend中打开你的项目，并在你的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个hubsection的hub，一个toggleswitch用于操作视图模型中的布尔属性，一个storyboard用于动画第二个hubsection。

技巧是使用DataTriggerBehavior而不是EventTriggerBehavior。

如果你愿意，你甚至可以直接绑定到datatriggerbehavior的hubsection的可视性属性