• I have a material design Popupbox in my project, And the opening animation of this Popupbox is shown in the GIF below:

• But I want the opening animation of this Popup box to be in the form of a GIF below:

Do I have any chance to implement this change?

I have no idea how to implement this change and this is my Popupbox cod in my project:

<materialDesign:PopupBox x:Name="P"  PopupUniformCornerRadius="5" PlacementMode="LeftAndAlignMiddles" HorizontalAlignment="Right" Height="34" Margin="0,22,10,0" VerticalAlignment="Center">
                            <StackPanel>
                                <Grid Height="60" Width="90">
                                    <ToggleButton
                                        HorizontalAlignment="Right"
                                          Style="{StaticResource MaterialDesignSwitchToggleButton}"
                                          ToolTip="Lock/Unlock" Cursor="Hand">
                                        <materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
                                            <SolidColorBrush
                                            Color="DarkSlateGray" />
                                        </materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
                                        <materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
                                            <SolidColorBrush
                                            Color="Gray" />
                                        </materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
                                    </ToggleButton>
                                </Grid>
                                <Button Content="2"/>
                                <Button Content="3"/>
                            </StackPanel>
</materialDesign:PopupBox>

CodePudding user response：

The Popup animation is implemented in the WPF Popup class and is not specific to the MaterialDeisgnThemes library (See PopupAnimation). There are four different animation modes that you can set (None, Fade, Slide and scroll). The PopupBox-Style sets the mode to "fade". Unfortunately, none of them will animate the Popup the way you want it.

The only solution I can think of, is to animate the popup content yourself. Since the popup is basically a window that fits its size to its content, you need to animate the LayoutTransfrom to scale or translate the popup over time. Here is an example that does more or less what you need:

        <mat:PopupBox HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  PlacementMode="LeftAndAlignTopEdges"
                  PopupMode="Click">
        <Grid>
            <Grid.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform />
                </TransformGroup>
            </Grid.LayoutTransform>

            <StackPanel>
                <Grid Width="90"
                      Height="60">
                    <ToggleButton HorizontalAlignment="Right"
                                  Cursor="Hand"
                                  Style="{StaticResource MaterialDesignSwitchToggleButton}"
                                  ToolTip="Lock/Unlock">
                        <mat:ToggleButtonAssist.SwitchTrackOnBackground>
                            <SolidColorBrush Color="DarkSlateGray" />
                        </mat:ToggleButtonAssist.SwitchTrackOnBackground>
                        <mat:ToggleButtonAssist.SwitchTrackOffBackground>
                            <SolidColorBrush Color="Gray" />
                        </mat:ToggleButtonAssist.SwitchTrackOffBackground>
                    </ToggleButton>
                </Grid>
                <Button Content="2" />
                <Button Content="3" />
            </StackPanel>

            <Grid.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                <EasingDoubleKeyFrame KeyTime="0:0:0:0"
                                                      Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0:0.1"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                <EasingDoubleKeyFrame KeyTime="0:0:0:0"
                                                      Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0:0.1"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>
    </mat:PopupBox>