摘要：
问题：如何使用ListBox进行图文混编我的理解：实际就是对ListBox进行数据绑定（添加数据模板），然后动态添加行（ListItem）示例：前置条件：1) XAML基础2) C#基础3) WP7基础 -˃listbox使用基本知识 -˃工程创建实现：目录：1) 创建一个基本应用2) 插入button及listbox控件3) 给listbox添加Item模板4) 创建Conte
问题：如何使用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 usingSystem; 2 usingSystem.Net; 3 usingSystem.ComponentModel; 4 usingSystem.Runtime.Serialization; 5 usingSystem.Collections.ObjectModel; 6 7 namespacePhoneApp1 8 { 9 public classContent 10 { 11 private stringtime; 12 private stringcount; 13 private stringimg; 14 15 public stringTime 16 { 17 get { returntime; } 18 set 19 { 20 if (time !=value) 21 time =value; 22 NotifyPropertyChanged("Time"); 23 } 24 } 25 26 public stringCount 27 { 28 get { returncount; } 29 set 30 { 31 if (count !=value) 32 count =value; 33 NotifyPropertyChanged("Count"); 34 } 35 } 36 37 public stringImg 38 { 39 get { returnimg; } 40 set 41 { 42 if (img !=value) 43 img =value; 44 NotifyPropertyChanged("Img"); 45 } 46 } 47 48 public eventPropertyChangedEventHandler PropertyChanged; 49 private void NotifyPropertyChanged(stringinfo) 50 { 51 if (PropertyChanged != null) 52 { 53 PropertyChanged(this, newPropertyChangedEventArgs(info)); 54 } 55 } 56 } 57 }
注：其中NotifyPropertyChanged("Img")中的“Img”对应的就是在界面中Source="{Binding Img}"中的Img
2) 然后新建一个ContentCollection类
1 usingSystem; 2 usingSystem.Net; 3 usingSystem.ComponentModel; 4 usingSystem.Runtime.Serialization; 5 usingSystem.Collections.ObjectModel; 6 7 namespacePhoneApp1 8 { 9 public class ContentCollection : ObservableCollection<Content> 10 { 11 publicContentCollection() 12 : base() 13 { 14 } 15 } 16 }
5 写入事件代码
1 public partial classMainPage : PhoneApplicationPage 2 { 3 ContentCollection mySource; 4 int count = 0; 5 //构造函数 6 publicMainPage() 7 { 8 InitializeComponent(); 9 mySource = newContentCollection(); 10 listBox1.ItemsSource =mySource; 11 } 12 13 private void button1_Click(objectsender, RoutedEventArgs e) 14 { 15 Content content = newContent(); 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使界面更新
