【WP7进阶】——分享一个可供切换状态的ListBox组件

　　编写Asp.net的同学，经常会遇到一个Repeater 或者一个GridView ，当用户点击编辑状态时我们的列表组件会自动跳转到可选择（可供删除、编辑、选择等）状态。这时候一般的做法都会在组件的前方自动生成一系列复选框“CheckBox”，需要删除/选择哪行时只要在前方的复选框勾一下，便可以得到该行的数据或者行ID等。

　　上面的做法是一个比较典型的Web做法，那么在WP7 里面要实现这样的效果如何实现呢？有些同学就会说了，那简单使用ListBox 在它的数据模板里面添加一个CheckBox不就完事了吗？是的，这样是一种做法，但带来的问题是你得去控制他选中哪行并且得到哪行的ID，并且在WP7 有限的屏幕中这种做法比较不妥，当用户想做选择时，我们才让对应的行有可供选择的状态才更佳。而这种做法在传统的WP7控件中，是没有的。因为我们必须时时去控制它的复选框显示或者隐藏，但在这里我推荐大家一个组件，自带CheckBOx并且默认有两种状态，一种为普通状态即呈现数据显示给用户，如下图：

另外一种状态为可选择状态，即用户可以对相应的行做删除等操作，如下图：

 

该组件的下载地址为：WindowsPhoneListBoxWithCheckBoxesControl

 

下面给出该组件的详细用法：

做过.Net 开发的对于如何使该组件的应该很清楚，这里将跳过此步骤。

　　如上图，该组件编写的XAML代码为如下：

 

  < my:ListBoxWithCheckBoxes  Name ="listBoxWithBoxes"  Margin ="0,0,0,0"  ItemsSource =" {Binding SimpleModels} " >
                 < ListBox.ItemTemplate >
                     < DataTemplate >
                         < StackPanel  Orientation ="Horizontal"  Margin ="0,0,0,20" >
                             < Rectangle  Height ="100"  Width ="100"  Fill ="#FFE5001b"  Margin ="12,0,9,0" />
                             < StackPanel >
                                 < TextBlock  Text =" {Binding Name} "  TextWrapping ="Wrap"  Style =" {StaticResource PhoneTextLargeStyle} " />
                                 < TextBlock  Text =" {Binding Description} "  TextWrapping ="Wrap"  Margin ="12,-6,12,0"  Style =" {StaticResource PhoneTextSubtleStyle} " />
                             </ StackPanel >
                         </ StackPanel >
                     </ DataTemplate >
                 </ ListBox.ItemTemplate >
   </ my:ListBoxWithCheckBoxes >

 

 

如上代码的数据模板，并未出现有CheckBox 控件，因为该组件己经将CheckBox控件整合在里面的选择状态中了。下面是具体如何为该组件添加数据。

首先该组件对应的行有标题和描述，这个在上面XAML代码中的数据模板可以看得出，查看该组件的ItemSource ，一起来看看它的代码是如何编写的：

 

public   class  SimpleModel : INotifyPropertyChanged
    {
         protected   string  itsName;
         protected   string  itsDescription;

         public   event  PropertyChangedEventHandler PropertyChanged;

         public   string  Name 
        {
             get  {  return   this .itsName; }
             set  {  this .itsName  =  value; NotifyPropertyChanged( " Name " ); }
        }


         public   string  Description
        {
             get  {  return   this .itsDescription; }
             set  {  this .itsDescription  =  value; NotifyPropertyChanged( " Description " ); }
        }



         protected   void  NotifyPropertyChanged( string  thePropertyName) 
        {
             if  ( this .PropertyChanged != null )
            {
                 this .PropertyChanged( this ,  new  PropertyChangedEventArgs(thePropertyName));
            }
        }

    }

 

 

代码比较简单，封装了两个属性分别为他们注册PropertyChanged 事件响应数据变化。

 

