如何在Grid中实现Frame内容的拖拽交换（无重新初始化）？

我来帮你搞定这个拖拽交换Frame内容的问题，你的代码里有几个关键问题导致报错和功能失效，咱们一步步修正：

首先梳理核心问题：

• 硬编码目标Frame：你的SwapFrame方法直接写死了ElementFrame1和ElementFrame2，完全没用到传入的参数，这肯定没法实现任意两个Frame的交换。
• 源/目标Frame记录逻辑错误：你依赖DropCompleted事件获取源Frame，但这个事件的sender逻辑容易出现时序问题，全局变量如果没及时清理还会导致后续拖拽出错。
• 错误的Content赋值方式：你把整个Frame赋值给另一个Frame的Content，违反了UI元素的父容器唯一性规则，咱们要交换的是Frame内部的Content内容，而不是Frame本身。

接下来是修正后的完整代码，实现真正的原样内容交换，不需要重新初始化：

修正后的C#代码 #

namespace FrameDragTest {
    public sealed partial class MainPage : Page {
        // 记录拖拽的源Frame
        private Frame _dragSourceFrame;

        public MainPage() {
            this.InitializeComponent();
            
            // 批量初始化Frame的Tag、背景和导航，简化重复代码
            var frames = new[] { ElementFrame0, ElementFrame1, ElementFrame2, ElementFrame3, ElementFrame4, ElementFrame5, ElementFrame6, ElementFrame7 };
            for (int i = 0; i < frames.Length; i++)
            {
                frames[i].Tag = i.ToString();
                // 保持你原有偶数索引Frame设粉色背景的逻辑
                if (i % 2 == 0)
                {
                    frames[i].Background = new SolidColorBrush(Colors.Pink);
                }
                frames[i].Navigate(typeof(ElementPage));
                
                // 统一注册所有需要的事件
                frames[i].DragStarting += OnFrameDragStarting;
                frames[i].DragEnter += OnFrameDragEnter;
                frames[i].Drop += OnFrameDrop;
            }
        }

        // 拖拽开始时记录源Frame，这是最可靠的获取源的方式
        private void OnFrameDragStarting(UIElement sender, DragStartingEventArgs e) {
            _dragSourceFrame = sender as Frame;
            e.Data.SetText(_dragSourceFrame.Tag.ToString());
            e.DragUI.IsGlyphVisible = true;
        }

        private void OnFrameDragEnter(object sender, DragEventArgs e) {
            // 只有拖拽源不是当前Frame时才接受操作
            if (_dragSourceFrame != sender as Frame)
            {
                e.AcceptedOperation = DataPackageOperation.Move;
                e.DragUIOverride.Caption = "交换内容";
            }
        }

        private void OnFrameDrop(object sender, DragEventArgs e) {
            var targetFrame = sender as Frame;
            // 校验源和目标的有效性，避免无效操作
            if (_dragSourceFrame != null && targetFrame != null && _dragSourceFrame != targetFrame)
            {
                SwapFrameContents(_dragSourceFrame, targetFrame);
            }
            // 清空源记录，防止影响下一次拖拽
            _dragSourceFrame = null;
        }

        // 核心逻辑：交换两个Frame的Content，实现原样转移
        private void SwapFrameContents(Frame source, Frame target) {
            // 临时存储源的Content，避免被覆盖
            var tempContent = source.Content;
            // 交换Content，直接转移已有实例，不会重新初始化页面
            source.Content = target.Content;
            target.Content = tempContent;
            
            // 可选：同步背景色样式，和你原有逻辑匹配
            var tempBackground = source.Background;
            source.Background = target.Background;
            target.Background = tempBackground;
        }
    }
}

修正后的XAML代码 #

<Page
    x:Class="FrameDragTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FrameDragTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <GridView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <!-- 保持原有布局，移除不必要的ScrollViewer拖拽属性 -->
        <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">
                <Frame x:Name="ElementFrame7" Height="313" Width="325" CanDrag="True" AllowDrop="True" />
            </ScrollViewer>
        </Grid>
    </GridView>
</Page>

关键改动说明： #

1. 添加DragStarting事件：在拖拽启动时就记录源Frame，彻底避免时序错误。
2. 批量处理Frame初始化：用循环简化重复代码，减少遗漏事件注册的可能。
3. 正确的内容交换逻辑：直接交换Frame的Content属性，转移已有页面实例，完全符合“原样”交换要求，不会触发重新初始化。
4. 增加有效性校验：防止源和目标为同一个Frame的无效操作，提升稳定性。
5. 清理全局状态：每次拖拽完成后清空源Frame记录，避免影响后续操作。

这样修改后，你就可以实现任意两个Frame之间的拖拽内容交换，完全满足需求。

内容的提问来源于stack exchange，提问作者user8977483