Auto History 扩展到 Visual Studio 2013 中

[原文发表地址] Auto History Extension in Visual Studio 2013 [原文发表时间] 2014- 1 –23 8:10AM 你是不是曾经希望自己可以回滚 一段你有修改过的工程的代码,你的代码还在修改过程中 ,并且你什么都没有签入到源代码控制系统中(或者可能没有使用源代码系统控制你的项目)? 我们很高兴地宣布现在 Visual Studio 库中的一个扩展的早期预览版本可用了,它可以自动的、 无需配置历史记录的对您的本地计算机进行跟踪。只需安装该扩展,无论你正在对你的项目和解决方案做什么,它会静默并有效地对您已经打开 Visual Studio 编辑器中的任何文件所做的更改进行跟踪。然后,当你发现自己需要回溯到您的一个或多个文件的较早版本,你可以找到回到它的路径。 下载视频,观看此扩展的教学视频或者在Channel 9 Toolbox video中阅读详细信息。 寻找回溯的方法… 一旦安装该扩展,你只需和往常一样工作。不需要再配置什么。然后,当你需要找之前修改的代码,只需要打开Auto history 工具窗口(当你第一次安装完此扩展,它会自动打开,当你关闭了这个窗口,你也可以很容易通过单击视图..其他窗口..Auto history来再次打开):                                              快照 – 捕获的文件内容 扩展自动捕获的"快照"是每当您在保存、 打开、 关闭或重新加载文件时的某一特定时间点,在编辑器中打开的解决方案中的所有文件的图像。快照会每5分钟自动触发一次(有点像 Microsoft Word 程序中的"自动保存"功能)你可以单击“take Snapshot”按钮来触发捕捉快照。 扩展窗口提供了一个从你的活动中捕捉到的所有快照的视图。默认情况下列表被过滤为仅从当前开启的解决方案中显示快照。在窗口的左侧显示了一组刻度标记(一个刻度表示导致快照被捕获的一个事件),可以从中选择一个范围 (由叠加在刻度上带有阴影的矩形表示) 来比较两个快照。                                       在上面的截图中可以看到由昨天的某一时间点到现在的一个刻度,在我的解决方案中,我对两个文件进行了更改 (Program.cs 和 Utilities.cs)。如果我想要看到详细的更改信息,我可以双击列表中的任意文件,就可以查看对该文件更改。让我们看看 program.cs: 在这个差异中,可以很容从之前的快照中看到我做的更改—并且可以从差异视图中快速复制粘贴我想要的任何之前的代码。我从来没有签入到源代码控制系统,但是Auto History…

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

对于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