添加滑动手势以打开SplitView窗格

我正在尝试向UWP的SplitView控件(又名“汉堡包菜单”)添加滑动手势,类似于Pivot控件的左/右滑动。 如何设置手势以更改其显示模式?

在iOS 8及更高版本中,我可以使用UISplitViewController并设置presentsWithGesture属性来执行此操作,但WinRT中没有类似的东西。

现在看完这篇博客后: http : //blogs.msdn.com/b/cdndevs/archive/2015/07/10/uwp-new-controls-part-2-splitview.aspx ,我意识到有DisplayMode属性在SplitView控件中我应该使用VisualStateManager来改变它的状态但是如何使用vsm来平移左侧窗格? 我不知道这可以通过vsm实现。

任何帮助/提示将不胜感激。

有趣的问题! 🙂

我最近创建了一个SwipeableSplitView ,它扩展了SplitView控件,以便在DisplayMode设置为Overlay从左边缘手势进行滑动 (因为我没有看到在其他模式下使用它的点,但随时可以随时扩展它) 。

我所做的就是,在控件的样式中,在PaneRoot图层上创建另一个图层并处理那里的所有手势。

                               

在更新新图层变换对象的TranslateX时,我也在更新PaneRoot以保持其位置同步。

 void OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e) { _panAreaTransform = PanArea.RenderTransform as CompositeTransform; _paneRootTransform = PaneRoot.RenderTransform as CompositeTransform; if (_panAreaTransform == null || _paneRootTransform == null) { throw new ArgumentException("Make sure you have copied the default style to Generic.xaml!!"); } } void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) { var x = _panAreaTransform.TranslateX + e.Delta.Translation.X; // keep the pan within the bountry if (x < PanAreaInitialTranslateX || x > 0) return; // while we are panning the PanArea on X axis, let's sync the PaneRoot's position X too _paneRootTransform.TranslateX = _panAreaTransform.TranslateX = x; } void OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) { var x = e.Velocities.Linear.X; // ignore a little bit velocity (+/-0.1) if (x <= -0.1) { CloseSwipeablePane(); } else if (x > -0.1 && x < 0.1) { if (Math.Abs(_panAreaTransform.TranslateX) > Math.Abs(PanAreaInitialTranslateX) / 2) { CloseSwipeablePane(); } else { OpenSwipeablePane(); } } else { OpenSwipeablePane(); } } 

请记住,因为IsPaneOpen属性不是虚拟的,所以我必须创建另一个IsSwipeablePaneOpen来包装前者。 因此,只要您想使用IsPaneOpen属性,请改用IsSwipeablePaneOpen

这就是我在GitHub中创建的演示应用程序中的工作方式。 您可以在此处找到完整的源代码。

在此处输入图像描述


积分

  • SplitView模板是从Koen Zwikstra的令人敬畏的Visual Studio UWP模板生成的 。
  • 页面动画和其他一些实现受到了Jerry Nixon的这篇文章的启发。

好吧,vsm用于在该博客中制作响应式UI。 要在SplitView中添加滑动手势,这就是我所做的:

  • 检测SplitView内容的根面板上的手势,并添加一些Manipulatioin涉及的事件处理程序。
  • 在Manipulation事件中处理SplitView的IsPaneOpen属性。