WP8.1 侧边滑动Item

Posted 2020-08-17 ARM830

效果图

我看ios 和安卓上有好多类似的Item的效果，UWP上有微软官方的库，其中也有类似得效果，看样子WP8.1没有啊，顺便我的程序也是需要，我也就仿了一个。

具体思路是： 触摸控制GRId在CANvas的相对位置。滑动这个Item时候，其他已经滑动完成的ITEM关闭。只能有一个打开。

实现这个效果，至少需要以下知识点：

Canvsa基础知识

触控基础知识

ObservableCollection<T>基本使用

INotifyPropertyChanged接口基本使用

咱也不罗嗦 开始

先上xaml代码

 <ListView x:Name="listView" SelectionChanged="listView_SelectionChanged"  >
                                    <ListView.ItemTemplate>
                                        <DataTemplate>        
                                            <!--几个关键触控设置-->
                                        <!--ManipulationCompleted="X1_ManipulationCompleted"   ManipulationDelta="X1_ManipulationDelta"  ManipulationStarted="X1_ManipulationStarted" ManipulationMode="TranslateX,System" -->
                                            <Grid ManipulationCompleted="X1_ManipulationCompleted"   ManipulationDelta="X1_ManipulationDelta"  ManipulationStarted="X1_ManipulationStarted" ManipulationMode="TranslateX,System" Height="139" Width="{Binding ItemWidth}">
                                            <!--关键的底板，Canvsa-->
                                                <Canvas x:Name="C1">
                                                    <!--对其主体Gird的Canvsa.Left绑定-->
                                                <!--Canvas.Left="{Binding CanvsaLeft, Mode=TwoWay}"-->
                                                    <Grid  Canvas.Left="{Binding CanvsaLeft, Mode=TwoWay}" x:Name="G1"  Height="139" Width="580">
                                                        <!--分块，一块是屏幕的显示，一个在隐藏着中-->
                                                        <!--屏幕这一块，可以用Binding绑定，另一个随意了 看心情，不过这也和Canvsa.left大小也有关心-->
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="450*"/>
                                                            <ColumnDefinition Width="130*"/>
                                                        </Grid.ColumnDefinitions>
                                                        <Grid>
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="73*"/>
                                                                <RowDefinition Height="70*"/>
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="28*"/>
                                                                <ColumnDefinition Width="47*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <TextBlock Text="{Binding  ImageName}" FontSize="28" Grid.ColumnSpan="2" Margin="168,10,0,0.333"/>
                                                            <TextBlock Text="{Binding ImageAge}" FontSize="28" Grid.ColumnSpan="2" Grid.Row="1" Margin="168,10,0,0.333"/>
                                                            <Image Source="TOPImage/ops.png"  Grid.Column="0" Grid.RowSpan="2" Margin="3"/>
                                                        </Grid>
                                                        <Grid Grid.Column="1" >
                                                            <Border BorderThickness="1,0,0,0">
                                                                <Border.BorderBrush>
                                                                    <SolidColorBrush Color="Black"/>
                                                                </Border.BorderBrush>
                                                                <Image Source="IcoImage/del.png" />
                                                            </Border>
                                                        </Grid>
                                                    </Grid>
                                                </Canvas>
                                            </Grid>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>                                
                                </ListView>

ObservableCollection<T>+INotifyPropertyChanged接口的代码：

    public class ReadDataList 
    {
        private ObservableCollection<DataList> setData = new ObservableCollection<DataList>();
    
            
      public  ObservableCollection<DataList> GetData()
      {                  
          return setData;         
      }

     
    
    }
    public class DataList : INotifyPropertyChanged//变化接口，通知UI
    {
        private double Nub;

        public string ImageName { get; set; }
        public string ImageAge { get; set; }
        public double ItemWidth //绑定手机具体的宽度
        {
            get
            {
                return Window.Current.Bounds.Width;
            }
        }
        public ImageSource imageSourec { get; set; }
        public double CanvsaLeft //滑动的基础，就是对Canvsa的相对位置的处理
        {
            get
            {
                return Nub;
            }
            set
            {
                Nub = value;
                OnChanged(new PropertyChangedEventArgs("CanvsaLeft"));
            }

        }

        public int ItemCount { get; set; }


        public event PropertyChangedEventHandler PropertyChanged;
     protected void  OnChanged(PropertyChangedEventArgs arg)//具体方法
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, arg);
            }
        }
    }

 

对屏幕滑动的处理代码：

      private   void X1_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)//手在屏幕移动方法
        {
            P2 = e.Cumulative.Translation; //触摸点结束位置
            if (P2.X < P1.X && (Canvas.GetLeft(G1) != -130))//X轴的判断，向左滑动，且Item的初始Canvsa的相对位置不能大于-130
            {
                if (Canvas.GetLeft(G1) >= -130)
                {
                    Canvas.SetLeft(G1, P2.X++);
                }

            }
            if (P2.X < P1.X)//滑动结束或者滑动中
            {
                if (Canvas.GetLeft(G1) < -130)
                {
                    Canvas.SetLeft(G1, -130);
                }

            }
            if (P2.X > P1.X)//向右滑动，返回ITEM  一下子回去 这块的代码不是很好 带我优化优化把
            {

                if (Canvas.GetLeft(G1) < 1)
                {
                    Canvas.SetLeft(G1, Canvas.GetLeft(G1) + P2.X);
                }


            }
            if (P2.X > P1.X)//向右滑动，返回Item  滑动中
            {
                if (Canvas.GetLeft(G1) > 0)
                {
                    Canvas.SetLeft(G1, 0);
                }
            }

            e.Handled = true;//结束这段代码
            P1.X = 0;//清空
            P2.X = 0;//清空
       
        }

        private  void X1_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e) //触摸开始
        {
                G1 = ((Grid)sender).FindName("G1") as Grid;//确定触摸事件源头(具体Item)
               
                P1 = e.Position;//触摸点的起点位置
      
        }

        private  void X1_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)//手离开屏幕
        {
            
            if (Canvas.GetLeft(G1) > -65)//判断向左滑动途中手是否离开屏幕，离开屏幕时Item的位置 以此判断  小于一般 回到0  大于一半到结束位置
            {
                Canvas.SetLeft(G1, 0);
            
            }
            if ((Canvas.GetLeft(G1) < -65))
            {
                Canvas.SetLeft(G1, -130);
                 OneItemData = (e.OriginalSource as FrameworkElement).DataContext as DataList;//确定滑动的Item
                 SetCanvas(OneItemData);//判断其他Item是否打开的方法
               
            }
           
           
        }


       
     void SetCanvas(object sender)//判断再滑动Item时是否已经有其他Item已经滑动完成，有就关闭。
     {
        var data=  sender as DataList; //现在正在滑动的ITEM
         for (int i = 0; GetAllData.Count> i; i++)//datalist全部的集合
         {
             if (GetAllData[i].CanvsaLeft == -130&&GetAllData[i].ItemCount!=data.ItemCount)//判断其中元素的CANvas元素是否位-130，同时确保这个元素不是正在滑动的元素
             {
                 GetAllData[i].CanvsaLeft = 0;//是就将Canvas.left的相对位置=0
             }
         }
                
        }