Question

我有以下XAML代码，它在一个大的父Stack Panel中创建了两个堆栈面板。我希望能够在父bigStack面板中拖动每个小堆栈面板。

XAML

<StackPanel BorderThickness="1" BorderBrush="Black" x:Name="bigStack">
        <StackPanel x:Name="smallStack1" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" ManipulationStarting="objectManipulationStarting">
            <TextBlock Text="John Doe"/>
            <TextBlock Text="CEO"/>
        </StackPanel>
        <StackPanel x:Name="smallStack2" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" ManipulationStarting="objectManipulationStarting">
            <TextBlock Text="Jane Doe"/>
            <TextBlock Text="CTO"/>
        </StackPanel>
</StackPanel>

C＃后端：

private TranslateTransform dragtranslation ;

private void objectManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        dragtranslation.X += e.Delta.Translation.X;
        dragtranslation.Y += e.Delta.Translation.Y;

    }

private void objectManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
    {
       var stackDragged = e.OriginalSource as StackPanel;

        dragtranslation = new TranslateTransform();
        stackDragged.RenderTransform = this.dragtranslation ;


    }

原始代码找到here（官方微软UWP文档），但是（明显错误地）适应了我的需求

问题1

1）第一次拖动smallStack1：确定

2）第二次拖动smallStack2：恢复到原始位置

问题2

1）第一次拖动smallStack1：确定

2）第一次拖动smallStack2：确定

3）再次拖动其中一个smallStack：恢复到原始位置

您可以查看以下.gif中的问题：

我希望如何实现

使用常用方法拖动控件，因为我打算在bigStack面板中动态创建更多控件。

Answer 1

每次点击项目时，您基本上都会重新验证TranslateTransform。这就是为什么当您第二次点击该项时，它会导航回0,0，这是TranslateTransform的原始位置。

要以更简单的方式处理这个问题，这就是我要做的事情。

1）我会明确TranslateTransform给smallStackPanel

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel BorderThickness="1" BorderBrush="Black" x:Name="bigStack">
        <StackPanel x:Name="smallStack1" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" >
            <StackPanel.RenderTransform>
                <TranslateTransform />
            </StackPanel.RenderTransform>
            <TextBlock Text="John Doe"/>
            <TextBlock Text="CEO"/>
        </StackPanel>
        <StackPanel x:Name="smallStack2" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" >
            <StackPanel.RenderTransform>
                <TranslateTransform />
            </StackPanel.RenderTransform>
            <TextBlock Text="Jane Doe"/>
            <TextBlock Text="CTO"/>
        </StackPanel>
    </StackPanel>
</Grid>

然后我在codebehind中需要做的就是处理ManipulationDelta。

private void objectManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var stackDragged = e.OriginalSource as StackPanel;
    (stackDragged.RenderTransform as TranslateTransform).X += e.Delta.Translation.X;
    (stackDragged.RenderTransform as TranslateTransform).Y += e.Delta.Translation.Y;
}

输出：

<强>更新

从代码

添加TranslateTransform

StackPanel sp = new StackPanel();
sp.RenderTransform = new TranslateTransform();

祝你好运。

如何使用常用方法拖放控件？

1 个答案: