Blend for Visual Studio 2015 预览版

[原文发表地址] Blend for Visual Studio 2015 Preview [原文发表时间] 2014-11-13 12:00 PM 昨天我们发布了 Visual Studio 2015的预览版,作为VS的一部分,我们介绍一个新的Blend体验版本。 为了给用户提供更强大的用户界面开发体验,我们重新设计了Blend for Visual Studio 2015来创建漂亮的XAML应用程序。为了改进这两个产品间的工作流程,Blend有了跟VS一致的造型优美的新面貌。我们用VS的技术在Blend中提供更好的解决方案资源管理器 和源代码管理功能。另外,XAML的智能提示和调试功能也可以用了。 新产品的亮点包括: 跟VS统一的界面:你可以在熟悉的VS用户界面中设计你的应用程序,这样在Blend和VS中切换显得更加的舒畅和高效。Blend同样包括一个新的独特的黑色主题,该主题通过提高你的内容和Blend用户界面的对比度,使你更好的关注你的设计内容。 XAML智能提示:Blend支持所有的你期待的智能提示,包括声明的自动完成,普通的编辑操作的支持,像注释和格式化代码,导航定位到资源库,绑定的数据,和具体的代码等。 基本的调试能力:你现在可以在Blend中调试代码,包括在代码中设置断点来调试你的运行程序。为了维持跟VS相同的调试体验,Blend包含了VS的调试窗口和工具栏。 Peek in XAML :Peek in XAML允许你在使用控件和资源的上下文中查看和编辑这些控件和资源。你甚至可以通过一系列的没有脱离原始XAML文件的声明来查看它们。此外,在文档中适当的编辑样式和模板,也可以通过Peek in XAML来实现。 文件加载体验:你可以在Blend或VS中编辑XAML文件,并且当你在Blend和VS之间切换的时候可以自动加载你的编辑文件。为了缩小工作流程的中断,你现在可以在文件加载对话框中设置你的文件加载喜好。 同步布局和设置:自定义的布局能够使你保存和应用工具窗口布局定制化。一旦你用相同的微软账号登录IDE,Blend将会通过机器同步这些自定义和喜好。 一个普通的解决方案资源管理器: 解决方案资源管理器给你提供了一个有组织的有关你的工程和他们的文件的视图,也包括用命令行关联他们。由于有解决方案资源管理器,这使得跟大的企业项目合作变得更加容易。另外,所有在Blend中找不到的项目功能现在也变得可用了,这包括对解决方案文件夹的支持和配置文件的更改能力。 团队资源管理器:有团队资源管理器,你就可以通过促进团队合作的GIT和TFS仓库来管理你的项目。 NuGet:你可以在Blend中管理NuGet包。NuGet是一个用来管理.NETFramework的包管理工具,这使得安装和移除包变得更简易。 更好的访问性: 你可以使用你的键盘和屏幕阅读软件跟Blend用户界面的几个区域交互,其中包括顶层菜单,解决方案资源管理器和团队资源管理器。我们正积极努力的让Blend在以后的VS版本中变得更加好用。 除了上面列举的新体验,我们同样应该指出一些没有从VS2013中引进的功能。 HTML 设计支持. 在VS2015中,我们聚焦于为HTML应用开发者提供更好的代码编写,编辑,和调试的体验。我们鼓励用户继续使用Blend 2013 去设计Windows Store 和Windows Phone 应用程序的样式, 同时我们期望在即将到来的预演版本中给用户分享一些Blend的新功能。 SketchFlow. Blend 2015将不会再支持SketchFlow的工程。如果用户需要SketchFlow来做原型设计,我们鼓励用户继续使用Blend…

0

Blend关于HTML的行为和操作功能

