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

Question

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

我的XAML的代码网格/按钮：

<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类移动在纵轴上的按钮。你可以用下面的代码来实现它。 更多请参考Handle pointer input。这里是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;