1.从今天开始,我将和大家一起研究Win8 Runtime Api.首先 我们要做的是建立我们的导航架构,

　　利用此导航我们很方便的组织和管理我们各Api的程序.我的预想是这样的,在主界面(采用 项页模版)显示各Api的

　　分组,然后点击进去出现我们的Api页面(采用 拆分页 模版).效果图如下:

　　点击图片,进入如下页面:

　　选择Item Title 2,出现如下界面:

2.我们就开始一步一步做一个这样的导航.

　　a)打开VS2012,新建项目,选择 Windows Metro style,然后选择Split App(XAML)模版,

　　输入名称:Win8Api

　　如图:

　　之所以选择Split App(XAML)模版,因为VS会为我们生成一些东西,使我们快速开发.

b)打开新建的解决方案,由于我们要在SplitPage页显示我们点击项的内容,所以用到页面导航Frame,

　　Frame的Navigate方法需要传入要导航页面的类型,我们需要修改VS为我们DataSource.

c)修改我们的基础数据类

　　我们在SampleDataItem类的构造函数里加一个类型,然后把这个类型传给Frame,来实现页面间的导航.

　　修改后的SampleDataItem类如下:

/// 
    /// Generic item data model.    /// 
    public class SampleDataItem : SampleDataCommon    {        //此处增加一个类型参数，用于页面间的导航        public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group,Type classType)            : base(uniqueId, title, subtitle, imagePath, description)        {            this._content = content;            this._group = group;            ClassType = classType;        }        private string _content = string.Empty;        public string Content        {            get { return this._content; }            set { this.SetProperty(ref this._content, value); }        }        private SampleDataGroup _group;        public SampleDataGroup Group        {            get { return this._group; }            set { this.SetProperty(ref this._group, value); }        }        /// 
        /// 增加的类型        /// 
        public Type ClassType { get; set; }    }

 

d)修改我们的DataSource

　　删除SampleDataSource类为我们自动生成的数据,修改的SampleDataSource类如下:

/// 
    /// Creates a collection of groups and items with hard-coded content.    /// 
    public sealed class SampleDataSource    {        private static SampleDataSource _sampleDataSource = new SampleDataSource();        private ObservableCollection
      
        _allGroups = new ObservableCollection
       
        ();        public ObservableCollection
        
          AllGroups        {            get { return this._allGroups; }        }        public static IEnumerable
         
           GetGroups(string uniqueId)        {            if (!uniqueId.Equals("AllGroups")) throw new ArgumentException("Only 'AllGroups' is supported as a collection of groups");                        return _sampleDataSource.AllGroups;        }        public static SampleDataGroup GetGroup(string uniqueId)        {            // Simple linear search is acceptable for small data sets            var matches = _sampleDataSource.AllGroups.Where((group) => group.UniqueId.Equals(uniqueId));            if (matches.Count() == 1) return matches.First();            return null;        }        public static SampleDataItem GetItem(string uniqueId)        {            // Simple linear search is acceptable for small data sets            var matches = _sampleDataSource.AllGroups.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId));            if (matches.Count() == 1) return matches.First();            return null;        }        public SampleDataSource()        {            String ITEM_CONTENT = String.Format("Item Content: {0}\n\n{0}\n\n{0}\n\n{0}\n\n{0}\n\n{0}\n\n{0}",                        "Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat");            var group1 = new SampleDataGroup("FileAccess",                    "Access File And Save File",                    "File Test",                    "Assets/FileAccess.jpg",                    "");            group1.Items.Add(new SampleDataItem("FileAccess-PickASinglePhoto",                    "Pick a single photo",                    "only one file can selected",                    "Assets/FileAccess.jpg",                    "only one file can selected ",                    "FileAccess.PickASinglePhoto",                    group1,                    typeof(PickASinglePhoto)));            group1.Items.Add(new SampleDataItem("Group-1-Item-2",                    "Item Title: 2",                    "Item Subtitle: 2",                    "Assets/FileAccess.jpg",                    "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",                    ITEM_CONTENT,                    group1,                    typeof(PickMultipleFiles)));            //group1.Items.Add(new SampleDataItem("Group-1-Item-3",            //        "Item Title: 3",            //        "Item Subtitle: 3",            //        "Assets/logo.jpg",            //        "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",            //        ITEM_CONTENT,            //        group1));            //group1.Items.Add(new SampleDataItem("Group-1-Item-4",            //        "Item Title: 4",            //        "Item Subtitle: 4",            //        "Assets/logo.jpg",            //        "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",            //        ITEM_CONTENT,            //        group1));            //group1.Items.Add(new SampleDataItem("Group-1-Item-5",            //        "Item Title: 5",            //        "Item Subtitle: 5",            //        "Assets/logo.jpg",            //        "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",            //        ITEM_CONTENT,            //        group1));            this.AllGroups.Add(group1);                  }    }
         
        
       
      

 

e)数据源准备好了,为了界面的美观,我们去修改SplitPage.xaml页面

　　修改 名为itemListView 的ListView的ItemTemplate为StandardSmallIcon300x70ItemTemplate,

　　修改后的代码如下:

 

　　删除名为itemDetail的ScrollViewer控件里的内容,增加一个Border和一个名为LayoutRoot的Grid,

　　我们将在此Grid中导航到其它页面.

　　修改后的ScrollViewer代码如下:

 

f)SplitPage.xaml页面修改完毕,整体代码:

 

