在 UWP 中由用户拖动 UI 元素

Question

我有一个包含文本框的网格。我希望用户可以在那个网格中拖动 TextBox。我尝试将 canDrag 属性设置为 True 但它什么也没做。

<Grid AllowDrop="True">
    <TextBlock CanDrag="True"/>

</Grid>

Answer 1

CanDrag 指的是拖放功能，例如将图像文件拖放到图像编辑器中。这不同于在应用程序上简单地移动控件。

子控件（在本例中为文本块）无法在网格内自由移动。您需要添加一个 canvas 控件。 canvas 控件会自动扩展以填充其父级，因此它会自动扩展以填充网格。

您可能正在寻找 "Manipulation"，而不是 "Drag and drop"。您将需要处理 TextBLock 的 ManipulationStarted、ManipulationDelta 和 ManipulationCompleted 事件：

<Grid>
    <Canvas>
        <TextBlock ManipulationStarted="TextBlock_ManipulationStarted"
                   ManipulationDelta="TextBlock_ManipulationDelta"
                   ManipulationCompleted="TextBlock_ManipulationCompleted"></TextBlock>
    </Canvas>
</Grid>

查看 "BasicInput" 示例，了解如何使用操作：https://github.com/Microsoft/Windows-universal-samples。

Answer 2

如何通过键盘按键控制操作？我不能限制区域。我尝试 Canvas 但它无法限制区域。

实际上，我们可以为一个区域使用一切，而不仅仅是 canvas。我在 XAML

中这样做

<Grid Width="300" Height="300">
        <TextBlock Text="mahdi" Name="t" ManipulationMode = "TranslateX, TranslateY, Scale"  

    ManipulationDelta = "t_ManipulationDelta" >

            <TextBlock.RenderTransform>
                <CompositeTransform x:Name="t_Transform" />
            </TextBlock.RenderTransform>
        </TextBlock>



</Grid>

并且在 c#

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




    private void t_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        this.t_Transform.TranslateX += e.Delta.Translation.X;
        this.t_Transform.TranslateY += e.Delta.Translation.Y;
    }


}

} 但是我不能限制区域。我尝试 Canvas 但它不能限制区域。

在 UWP 中由用户拖动 UI 元素

drag UI element by user in UWP

xaml

drag-and-drop

drag

uwp

uwp-xaml