ScrollGridView 实现触摸板横向触摸滑动 (#966)

ScrollGridView 实现触摸板横向触摸滑动

src/BiliLite.UWP/App.xaml

@@ -8,7 +8,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Controls/Carousel/Carousel.xaml" />
                 <ResourceDictionary Source="Controls/RoundButton/RoundButton.xaml" />
-                <ResourceDictionary Source="Controls/ScrollGridView/ScrollGridView.xaml" />
+                <ResourceDictionary Source="Controls/HorizontalGridView/HorizontalGridView.xaml" />
                 <ResourceDictionary Source="Styles/AppBarButtonNoChevronStyle.xaml" />
                 <ResourceDictionary Source="Styles/TabViewStyle.xaml" />
                 <ResourceDictionary Source="Styles/TextBlockStyle.xaml" />

src/BiliLite.UWP/BiliLite.UWP.csproj

@@ -794,7 +794,7 @@
       <DependentUpon>PlayerControl.xaml</DependentUpon>
     </Compile>
     <Compile Include="Controls\RoundButton\RoundButton.cs" />
-    <Compile Include="Controls\ScrollGridView\ScrollGridView.cs" />
+    <Compile Include="Controls\HorizontalGridView\HorizontalGridView.cs" />
     <Compile Include="Dialogs\SendCommentDialog.xaml.cs">
       <DependentUpon>SendCommentDialog.xaml</DependentUpon>
     </Compile>
@@ -1337,7 +1337,7 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="Controls\ScrollGridView\ScrollGridView.xaml">
+    <Page Include="Controls\HorizontalGridView\HorizontalGridView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>

src/BiliLite.UWP/Controls/ScrollGridView/ScrollGridView.cs → src/BiliLite.UWP/Controls/HorizontalGridView/HorizontalGridView.cs

@@ -1,61 +1,63 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
-using Windows.UI.Xaml;
+using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
-using Windows.UI.Xaml.Navigation;
 
 namespace BiliLite.Controls
 {
-    public class ScrollGridView:GridView
+    public class HorizontalGridView : GridView
     {
-        public ScrollGridView()
+        public HorizontalGridView()
         {
-            this.DefaultStyleKey = typeof(ScrollGridView);
+            DefaultStyleKey = typeof(HorizontalGridView);
         }
+
+        public Grid root;
         public Button btnMoveLeft;
         public Button btnMoveRight;
         public ScrollViewer scrollViewer;
-        public Grid gridGesture;
+        public Grid itemsPresenterPanel;
+
         protected override void OnApplyTemplate()
         {
-            gridGesture = GetTemplateChild("GridGesture") as Grid;
+            root = GetTemplateChild("root") as Grid;
             btnMoveLeft = GetTemplateChild("moveLeft") as Button;
             btnMoveRight = GetTemplateChild("moveRight") as Button;
-            scrollViewer= GetTemplateChild("ScrollViewer") as ScrollViewer;
+            scrollViewer = GetTemplateChild("scrollViewer") as ScrollViewer;
+            itemsPresenterPanel = GetTemplateChild("itemsPresenterPanel") as Grid;
+
+            itemsPresenterPanel.PointerExited += ItemsPresenterPanel_PointerExited;
+            itemsPresenterPanel.PointerWheelChanged += ItemsPresenterPanel_PointerWheelChanged;
+
+            root.PointerEntered += Root_PointerEntered;
+            root.PointerExited += Root_PointerExited;
             scrollViewer.ViewChanged += ScrollViewer_ViewChanged;
-            gridGesture.PointerExited += GridGesture_PointerExited;
-            gridGesture.PointerEntered += GridGesture_PointerEntered;
             btnMoveLeft.Click += BtnMoveLeft_Click;
             btnMoveRight.Click += BtnMoveRight_Click;
+
             base.OnApplyTemplate();
         }
 
-
-        private void GridGesture_PointerEntered(object sender, PointerRoutedEventArgs e)
+        #region 触摸板
+        private void ItemsPresenterPanel_PointerExited(object sender, PointerRoutedEventArgs e)
         {
-            if (e.Pointer.PointerDeviceType== Windows.Devices.Input.PointerDeviceType.Mouse)
-            {
-                scrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
-                setButton();
-            }
-            else
-            {
-                scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;
-            }
+            scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;
         }
 
-        private void GridGesture_PointerExited(object sender, PointerRoutedEventArgs e)
+        private void ItemsPresenterPanel_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
         {
-            if (AlwayShowButton)
+            scrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
+        }
+        #endregion
+
+        #region 附加按钮
+        private void Root_PointerEntered(object sender, PointerRoutedEventArgs e)
+        {
+            setButton();
+        }
+
+        private void Root_PointerExited(object sender, PointerRoutedEventArgs e)
+        {
+            if (AlwaysShowButton)
             {
                 return;
             }
@@ -67,9 +69,10 @@ private void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEven
         {
             setButton();
         }
+
         void setButton()
         {
-            if (AlwayShowButton)
+            if (AlwaysShowButton)
             {
                 btnMoveLeft.Visibility = Visibility.Visible;
                 btnMoveRight.Visibility = Visibility.Visible;
@@ -92,6 +95,7 @@ void setButton()
                 btnMoveRight.Visibility = Visibility.Collapsed;
             }
         }
+
         private void BtnMoveRight_Click(object sender, RoutedEventArgs e)
         {
             var move = scrollViewer.HorizontalOffset + MoveOffset;
@@ -112,36 +116,34 @@ private void BtnMoveLeft_Click(object sender, RoutedEventArgs e)
             scrollViewer.ChangeView(move, null, null);
         }
 
-        public double MoveOffset
-        {
-            get { return (double)GetValue(MoveOffsetProperty); }
-            set { SetValue(MoveOffsetProperty, value); }
-        }
-
-        // Using a DependencyProperty as the backing store for MoveOffset.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty MoveOffsetProperty =
-            DependencyProperty.Register("MoveOffset", typeof(double), typeof(ScrollGridView), new PropertyMetadata((double)200.0));
-
-        public bool AlwayShowButton
+        public bool AlwaysShowButton
         {
-            get { return (bool)GetValue(AlwayShowButtonProperty); }
-            set { SetValue(AlwayShowButtonProperty, value); }
+            get { return (bool)GetValue(AlwaysShowButtonProperty); }
+            set { SetValue(AlwaysShowButtonProperty, value); }
         }
 
-        public static readonly DependencyProperty AlwayShowButtonProperty =
-            DependencyProperty.Register("AlwayShowButton", typeof(bool), typeof(ScrollGridView), new PropertyMetadata(false, OnAlwayShowButtonChanged));
-        private static void OnAlwayShowButtonChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        public static readonly DependencyProperty AlwaysShowButtonProperty =
+            DependencyProperty.Register("AlwaysShowButton", typeof(bool), typeof(HorizontalGridView), new PropertyMetadata(false, OnAlwaysShowButtonChanged));
+        private static void OnAlwaysShowButtonChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
-            var data = d as ScrollGridView;
+            var data = d as HorizontalGridView;
             if ((bool)e.NewValue)
             {
-
                 data.btnMoveLeft.Visibility = Visibility.Visible;
                 data.btnMoveRight.Visibility = Visibility.Visible;
             }
         }
+        #endregion
 
-
+        public double MoveOffset
+        {
+            get { return (double)GetValue(MoveOffsetProperty); }
+            set { SetValue(MoveOffsetProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for MoveOffset.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty MoveOffsetProperty =
+            DependencyProperty.Register("MoveOffset", typeof(double), typeof(HorizontalGridView), new PropertyMetadata((double)200.0));
 
     }
-}
+}

src/BiliLite.UWP/Controls/HorizontalGridView/HorizontalGridView.xaml

@@ -0,0 +1,96 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:BiliLite.Controls">
+    <Style TargetType="controls:HorizontalGridView">
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="TabNavigation" Value="Once" />
+        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
+        <Setter Property="IsSwipeEnabled" Value="True" />
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="FocusVisualMargin" Value="-2" />
+        <Setter Property="ItemContainerTransitions">
+            <Setter.Value>
+                <TransitionCollection>
+                    <AddDeleteThemeTransition />
+                    <ContentThemeTransition />
+                    <ReorderThemeTransition />
+                    <EntranceThemeTransition IsStaggeringEnabled="False" />
+                </TransitionCollection>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <ItemsWrapGrid Orientation="Horizontal" />
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="GridView">
+                    <Grid
+                        x:Name="root"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}">
+                        <ScrollViewer
+                            x:Name="scrollViewer"
+                            AutomationProperties.AccessibilityView="Raw"
+                            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
+                            HorizontalScrollBarVisibility="Hidden"
+                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                            IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
+                            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                            IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
+                            TabNavigation="{TemplateBinding TabNavigation}"
+                            VerticalScrollBarVisibility="Auto"
+                            VerticalScrollMode="Disabled"
+                            ZoomMode="Disabled">
+                            <Grid x:Name="itemsPresenterPanel" Background="Transparent">
+                                <ItemsPresenter
+                                    Footer="{TemplateBinding Footer}"
+                                    FooterTemplate="{TemplateBinding FooterTemplate}"
+                                    FooterTransitions="{TemplateBinding FooterTransitions}"
+                                    Header="{TemplateBinding Header}"
+                                    HeaderTemplate="{TemplateBinding HeaderTemplate}"
+                                    HeaderTransitions="{TemplateBinding HeaderTransitions}" />
+                            </Grid>
+                        </ScrollViewer>
+                        <Button
+                            x:Name="moveLeft"
+                            Height="56"
+                            Margin="4"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            Background="#66000000"
+                            Visibility="Collapsed">
+                            <FontIcon
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="14"
+                                Foreground="White"
+                                Glyph="&#xE00E;" />
+                        </Button>
+                        <Button
+                            x:Name="moveRight"
+                            Height="56"
+                            Margin="4"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            Background="#66000000"
+                            Visibility="Collapsed">
+                            <FontIcon
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="14"
+                                Foreground="White"
+                                Glyph="&#xE00F;" />
+                        </Button>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>