[原文发表地址]  Blend for HTML Behaviors and Actions [原文发表时间]  2014-03-13 8:45 AM Blend for Visual Studio 2013为HTML开发者引进了一个功能,它或许被那些已经着手于XAML的人们所熟悉了:Behaviors。当被附加到HTML元素时,Behaviors通过执行一个JavaScript事件处理程序将活动添加到应用程序中。开发人员可以从各种各样的随时可用的Behaviors中选择或创建他们自己的Behaviors。例如,一个开发人员可以使用Blend的预定义“切换类名”行为,通过点击按钮添加或删除元素的一个类名来开启/停止一个CSS动画。 在这篇博文中,我们将会从幕后关注产品团队的动态并且了解在JavaScript中生效的Behaviors。 为什么增加Behaviors? 表象之下,大多数HTML应用程序都是由高度模块化和可重用块逻辑-通常封装为JavaScript函数组成。这些函数可能会仅仅对一个应用程序执行一个特殊的任务,或者它们有可能会执行一个易于被提取用于跨多个应用程序的普通任务。在计划Visual Studio 2012 时,我们的产品团队便认识到有极少数的功能性任务是几乎所有的Windows Store 应用程序必须执行的。我们在想:我们可以做些什么来帮助开发人员更轻松地添加常用的,可重用的组件? 之前的XAML Blend版本交付了这些可重用的组建作为Behaviors,并且它们都非常受欢迎!使用XAML Behaviors,开发人员能够轻松地只通过从资产板里拖拽一个Behaviors和设置一些属性就能建立应用程序逻辑。所以,随着一个行之有效的模式到来,我们使用JavaScript创建了 一个原型。而且它工作地非常棒! JavaScript Behaviors 事实证明JavaScript函数已经很像XAML Behaviors了:每个JavaScript函数执行一个定义良好的任务,并接受已知参数的列表 。比较困难的部分是创建一个声明式的模型使像Blend那样的工具知晓哪个是期望的参数。我们为Web技术选择使用最自然的声明性标记:HTML和JSON。 为了使HTML标记更清晰,产品团队决定通过W3C兼容数据与交互属性附加每个Behaviors。参数都在一个单独的引用文件里通过一个人类可读的JSON对象传递。当应用程序加载和WinJS.UI.processAll()执行时页面上所有Behaviors都被初始化。 要创建自己专有的Behaviors,开发人员可以使用用于WinJS控件上的相同的架构。OAM(开放Ajax元数据)描述了可重用的功能性组件任何熟悉可扩展标记语言的人都非常清楚。一旦添加到Blend安装目录,意味着允许你自定义的Behaviors出现在资产面板里。 Behaviors怎样工作 Behaviors赋予你添加功能到任何Windows Web应用程序(WWA)不必直接写代码的能力。Blend提供了使用一个轻量级JavaScript文件(定义事件处理程序)和JSON文件(定义事件处理程序的参数)所需要的执行情况。这使得非程序员和程序员都可以很容易且快速地实现可重用的功能组件。 要充分理解Behaviors,你还必须了解操作。Behaviors描述了一个事件而操作描述了一个事件的结果。理解它的一个好方法是: “当[Behaviors]发生时,去做[操作]” Behaviors被附加到HTML属性面板单独的页面元素中,使用Behaviors范畴的控件:                                           在Behaviors范畴的控件可用于: 1 )添加新的Behaviors, 2 )添加或删除Behaviors和操作以及3)配置所选操作或Behaviors。当一个Behaviors被添加到一个元素中,一个数据与交互属性则被添加到包含附带的Behaviors名称的这个元素中。 Behaviors作为触发器,定义为了引起一个或多个相关联的动作触发所需要的标准。举一个例子EventTriggerBehavior ,它可以被设置为不同的事件触发,例如元素的OnClick事件。在这种情况下,该元素无论何时被点击,所有与那个Behaviors相关联的动作都将被执行。 默认情况下,Behavior附加到的元素将是行为资源和目标要素。重新定位你的行为源或动作的目标源将是一个非常常见的任务。为了允许一个行为监听附加元素或有有操作目标的其他元素之外的元素,你可以充分利用sourceSelector和targetSelector属性。 总结 Behaviors和Actions可以以各种不同的方式结合来影响页面元素,通过使用TargetSource和srouceSelector直接或间接定位或附加Behavior到页面的其他元素。通过使用HTML属性面板,Behaviors和Actions被附加到页面元素,并且可以在Blend中配置。 关于Blend更多的详细信息,请查阅我们的how-to文章:使用Blend中的内置行为来增加交互性( HTML和JavaScript)。

