C# 添加滑动手势以打开SplitView窗格
我试图在UWP的SplitView控件(又名“汉堡菜单”)中添加一个滑动手势,类似于Pivot控件的左/右滑动。如何设置手势以更改其显示模式 在iOS 8和更高版本中,我可以使用UISplitViewController并设置PresentSwithSirtation属性来实现这一点,但WinRT中没有类似的功能 现在在阅读了这个博客之后,我意识到SplitView控件中有DisplayMode属性,我应该使用VisualStateManager来更改它的状态,但是如何使用vsm来平移左窗格?我不知道使用vsm可以实现这一点C# 添加滑动手势以打开SplitView窗格,c#,windows-runtime,winrt-xaml,windows-10,uwp,C#,Windows Runtime,Winrt Xaml,Windows 10,Uwp,我试图在UWP的SplitView控件(又名“汉堡菜单”)中添加一个滑动手势,类似于Pivot控件的左/右滑动。如何设置手势以更改其显示模式 在iOS 8和更高版本中,我可以使用UISplitViewController并设置PresentSwithSirtation属性来实现这一点,但WinRT中没有类似的功能 现在在阅读了这个博客之后,我意识到SplitView控件中有DisplayMode属性,我应该使用VisualStateManager来更改它的状态,但是如何使用vsm来平移左窗格?我
任何帮助/提示都将不胜感激。嗯,vsm用于在该博客中创建响应性UI。要在SplitView中添加滑动手势,请执行以下操作:
- 在SplitView内容的根面板上检测手势,并在其中添加一些涉及操作的事件处理程序李>
- 在操纵事件中处理SplitView的IsPaneOpen属性
- 有趣的问题!:)
我最近创建了一个
SwipeableSplitView
,它扩展了SplitView
控件,以便在DisplayMode
设置为Overlay
时启用从左边缘滑动的手势(因为我看不到在其他模式下使用它的意义,但可以随时扩展它)
我所做的就是,在控件的样式中,在PaneRoot
层的顶部创建另一层,并在那里处理所有手势
<Grid x:Name="PaneRoot" ManipulationMode="TranslateX" Grid.ColumnSpan="2" HorizontalAlignment="Left" Background="{TemplateBinding PaneBackground}" Width="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Grid.Clip>
<RectangleGeometry x:Name="PaneClipRectangle">
<RectangleGeometry.Transform>
<CompositeTransform x:Name="PaneClipRectangleTransform" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</Grid.Clip>
<Grid.RenderTransform>
<CompositeTransform x:Name="PaneTransform" TranslateX="{Binding RenderTransform.TranslateX, ElementName=PanArea}" />
</Grid.RenderTransform>
<Border Child="{TemplateBinding Pane}" />
<Rectangle x:Name="HCPaneBorder" Fill="{ThemeResource SystemControlForegroundTransparentBrush}" HorizontalAlignment="Right" Visibility="Collapsed" Width="1" x:DeferLoadStrategy="Lazy" />
</Grid>
<!--a new layer here to handle all the gestures -->
<Grid x:Name="OverlayRoot" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding TemplateSettings.OpenPaneGridLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--the actual element for panning, manipulations happen here-->
<Rectangle x:Name="PanArea" Fill="Transparent" ManipulationMode="TranslateX" Width="{Binding PanAreaThreshold, RelativeSource={RelativeSource Mode=TemplatedParent}}" Grid.Column="1">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="{Binding PanAreaInitialTranslateX, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Rectangle.RenderTransform>
</Rectangle>
<!--this is used to dismiss this swipeable pane-->
<Rectangle x:Name="DismissLayer" Fill="Transparent" Grid.Column="2" />
</Grid>
请记住,由于IsPaneOpen
属性不是虚拟的,因此我必须创建另一个issweepablepaneopen
来包装前者。因此,每当您想使用IsPaneOpen
属性时,请改用issweepablepaneopen
这就是我在GitHub中创建的演示应用程序的工作原理。您可以找到完整的源代码
学分
- SplitView模板是由Koen Zwikstra的Aweasome生成的
- 页面动画和其他一些实现的灵感来自 杰瑞·尼克松
IsPanSelectorEnabled
属性,它允许您通过在窗格底部区域上下平移来选择菜单项。我相信这将有助于使用大型手机的用户,因为他们不再需要伸出手指才能到达顶部区域!现场演示:@JerryNixon MSFT我想这要看情况了。将其与透视
或支持水平滑动的页面一起使用可能不是一个好主意(例如,向左/向右滑动以删除/完成项目)。但我认为开发人员至少应该有一个选择,可以选择适合其应用程序的内容@JustinXL IMHO这整个滑动打开应该以Android上的方式实现-如果滑动事件来自屏幕外,或者从最左边的几个像素列开始(我认为在Android上,在HD屏幕上这是12或24px),将其作为抽屉/窗格的手势处理,否则将其作为一般页面手势处理。这样可以避免与可滑动的选项卡混淆。@fonix232这就是为什么在源代码中有一个名为PanAreaThreshold的dp。例如,你可以把它改成12或24像素。@Jerry:是的,当然可以。这就是说,作为一个在切换到WP之前经常在iOS上使用这个手势的人,我希望看到它在所有应用程序中实现。(与此相关的一点是,令人难以置信的是,VS甚至没有为SplitView提供内置的汉堡包控件,而您必须在Template10中运行自己的汉堡包控件——难怪汉堡包控件UX在内置应用程序中如此不一致?!)
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();
}
}