【WP7】数据绑定自动浏览器

本实例要求：Windows phone数据绑定

1、新建一个公共stu类

2、在系统正式启动时实例化5个以上数据对象

3、实现在页面上操作逐个显示数据

小伙操作：跟我一起来做一做吧！

1，创建wp7项目student

2，创建stu类，以及stu类的相应属性

stu类详细代码如下：

View Code

 1  public class Stu
 2     {
 3         public Uri pictureSource { get; set; }
 4         public string Name { get; set; }
 5         public int Age { get; set; }
 6         public string Sex { get; set; }
 7         public string Birthdate { get; set; }
 8         private string desc;
 9        
10         public string Desc
11         {
12             get
13             {
14                 return this.desc;
15             }
16             set
17             {
18                 this.desc = value;
19                 NotifyPropertyChanged("Desc");
20             }
21         }
22         // 定义PropertyChanged 事件
23         //PropertyChangedEventArgs类型，这个类用于传递更改值的属性的名称，
24         //实现向客户端已经更改的属性发送更改通知。属性的名称为字符串类型。
25         public event PropertyChangedEventHandler PropertyChanged;
26         public void NotifyPropertyChanged(string ChangedProperty)
27         {
28             if (PropertyChanged != null)
29             {
30                 this.PropertyChanged(this, new PropertyChangedEventArgs(ChangedProperty));
31             }
32 
33         }
34     }

3，在stu类中定义PropertyChanged 事件。实现对学生的描述

View Code

 1  // 定义PropertyChanged 事件
 2         //PropertyChangedEventArgs类型，这个类用于传递更改值的属性的名称，
 3         //实现向客户端已经更改的属性发送更改通知。属性的名称为字符串类型。
 4         public event PropertyChangedEventHandler PropertyChanged;
 5         public void NotifyPropertyChanged(string ChangedProperty)
 6         {
 7             if (PropertyChanged != null)
 8             {
 9                 this.PropertyChanged(this, new PropertyChangedEventArgs(ChangedProperty));
10             }
11         }

4，在前台进行布局，以及控件的绑定

student.xaml详细代码

View Code

 1  <Grid x:Name="showstudent" Grid.Row="1" Margin="12,0,12,12">
 2             <Grid.RowDefinitions>
 3                 <RowDefinition Height="97" />
 4                 <RowDefinition Height="300"/>
 5                 <RowDefinition Height="100"/>
 6                 <RowDefinition Height="100"/>
 7                 <RowDefinition Height="127*" />
 8             </Grid.RowDefinitions>
 9             <Grid.ColumnDefinitions>
10                 <ColumnDefinition Width="250"/>
11                 <ColumnDefinition Width="206*" />
12             </Grid.ColumnDefinitions>
13             <Image Grid.Row="1" Height="300" HorizontalAlignment="Left" Margin="9,0,0,0" Name="image1"   Source="{Binding pictureSource}" Stretch="Fill" VerticalAlignment="Top" Width="241"   />
14 
15             <TextBlock Height="33" Width="180" Name="txtBlkName" Canvas.Left="200" Canvas.Top="30"       Text="{Binding Path=Name}" Grid.Column="1" Margin="26,53,0,214" Grid.Row="1" />
16             <TextBlock Height="33" Width="180" Name="txtBlkAge" Canvas.Left="200" Canvas.Top="68"        Text="{Binding Path=Age}" Grid.Column="1" Margin="26,111,0,156" Grid.Row="1" />
17             <TextBlock Height="33" Width="180" Name="txtBlkSex" Canvas.Left="200" Canvas.Top="98"        Text="{Binding Path=Sex}" Grid.Column="1" Margin="20,175,6,92" Grid.Row="1" />
18             <TextBlock Height="33" Width="180" Name="txtBlkBirthdate" Canvas.Left="200" Canvas.Top="128" Text="{Binding Path=Birthdate}" Grid.Column="1" Margin="20,244,6,23" Grid.Row="1" />
19             <TextBox  Margin="0,0,0,0"  Height="60" FontSize="{StaticResource PhoneFontSizeSmall}"       Text="{Binding Path=Desc}" Grid.ColumnSpan="2"   Name="txtBoxDesc" Grid.Row="2"    Width="400"/>
20             <Button Content="" Grid.Column="1" Grid.Row="3" Height="72" HorizontalAlignment="Left" Margin="20,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click">
21                 <Button.Background>
22                     <ImageBrush ImageSource="/studnet;component/img/right.png" />
23                 </Button.Background>
24             </Button>
25             <Button Content="" Height="72" HorizontalAlignment="Left" Margin="55,0,0,0" Name="button2" VerticalAlignment="Top" Width="160" Grid.Row="3" Click="button2_Click">
26                 <Button.Background>
27                     <ImageBrush ImageSource="/studnet;component/img/left.png" />
28                 </Button.Background>
29             </Button>
30         </Grid>
31         <Grid.Background>
32             <RadialGradientBrush>
33                 <GradientStop Color="Black" Offset="0.041" />
34                 <GradientStop Color="#FFA75E5E" Offset="1" />
35                 <GradientStop Color="#FF2D1919" Offset="0" />
36                 <GradientStop Color="#FF160C0C" Offset="0.145" />
37                 <GradientStop Color="#FF160C0C" Offset="0.169" />
38             </RadialGradientBrush>
39         </Grid.Background>
40     </Grid>

