winphone listbox 编辑列表

实现的功能：

点击 “编辑” 按钮，删除图标 “-”显示，”编辑“变为“取消”，“名称”字段向右移动适当距离；点击“-”实现删除 一行，刷新页面。

点击“取消”，删除图标 “-”隐藏，”取消“变为“”编辑，“名称”字段向左移动适当距离。

相关图片：

设计：（下方红色框为 删除图标 “-”区域，“113”为“名称”字段区域）

 

                 正常状态：                                          编辑状态：

                    

一、前台页面：

页面要引用 ：    xmlns :  c4fToolkit  ="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

     xmlns :  c4fToolkitBinding ="clr-namespace:Coding4Fun.Phone.Controls.Binding;assembly=Coding4Fun.Phone.Controls"

“编辑” 按钮：

                      <  c4fToolkit :  Tile      Grid.Column  ="2"     Width  ="0"  Height ="70"  Title  ="编辑"  x  :  Name ="editTxt"  Click ="Edit_Click" >

                         <  Image  Name  ="editImg"  Source ="/images/edit.png"  Stretch  ="None"  Margin  ="-72,0,-54,0"     />

                     </  c4fToolkit :  Tile  >

删除图标 “-”：                   <  local :  DeleteListBox  Grid.Column ="0"  Visibility  ="Collapsed"  Name  ="lb0" ScrollViewer.VerticalScrollBarVisibility ="Disabled"  ScrollViewer.HorizontalScrollBarVisibility  ="Disabled"  Margin ="0,0,0,0">

                         <  local :  DeleteListBox.ItemTemplate  >

                             <  DataTemplate >

                                 <  Grid >

                                     <  Grid.RowDefinitions >

                                         <  RowDefinition  Height  ="40" />

                                     </  Grid.RowDefinitions >

                                     <  Grid.ColumnDefinitions >

                                         <  ColumnDefinition  Width  ="37"/>

                                     </  Grid.ColumnDefinitions >

                                     <  Image  Source  ="/images/delete.png"  Margin ="10,0,0,0"  Height  ="20"  Width  ="40" />

                                 </  Grid >

                             </  DataTemplate >

                             </  local :  DeleteListBox.ItemTemplate  >

                     </  local :  DeleteListBox  >

二、后台：