而这个MODEL的数据来源于如下代码：

 

  public   class  ListModel : INotifyPropertyChanged
    {
         public   event  PropertyChangedEventHandler PropertyChanged;

         public  ObservableCollection < SimpleModel >  SimpleModels {  get ;  private   set ; }



         public   bool  IsDataLoaded {  get ;  private   set ; }

         public  ListModel() 
        {
             this .SimpleModels  =   new  ObservableCollection < SimpleModel > ();
        }


         ///   <summary>
         ///  加载数据
         ///   </summary>
         public   void  LoadData() 
        {
             for  ( int  i  =   1 ; i  <   1000 ; i ++ )
            {
                 this .SimpleModels.Add( new  SimpleModel() { Name  =   " 第 "   +  i  +   " 项 " , Description  =   " 这是第 "   +  i  +   " 项数据 "  });
            }
             this .IsDataLoaded  =   true ;
        }


         protected   void  NotifyPropertyChanged( string  thePropertyName)
        {
             if  ( this .PropertyChanged != null )
            {
                 this .PropertyChanged( this ,  new  PropertyChangedEventArgs(thePropertyName));
            }
        }

    }

 

 

代码跟上边的代码差不多，这里多了调用加载数据的方法LoadData（）为上面的每个Model赋值。而加载代码首先为其添加一个全局属性：

 

  public   static  ListBoxWithCheckBox.ViewModel.ListModel viewModel  =   null ;

         // 获取数据
         public   static  ViewModel.ListModel ViewModel 
        {
             get  {
                 if  (viewModel == null )
                {
                    viewModel  =   new  ViewModel.ListModel();
                }
                 return  viewModel;
            }
        }

 

 

转到MainPage的code behind 代码里面，在构造函数里面为DataContext 赋值，这里赋值的话上下文即可得到数据源，代码如下：

  DataContext = App.ViewModel;

 

当应用程序导航进来时，调用加载全局属性去执行抓取数据的方法，代码如下：

 

   protected   override   void  OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
             if  ( ! App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
             base .OnNavigatedTo(e);
        }

 

 

 

最后的运行效果，我们选择第1 、2条数据做为欲删除的对象，然后删除看有啥变化？

 

点击删除后的效果：

 

mainPage 的code behind 完整代码如下：

完整代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  Microsoft.Phone.Controls;
using  Microsoft.Phone.Shell;
using  ListBoxWithCheckBox.ViewModel;

namespace  ListBoxWithCheckBox
{
     public   partial   class  MainPage : PhoneApplicationPage
    {

         private  ApplicationBar applicationBarChoose;
         private  ApplicationBarIconButton applicationBarIconButtonChoose;

         private  ApplicationBar applicationBarDeleteOrCancel;
         private  ApplicationBarIconButton applicationBarIconButtonDelete;
         private  ApplicationBarIconButton applicationBarIconButtonCancel;

         //  Constructor
         public  MainPage()
        {
            InitializeComponent();
            ConstructApplicationBar();
            DataContext  =  App.ViewModel;
             this .Loaded  +=   new  RoutedEventHandler(MainPage_Loaded);
        }

         void  MainPage_Loaded( object  sender, RoutedEventArgs e)
        {
           
        }

         protected   override   void  OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
             if  ( ! App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
             base .OnNavigatedTo(e);
        }