数据绑定：

5，后台对数据的创建，以及对上下页的实现

student.xaml.cs详细代码如下：

View Code

  1  public partial class MainPage : PhoneApplicationPage
  2     {
  3         // 构造函数
  4         public MainPage()
  5         {
  6             InitializeComponent();
  7             this.createdata();
  8         }
  9         //定义数据对象
 10         public Stu xiaohong;
 11         public Stu xiaomei;
 12         public Stu xiaoli;
 13         public Stu xiaoming;
 14         public Stu xiaohua;
 15         public Stu xiaogang;
 16         //实例化具体对象
 17         public void createdata()
 18         {
 19             xiaohong = new Stu
 20             {
 21                 pictureSource = new Uri("/studnet;component/img/1.jpg", UriKind.Relative),
 22                 Name = "小红",
 23                 Sex = "女",
 24                 Age = 22,
 25                 Birthdate = "1989/7/13",
 26 
 27                 Desc = "青春美少女1"
 28             };
 29             xiaomei = new Stu
 30             {
 31                 pictureSource = new Uri("/studnet;component/img/2.jpg", UriKind.Relative),
 32                 Name = "小美",
 33                 Sex = "女",
 34                 Age = 22,
 35                 Birthdate = "1989/7/13",
 36 
 37                 Desc = "青春美少女2"
 38             };
 39             xiaoli = new Stu
 40             {
 41                 pictureSource = new Uri("/studnet;component/img/3.jpg", UriKind.Relative),
 42                 Name = "小丽",
 43                 Sex = "女",
 44                 Age = 22,
 45                 Birthdate = "1989/7/13",
 46 
 47                 Desc = "青春美少女3"
 48             };
 49 
 50             xiaoming = new Stu
 51             {
 52                 pictureSource = new Uri("/studnet;component/img/4.jpg", UriKind.Relative),
 53                 Name = "小明",
 54                 Sex = "男",
 55                 Age = 23,
 56                 Birthdate = "1988/12/23",
 57 
 58                 Desc = "班长：组织安排班级工作"
 59 
 60             };
 61             xiaohua = new Stu
 62             {
 63                 pictureSource = new Uri("/studnet;component/img/5.jpg", UriKind.Relative),
 64                 Name = "小华",
 65                 Sex = "男",
 66                 Age = 23,
 67                 Birthdate = "1988/12/23",
 68 
 69                 Desc = "劳动委员：爱劳动。"
 70 
 71             };
 72             xiaogang = new Stu
 73             {
 74                 pictureSource = new Uri("/studnet;component/img/6.jpg", UriKind.Relative),
 75                 Name = "小刚",
 76                 Sex = "男",
 77                 Age = 23,
 78                 Birthdate = "1988/12/23",
 79                 Desc = "技术哥：编程牛X"
 80             };
 81            
 82         }
 83 
 84         //实现下一条信息逐条显示
 85         static int i = 0;
 86         private void button1_Click(object sender, RoutedEventArgs e)
 87         {  
 88             List<Stu> li = new List<Stu>() { };//泛型化实现对象添加
 89             li.Add(xiaohong);
 90             li.Add(xiaomei);
 91             li.Add(xiaoli);
 92             li.Add(xiaoming);
 93             li.Add(xiaohua);
 94             li.Add(xiaogang);
 95             if (i < 6)
 96             {
 97                 this.showstudent.DataContext = li[i];//根据下标选择对象，showstudent是grid的name
 98             }
 99             else 
100             {
101                 i = 0;
102                 this.showstudent.DataContext = li[i];//实现最后一条信息后回滚
103             }
104             i++;
105            
106         }
107         //实现上一条信息逐条显示
108         static int n=5;
109         private void button2_Click(object sender, RoutedEventArgs e)
110         {
111             List<Stu> li = new List<Stu>() { };
112             li.Add(xiaohong);
113             li.Add(xiaomei);
114             li.Add(xiaoli);
115             li.Add(xiaoming);
116             li.Add(xiaohua);
117             li.Add(xiaogang);
118             if (n >-1)
119             {
120                 this.showstudent.DataContext = li[n];//根据下标选择对象，showstudent是grid的name
121             }
122             else
123             {
124                 n =5;
125                 this.showstudent.DataContext = li[n];//实现首条信息后回滚
126             }
127             n--;
128         }
129     }