加载页面时给 lb0， lb1赋值， Quote 列表实体类

                      ObservableCollection  < Quote  > quotes =  new   ObservableCollection <  Quote  >();

                     ObservableCollection  < Quote  > qs = ( ObservableCollection  <  Quote >)  JsonConvert  .DeserializeObject(reader.ReadToEnd(), typeof  ( ObservableCollection  <  Quote >));

                     //lb0删除图标,lb1名称字段

                    lb1.Dispatcher.BeginInvoke(() => { lb1.ItemsSource = quotes; });

                    lb0.Dispatcher.BeginInvoke(() => { lb0.ItemsSource = quotes; });

         ///   <summary>

         ///  编辑，取消 事件

         ///   </summary>

         ///   <param name="sender"></param>

         ///   <param name="e"></param>

         private   void  Edit_Click(  object  sender,  RoutedEventArgs  e)

        {

             //lb0删除图标,lb1名称字段

             if  (editTxt.Title ==  "编辑"  )

            {

                 //删除图标 “-”,“名称”字段向左右移动适当位置

                lb1.Margin =  new   Thickness  (6, 0, 0, 0);

                lb0.Margin =  new   Thickness  (0, 0, 0, -6);

                 //删除图标 “-”显示

                lb0.Visibility =  Visibility  .Visible;

                editTxt.Title =  "取消"  ;

                 //按钮“编辑”变“取消”

                editImg.Source =  new   BitmapImage  (  new   Uri (  "/Images//cancel.png" ,  UriKind  .Relative));

            }

             else

            {

                lb1.Width = 150;

                 //删除图标 “-”,“名称”字段向左右移动适当位置

                lb1.Margin =  new   Thickness  (-36, 0, 0, 0);

                lb0.Margin =  new   Thickness  (0, 0, 0, 36);

                 //删除图标 “-”显示

                lb0.Visibility =  Visibility  .Collapsed;

                editTxt.Title =  "编辑"  ;

                 //按钮“取消”变“编辑”

                editImg.Source =  new   BitmapImage  (  new   Uri (  "/Images//edit.png" ,  UriKind  .Relative));

            }

        }

         ///   <summary>

         ///  在此页将要在 Frame 中显示时进行调用。

         ///   </summary>

         ///   <param name="e">  描述如何访问此页的事件数据。

         ///  属性通常用于配置页。  </param>

         protected   override  void  OnNavigatedTo(  NavigationEventArgs  e)

        {

             base  .OnNavigatedTo(e);

             try

            {

                 if  (NavigationContext.QueryString.Count > 0)

                {

                     string  m = NavigationContext.QueryString[  "m" ];

                     //删除一行页面刷新后仍然处于编辑状态

                     if  (m ==  "edit"  )

                    {

                         //lb0删除图标,lb1名称字段。删除图标 “-”,“名称”字段向左右移动适当位置

                        lb1.Margin =  new   Thickness  (6, 0, 0, 0);

                        lb0.Margin =  new   Thickness  (0, 0, 0, -6);

                         //删除图标 “-”显示

                        lb0.Visibility =  Visibility  .Visible;

                        editTxt.Title =  "取消"  ;

                         //按钮“编辑”变“取消”

                        editImg.Source =  new   BitmapImage  (  new   Uri (  "/Images//cancel.png" ,  UriKind  .Relative));

                    }

                }

            }

             catch  ( Exception  ex)

            {

            }

        }

  ListBox删除实体类 ：

    public   class   DeleteListBox  :  ListBox

    {

         public   static  App .  GlableInfo  appInfo =  new   App  .  GlableInfo ();

         protected   override  void  PrepareContainerForItemOverride(  DependencyObject  element,  object  item)

        {

             base  .PrepareContainerForItemOverride(element, item);

             //ListBox列表行的Index

             int  index = ItemContainerGenerator.IndexFromContainer(element);

             ListBoxItem  li = element  as  ListBoxItem ;

             //给ListBox列表每行名称赋值

            li.Name = (item  as   Quote  ).Code +  "|"  + (item  as   Quote  ).Name +  "|"  + (item  as   Quote  ).TypeCode;

             //给ListBox列表按奇、偶行赋背景颜色，奇数行背景色为TransParent，偶数行为#101010

            li.Background = index % 2 == 0 ?  null  :  Utility  .GetColorFromHexa(  "#101010" , 255);

             //声明ListBox列表每行的点击事件

            li.Tap +=  new   EventHandler  <System.Windows.Input.  GestureEventArgs >(EventHandler);

        }

         public   void  EventHandler(  object  sender, System.Windows.Input.  GestureEventArgs  e)

        {

             //取ListBox列表每行名称

             string  [] param = (sender  as  ListBoxItem ).Name.Split(  '|'  );

             string  currentCode = param[0].Replace( " "  ,  "+" );

             string  currentName = param[1].Replace( " "  ,  "+" );

             string  currentType = param[2];

             string  strMsg =  string  .Format(  "您确认要将 {0} 从我的自选中删除吗?"  , currentName);

             //弹出框选择是否删除此行

             MessageBoxResult  mbr =  MessageBox  .Show(strMsg, appInfo.AppName,  MessageBoxButton  .OKCancel);

             if  (mbr ==  MessageBoxResult  .OK)

            {

                 //SQLite数据库中删除此行

                 SQLiteHelper  .insertDelData(currentCode, currentType);

                 //刷新页面,给时间参数避免页面缓存不刷新

                (  Application  .Current.RootVisual  as  PhoneApplicationFrame ).Navigate(  new   Uri  ( "/diyPage.xaml?m=edit&dt="  + DateTime .Now.ToString(),  UriKind  .Relative));

            }

        }

    }