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

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

1、新建一个公共stu类

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

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

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

1，创建wp7项目student

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

stu类详细代码如下：

 public class Stu
    {
        public Uri pictureSource { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Sex { get; set; }
        public string Birthdate { get; set; }
        private string desc;
       
        public string Desc
        {
            get
            {
                return this.desc;
            }
            set
            {
                this.desc = value;
                NotifyPropertyChanged("Desc");
            }
        }
        // 定义PropertyChanged 事件
        //PropertyChangedEventArgs类型，这个类用于传递更改值的属性的名称，
        //实现向客户端已经更改的属性发送更改通知。属性的名称为字符串类型。
        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string ChangedProperty)
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(ChangedProperty));
            }

        }
    }

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

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

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

student.xaml详细代码

 <Grid x:Name="showstudent" Grid.Row="1" Margin="12,0,12,12">
            <Grid.RowDefinitions>
                <RowDefinition Height="97" />
                <RowDefinition Height="300"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="127*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250"/>
                <ColumnDefinition Width="206*" />
            </Grid.ColumnDefinitions>
            <Image Grid.Row="1" Height="300" HorizontalAlignment="Left" Margin="9,0,0,0" Name="image1"   Source="{Binding pictureSource}" Stretch="Fill" VerticalAlignment="Top" Width="241"   />

            <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" />
            <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" />
            <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" />
            <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" />
            <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"/>
            <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">
                <Button.Background>
                    <ImageBrush ImageSource="/studnet;component/img/right.png" />
                </Button.Background>
            </Button>
            <Button Content="" Height="72" HorizontalAlignment="Left" Margin="55,0,0,0" Name="button2" VerticalAlignment="Top" Width="160" Grid.Row="3" Click="button2_Click">
                <Button.Background>
                    <ImageBrush ImageSource="/studnet;component/img/left.png" />
                </Button.Background>
            </Button>
        </Grid>
        <Grid.Background>
            <RadialGradientBrush>
                <GradientStop Color="Black" Offset="0.041" />
                <GradientStop Color="#FFA75E5E" Offset="1" />
                <GradientStop Color="#FF2D1919" Offset="0" />
                <GradientStop Color="#FF160C0C" Offset="0.145" />
                <GradientStop Color="#FF160C0C" Offset="0.169" />
            </RadialGradientBrush>
        </Grid.Background>
    </Grid>

数据绑定：

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

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

 public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            this.createdata();
        }
        //定义数据对象
        public Stu xiaohong;
        public Stu xiaomei;
        public Stu xiaoli;
        public Stu xiaoming;
        public Stu xiaohua;
        public Stu xiaogang;
        //实例化具体对象
        public void createdata()
        {
            xiaohong = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/1.jpg", UriKind.Relative),
                Name = "小红",
                Sex = "女",
                Age = 22,
                Birthdate = "1989/7/13",

                Desc = "青春美少女1"
            };
            xiaomei = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/2.jpg", UriKind.Relative),
                Name = "小美",
                Sex = "女",
                Age = 22,
                Birthdate = "1989/7/13",

                Desc = "青春美少女2"
            };
            xiaoli = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/3.jpg", UriKind.Relative),
                Name = "小丽",
                Sex = "女",
                Age = 22,
                Birthdate = "1989/7/13",

                Desc = "青春美少女3"
            };

            xiaoming = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/4.jpg", UriKind.Relative),
                Name = "小明",
                Sex = "男",
                Age = 23,
                Birthdate = "1988/12/23",

                Desc = "班长：组织安排班级工作"

            };
            xiaohua = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/5.jpg", UriKind.Relative),
                Name = "小华",
                Sex = "男",
                Age = 23,
                Birthdate = "1988/12/23",

                Desc = "劳动委员：爱劳动。"

            };
            xiaogang = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/6.jpg", UriKind.Relative),
                Name = "小刚",
                Sex = "男",
                Age = 23,
                Birthdate = "1988/12/23",
                Desc = "技术哥：编程牛X"
            };
           
        }

        //实现下一条信息逐条显示
        static int i = 0;
        private void button1_Click(object sender, RoutedEventArgs e)
        {  
            List<Stu> li = new List<Stu>() { };//泛型化实现对象添加
            li.Add(xiaohong);
            li.Add(xiaomei);
            li.Add(xiaoli);
            li.Add(xiaoming);
            li.Add(xiaohua);
            li.Add(xiaogang);
            if (i < 6)
            {
                this.showstudent.DataContext = li[i];//根据下标选择对象，showstudent是grid的name
            }
            else 
            {
                i = 0;
                this.showstudent.DataContext = li[i];//实现最后一条信息后回滚
            }
            i++;
           
        }
        //实现上一条信息逐条显示
        static int n=5;
        private void button2_Click(object sender, RoutedEventArgs e)
        {
            List<Stu> li = new List<Stu>() { };
            li.Add(xiaohong);
            li.Add(xiaomei);
            li.Add(xiaoli);
            li.Add(xiaoming);
            li.Add(xiaohua);
            li.Add(xiaogang);
            if (n >-1)
            {
                this.showstudent.DataContext = li[n];//根据下标选择对象，showstudent是grid的name
            }
            else
            {
                n =5;
                this.showstudent.DataContext = li[n];//实现首条信息后回滚
            }
            n--;
        }
    }