5.1创建数据

View Code

 1   //定义数据对象
 2         public Stu xiaohong;
 3         public Stu xiaomei;
 4         public Stu xiaoli;
 5         public Stu xiaoming;
 6         public Stu xiaohua;
 7         public Stu xiaogang;
 8         //实例化具体对象
 9         public void createdata()
10         {
11             xiaohong = new Stu
12             {
13                 pictureSource = new Uri("/studnet;component/img/1.jpg", UriKind.Relative),
14                 Name = "小红",
15                 Sex = "女",
16                 Age = 22,
17                 Birthdate = "1989/7/13",
18 
19                 Desc = "青春美少女1"
20             };
21             xiaomei = new Stu
22             {
23                 pictureSource = new Uri("/studnet;component/img/2.jpg", UriKind.Relative),
24                 Name = "小美",
25                 Sex = "女",
26                 Age = 22,
27                 Birthdate = "1989/7/13",
28 
29                 Desc = "青春美少女2"
30             };
31             xiaoli = new Stu
32             {
33                 pictureSource = new Uri("/studnet;component/img/3.jpg", UriKind.Relative),
34                 Name = "小丽",
35                 Sex = "女",
36                 Age = 22,
37                 Birthdate = "1989/7/13",
38 
39                 Desc = "青春美少女3"
40             };
41 
42             xiaoming = new Stu
43             {
44                 pictureSource = new Uri("/studnet;component/img/4.jpg", UriKind.Relative),
45                 Name = "小明",
46                 Sex = "男",
47                 Age = 23,
48                 Birthdate = "1988/12/23",
49 
50                 Desc = "班长：组织安排班级工作"
51 
52             };
53             xiaohua = new Stu
54             {
55                 pictureSource = new Uri("/studnet;component/img/5.jpg", UriKind.Relative),
56                 Name = "小华",
57                 Sex = "男",
58                 Age = 23,
59                 Birthdate = "1988/12/23",
60 
61                 Desc = "劳动委员：爱劳动。"
62 
63             };
64             xiaogang = new Stu
65             {
66                 pictureSource = new Uri("/studnet;component/img/6.jpg", UriKind.Relative),
67                 Name = "小刚",
68                 Sex = "男",
69                 Age = 23,
70                 Birthdate = "1988/12/23",
71                 Desc = "技术哥：编程牛X"
72             };
73            
74         }

5.2实现下一条信息

View Code

 1  //实现下一条信息逐条显示
 2         static int i = 0;
 3         private void button1_Click(object sender, RoutedEventArgs e)
 4         {  
 5             List<Stu> li = new List<Stu>() { };//泛型化实现对象添加
 6             li.Add(xiaohong);
 7             li.Add(xiaomei);
 8             li.Add(xiaoli);
 9             li.Add(xiaoming);
10             li.Add(xiaohua);
11             li.Add(xiaogang);
12             if (i < 6)
13             {
14                 this.showstudent.DataContext = li[i];//根据下标选择对象，showstudent是grid的name
15             }
16             else 
17             {
18                 i = 0;
19                 this.showstudent.DataContext = li[i];//实现最后一条信息后回滚
20             }
21             i++;
22            
23         }

5.3实现上一条信息

View Code

 1  //实现上一条信息逐条显示
 2         static int n=5;
 3         private void button2_Click(object sender, RoutedEventArgs e)
 4         {
 5             List<Stu> li = new List<Stu>() { };
 6             li.Add(xiaohong);
 7             li.Add(xiaomei);
 8             li.Add(xiaoli);
 9             li.Add(xiaoming);
10             li.Add(xiaohua);
11             li.Add(xiaogang);
12             if (n >-1)
13             {
14                 this.showstudent.DataContext = li[n];//根据下标选择对象，showstudent是grid的name
15             }
16             else
17             {
18                 n =5;
19                 this.showstudent.DataContext = li[n];//实现首条信息后回滚
20             }
21             n--;
22         }

运行结果：

首页：

下一条：