拒绝访问 | www. | 百度云加速
请打开cookies.
此网站 (www.) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(c89ef-ua98).
重新安装浏览器，或使用别的浏览器语音交互面临挑战，思必驰用DUI平台实现人机对话
来源：齐鲁晚报日 20:00
思必驰DUI开放平台产品接入页面　　思必驰DUI平台惠及多方，能够为技能开发者提供开发技能、迭代优化的能力，为内容资源方提供内容接口，为产品厂商提供产品接入及内容支撑的服务。张顺在演讲中表示，不仅如此，可视化的数据开发平台，“云+端”的混合模式，能够让开发者实时掌控数据变动，依据产品用户需求，实时更新产品功能，用户可在第一时间感受最新技能，借此，思必驰通过C端及B端的应用变化，将进一步优化DUI开放平台，总体而言，这是一个多方共赢的趋势。　　现场，张顺展示了DUI平台开发技能中的对话控件，包括文字、图文卡片、列表、音乐播放、内嵌网页等，介绍了目前DUI平台的接口资源，覆盖交通出行、生活服务、影音视听、社交分享、新闻资讯、效率工具、商业财务等诸多资源及技能。　　张顺表示，DUI平台的可视化界面极大降低操作门槛;具备超高度定制性，几乎所有的模块均可自定义，例如GUI自定义、唤醒词定制、深度技能定制、对话逻辑和内容定制等，给开发者更多发挥和想象的空间，打造更具差异化和个性化的产品;同时“云+端”混合模式，支持云端实时更新，也提供本地唤醒、本地识别、本地技能开发等功能，保证在网络不佳甚至在无网状态下的可用性。可视化数据反馈报道、多版本管理等功能能够极大减轻开发者后期的运营压力。DUI开放平台能够快速推进AI语音技术的产品化。
相关新闻->->七巧玲珑：思必驰DUI开放平台快速定制AI语音freestyle
思必驰在对话工场云平台及AIOS对话操作系统的基础上，在经历了长达一年多的策划和模块化尝试之后， 2016年初，思必驰DUI平台项目正式启动，由VP赵恒艺全面负责，成立平台事业部，集结百余名优秀的研发人员进行了为期半年的封闭研发，DUI开放平台在日正式亮相首秀，开启系列内测沙龙，在深圳、北京、苏州等地举办开发者实战营活动。
8月19日，思必驰DUI开发者实战营苏州站开启，来自AI各领域的开发者、资深人士等齐聚独墅湖畔创意产业园，分享经验、实操体验，现场氛围十分火热。DUI开放平台现仍处于内测阶段，将于9月7日正式在京发布，全面开放。
图1 思必驰DUI开发者实战营(苏州站)现场
专注AI语音的持续创新力
近期，阿里智能音箱天猫精灵X1、小米AI音箱小爱同学、小米板牙智能后视镜、联想智能音箱、联想65i3智能电视等产品的发布，让思必驰语音受到了行业瞩目，这些产品均应用了思必驰语音交互技术，通过任务式对话，实现流畅的语音交互。思必驰领先的语音研发技术和转化应用能力受到了行业的认可。此前，思必驰首席科学家俞凯教授曾表示，思必驰是技术驱动型企业，拥有持续的大规模的创新型的技术研发能力作为支撑，这是思必驰的优势所在，将底层研究真正和产业问题深度绑定，会产生更大的价值。
现场，思必驰研发总监张顺对思必驰语音技术做了全面的阐述。
图2 思必驰研发总监张顺
张顺表示，思必驰在识别、远场、降噪、语义、合成、问答、对话等方面拥有核心技术优势，例如，通用模型识别率已达97%以上，其中VDCNN模型，在噪声环境语音识别的业界基准库Aurora4上，取得了7.09%的词错误率。相比于世界其他机构目前10%左右的最好结果，有一个大幅度的明显优势。远场交互技术突出表现在环形6麦阵列上，可实现5米远场交互，识别率达92%。实时交互无延迟、自定义唤醒、多场景覆盖等优势，让思必驰语音在车载、家居、机器人等智能硬件领域的市场占有率不断攀升。
图3 思必驰核心语音技术
伴随着语音应用的不断拓展，也暴露了一些应用的难点和挑战。张顺从感知智能、认知智能、工程开发三个角度出发，结合思必驰当前的业务布局与应用，分析了目前语音交互技术在实践中面临的挑战。张顺表示，这些问题可挑战是思必驰与客户共同打磨产品的过程中认识到的，思必驰将通过DUI平台开放核心技术，为厂商提供可超高度定制的语音技术，直面语音应用的挑战，快速赋能智能硬件。
DUI开放平台：自由定制，随心所欲
思必驰DUI开放平台是一站式对话定制开发平台，为物联网、移动互联网和互联网的开发者提供单项技术服务和完整的、超高度定制的智能对话交互解决方案。关注语音交互的每个环节，同步定制对话和语言模型，提供完全自主的一体化方案。
图4 思必驰产品经理张继峰
思必驰产品经理张继峰介绍到DUI是一个落地平台，旨在针对所有个人/企业级开发者在语音交互方面的痛点，快速实现语音技能的开发。开发者可基于产品用户定位和行业特性灵活配置技能，进行深度定制开发，从传统的有定制需求、找厂商、谈合作的长周期模式转向跨团队协作，实现所见即所得的开发过程，保存通过后配套即可实现测试。以语音交互为入口渗透AI生态，DUI技能商店是一个开放的生态。
现场，思必驰团队亲自示范如何创建技能，并邀请了现场20为开发者实战体验。
图5平台定制现场实操体验
在实战过程中，精巧、敏捷、轻量的玲珑系统作为终端接入解决方案，为DUI平台提供多种运行环境的支持，包括安卓、iOS等。技能开发，终端成果展示，可形成闭环，完整展示用户定制的成果。可视化数据系统则可采集和存储基础语音交互数据，进行分析和可视化处理，为DUI平台提供运营支撑和监控。此外，用户画像的参照维度，最终通过数据支撑决策，推进平台落地真正为用户服务。
此外，接口资源是DUI平台的重要部分，可为开发者提供接口资源信息查询和展示，以及快速查找，同时，为接口资源提供方、DUI平台、平台开发者以及终端用户四种角色，构建良性生态。
9月7日思必驰DUI平台发布会蓄势待发
据现场介绍，思必驰DUI开放平台将于9月7日在北京正式发布(详情请关注微信公众号“思必驰对话工场”)，而此次苏州站实战营也是该平台正式发前的最后一期实战营。发布会上，思必驰将全面曝光DUI平台四大系统及最新战略合作动态，思必驰CEO高始兴、首席科学家俞凯，以及来自互联网巨头、知名AI企业、权威学会的领袖们将共同出席大会，探讨人工智能的未来。
语音为人机交互带来了全新的变革，思必驰DUI平台开放核心语音技术，全面拥抱AI，快速赋能智能硬件及传统行业，我们期待AI语音的飞跃发展，其应用与落地，必将谱写AI时代的全新的变革与进步。图解使用Win8Api进行Metro风格的程序开发一----建立我们的导航架构 - refactor - 博客园
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类如下:
/// &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 =
this._group =
ClassType = classT
private string _content = string.E
public string Content
get { return this._ }
set { this.SetProperty(ref this._content, value); }
private SampleDataGroup _
public SampleDataGroup Group
get { return this._ }
set { this.SetProperty(ref this._group, value); }
/// &summary&
/// 增加的类型
/// &/summary&
public Type ClassType { get; set; }
d)修改我们的DataSource　　删除SampleDataSource类为我们自动生成的数据,修改的SampleDataSource类如下:
/// &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._allG }
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.AllG
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",
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,
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.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.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,
this.AllGroups.Add(group1);
e)数据源准备好了,为了界面的美观,我们去修改SplitPage.xaml页面　　修改 名为itemListView 的ListView的ItemTemplate为StandardSmallIcon300x70ItemTemplate,　　修改后的代码如下:
&!-- 垂直滚动项列表--&
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代码如下:
&!-- 选定项的详细信息--&
&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"&
BorderBrush="AliceBlue" Padding="10,10,10,10" BorderThickness="2"&
&Grid x:Name="LayoutRoot"&&/Grid&
&/ScrollViewer&
f)SplitPage.xaml页面修改完毕,整体代码:
&common:LayoutAwarePage
x:Name="pageRoot"
x:Class="Win8Api.SplitPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:local="using:Win8Api"
xmlns:data="using:Win8Api.Data"
xmlns:common="mon"
xmlns:d="/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 行包含页布局的其余部分
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&
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" /&
&!-- 垂直滚动项列表--&
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"&
BorderBrush="AliceBlue" Padding="10,10,10,10" BorderThickness="2"&
&Grid x:Name="LayoutRoot"&&/Grid&
&/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&
&/common:LayoutAwarePage&
g)添加Frame　　右击项目Win8Api,选择 "添加"-"类",如图:
　　修改我们新添加的SplitPage类使之成为分部类,在此类中用代码创建一个Frame,和Frame导航的方法用于页面间的导航,　　SplitPage类代码如下:
using System.Collections.G
using System.L
using System.T
using System.Threading.T
using Windows.UI.Xaml.C
namespace Win8Api
/// &summary&
/// 创建此分布类是为了方便添加自定义的方法，这样使我们的代码可读性高
/// &/summary&
public sealed partial class SplitPage : mon.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类的构造函数:
public SplitPage()
this.InitializeComponent();
//实例化Frame
ContentFrame = new Windows.UI.Xaml.Controls.Frame();
//将Frame添加到Grid中
LayoutRoot.Children.Add(ContentFrame);
g)修改我们的ListView的SelectionChanged事件,使选项发生改变时,Frame导航到相应的页面　　代码如下:
/// &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 SampleDataI
if (item!=null)
//导航页面
LoadFrame(item.ClassType);
h)修改我们的程序名称　　打开 App.xaml,修改成如下代码:
&Application
x:Class="Win8Api.App"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/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.
未完待续,敬请期待...
转载请注明出处:/refactor/
评论 - 134