How to change(Swap) Frames Content in Grid?

Question

I'm making Frame Changing routines by Drag and drop.

by Drag and drop, recognizing Both Frames are OK.

however, i couldn't swap that both frames.

and, i must do swap both frames 'as-is'. (without Re-initializaion or Re-allocation, etc)

my english is poor, however, seeing source code you guys can understand my question :-) (this code throws an error!)

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

            this.ElementFrame0.Tag = "0";
            this.ElementFrame0.Background = new SolidColorBrush(Colors.Pink);
            this.ElementFrame1.Tag = "1";
            this.ElementFrame2.Tag = "2";
            this.ElementFrame2.Background = new SolidColorBrush(Colors.Pink);
            this.ElementFrame3.Tag = "3";
            this.ElementFrame4.Tag = "4";
            this.ElementFrame4.Background = new SolidColorBrush(Colors.Pink);
            this.ElementFrame5.Tag = "5";
            this.ElementFrame6.Tag = "6";
            this.ElementFrame6.Background = new SolidColorBrush(Colors.Pink);
            this.ElementFrame7.Tag = "7";

            this.ElementFrame0.Navigate(typeof(ElementPage));
            this.ElementFrame1.Navigate(typeof(ElementPage));
            this.ElementFrame2.Navigate(typeof(ElementPage));
            this.ElementFrame3.Navigate(typeof(ElementPage));
            this.ElementFrame4.Navigate(typeof(ElementPage));
            this.ElementFrame5.Navigate(typeof(ElementPage));
            this.ElementFrame6.Navigate(typeof(ElementPage));
            this.ElementFrame7.Navigate(typeof(ElementPage));

            this.ElementFrame0.DragEnter += OnDragEnter;
            this.ElementFrame1.DragEnter += OnDragEnter;
            this.ElementFrame2.DragEnter += OnDragEnter;
            this.ElementFrame3.DragEnter += OnDragEnter;
            this.ElementFrame4.DragEnter += OnDragEnter;
            this.ElementFrame5.DragEnter += OnDragEnter;
            this.ElementFrame6.DragEnter += OnDragEnter;
            this.ElementFrame7.DragEnter += OnDragEnter;

            this.ElementFrame0.Drop += OnDragDrop;
            this.ElementFrame1.Drop += OnDragDrop;
            this.ElementFrame2.Drop += OnDragDrop;
            this.ElementFrame3.Drop += OnDragDrop;
            this.ElementFrame4.Drop += OnDragDrop;
            this.ElementFrame5.Drop += OnDragDrop;
            this.ElementFrame6.Drop += OnDragDrop;
            this.ElementFrame7.Drop += OnDragDrop;

            this.ElementFrame0.DropCompleted += OnDropCompleted;
            this.ElementFrame1.DropCompleted += OnDropCompleted;
            this.ElementFrame2.DropCompleted += OnDropCompleted;
            this.ElementFrame3.DropCompleted += OnDropCompleted;
            this.ElementFrame4.DropCompleted += OnDropCompleted;
            this.ElementFrame5.DropCompleted += OnDropCompleted;
            this.ElementFrame6.DropCompleted += OnDropCompleted;
            this.ElementFrame7.DropCompleted += OnDropCompleted;
        }

        private void OnDragEnter(object sender, DragEventArgs e)
        {

            int x;
            x = 1;

            e.AcceptedOperation = DataPackageOperation.Move;
        }

        Frame m_pSrcFrame = null;
        Frame m_pDestFrame = null;

        async void OnDragDrop(object Sender, DragEventArgs e)
        {
            m_pDestFrame = (Frame)Sender;

        }

        async void OnDropCompleted(object Sender, DropCompletedEventArgs e)
        {
            m_pSrcFrame = (Frame)Sender;

            SwapFrame(m_pSrcFrame, m_pDestFrame);
        }

        void SwapFrame(Frame IN_pSrcFrame, Frame IN_pDestFrame)
        {    
            ElementFrame1.Content = IN_pDestFrame;
            ElementFrame2.Content = IN_pSrcFrame;
        }
    }
}

<GridView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame0" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame1" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame2" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame3" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame4" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame5" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible">
            <Frame x:Name="ElementFrame6" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" CanDrag="True">
            <Frame x:Name="ElementFrame7" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
        </ScrollViewer>
    </Grid>

</GridView> </Page>

Answer 1

It seems the SwapFrame method is not doing what you actually want, as I understand you just want to swap their contents:

void SwapFrame(Frame IN_pSrcFrame, Frame IN_pDestFrame)
{    
    var firstFrameContent = IN_pSrcFrame.Content;
    var secondFrameContent = IN_pDestFrame.Content;

    //detach contents
    IN_pSrcFrame.Content = null; 
    IN_pDestFrame.Content = null;

    IN_pSrcFrame.Content = secondFrameContent;
    IN_pDestFrame.Content = firstFrameContent;
}

You can see we have to detach the contents first, because when the content is assigned to the other frame while you are trying to assign to a new one, it would cause a problem.

For the curious - We could actually detach only the IN_pDestFrame's content with null, because replacing the first Frame's Content, would also "detach" its original content in the process, but this "symmetrical" solution looks nicer.