         ///   <summary>
         ///  构建应用程序条
         ///   </summary>
         private   void  ConstructApplicationBar()
        {
             #region --应用程序条“选择”菜单--
             this .applicationBarChoose  =   new  ApplicationBar();
             this .applicationBarIconButtonChoose  =   new  ApplicationBarIconButton( new  Uri( " /content/ApplicationBar.Choose.png " ,UriKind.Relative));
             this .applicationBarIconButtonChoose.Text  =   " 选择 " ;
             this .applicationBarIconButtonChoose.Click  +=   new  EventHandler(applicationBarIconButtonChoose_Click);
             this .applicationBarChoose.Buttons.Add( this .applicationBarIconButtonChoose);
             this .applicationBarChoose.IsMenuEnabled  =   true ;
             this .applicationBarChoose.IsVisible  =   true ;
             this .ApplicationBar  =   this .applicationBarChoose;
             #endregion


             this .applicationBarDeleteOrCancel  =   new  ApplicationBar();
             #region  --删除--
             this .applicationBarIconButtonDelete  =   new  ApplicationBarIconButton( new  Uri( " /content/ApplicationBar.Delete.png " ,UriKind.Relative));
             this .applicationBarIconButtonDelete.Text  =   " 删除 " ;
             this .applicationBarIconButtonDelete.Click  +=   new  EventHandler(applicationBarIconButtonDelete_Click);
             #endregion


             #region  --取消--
             this .applicationBarIconButtonCancel  =   new  ApplicationBarIconButton( new  Uri( " /content/ApplicationBar.Cancel.png " ,UriKind.Relative));
             this .applicationBarIconButtonCancel.Text  =   " 取消 " ;
             this .applicationBarIconButtonCancel.Click  +=   new  EventHandler(applicationBarIconButtonCancel_Click);
             #endregion

             this .applicationBarDeleteOrCancel.Buttons.Add( this .applicationBarIconButtonDelete);
             this .applicationBarDeleteOrCancel.Buttons.Add( this .applicationBarIconButtonCancel);
             this .applicationBarDeleteOrCancel.IsMenuEnabled  =   true ;
             this .applicationBarDeleteOrCancel.IsVisible  =   true ;

        }

         ///   <summary>
         ///  listBox 为可选择状态
         ///   </summary>
         private   void  SwitchToChooseState()
        {
             this .listBoxWithBoxes.IsInChooseState  =   true ;
             this .ApplicationBar  =   this .applicationBarDeleteOrCancel;
        }

         ///   <summary>
         ///  listBox 为普通状态
         ///   </summary>
         private   void  SwitchToNormalState()
        {
             this .listBoxWithBoxes.IsInChooseState  =   false ;
             this .ApplicationBar  =   this .applicationBarChoose;
        }


         ///   <summary>
         ///  取消操作
         ///   </summary>
         ///   <param name="sender"></param>
         ///   <param name="e"></param>
         void  applicationBarIconButtonCancel_Click( object  sender, EventArgs e)
        {
            SwitchToNormalState();
        }

         ///   <summary>
         ///  删除操作
         ///   </summary>
         ///   <param name="sender"></param>
         ///   <param name="e"></param>
         void  applicationBarIconButtonDelete_Click( object  sender, EventArgs e)
        {
             if  (MessageBox.Show( " 你确定要删除选中项吗？ " , " 提示 " ,MessageBoxButton.OKCancel) == MessageBoxResult.OK)
            {
                 foreach  (SimpleModel item  in   this .listBoxWithBoxes.SelectedItems)
                {
                    App.ViewModel.SimpleModels.Remove(item);
                }
                SwitchToNormalState();
            }
        }

         ///   <summary>
         ///  选择操作
         ///   </summary>
         ///   <param name="sender"></param>
         ///   <param name="e"></param>
         void  applicationBarIconButtonChoose_Click( object  sender, EventArgs e)
        {
            SwitchToChooseState();
        }
    }
}

 

 

这里推荐一个小技巧，当我们编写动态数据时，又不想运行即想从代码IDE看到运行效果，类似于这样：

 

这个效果还是要借用PhoneApplicationPage 的DataContext属性，具体如下编写代码：

• 编写一个数据xaml命名为：ViewModelSampleData.xaml 文件，该文件负责为SimpleModels 做数据，代码如下：
  < viewModels:ListModel 
       xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        
      xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:viewModels ="clr-namespace:ListBoxWithCheckBox.ViewModel" >
  
       < viewModels:ListModel.SimpleModels >
           < viewModels:SimpleModel  Name ="测试第一项"  Description ="这是测试的第一个节点"   />
           < viewModels:SimpleModel  Name ="测试第二项"  Description ="这是测试的第二个节点"   />
       </ viewModels:ListModel.SimpleModels >
      
  </ viewModels:ListModel >
  

   

• 在MainPage文件的XAML界面为DataContext赋值，代码如下：
      d:DataContext="{d:DesignData ViewModelSampleData.xaml}"

   

Tip：该效果只运用于没有运行即可查看效果，运行后将会忽略。

 

怎么样，该组件不错吧，大家下载后试试吧。

源码下载：

ListBoxWithCheckBox Demo