xamlwinui-3winuiwindows-app-sdkwinui-xaml

Is it possible to remove the opening and closing animations of a content dialog in WinUI 3?


I am working on a winui3 app where I wanted to remove the opening and closing animations of a Content Dialog. I tried removing the visual transactions but the animations still exists. Am I doing the right thing?. Is it even possible to remove the animations by directly modifying the visual transitions?

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DialogShowingStates">

    <VisualStateGroup.Transitions>
        <VisualTransition To="DialogHidden">

            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False" />
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                    <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.05" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                    <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.05" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0.0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </VisualTransition>
        <VisualTransition To="DialogShowing">

            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
                    <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
                    <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="1.0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1.0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </VisualTransition>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="DialogHidden" />
    <VisualState x:Name="DialogShowing">
        <VisualState.Setters>
            <Setter Target="PrimaryButton.IsTabStop" Value="True" />
            <Setter Target="SecondaryButton.IsTabStop" Value="True" />
            <Setter Target="CloseButton.IsTabStop" Value="True" />
            <Setter Target="LayoutRoot.Visibility" Value="Visible" />
            <Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
            <Setter Target="BackgroundElement.Width" Value="{TemplateBinding Width}" />

        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="DialogShowingWithoutSmokeLayer">
        <VisualState.Setters>
            <Setter Target="PrimaryButton.IsTabStop" Value="True" />
            <Setter Target="SecondaryButton.IsTabStop" Value="True" />
            <Setter Target="CloseButton.IsTabStop" Value="True" />
            <Setter Target="LayoutRoot.Visibility" Value="Visible" />
            <Setter Target="LayoutRoot.Background" Value="{x:Null}" />

        </VisualState.Setters>
    </VisualState>

</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Solution

  • ContentDialogs are rendered on a Popup. What you are seeing are the ChildTransitions for the Popup.

    Removing those transitions should do the trick.

    var dialog = new ContentDialog
    {
        Title = "Happy Coding!",
        CloseButtonText = "Close",
        XamlRoot = this.XamlRoot,
    };
    
    dialog.Loading += (sender, _) =>
    {
        if ((sender as ContentDialog)?.Parent is not Popup popup)
            return;
    
        popup.ChildTransitions.Clear();
    };
    
    await dialog.ShowAsync();