<win8>（二）实例讲解win8(XAML+C#)开发--------课程表：数据绑定

来源：互联网发布：对象转json忽略null 编辑：程序博客网时间：2024/05/22 03:07

免责声明：本文章由fengyun1989创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

　　首先，打开VS2012，然后新建一个工程，命名为TimeTable。

点击确定后，看到编译器如下地方：

现在空的工程也可以运行，选择Simulator就是模拟器运行，选择本地计算机就是直接在本机运行。现在就可以运行看看，就是黑屏。

在本机运行的话，如果想退出程序，可以把光标放到左上角，等待出现桌面缩略图就点击，这样就能退出了。

数据绑定

　　细想下这个工程，首先要做的是要把课程的数据显示出来，那么，就要用到数据绑定了。熟悉wp7和silverlight开发的朋友，接下来你就会发现，在win8（XAML+c#）开发当中，数据绑定是一样的。

　　首先，我们修改下我们的工程，新建一个命名为Resources.然后在文件夹右键--添加--新建项,选取资源字典。命名为：MyDictionary.xaml。添加一行画刷来作为背景。并且修改代码如下：

<ResourceDictionary    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TimeTable.Resources">    <SolidColorBrush Color="#3E790A" x:Key="AppBackgroundColor"/></ResourceDictionary>

现在打开App.xaml。添加对MyDicitonary.xaml的声明。修改如下：

<ResourceDictionary.MergedDictionaries>                <!--                     Styles that define common aspects of the platform look and feel                    Required by Visual Studio project and item templates                 -->                <ResourceDictionary Source="Common/StandardStyles.xaml"/>                <ResourceDictionary Source="Resources/MyDictionary.xaml"/>            </ResourceDictionary.MergedDictionaries>

现在修改MainPage.xaml的grid的背景。

<Grid Background="{StaticResource AppBackgroundColor}">

现在，就能看到背景色变为了深绿色。接下来就进行数据定义吧。我们的数据类都继承INotifyPropertyChanged接口，以便数据更新的时候能够自己通知控件更新。添加一个Data的文件夹。然后新建添加三个类，分别是ViewModel.cs,WeekdayItem.cs,ScheduleItem.cs .类图如下：

代码如下：

class ViewModel : INotifyPropertyChanged    {        private ObservableCollection<WeekdayItem> weekdayList;        public ObservableCollection<WeekdayItem> WeekdayList { get { return weekdayList; } }        private int selectedItemIndex;        public int SelectedItemIndex        {            get { return selectedItemIndex; }            set { selectedItemIndex = value; NotifyPropertyChanged("SelectedItemIndex"); }        }        public ViewModel()        {            weekdayList = new ObservableCollection<WeekdayItem>();            selectedItemIndex = -1;        }        public event PropertyChangedEventHandler PropertyChanged;        private void NotifyPropertyChanged(string propName)        {            if (PropertyChanged != null)            {                PropertyChanged(this, new PropertyChangedEventArgs(propName));            }        }    }

class WeekdayItem : INotifyPropertyChanged    {        private ObservableCollection<ScheduleItem> scheduleList;        private int scheduleSelected;        public int ScheduleSelected        {            get { return scheduleSelected; }            set { scheduleSelected = value; NotifyPropertyChanged("ScheduleSelected"); }        }        public ObservableCollection<ScheduleItem> ScheduleList        {            get { return scheduleList; }        }        public WeekdayItem()        {            scheduleList = new ObservableCollection<ScheduleItem>();            weekday = "Monday";        }        private string weekday;        public string Weekday        {            get { return weekday; }            set { weekday = value; NotifyPropertyChanged("WeekDay"); }        }        public event PropertyChangedEventHandler PropertyChanged;        private void NotifyPropertyChanged(string propName)        {            if (PropertyChanged != null)            {                PropertyChanged(this, new PropertyChangedEventArgs(propName));            }        }    }

class ScheduleItem : INotifyPropertyChanged    {        private string lessonName;        public string LessonName        {            get { return lessonName; }            set            {                lessonName = value;                NotifyPropertyChanged("LessonName");            }        }        private string startTime;        public string StartTime        {            get            {                return startTime;            }            set            {                startTime = value;                NotifyPropertyChanged("StartTme");            }        }        private string endTime;        public string EndTime        {            get { return endTime; }            set            {                endTime = value;                NotifyPropertyChanged("EndTime");            }        }        private string classRoom;        public string ClassRoom        {            get { return classRoom; }            set { classRoom = value; NotifyPropertyChanged("ClassRoom"); }        }        public event PropertyChangedEventHandler PropertyChanged;        private void NotifyPropertyChanged(string propName)        {            if (PropertyChanged != null)            {                PropertyChanged(this, new PropertyChangedEventArgs(propName));            }        }    }

上面的代码已经很清楚了。就不多说了。

下面进行数据绑定。首先，在MyDictionary.xaml的SolidColorBrush的下面添加下面一段代码：

<Style x:Key="WeekdayListStyle" TargetType="TextBlock" BasedOn="{Binding BasicTextStyle}" >        <Setter Property="FontSize" Value="45"/>        <Setter Property="FontWeight" Value="Light"/>        <Setter Property="Margin" Value="10,0"/>        <Setter Property="VerticalAlignment" Value="Center"/>    </Style>    <DataTemplate x:Key="WeekdayListItemTemplate">        <TextBlock Text="{Binding Weekday}" Style="{StaticResource WeekdayListStyle}"/>    </DataTemplate>

上面定义了一个数据模板，BasicTextStyle定义在Common/StandardStyles.xaml里面，这个文件里面定义了很多style。

下面修改MainPage的Grid。

<Grid Background="{StaticResource AppBackgroundColor}">        <Grid.ColumnDefinitions>            <ColumnDefinition />            <ColumnDefinition/>        </Grid.ColumnDefinitions>        <Grid.RowDefinitions>            <RowDefinition/>            <RowDefinition/>        </Grid.RowDefinitions>        <StackPanel Grid.RowSpan="2">            <TextBlock x:Name="WeekdayListTitle" Style="{StaticResource HeaderTextStyle}" Margin="10"                       Text="Weekday List"/>            <ListView x:Name="weekdayList"  Grid.RowSpan="2"                       ItemsSource="{Binding WeekdayList}"                      ItemTemplate="{StaticResource WeekdayListItemTemplate}" >            </ListView>        </StackPanel>        <StackPanel Orientation="Vertical" Grid.Column="1" Grid.RowSpan="2">            <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10" x:Name="ItemDetailTitle"                       Text="Schedule Detail"/>            <Frame x:Name="ItemDetailFrame"/>        </StackPanel>     </Grid>

上面定义的style除了自己定义的，基本都是在Common/StandardStyles.xaml里面。熟悉数据绑定的能在上面的代码看到熟悉的代码影吧。绑定了ListView的ItemsSource和ItemTemplate。下面的Frame标签以后再讲。

然后修改后台的构造函数和添加一个函数来往viewModel添加数据。

ViewModel viewModel;        public MainPage()        {            viewModel = new ViewModel();            addData();            this.DataContext = viewModel;            this.InitializeComponent();        }        /// <summary>        /// 往viewModel添加数据        /// </summary>        private void addData()        {            WeekdayItem monday = new WeekdayItem();            monday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-215",                StartTime = "8:30",                EndTime = "10:00",                LessonName = "Math"            });            monday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-216",                StartTime = "10:30",                EndTime = "12:00",                LessonName = "Physic"            });            monday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "E-303",                StartTime = "14:30",                EndTime = "16:00",                LessonName = "Computer"            });            monday.Weekday = "星期一";            viewModel.WeekdayList.Add(monday);            WeekdayItem tuesday = new WeekdayItem();            tuesday.Weekday = "星期二";            tuesday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-215",                StartTime = "8:30",                EndTime = "10:00",                LessonName = "Math"            });            tuesday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-216",                StartTime = "10:30",                EndTime = "12:00",                LessonName = "Physic"            });            tuesday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "E-303",                StartTime = "14:30",                EndTime = "16:00",                LessonName = "English"            });            viewModel.WeekdayList.Add(tuesday);            WeekdayItem wednesday = new WeekdayItem();            wednesday.Weekday = "星期三";            wednesday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-215",                StartTime = "8:30",                EndTime = "10:00",                LessonName = "数学"            });            wednesday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-216",                StartTime = "10:30",                EndTime = "12:00",                LessonName = "Physic"            });            wednesday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "E-303",                StartTime = "14:30",                EndTime = "16:00",                LessonName = "English"            });            viewModel.WeekdayList.Add(wednesday);            WeekdayItem thursday = new WeekdayItem();            thursday.Weekday = "星期四";            thursday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-215",                StartTime = "8:30",                EndTime = "10:00",                LessonName = "数学"            });            thursday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-216",                StartTime = "10:30",                EndTime = "12:00",                LessonName = "Physic"            });            thursday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "E-303",                StartTime = "14:30",                EndTime = "16:00",                LessonName = "English"            });            viewModel.WeekdayList.Add(thursday);            WeekdayItem friday = new WeekdayItem();            friday.Weekday = "星期五";            friday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-215",                StartTime = "8:30",                EndTime = "10:00",                LessonName = "数学"            });            friday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "B-216",                StartTime = "10:30",                EndTime = "12:00",                LessonName = "Physic"            });            friday.ScheduleList.Add(new ScheduleItem            {                ClassRoom = "E-303",                StartTime = "14:30",                EndTime = "16:00",                LessonName = "English"            });            viewModel.WeekdayList.Add(friday);        }

在构造函数，我们指定了当前页面的信息源DataContext为当前声明的viewModel。现在编译运行，就能看到运行结果如下：

　　下面我们要使用frame这个标签了。其实，每个页面都有这个Frame这个属性，这个Frame直接控制了导航，导航在Wp7里是用navigationService来完成的。不过可能是由于平板的屏幕大，所以用这个Frame标签就可以做到局部导航。使之可以所有操作都在一个页面完成。不过，如果开发者不实现导航返回按钮，win8平板就中间一个window键。如果能够返回上一层页面？至少我还没发现什么操作可以实现。

　　下面先给ListView添加一个SelectionChanged事件。当选项改变时触发。

        private void weekdayList_SelectionChanged_1(object sender, SelectionChangedEventArgs e)        {            viewModel.SelectedItemIndex = weekdayList.SelectedIndex;        }

只做了一件事，就是修改了viewModel的SelectedItemIndex的值。那么我们要注册一个PropertyChanged事件，监听当这个SelectedItemIndex改变的时候做相应的工作。

在Mainpage的构造函数最后添加：

viewModel.PropertyChanged += (sender, args) => {                if (args.PropertyName == "SelectedItemIndex")                {                    if (viewModel.SelectedItemIndex == -1)                    {                        ItemDetailFrame.Navigate(typeof(NoItemSelected));                    }                    else                    {                        ItemDetailFrame.Navigate(typeof(ItemDetail), viewModel);                    }                }            };

上面我们监听了SelectedItemIndex。当改变的时候使ItemDetailFrame这个Frame导航到不同的页面。这个navigate方法，由VS2012的智能提示就知道，可以带参数，也可以不带参数。

下面我们新建一个文件夹Pages。然后添加一个空页面NoItemSelected.xaml。修改代码如下：

<Grid Background="{StaticResource AppBackgroundColor}">        <TextBlock Style="{StaticResource HeaderTextStyle}"                   FontSize="30" Text="No Item Selected"/>    </Grid>

然后再添加一个空白页ItemDetail.xaml到Pages文件夹。修改代码如下：

<Grid Background="{StaticResource AppBackgroundColor}">        <ListView x:Name="ScheduleList" ItemsSource="{Binding ScheduleList}"                      IsHoldingEnabled="True"                     ItemTemplate="{StaticResource ScheduleListItemTemplate}"/>    </Grid>

然后修改ItemDetail页面的OnNavigateTo方法并添加一个变量。

ViewModel viewModel;

protected override void OnNavigatedTo(NavigationEventArgs e)        {            viewModel = e.Parameter as ViewModel;            this.DataContext = viewModel.WeekdayList[viewModel.SelectedItemIndex];            viewModel.PropertyChanged += (sender, args) =>            {                if (viewModel.SelectedItemIndex == -1)                {                    this.DataContext = null;                }                else                    this.DataContext = viewModel.WeekdayList[viewModel.SelectedItemIndex];            };        }

上面OnNavigateTo方法，在页面进入的时候，就获取页面传递过来的ViewModel这个数据。然后指定当前选择的Weekday为数据源。

上面我们还没定义ItemDetail页面ListView的数据模版。在MyDictionary.xaml添加如下模版：

<DataTemplate x:Key="ScheduleListItemTemplate">        <StackPanel Orientation="Vertical">            <TextBlock Text="{Binding LessonName}" FontSize="30"/>            <StackPanel Orientation="Horizontal">                <TextBlock Text="{Binding StartTime}" FontSize="18"/>                <TextBlock Text="-" FontSize="18"/>                <TextBlock Text="{Binding EndTime}" FontSize="18"/>            </StackPanel>            <TextBlock Text="{Binding ClassRoom}" FontSize="30"/>        </StackPanel>    </DataTemplate>

这样，编译运行，就能看到选择左边的WeekdayList就能改变右边的ItemDetail部分了。到此，数据绑定部分基本就这样吧。还有部分弹出窗口的数据绑定到后面再说。

继续学习：<win8>(三)实例讲解win8(XAML+C#)开发--------课程表:弹出菜单ContextMenu和弹窗Flyout

本次工程下载：http://dl.dbank.com/c0eh4b1z85