0

在Visual Studio 2013 Blend中设计像素完美布局

[原文发表地址] Designing pixel perfect layouts in Visual Studio 2013 and Blend [原文发表时间] 2013-9-18 8:00AM 这是个常见的场景。你在开发应用程序的时候头脑中有一个设计。它可能来自于专业设计师或者餐巾纸背面的素描图案,但你需要将这个概念变成实现设计的工作,这说起来容易做起来可不容易。 当你的设计要求从顶部到文本的基线精确到100px,但是这个基线是在控件模板中的一个自定义控件,头疼的是找出需要调整以获得精确位置的值。另一种情况是,你想要的图像精确到300px宽,但你总共只有260px,你打算水平倾斜它以便达到它合适的宽度。你可能不想使用三角函数来计算出准确的倾斜角度。Blend知道你需要用一个更简单的方法去做,在Visual Studio 2013 Blend中,我们已经实现了一些新的工具来帮助你处理该设计并将它打造成为一个优雅,准备一鸣惊人的应用程序。让设计师发狂吧,现在你已经准备好了。 一个新的标尺/参考线系统能够帮助你得到你想要的像素完美精确性。高级对齐引擎获取的队列是你需要的方式,升级后的就地编辑引擎可以帮助你修复控件模板,不需要删除你正在使用的环境的样式。 测量栏 当你打开一个Windows Store的 XAML或者HTML应用程序,你首先会看见这些新的标尺。拖动一个控件到画板上,或者只是选择一些元素,你将会看到新的标尺带来了测量栏,显示一些有价值的信息。这很简单……你的元素有多宽/高?你的元素与文档之间的距离是多少?这还不是最有价值的,但是尝试这样…… 创建你的网格应用程序,看看它的标题是否准确地在你猜想的地方。Windows 用户体验指南提到基线应该是从顶部100px和从左边120px开始,当你选择pageTitle,你会看到在测量栏上的值呈现的测量是FINAL。它考虑到父容器,并呈现转换给你一套测量,表示该控件将在运行时,这在控制或者数据模板内有效。所以,下次你有一个复杂的用户界面需要获取该控件从应用程序一端精确到120px,你就会看到为什么标尺和测量栏式强大的工具了。 参考线 当然,你现在可能会坐在这儿,问问自己是不是有更简单的方式来获取控件到特定的位置。在设计中,你的应用程序有一个商标,你希望这个商标靠近应用程序的顶部右边,但是与顶部边距40px及与右边边距100px。你可以将图像拖到通常的位置并将其周围微移直到得到你需要的值,但是向导系统让这些变得更简单。 将光标放在标尺顶部,单击鼠标并向下拖动。一旦你这么做,Blend将为你创建参考线来显示应用程序边缘的位置。如果你不想尝试拖动到特定的偏移量,只需要单击该值并改变它。 如果你与左边的参考线做相同的事,你要看看从设计图左边缘的距离。在这个例子中,那不是你所想的,因此抛开参考线,单击右边的值。会出现一个上下文菜单,允许你指定“右对齐”参考线。现在,Blend将显示右边缘的距离。单击值输入100,会得到一个参考线显示你想要的边缘的距离。 如果你真的想要看到一些酷的东西,转到设备面板,从横向切换到纵向。一旦你这么做,垂直参考线会重新调整成与新的右边缘距离为100px,参考线始终会确保它们的距离是正确的,不管你如何更改设备分辨率、捕捉状态或者方向。 另一个真正有用的部分是你可以无需考虑范围来对齐参考线。在参考线附近绘制一个按钮并且编辑按钮模板。在按钮内部,拖出一个矩形,你甚至可以将控件模板里的矩形与参考线对齐。这大大提高了试图排队的控件体验,无论你是否决定使用布局模式。 捕捉 Blend中的捕捉引擎也有几个改进。如果你想让你的Windows Store使用较旧版本的Blend元素,你可能看过一些控件似乎可以从3px关闭一切,你可能还试图获取TextBlock来与按钮中的文本基线对齐,并且发现它有点挑战性。 Windows Store应用程序的默认控件通常具有内置控件焦点矩形。比如,当键盘用户导航到一个按钮,它会在外围得到一个白色的矩形框来表示获得按钮焦点。这个焦点矩形是内置布局边界的按钮,这就是为什么按钮设计图的装饰看起来似乎是在边缘的几个像素,而不是直接在按钮上面。焦点在矩形布局界限内有助于防止你从丑陋布局中创建重叠的矩形,但它确实使那个棘手的按钮看起来完全正确。 在上图中,所有四个控件都有向左100的填充。参考线也位于100,以便将所有预期的控件都显示在里面。但是,红色的矩形显示如何将单选按钮和按钮都抵消3像素的单位。坦率地说,这些小小的差异都将使你的应用程序呈现未磨光的外观。 在Blend的捕捉引擎中现在能够忽视大多数控件的可视化元素,而不是捕捉到元素的可视范围。要看到这一点,从左边缘拖动参考线100px并且移动按钮到参考线上直到它能被捕捉到。现在你将看到该元素的可视化对象捕捉到参考线而不是布局的边界。当你对齐到参考线或者其他元素时捕捉才会工作。 捕捉引擎的另一个改进是文本基线。拖出水平参考线,一个按钮和一个文本块。现在,拖动按钮和文本块到水平参考线并尝试在参考线基线上获取其文本。你会看到Blend现在能够找到文本基线上的常见控件,并允许捕捉它们。所以,当Windows指南告诉你一个指定的文本元素基线假设是距离顶部140px,你可以创建的参考线实际上正好获取140px的基线。 标尺,参考线和捕捉功能从你的反馈意见中建立,我们一直在寻找如何帮助用户更加容易地做出更好的应用程序,如果你有更多的想法,我们很乐意听到。请让我们知道你内心是怎么想的。我们会看所有的反馈,不管是来自这篇文章的答复,用户语音请求,连接bug或者是Visual Studio中的Send-A-Smile系统。   Dante Gagne是微软的项目经理,11年来致力于XAML工具。他从测试人员做起,最终将他的激情用来帮助Blend和Visual Studio的改进。今天,他的工作重点是设计经验和生产力。