5.1创建数据

  //定义数据对象
        public Stu xiaohong;
        public Stu xiaomei;
        public Stu xiaoli;
        public Stu xiaoming;
        public Stu xiaohua;
        public Stu xiaogang;
        //实例化具体对象
        public void createdata()
        {
            xiaohong = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/1.jpg", UriKind.Relative),
                Name = "小红",
                Sex = "女",
                Age = 22,
                Birthdate = "1989/7/13",

                Desc = "青春美少女1"
            };
            xiaomei = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/2.jpg", UriKind.Relative),
                Name = "小美",
                Sex = "女",
                Age = 22,
                Birthdate = "1989/7/13",

                Desc = "青春美少女2"
            };
            xiaoli = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/3.jpg", UriKind.Relative),
                Name = "小丽",
                Sex = "女",
                Age = 22,
                Birthdate = "1989/7/13",

                Desc = "青春美少女3"
            };

            xiaoming = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/4.jpg", UriKind.Relative),
                Name = "小明",
                Sex = "男",
                Age = 23,
                Birthdate = "1988/12/23",

                Desc = "班长：组织安排班级工作"

            };
            xiaohua = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/5.jpg", UriKind.Relative),
                Name = "小华",
                Sex = "男",
                Age = 23,
                Birthdate = "1988/12/23",

                Desc = "劳动委员：爱劳动。"

            };
            xiaogang = new Stu
            {
                pictureSource = new Uri("/studnet;component/img/6.jpg", UriKind.Relative),
                Name = "小刚",
                Sex = "男",
                Age = 23,
                Birthdate = "1988/12/23",
                Desc = "技术哥：编程牛X"
            };
           
        }

5.2实现下一条信息

 //实现下一条信息逐条显示
        static int i = 0;
        private void button1_Click(object sender, RoutedEventArgs e)
        {  
            List<Stu> li = new List<Stu>() { };//泛型化实现对象添加
            li.Add(xiaohong);
            li.Add(xiaomei);
            li.Add(xiaoli);
            li.Add(xiaoming);
            li.Add(xiaohua);
            li.Add(xiaogang);
            if (i < 6)
            {
                this.showstudent.DataContext = li[i];//根据下标选择对象，showstudent是grid的name
            }
            else 
            {
                i = 0;
                this.showstudent.DataContext = li[i];//实现最后一条信息后回滚
            }
            i++;
           
        }

5.3实现上一条信息

 //实现上一条信息逐条显示
        static int n=5;
        private void button2_Click(object sender, RoutedEventArgs e)
        {
            List<Stu> li = new List<Stu>() { };
            li.Add(xiaohong);
            li.Add(xiaomei);
            li.Add(xiaoli);
            li.Add(xiaoming);
            li.Add(xiaohua);
            li.Add(xiaogang);
            if (n >-1)
            {
                this.showstudent.DataContext = li[n];//根据下标选择对象，showstudent是grid的name
            }
            else
            {
                n =5;
                this.showstudent.DataContext = li[n];//实现首条信息后回滚
            }
            n--;
        }

运行结果：

首页：

下一条：

下一条：

下一条：