ListBox数据绑定、图文混编、动态添加行

问题：如何使用ListBox进行图文混编

　　我的理解：实际就是对ListBox进行数据绑定（添加数据模板），然后动态添加行（ListItem）

示例：

前置条件：

1)　　XAML基础

2)　　C#基础

3)　　WP7基础　　-> listbox使用基本知识　　->工程创建

实现：

目录：

1)　　创建一个基本应用

2)　　插入button及listbox控件

3)　　给listbox添加Item模板

4)　　创建Content及ContentCollection类

5)　　写入事件代码

6)　　测试运行

1 创建一个基本应用

1)　　创建一个基本的Windows Phone应用程序，OS版本7.0

2)　　清除多余的界面元素（留下一个基本的Grid控件）

1 <Grid x:Name="LayoutRoot" Background="Transparent">
2 
3 </Grid>

2 插入button及listbox控件

 1     <Grid x:Name="LayoutRoot" Background="Transparent">
 2         <Grid.RowDefinitions>
 3             <RowDefinition Height="72*" />
 4             <RowDefinition Height="696*" />
 5         </Grid.RowDefinitions>
 6         <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160"/>
 7         <ListBox Grid.Row="1"  Name="listBox1">
 8 
 9         </ListBox>
10     </Grid>

3 给listbox添加Item模板

1)　　添加一个Itme模板属性

 1 　　<Grid x:Name="LayoutRoot" Background="Transparent">
 2         <Grid.RowDefinitions>
 3             <RowDefinition Height="72*" />
 4             <RowDefinition Height="696*" />
 5         </Grid.RowDefinitions>
 6         <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
 7         <ListBox Grid.Row="1"  Name="listBox1">
 8             <ListBox.ItemTemplate>
 9                 <DataTemplate>
10  
11                 </DataTemplate>
12             </ListBox.ItemTemplate>
13         </ListBox>
14     </Grid>

2)　　给Itme模板添加样式

（注：Item模板的样式是看不到的，但是你可以将模板样式的代码放到新建页面中去看实际效果）

样式代码：

 1                     <Grid Width="455" Height="120">
 2                         <Grid.ColumnDefinitions>
 3                             <ColumnDefinition Width="Auto" />
 4                             <ColumnDefinition Width="Auto" />
 5                         </Grid.ColumnDefinitions>
 6                         <Image Grid.Column="0" Width="120" Height="120" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top"/>
 7                         <Grid Grid.Column="1" Name="grid1" >
 8                             <Grid.RowDefinitions>
 9                                 <RowDefinition Height="60*" />
10                                 <RowDefinition Height="60*" />
11                             </Grid.RowDefinitions>
12                             <TextBlock Height="30" HorizontalAlignment="Left" Name="textBlock1" VerticalAlignment="Top" Width="332" Text="123" />
13                             <TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock2" Text="234" VerticalAlignment="Top" Width="332" />
14                         </Grid>
15                     </Grid>

新建一个页面，添加该样式的代码，效果如下：

给模板添加样式后的代码：

 1 <Grid x:Name="LayoutRoot" Background="Transparent">
 2         <Grid.RowDefinitions>
 3             <RowDefinition Height="72*" />
 4             <RowDefinition Height="696*" />
 5         </Grid.RowDefinitions>
 6         <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
 7         <ListBox Grid.Row="1"  Name="listBox1">
 8             <ListBox.ItemTemplate>
 9                 <DataTemplate>
10                     <Grid Width="455" Height="120">
11                         <Grid.ColumnDefinitions>
12                             <ColumnDefinition Width="Auto" />
13                             <ColumnDefinition Width="Auto" />
14                         </Grid.ColumnDefinitions>
15                         <Image Grid.Column="0" Width="120" Height="120" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top"/>
16                         <Grid Grid.Column="1" Name="grid1" >
17                             <Grid.RowDefinitions>
18                                 <RowDefinition Height="60*" />
19                                 <RowDefinition Height="60*" />
20                             </Grid.RowDefinitions>
21                             <TextBlock Height="30" HorizontalAlignment="Left" Name="textBlock1" VerticalAlignment="Top" Width="332" Text="123" />
22                             <TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock2" Text="234" VerticalAlignment="Top" Width="332" />
23                         </Grid>
24                     </Grid>
25                 </DataTemplate>
26             </ListBox.ItemTemplate>
27         </ListBox>
28     </Grid>

3)　　为Image控件及TextBlock控件添加绑定数据源

为Image控件添加一个新属性source="{Binding Img}" 意思是Image的source属性绑定了Img这个量。（注：source可以是一个图片的网络地址，也可以是一个本地图片的地址）

