Question

In Windows Store App

XAML

<Page
    x:Class="FunctionTest.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FunctionTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="FloatingFlipOver">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)" Storyboard.TargetName="FloatingRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="-2000"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="FloatingRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="180"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FloatingRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid>        
        <Grid x:Name="FloatingRoot" Visibility="Collapsed" Width="500" Height="300">
            <Grid.Projection>
                <PlaneProjection  CenterOfRotationX="0.5" CenterOfRotationY="0.5"/>
            </Grid.Projection>
            <Rectangle x:Name="FloatingBackground" Fill="SkyBlue" />
            <FlipView>
                <Grid x:Name="FloatingContainer" Width="300" Height="300">

                </Grid>
            </FlipView>
        </Grid>
        <Button Content="Test" HorizontalAlignment="Left" Margin="46,36,0,0" VerticalAlignment="Top" Click="Test_Click"/>
    </Grid>
</Page>

Code

private void Test_Click(object sender, RoutedEventArgs e)
{
    Button msiBtn = new Button();
    msiBtn.Content = "addBtn";
    msiBtn.Width = 100; msiBtn.Height = 50;
    msiBtn.Tapped += msiBtn_Tapped;
    FloatingContainer.Children.Add(msiBtn);
    FloatingRoot.Opacity = 0;
    FloatingRoot.Visibility = Visibility.Visible;
    FloatingFlipOver.Begin();
}

void msiBtn_Tapped(object sender, TappedRoutedEventArgs e)
{
    FloatingRoot.Visibility = Visibility.Collapsed;
    FloatingContainer.Children.Clear();
}

This works when used with a mouse,
but it will collapse when I touch the button which is added in FloatingContainer,
sometimes, even when I touch the FloatingContainer (not the button), it will also crash.
Is it a bug?

Answer 1

I think you meant crash, not collapse, right? Because that is what I am seeing.

There is a known bug associated with ScrollViewers and projections. I am not sure if it was publicly discussed, but one of the workarounds I heard about that works for me in WinRT XAML Toolkit (in FlipAnimation) seems to work in your case too since a FlipView has a ScrollViewer as part of its template. Basically you need to change the ZoomMode of the ScrollViewer to something else and back and then it works without crashing. To fix the code from your snippet I referenced WinRT XAML Toolkit to use VisualTreeHelperExtensions that helps extract the ScrollViewer and changed the ZoomMode back and forth after the animation completes, as below:

using WinRTXamlToolkit.Controls.Extensions;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace App96
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Test_Click(object sender, RoutedEventArgs e)
        {
            Button msiBtn = new Button();
            msiBtn.Content = "addBtn";
            msiBtn.Width = 100; msiBtn.Height = 50;
            msiBtn.Tapped += msiBtn_Tapped;
            FloatingContainer.Children.Add(msiBtn);
            FloatingRoot.Opacity = 0;
            FloatingRoot.Visibility = Visibility.Visible;
            FloatingFlipOver.Begin();
            FloatingFlipOver.Completed -= FloatingFlipOver_Completed;
            FloatingFlipOver.Completed += FloatingFlipOver_Completed;
        }

        void FloatingFlipOver_Completed(object sender, object e)
        {
            foreach (var sv in FloatingRoot.GetDescendantsOfType<ScrollViewer>())
            {
                sv.ZoomMode = (ZoomMode)(((int)sv.ZoomMode + 1) % 2);
                sv.ZoomMode = (ZoomMode)(((int)sv.ZoomMode + 1) % 2);
            }
        }

        void msiBtn_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FloatingRoot.Visibility = Visibility.Collapsed;
            FloatingContainer.Children.Clear();
        }
    }
}

The relevant bit of VisualTreeHelperExtensions that you can use if you don’t want the entire Toolkit:

public static class VisualTreeHelperExtensions
{
    public static IEnumerable<T> GetDescendantsOfType<T>(this DependencyObject start) where T : DependencyObject
    {
        return start.GetDescendants().OfType<T>();
    }

    public static IEnumerable<DependencyObject> GetDescendants(this DependencyObject start)
    {
        var queue = new Queue<DependencyObject>();
        var count = VisualTreeHelper.GetChildrenCount(start);

        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(start, i);
            yield return child;
            queue.Enqueue(child);
        }

        while (queue.Count > 0)
        {
            var parent = queue.Dequeue();
            var count2 = VisualTreeHelper.GetChildrenCount(parent);

            for (int i = 0; i < count2; i++)
            {
                var child = VisualTreeHelper.GetChild(parent, i);
                yield return child;
                queue.Enqueue(child);
            }
        }
    }
}