图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构

1.从今天开始,我将和大家一起研究Win8 Runtime Api.首先我们要做的是建立我们的导航架构,
　　利用此导航我们很方便的组织和管理我们各Api的程序.我的预想是这样的,在主界面(采用项页模版)显示各Api的
　　分组,然后点击进去出现我们的Api页面(采用拆分页模版).效果图如下:

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

图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构

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

图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构

2.我们就开始一步一步做一个这样的导航.
　　a)打开VS2012,新建项目,选择 Windows Metro style,然后选择Split App(XAML)模版,
　　输入名称:Win8Api
　　如图:

图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构

　　之所以选择Split App(XAML)模版,因为VS会为我们生成一些东西,使我们快速开发.
b)打开新建的解决方案,由于我们要在SplitPage页显示我们点击项的内容,所以用到页面导航Frame,
　　Frame的Navigate方法需要传入要导航页面的类型,我们需要修改VS为我们DataSource.
c)修改我们的基础数据类
　　我们在SampleDataItem类的构造函数里加一个类型,然后把这个类型传给Frame,来实现页面间的导航.
　　修改后的SampleDataItem类如下:

View Code

/// <summary>
/// Generic item data model.
/// </summary>
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); }
        }

/// <summary>
/// 增加的类型
/// </summary>
public Type ClassType { get; set; }
    }

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

View Code

/// <summary>
/// Creates a collection of groups and items with hard-coded content.
/// </summary>
public sealed class SampleDataSource
    {
private static SampleDataSource _sampleDataSource = new SampleDataSource();

private ObservableCollection<SampleDataGroup> _allGroups = new ObservableCollection<SampleDataGroup>();
public ObservableCollection<SampleDataGroup> AllGroups
        {
get { return this._allGroups; }
        }

public static IEnumerable<SampleDataGroup> 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,
　　修改后的代码如下:

View Code

<!-- 垂直滚动项列表-->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemsListView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.Row="1"
            Margin="-10,-10,0,0"
            Padding="60,0,0,60"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            IsSwipeEnabled="False"
            SelectionChanged="ItemListView_SelectionChanged"
            ItemTemplate="{StaticResource StandardSmallIcon300x70ItemTemplate}"/>

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

　　我们将在此Grid中导航到其它页面.
　　修改后的ScrollViewer代码如下:

View Code

      <!-- 选定项的详细信息-->
        <ScrollViewer
            x:Name="itemDetail"
            AutomationProperties.AutomationId="ItemDetailScrollViewer"
            Grid.Column="1"
            Padding="70,0,120,0"
            DataContext="{Binding SelectedItem, ElementName=itemListView}"
            d:DataContext="{Binding AllGroups[0].Items[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"
            Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">
            <Border  BorderBrush="AliceBlue" Padding="10,10,10,10" BorderThickness="2">
                <Grid x:Name="LayoutRoot"></Grid>
            </Border>
        </ScrollViewer>

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

View Code

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Win8Api.SplitPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Win8Api"
    xmlns:data="using:Win8Api.Data"
    xmlns:common="using:Win8Api.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- 此页所显示的项集合-->
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"
            d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>

    <!--
        此网格用作定义以下两行的页的根面板:
* 第 0 行包含后退按钮和页标题
* 第 1 行包含页布局的其余部分
-->
    <Grid 
        Style="{StaticResource LayoutRootStyle}"
        DataContext="{Binding Group}"
        d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="primaryColumn" Width="400"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 后退按钮和页标题-->
        <Grid x:Name="titlePanel" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button
                x:Name="backButton"
                Click="GoBack"
                IsEnabled="{Binding DefaultViewModel.CanGoBack, ElementName=pageRoot}"
                Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" HorizontalAlignment="Left" Margin="0,0,0,40" />
        </Grid>

        <!-- 垂直滚动项列表-->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemsListView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.Row="1"
            Margin="-10,-10,0,0"
            Padding="60,0,0,60"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            IsSwipeEnabled="False"
            SelectionChanged="ItemListView_SelectionChanged"
            ItemTemplate="{StaticResource StandardSmallIcon300x70ItemTemplate}"/>

        <!-- 选定项的详细信息-->
        <ScrollViewer
            x:Name="itemDetail"
            AutomationProperties.AutomationId="ItemDetailScrollViewer"
            Grid.Column="1"
            Padding="70,0,120,0"
            DataContext="{Binding SelectedItem, ElementName=itemListView}"
            d:DataContext="{Binding AllGroups[0].Items[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"
            Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">
            <Border  BorderBrush="AliceBlue" Padding="10,10,10,10" BorderThickness="2">
                <Grid x:Name="LayoutRoot"></Grid>
            </Border>
        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>

            <!-- 视觉状态反映应用程序的视图状态-->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscapeOrWide"/>

                <!-- Filled 在较窄的列中使用更简单的列表格式-->
                <VisualState x:Name="FilledOrNarrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="420"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Standard80ItemTemplate}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="60,0,66,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    该页采用较窄的 100 像素页边距约定(纵向)，并且该页
                    最初隐藏详细信息以仅显示项列表
-->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="100,0,90,60"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                   如果在纵向视图中选定项，则详细信息显示需要更多大量的更改:
* 隐藏主列表，并且该列包含在其中
* 将项详细信息向下移一行，为标题留出空间
* 将标题移至详细信息的正上方
* 调整详细信息的页边距和填充
-->
                <VisualState x:Name="FullScreenPortrait_Detail">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="titlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="100,0,90,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    对齐后，后退按钮和标题的样式将有所不同，并且该页
                    最初隐藏详细信息以仅显示项列表
-->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="320"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Standard80ItemTemplate}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                   当在对齐状态下选定了某一项时，详细信息显示需要更多大量的更改:
* 隐藏主列表，并且该列包含在其中
* 将项详细信息下移一行，为标题留出空间
* 将标题移至详细信息的正上方
* 调整详细信息的页边距和填充
* 对标题和小标题使用不同的字体
* 调整小标题下的页边距
-->
                <VisualState x:Name="Snapped_Detail">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="titlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailTitlePanel" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailTitlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20,0,20,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TitleTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemTitle" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemSubtitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CaptionTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>

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

图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构

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

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Controls;

namespace Win8Api
{
/// <summary>
/// 创建此分布类是为了方便添加自定义的方法，这样使我们的代码可读性高
/// </summary>
public sealed partial class SplitPage : Win8Api.Common.LayoutAwarePage
    {
/// <summary>
/// 创建一个Frame，实例化在SplitPage的构造函数内
/// </summary>
private Frame ContentFrame = null;

/// <summary>
/// Frame进行导航的方法
/// </summary>
/// <param name="classType">要导航到页面的类型</param>
public void LoadFrame(Type classType)
        {
            ContentFrame.Navigate(classType, this);
        }
    }
}

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

View Code

        public SplitPage()
        {
this.InitializeComponent();

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

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

View Code

/// <summary>
/// 在选定列表中的项时进行调用。
/// </summary>
/// <param name="sender">显示所单击项的 GridView (在应用程序处于对齐状态时
/// 的 ListView)。</param>
/// <param name="e">描述如何更改选择内容的事件数据。</param>
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,修改成如下代码:

View Code

<Application
    x:Class="Win8Api.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Win8Api"
    xmlns:localData="using:Win8Api.Data">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>

                <!-- 
                    用于定义平台外观的共同方面的样式
                    Visual Studio 项目和项模板所必需的
-->
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <!-- 应用程序特定的资源-->

            <x:String x:Key="AppName">Win8Api--Refactor</x:String>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

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

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

秒客网

图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构

相关文章