UWP/c++-cx - 通过拖动在垂直轴上移动按钮

Question

我有一个与应用程序一样高且宽度为 50 的网格。我在其左上角也有一个宽度为 50 的按钮。我想通过用鼠标拖动它来沿垂直左轴移动此按钮。但是应该还是可以正常点击的。我试图用微软的拖放示例来做到这一点，但我想要实现的过程并不完全是拖放。我如何通过在通用 windows 应用程序中使用 XAML 和 c++-cx 作为代码来实现这一点？

我的 XAML- Grid/Button 的代码：

<Grid x:Name="Grid1" Width="50" >
<Button x:Name="btnMove"  Content="Move me!" Background="PaleGreen" Click="btnMove_Click" VerticalAlignment="Top" HorizontalAlignment="Left" Width="50" Height="50"></Button>
</Grid>

Answer 1

根据您的要求，您可以使用 ManipulationDelta class 在垂直轴上移动按钮。您可以使用以下代码实现它。更多请参考Handle pointer input. Here is official code示例。

MainPage::MainPage()
{
    InitializeComponent();
    InitManipulationTransforms();
    btnMove->ManipulationDelta += ref new ManipulationDeltaEventHandler(this, &MainPage::btnMove_ManipulationDelta);
    btnMove->ManipulationMode = ManipulationModes::TranslateX;
}

void App14::MainPage::InitManipulationTransforms()
{
    transforms = ref new TransformGroup();
    previousTransform = ref new MatrixTransform();
    previousTransform->Matrix = Matrix::Identity;

    deltaTransform = ref new CompositeTransform();

    transforms->Children->Append(previousTransform);
    transforms->Children->Append(deltaTransform);

    // Set the render transform on the rect
    btnMove->RenderTransform = transforms;
}

void App14::MainPage::btnMove_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{

}
void MainPage::btnMove_ManipulationDelta(Platform::Object^ sender, ManipulationDeltaRoutedEventArgs^ e)
{


    previousTransform->Matrix = transforms->Value;

    // Get center point for rotation
    Point center = previousTransform->TransformPoint(Point(e->Position.X, e->Position.Y));
    deltaTransform->CenterX = center.X;
    deltaTransform->CenterY = center.Y;

    // Look at the Delta property of the ManipulationDeltaRoutedEventArgs to retrieve
    // the rotation, scale, X, and Y changes
    deltaTransform->Rotation = e->Delta.Rotation;
    deltaTransform->TranslateX = e->Delta.Translation.X;
    deltaTransform->TranslateY = e->Delta.Translation.Y;
}

您可以通过修改按钮的ManipulationMode来改变按钮的滚动方向。

btnMove->ManipulationMode = ManipulationModes::TranslateY;

UWP/c++-cx - 通过拖动在垂直轴上移动按钮

UWP/c++-cx - Moving a button on the vertical axis by dragging it

xaml

button

c++-cx

uwp

uwp-xaml