动画组合框弹出 [英] animating combobox popup

问题描述

我正在尝试使用此controltemplate为组合框的弹出动画:

i am trying to animate the popup of a combobox with this controltemplate :

 <Popup x:Name="PART_Popup"
                   AllowsTransparency="True"
                   Grid.ColumnSpan="2"
                   RenderTransformOrigin="0.5,0.5"
                   IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                   Margin="1"
                   // removed the default animation
                   Placement="Center"
                   VerticalAlignment="Center">
                <Popup.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleY="1"
                                        ScaleX="1"

.....

            <Trigger Property="IsDropDownOpen"
                     Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="PART_Popup"
                                             Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                             Duration="0:0:3"
                                             From="0"
                                             To="2" />
                            <DoubleAnimation Storyboard.TargetName="PART_Popup"
                                             Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                             Duration="0:0:3"
                                             From="0"
                                             To="2" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>

但是它不起作用，当我单击组合框后，弹出窗口立即显示.

but it doesn't work, the popup shows immediatly after i click on the combobox .

请问如何做到这一点?

推荐答案

将ScaleTransform应用于弹出窗口的根元素，而不是设置Popup元素本身的RenderTransform属性.请参考以下示例代码:

Apply the ScaleTransform on the root element of the Popup instead of setting the RenderTransform property of the Popup element itself. Please refer to the following sample code:

<Popup x:Name="PART_Popup"
                   AllowsTransparency="True"
                   Grid.ColumnSpan="2"
                   RenderTransformOrigin="0.5,0.5"
                   IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                   Margin="1"
                   Placement="Center"
                   VerticalAlignment="Center">
                            <Grid x:Name="grid">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="1" ScaleX="1" />
                                    </TransformGroup>
                                </Grid.RenderTransform>
                                <TextBlock x:Name="tblock" Background="Yellow" FontSize="20">test...</TextBlock>
                            </Grid>
                        </Popup>

<Trigger Property="IsDropDownOpen"
                     Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="grid"
                                             Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                                             Duration="0:0:3"
                                             From="0"
                                             To="2" />
                                        <DoubleAnimation Storyboard.TargetName="grid"
                                             Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                                             Duration="0:0:3"
                                             From="0"
                                             To="2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>

希望有帮助.

请记住，通过将有用的帖子标记为答案来关闭话题，然后在遇到新问题时开始新话题.请不要在同一线程中问几个问题.

Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

这篇关于动画组合框弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！