g)添加Frame

　　右击项目Win8Api,选择 "添加"-"类",如图:

　　修改我们新添加的SplitPage类使之成为分部类,在此类中用代码创建一个Frame,和Frame导航的方法用于页面间的导航,

　　SplitPage类代码如下:

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using Windows.UI.Xaml.Controls;namespace Win8Api{    /// 
    /// 创建此分布类是为了方便添加自定义的方法，这样使我们的代码可读性高    /// 
    public sealed partial class SplitPage : Win8Api.Common.LayoutAwarePage    {        /// 
        /// 创建一个Frame，实例化在SplitPage的构造函数内        /// 
        private Frame ContentFrame = null;        /// 
        /// Frame进行导航的方法        /// 
        /// 要导航到页面的类型        public void LoadFrame(Type classType)        {            ContentFrame.Navigate(classType, this);        }    }}

 

h)修改我们的SplitPage类的构造函数:

public SplitPage()        {            this.InitializeComponent();            //实例化Frame            ContentFrame = new Windows.UI.Xaml.Controls.Frame();            //将Frame添加到Grid中            LayoutRoot.Children.Add(ContentFrame);        }

 

g)修改我们的ListView的SelectionChanged事件,使选项发生改变时,Frame导航到相应的页面

　　代码如下:

/// 
        /// 在选定列表中的项时进行调用。        /// 
        /// 显示所单击项的 GridView (在应用程序处于对齐状态时        /// 的 ListView)。        /// 描述如何更改选择内容的事件数据。        void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)        {            // 使视图状态在逻辑页导航起作用时无效，因为            // 选择内容方面的更改可能会导致当前逻辑页发生相应的更改。            // 选定某项后，这将会导致从显示项列表            // 更改为显示选定项的详细信息。清除选择时，将产生            // 相反的效果。            if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();            //获取选中项            SampleDataItem item = e.AddedItems[0] as SampleDataItem;            if (item!=null)            {                //导航页面                LoadFrame(item.ClassType);            }                   }

 

h)修改我们的程序名称

　　打开 App.xaml,修改成如下代码:

          
               
                    
                         
                          
                      
                     
                     
         
          Win8Api--Refactor
                 
            
       
      

 

i)至此,我们的导航架构已做好,下一遍我们将在里面填页面,开始我们的Win8Api.

未完待续,敬请期待...

转载请注明出处:http://www.cnblogs.com/refactor/