小编JCr*_*121的帖子

如何使用可视状态为UWP中的控件的可见性设置动画?

我目前正在为我的应用程序开发一个自定义控件,该控件使用标题来扩展和折叠内容,您可以单击该标题来更改状态。此刻的模板看起来像这样。

<Style TargetType="controls:ExpandControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:ExpandControl">
                <Border>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="State">
                            <VisualState x:Name="Visible">
                                <VisualState.Setters>
                                    <Setter Target="Grid.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Collapsed">
                                <VisualState.Setters>
                                    <Setter Target="Grid.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" />

                        <Grid x:Name="Grid" Grid.Row="1">
                            <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Run Code Online (Sandbox Code Playgroud)

从模板中可以看到,我目前正在使用视觉状态来设置该控件中内容的可见性,但这并不是很好的用户体验,因为内容消失了。

我希望能够以某种方式操纵内容,以使控件的可见性更改时,内容看起来像是从标题中折叠和展开。

我已经看过使用情节提要的动画,但是我是一个全新的人,如果有人可以在情节提要上提供一些帮助以及如何使场景适合我的控件,将不胜感激!

提前致谢!

animation xaml visualstatemanager uwp

5
推荐指数
1
解决办法
3231
查看次数

标签 统计

animation ×1

uwp ×1

visualstatemanager ×1

xaml ×1