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));
}
}
}