0

有效方法:在 Blend中快速寻找和设置CSS属性

[原文发表地址] Supercharged Styling: Quickly Finding and Setting a CSS Property in Blend [原文发表时间] 2013-09-12 8:00 AM         Vs中Blend的核心目标是使那些关注他们开发出来的APP的质量的开发者们更加快速简洁的开发APP。当开发APP时,要想使HTML设计者在Blend中快速掌握CSS编辑,一个好的方法就是直接提供一个可视反馈机制,并且可以在设计界面上直接编辑,这样实际上是边开发边执行你的应用程序。         当听到我们如何能更好的优化我们的工作流的类似的反馈后,我们已经将这些观念引入到即将发布的VS2013的Blend中,让你以现有的能力开发出足够专业的windows APP。另外,当你想通过更多的可控形式管理复杂的CSS属性时,你可以通过“应用样式规则”列表来设置特殊的CSS规则。这次,我们将在CSS编辑器中提供一些新的有效的CSS输入方法。 类别编辑器         举个例子:在Animation类别编辑器中以category排序,你可以发现CSS属性编辑能够输入复杂的CSS属性。 我们将在CSS animation编辑器中,使这特殊的编辑方法应用到更多的细节,但值得注意的是,当引用多个animations时,编辑器用了一组逗号分隔CSS属性,并且在一个简单易懂的列表中显示他们,使减少输入复杂的属性。         类别视图包括几个其它的类别编辑器,如:box-shadow,text-shadow,fon-family等等。尽管如此,当你在编辑CSS时,你将在一个样式中需要输入简单的和更多的复杂的属性,最终,我们发现大多数的开发者倾向于使用CSS属性编辑器去写复杂的属性,而遇到已知的,简单的属性时会在代码编辑器里编辑,从而造成了脱节没有效率的CSS编辑体验,这个问题促使我们在这一次的发布中引入了“Search or set propert Bar”。 快速寻找和设置CSS属性         Vs2013中的blend 引进了一个新的”search or set property bar’ 来使从快速进入众所周知的属性和在CSS编辑器中发现的所有的CSS编辑经验有一个平稳的过度。 你现在可以使用快捷键 Ctrl+.(Ctrl+Shift+;)打开search bar,不仅可以寻找而且可以直接输入已知的CSS属性值,CSS属性编辑器会自动的过滤出输入的属性,并且可以直接设置输入。         当输入不正确的变量或值时,错误的输入可以被快速的修正,所以你可以简单的输入然后选择正确的输入。 另外,多数CSS属性可以被输入或者粘贴到“search or set property bar”。 调试         值得注意的是”Search or…

