как исправить частично работающую анимацию раскадровки uwp

Question

в UWP Я реализовал визуальные состояния ToggleButton, пытаясь анимировать высоту и передний план его дочернего элемента управления и т. Д., Но работает только одна колоранимация, остальные не изменяют значения, как они должны.Однако, если я переписываю эти анимации как сеттеры, они работают.Я почти уверен, что не ошибся в значениях, потому что в противном случае возникнут ошибки.Также этот controlTemplate является содержимым шаблона headerStyle модуля расширения.

<ControlTemplate TargetType="ToggleButton">
    <Grid
        x:Name="ToggleButton"
        Margin="0,0"
        Padding="0"
        Background="Transparent"
        BorderBrush="{StaticResource mediumText}"
        BorderThickness="1"
        CornerRadius="5">
        <RelativePanel x:Name="InnerExpanderRelativePanel" Margin="0">
            <RelativePanel.Background>
                <SolidColorBrush x:Name="InnerExpanderRelativePanelColor" Color="White" />
            </RelativePanel.Background>
            <RelativePanel Background="Transparent" RelativePanel.AlignVerticalCenterWithPanel="True">
                <BitmapIcon
                    x:Name="OldApprovalIcon"
                    Width="30"
                    Height="30"
                    Margin="20,0,0,0"
                    RelativePanel.AlignLeftWithPanel="True"
                    UriSource="{StaticResource drawable/approval_detail_expired}">
                    <BitmapIcon.Foreground>
                        <SolidColorBrush
                            x:Name="IconColor"
                            Opacity="0.5"
                            Color="White" />
                    </BitmapIcon.Foreground>
                </BitmapIcon>
                <BitmapIcon
                    x:Name="OldApprovalIcon2"
                    Width="30"
                    Height="30"
                    Margin="20,0,0,0"
                    Opacity="0.5"
                    RelativePanel.AlignHorizontalCenterWith="OldApprovalIcon"
                    RelativePanel.AlignVerticalCenterWith="OldApprovalIcon"
                    UriSource="{StaticResource drawable/approval_detail_expired}">
                    <BitmapIcon.Foreground>
                        <SolidColorBrush
                            x:Name="IconColor2"
                            Opacity="0.5"
                            Color="{StaticResource rsvpRed}" />
                    </BitmapIcon.Foreground>
                </BitmapIcon>
                <TextBlock
                    Margin="20,0,0,0"
                    FontSize="15"
                    FontWeight="Medium"
                    Foreground="{StaticResource rsvpRed}"
                    RelativePanel.AlignVerticalCenterWithPanel="True"
                    RelativePanel.RightOf="OldApprovalIcon"
                    Text="show 29 expired eSignatures" />
            </RelativePanel>
        </RelativePanel>
        <!--  animate expander header  -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Target="IconColor.Color" Value="Black" />
                        <Setter Target="ToggleButton.Margin" Value="7" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="ToggleButton.Margin" Value="0" />
                    </VisualState.Setters>
                    <Storyboard>
               <!--ONLY THIS WORKS-->
                        <ColorAnimation
                            Storyboard.TargetName="InnerExpanderRelativePanel"
                            Storyboard.TargetProperty="(RelativePanel.Background).(SolidColorBrush.Color)"
                            To="{StaticResource rsvpRed}"
                            Duration="0:0:0.2" />
               <!--THESE THREE DON'T WORK-->
                        <DoubleAnimation
                            Storyboard.TargetName="InnerExpanderRelativePanel"
                            Storyboard.TargetProperty="Height"
                            To="50"
                            Duration="0:0:0.2" />
                        <ColorAnimation
                            Storyboard.TargetName="IconColor"
                            Storyboard.TargetProperty="Color"
                            To="White"
                            Duration="0:0:0.2" />
                        <ColorAnimation
                            Storyboard.TargetName="OldApprovalIcon2"
                            Storyboard.TargetProperty="(BitmapIcon.Foreground).(SolidColorBrush.Color)"
                            To="White"
                            Duration="0:0:0.2" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

Answer 1

Вы можете использовать ObjectAnimationUsingKeyFrames для решения этой проблемы.

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerExpanderRelativePanel" Storyboard.TargetProperty="Height">
     <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="50"/>
</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconColor" Storyboard.TargetProperty="Color">
     <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Yellow"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconColor2" Storyboard.TargetProperty="Color">
     <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Green"/>
</ObjectAnimationUsingKeyFrames>