SplitView Bölmesi'ni açmak için hızlıca kaydırma hareketi ekleme

Question

UWP'nin Bölme denetiminin sol/sağına benzer şekilde SplitView denetimine ("hamburger menüsü") bir kaydırma hareketi eklemeye çalışıyorum. Ekran modunu değiştirmek için nasıl bir jest yapabilirim?

iOS 8 ve sonrasında, UISplitViewController'ı kullanabilir ve bunu yapmak için presentsWithGesture özelliğini kurabilirim, ancak WinRT'de benzer bir şey yoktur.

Bu blogu okuduktan sonra: http://blogs.msdn.com/b/cdndevs/archive/2015/07/10/uwp-new-controls-part-2-splitview.aspx, SplitView denetiminde DisplayMode özelliği olduğunu anladım ve durumunu değiştirmek için VisualStateManager kullanmalıyım Ancak sol bölmeyi içeri ve dışarı kaydırmak için vsm'yi nasıl kullanabilirim? Bunun, vsm ile elde edilebileceğinin farkında değilim.

Herhangi bir yardım/ipucu çok takdir edilecektir.

Answer 1

İlginç soru! :)

Geçenlerde diğer modlarda sahip olmak nokta görmüyorum olarak DisplayMode (Overlay olarak ayarlandığında sol kenarından jest bir tokatlamak etkinleştirmek için SplitView kontrolünü genişleten bir SwipeableSplitView oluşturulur, ancak gerektiğinde uzatmaktan çekinmeyin).

Tüm yaptığım, denetimin stili içinde, PaneRoot katmanının üst kısmında başka bir katman oluşturmak ve oradaki tüm hareketleri işlemek. Yeni katmanın dönüşümü nesnenin TranslateX güncellenirken

<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> 

, ben de senkronize kendi konumunu korumak için PaneRoot 's güncelleştiriyorum.

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 mülkiyet sanal olmadığı için, etrafa eski sarmak için başka bir IsSwipeablePaneOpen oluşturmak zorunda olduğunu unutmayın. Bu nedenle, IsPaneOpen özelliğini kullanmak istediğinizde, bunun yerine IsSwipeablePaneOpen kullanın.

Bu, GitHub'da oluşturduğum bir demo uygulamasında nasıl çalışır. Tam kaynak kodunu here bulabilirsiniz.

---

Kredi

• SplitView şablon Koen Zwikstra müthiş Visual Studio UWP templates den üretilmiştir.
• Sayfa animasyonları ve diğer bazı uygulamalar, Jerry Nixon'dan this post tarafından esinlenmiştir.

Answer 2

Ehm, bu blogda Responsive UI oluştururken kullanılır. SplitView bir kaydırma hareketi eklemek için, burada ne yaptım:

• SplitView en İçeriğin kök panelindeki jest Algılama ve bunun bazı Manipulatioin dahil olay işleyicisi ekleyin.
• SplitView'ün Manipülasyon olayındaki IsPaneOpen özelliğini kullanın.