修改TextBlock控件的Text属性分别为Text="{Binding Time}" 和 Text="{Binding Count}"，意思是这两个控件的text属性分别绑定了Time量和Count量。

最终界面代码如下

 1     <Grid x:Name="LayoutRoot" Background="Transparent">
 2         <Grid.RowDefinitions>
 3             <RowDefinition Height="72*" />
 4             <RowDefinition Height="696*" />
 5         </Grid.RowDefinitions>
 6         <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
 7         <ListBox Grid.Row="1"  Name="listBox1">
 8             <ListBox.ItemTemplate>
 9                 <DataTemplate>
10                     <Grid Width="455" Height="120">
11                         <Grid.ColumnDefinitions>
12                             <ColumnDefinition Width="Auto" />
13                             <ColumnDefinition Width="Auto" />
14                         </Grid.ColumnDefinitions>
15                         <Image Grid.Column="0" Width="120" Height="120" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Img}"/>
16                         <Grid Grid.Column="1" Name="grid1" >
17                             <Grid.RowDefinitions>
18                                 <RowDefinition Height="60*" />
19                                 <RowDefinition Height="60*" />
20                             </Grid.RowDefinitions>
21                             <TextBlock Height="30" HorizontalAlignment="Left" Name="textBlock1" VerticalAlignment="Top" Width="332" Text="{Binding Time}" />
22                             <TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock2" Text="{Binding Count}" VerticalAlignment="Top" Width="332" />
23                         </Grid>
24                     </Grid>
25                 </DataTemplate>
26             </ListBox.ItemTemplate>
27         </ListBox>
28     </Grid>

4 创建Content及ContentCollection类

1)　　在界面中，Item模板绑定了3个量Img、Time、Count，对应的我们新建一个Content类

 1 using System;
 2 using System.Net;
 3 using System.ComponentModel;
 4 using System.Runtime.Serialization;
 5 using System.Collections.ObjectModel;
 6 
 7 namespace PhoneApp1
 8 {
 9     public class Content
10     {
11         private string time;
12         private string count;
13         private string img;
14 
15         public string Time
16         {
17             get { return time; }
18             set
19             {
20                 if (time != value)
21                     time = value;
22                 NotifyPropertyChanged("Time");
23             }
24         }
25 
26         public string Count
27         {
28             get { return count; }
29             set
30             {
31                 if (count != value)
32                     count = value;
33                 NotifyPropertyChanged("Count");
34             }
35         }
36 
37         public string Img
38         {
39             get { return img; }
40             set
41             {
42                 if (img != value)
43                     img = value;
44                 NotifyPropertyChanged("Img");
45             }
46         }
47 
48         public event PropertyChangedEventHandler PropertyChanged;
49         private void NotifyPropertyChanged(string info)
50         {
51             if (PropertyChanged != null)
52             {
53                 PropertyChanged(this, new PropertyChangedEventArgs(info));
54             }
55         }
56     }
57 }

注：其中NotifyPropertyChanged("Img")中的“Img”对应的就是在界面中Source="{Binding Img}"中的Img

2)　　然后新建一个ContentCollection类

 1 using System;
 2 using System.Net;
 3 using System.ComponentModel;
 4 using System.Runtime.Serialization;
 5 using System.Collections.ObjectModel;
 6 
 7 namespace PhoneApp1
 8 {
 9     public class ContentCollection : ObservableCollection<Content>
10     {
11         public ContentCollection()
12             : base()
13         {
14         }
15     }
16 }

5 写入事件代码

 1     public partial class MainPage : PhoneApplicationPage
 2     {
 3         ContentCollection mySource;
 4         int count = 0;
 5         // 构造函数
 6         public MainPage()
 7         {
 8             InitializeComponent();
 9             mySource = new ContentCollection();
10             listBox1.ItemsSource = mySource;
11         }
12 
13         private void button1_Click(object sender, RoutedEventArgs e)
14         {
15             Content content = new Content();
16             content.Img = "http://pic.cnblogs.com/face/u97911.jpg";
17             content.Time = DateTime.Now.ToString();
18             content.Count = count.ToString();
19             count++;
20             mySource.Add(content);
21         }
22     }

6 测试运行

点击Add按钮若干次

说明：

　　listbox图文混编有几个要点：

　　　　1)　　设置其Item的样式

　　　　2)　　创建一个对应的实体数据Content

　　　　3)　　使用mySource使界面更新

posted @ 2012-11-02 15:30 布兰姥爷阅读(1864) 评论(1) 编辑收藏举报

布兰姥爷

WP7->界面->ListBox数据绑定、图文混编、动态添加行

公告