【WP7进阶】
- 博客分类:
- 技术杂绘
编写Asp.net的同学,经常会遇到一个Repeater 或者一个GridView ,当用户点击编辑状态时我们的列表组件会自动跳转到可选择(可供删除、编辑、选择等)状态。这时候一般的做法都会在组件的前方自动生成一系列复选框"CheckBox",需要删除/选择哪行时只要在前方的复选框勾一下,便可以得到该行的数据或者行ID等。
上面的做法是一个比较典型的Web做法,那么在WP7 里面要实现这样的效果如何实现呢?有些同学就会说了,那简单使用ListBox 在它的数据模板里面添加一个CheckBox不就完事了吗?是的,这样是一种做法,但带来的问题是你得去控制他选中哪行并且得到哪行的ID,并且在WP7 有限的屏幕中这种做法比较不妥,当用户想做选择时,我们才让对应的行有可供选择的状态才更佳。而这种做法在传统的WP7控件中,是没有的。因为我们必须时时去控制它的复选框显示或者隐藏,但在这里我推荐大家一个组件,自带CheckBOx并且默认有两种状态,一种为普通状态即呈现数据显示给用户,如下图:
另外一种状态为可选择状态,即用户可以对相应的行做删除等操作,如下图:
该组件的下载地址为:WindowsPhoneListBoxWithCheckBoxesControl
下面给出该组件的详细用法:
做过.Net 开发的对于如何使该组件的应该很清楚,这里将跳过此步骤。
如上图,该组件编写的XAML代码为如下:
istBoxWithCheckBoxes Name="listBoxWithBoxes" Margin="0,0,0,0" ItemsSource="{Binding SimpleModels}">
istBoxWithCheckBoxes>
如上代码的数据模板,并未出现有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 SimpleModels { get; private
set; }
public
bool IsDataLoaded { get; private
set; }
public ListModel()
{
this.SimpleModels =
new ObservableCollection();
}
///
/// 加载数据
///
public
void LoadData()
{
for (int i =
1; i
点击删除后的效果:
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.Navigation EventArgs e)
{
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
}
base.OnNavigatedTo(e);
}
///
/// 构建应用程序条
///
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;
}
///
/// listBox 为可选择状态
///
private
void SwitchToChooseState()
{
this.listBoxWithBoxes.IsInChooseState =
true;
this.ApplicationBar =
this.applicationBarDeleteOrCancel;
}
///
/// listBox 为普通状态
///
private
void SwitchToNormalState()
{
this.listBoxWithBoxes.IsInChooseState =
false;
this.ApplicationBar =
this.applicationBarChoose;
}
///
/// 取消操作
///
///
///
void applicationBarIconButtonCancel_Click(object sender, EventArgs e)
{
SwitchToNormalState();
}
///
/// 删除操作
///
///
///
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();
}
}
///
/// 选择操作
///
///
///
void applicationBarIconButtonChoose_Click(object sender, EventArgs e)
{
SwitchToChooseState();
}
}
}
这里推荐一个小技巧,当我们编写动态数据时,又不想运行即想从代码IDE看到运行效果,类似于这样:
这个效果还是要借用PhoneApplicationPage 的DataContext属性,具体如下编写代码: 编写一个数据xaml命名为:ViewModelSampleData.xaml 文件,该文件负责为SimpleModels 做数据,代码如下:
istModel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pre sentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModels="clr-namespace
istBoxWithCheckBox.ViewModel">
istModel.SimpleModels>
istModel.SimpleModels>
istModel>
在MainPage文件的XAML界面为DataContext赋值,代码如下: d
ataContext="{d
esignData ViewModelSampleData.xaml}"
Tip:该效果只运用于没有运行即可查看效果,运行后将会忽略。
怎么样,该组件不错吧,大家下载后试试吧。
源码下载:
ListBoxWithCheckBox Demo
原贴地址:http://bbs.silverlightchina.net/forum.php?mod=view thread&tid=3707
发表评论
-
转 java字符串与二进制的相互转化
2012-07-06 09:52 1399public class StrBinaryTurn { ... -
字符串(正则表达式)
2012-07-06 09:45 7861 http://acm.hdu.edu.cn/showp ... -
正则表达式匹配排列
2012-07-06 09:37 557前几天有位同事问 ... -
史上最强劲之android模拟器命令详解
2012-07-06 09:30 614转http://www.eoeandroid.com/th ... -
js签名
2012-07-05 20:45 446var CsdnScriptPlugin999 = { / ... -
flex4 设置 圆角
2012-07-02 10:53 543width="100%" height ... -
flex 中Scroller的使用
2012-07-02 10:53 663width="100%" height ... -
Event propagation事件传播
2012-07-02 10:52 620当事件被触发时,F ... -
List虚拟布局
2012-07-02 10:52 671flex/spark" xmlns:local= ... -
ExtJS 4 Grid组件
2012-07-01 00:32 590我们正 ... -
主流地图API比较
2012-07-01 00:31 533最近因为工作关系,对市面上主流的地图API都进行了一遍了解 ... -
基于push技术的web实时网络管理框架研究
2012-07-01 00:31 5081 引言 基于 web 的网络管理是web 功能和网 ... -
广州工作2个月!差人的公司可以call我
2012-07-01 00:31 598网名:夜梦惊魂/夜枫设计 姓名:胡军 博客:http ... -
实战 OpenLaszlo 与 db4o
2012-07-01 00:31 579本文于去年年底完 ...
相关推荐
第十七章 进阶音效控制与管理 第十八章 体感游戏设计 第十九章 二维动画与碰撞侦测 第二十章 图形特效与文字显示 第二十一章 游戏画面管理与切换控制 第二十二章 3D 游戏设计 第二十三章 3D 游戏控制
wp7 开发的准备工作,进阶开发 和一些范例 以及 wp7多任务的解决方案。
攻防世界Misc高手进阶区,A_Good_IdeaT题目WP,详细解题步骤及所需工具。帮助新手找到解题思路
打开题目: 发现都是pdf文件。看不懂 先来一套广播体操:我用的是御剑和AWVS 发现两个有趣的页面: ...(还有一个robots.txt, 打开之后也是指向上面两个页面的) ...参考网上的WP 查询字段: 构造查询密码的SQL:usr=' UNI
[https://hiziyw.com/wp-content/uploads/2023/03/2023030606372615.png](https://img-blog.csdnimg.cn/26c111c247e6431ba6d70b311273b0ad.png) **3、将要改写的文章交给openai处理** ![在这里插入图片描述]...
创建文章使用的函数为wp_insert_post();使用方法如下 [ ] //Are you updating an existing post? 'menu_order' => [ ] //If new post is a page, it sets the order in which it ...
国内首部翻译的Windows phone 7 开发书籍! Nick Randolph,高手大作,适合作为进阶读物,但对初学 者也有很好的照顾,看过绝对不后悔。 中文,高清PDF版本完整版(PS:之前下到个只有前三章的,还说 要完整版要...
国内首部翻译的Windows phone 7 开发书籍! Nick Randolph,高手大作,适合作为进阶读物,但对初学者也有很好的照顾,看过绝对不后悔。 中文,高清PDF版本完整版(PS:之前下到个只有前三章的,还说要完整版要收费...
国内首部翻译的Windows phone 7 开发书籍! Nick Randolph,高手大作,适合作为进阶读物,但对初学 者也有很好的照顾,看过绝对不后悔。 中文,高清PDF版本完整版(PS:之前下到个只有前三章的,还说 要完整版要...
国内首部翻译的Windows phone 7 开发书籍! Nick Randolph,高手大作,适合作为进阶读物,但对初学者也有很好的照顾,看过绝对不后悔。 中文,高清PDF版本完整版(PS:之前下到个只有前三章的,还说要完整版要收费...
国内首部翻译的Windows phone 7 开发书籍! Nick Randolph,高手大作,适合作为进阶读物,但对初学 者也有很好的照顾,看过绝对不后悔。 中文,高清PDF版本完整版(PS:之前下到个只有前三章的,还说 要完整版要...
国内首部翻译的Windows phone 7 开发书籍! Nick Randolph,高手大作,适合作为进阶读物,但对初学 者也有很好的照顾,看过绝对不后悔。 中文,高清PDF版本完整版(PS:之前下到个只有前三章的,还说 要完整版要...
【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或...
【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或...
【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或...