uwp界面自适应与数据绑定

资源

项目代码
项目演示视频

功能和要求

界面设计

参考后面的截图，要求用到Grid(RowDefinitions、ColumnDefinitions)、 ScrollViewer、 StackPanel、BottomAppBar、RelativePannel、Image、TextBlock、DatePicker、APPBarButton。
自适应效果：当窗口宽度小于800时，只显示原本在界面左侧的列表部分，底部导航栏只显示Add图标；窗口宽度大于800时显示完整界面。窗口宽度小于600时，列表项中的图片不显示。（第二周验收只要求在界面宽度发生改变时，界面整体始终居中）
两块界面的右侧均需有滚动条。

页面的导航与跳转

点击MainPage底部的“＋”按钮，跳转到NewPage；点击NewPage顶部的“←”按钮，跳转回MainPage。而在宽屏显示两块的情况下，点击“+”则无需跳转。窄屏状态下删除或添加后要跳回Mainpage界面。（第二周不要求宽屏情况）

页面内容

列表的每一项包括复选框、图片、文字（标题）。当复选框被勾选时有划掉的横线出现，取消勾选则横线消失。点击某一项，能跳转到详情页或者是宽屏状态下显示在右侧。详情页除了刚才的三个信息还有详情和日期，另有一个调节图片大小的滑块和两个按钮。

增删改

点击底部“+”或宽屏状态点击create新建，新建时检查Title、Description是否为空，DueDate是否正确（是否大于等于当前日期）。如果不正确，弹出对话框，显示错误信息。
在详情页点击update按钮可以修改信息。
新建中点击Cancel按钮，Title、Description置空，DueDate置为当前日期；修改中点击Cancel按钮，Title、Description、DueDate还原该清单项的详情数据。
选中一个清单项，点击底部删除图标可以删除该项。

主要解决问题

• 项目的误区
• 页面不同宽度自适应
• ListView数据绑定
• 不同页面跳转传值
• 本地文件的图片选择以及绑定

项目的误区

确定newpage和mainpage的关系，在宽屏的时候不是newpage和mainpage合成了一个新的page，而是mainpage自身就是一个复杂的页面，既包含mainpage原本的内容，也要加入newpage那一部分，所以newpage和mainpage中的newpage那一部分不是同一个部分。

页面不同宽度自适应

这个本来可以在blend for visual studio中点击就可以完成，但是不推荐这种方法，一般来说blend for visual studio提供的功能没有代码多。第二因为涉及到listview所以与一般的自适应有些许不同，mainpage左边的部分是listView部分，是与右边分开的，如果VisualStateManager是在mainpage外面写的，则会造成，listView内部的图片查不到，明明已经写了但是是查不到的，可能有用UserControl解决的方法，但是我没有试出来。如果是在listView内部写VisualStateManager，那么又控制不到mainpage右边的部分，所以最好的方法是两个都写，一个在listView外面，一个在listView里面。

在ListView外面写入如下代码，当宽度大于800时，grid2也就是右边页面可见

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="VisualState800">
                    <VisualState.Setters>
                        <Setter Target="grid2.(UIElement.Visibility)" Value="Visible"/>
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

在listView里面写入如下代码，当宽度在600和800之间，使得图片可见

<VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="VisualStateGroup">
              <VisualState x:Name="VisualState600">
                   <VisualState.Setters>
                         <Setter Target="Image.(UIElement.Visibility)" Value="Visible"/>
                    </VisualState.Setters>
                 <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                </VisualState.StateTriggers>
              </VisualState>
      </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

ListView数据绑定

文件结构

首先要新建文件夹Models，在里面新建c#文件ListItem.cs，再新建文件夹ViewModels，在里面新建c#文件ListItemViewModels.cs。项目采用mvvm模式，ListItem.cs主要是申明数据结构，ListItemViewModels.cs是ListItem这个类实例的集合，用来删除，更新，新建操作。

ListItem.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;
using Windows.UI.Xaml.Media.Imaging;

namespace first_project.Models
{
    public class ListItem : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public string id;

        public string title { get; set; }

        <