0

对于Visual Studio 2013中 Blend的HTML开发人员来说什么是新的

[原文发表地址] What’s new for HTML Developers in Blend for Visual Studio 2013 [原文发表时间] 3 Sep 2013 9:30 AM         在6月Windows的Build 研讨会上,我们向世界介绍了Visual Studio和Blend 2013 Preview版。随着这次的发布,我们极大地扩展了Visual Studio对于用JavaScript、HTML、CSS创建Window Store Apps的支持,除了在Visual Studio中发现的客户端诊断和调试工具外,Blend同时还提供了主机功能,旨在通过打破那折磨人的“编辑-刷新”周期来提高效率。         在本文中,我们将深度剖析一下Blend中三个改善 HTML/CSS开发最多的的部分,包括创作CSS Animations新的工作流程(1)、嵌入自定义字体(2)和数据绑定属性(3)。 CSS 动画          W3C CSS ANIMATIONS 规则描述了一个极其强大的句法,但是该句法还是比较复杂的,难以单独通过代码来使其呈现出来,并且不容易调试。幸运的是,创作动画有行之有效的模式。在这个版本中,Blend采用了最熟悉的模式之一:基于时间轴的创作。         通过动画时间线,开发人员可以擦除至任意时间点,添加keyframes,拖放关键规则,修改迭代次数,设置填充模式等。简而言之,你可以编辑任何一个或者每个W3W规则描述的CSS动画。         大多其他的动画创作工具需要一个JavaScript的依赖,但是Blend时间轴却是众多中独一无二的一个,因为它创建了一个单纯的并且无需JavaScript或其他框架的CSS动画。一切都百分之百的符合CSS标准。这就意味着开发人员可以打开编辑任何网络中发现的CSS动画。         我们同样注意到大多数的动画工具只允许编辑工作程序以外的范围。不幸的是,这种隔离是有代价的:开发者无法看到DOM中的动画是如何与其他元素交互的。使用Blend,在工作程序范围内开发者能直接删除并且编辑动画。这就意味着如果你设置动画一个元素的宽度,例如,你就能看到它如何影响相邻元素的布局。         虽然动画应该谨慎使用在任何程序中,但正是谚语中的“锦上添花”促使我们做最好的应用,使得它们看起来灵敏、完美、现代化。我们认为动画时间轴编辑器将会向那些期望往组合里面添加一些动作的UI开发人员证明这是无法估价的。 嵌入自定义字体         对于所有影响品牌视觉形象的设计元素来说,没有什么比排版更重要了。文字的格式必须清晰,能在任何一个尺寸呈现出来,并且留下一个唯一的印象。为了达到这些目标,图形设计师经常利用一些不是Windows自带的字体系列。以往,UI开发人员通过图片、Flash、或者SVG文本把这些相同的自定义字体加入到网站或者应用程序、。不幸的是,文本替换一个长的字符串(例如一个段落)几乎是不可能实现的,并且增加了文件的大小以及载入时间。         为了克服这些弊端,开发团体最近估算了CSS3潜在的功能,就像字体外表。高分辨率时代同样恢复了对自定义图标字体的兴趣,将它作为创造性地提供可扩展图形的一种方式。         按照这种趋势发展,Blend现如今通过字体外表规则提供一些了便于向应用程序中添加自定义字体的加速器,支持字体的文件可以被加到既定的项目中,并且通过简单地选择右键菜单中的“字体外表规则”来创建属于它的规则。  …

0