The official source of product insight from the Visual Studio Engineering Team
In this post, we’ll take a behind-the-scenes look at three of the most significant improvements made to HTML/CSS development in Blend, including new workflows for (1) authoring CSS Animations, (2) embedding custom fonts, and (3) data-binding properties.
The W3C CSS Animations spec describes an extremely powerful syntax, but that syntax is also complex, difficult to visualize through code alone, and tricky to debug. Fortunately, there are well-established patterns for authoring animations. In this release, Blend adopts one of the most familiar patterns: timeline-based authoring.
Using the animation timeline, developers can scrub to any point in time, add @keyframes, drag-and-drop key rules, modify the iteration-count, set fill-mode, etc. In short, you can edit any and every aspect of CSS animation described by the W3C spec.
We also noticed that most animation tools only enable editing outside the context of the working application. Unfortunately, this isolation comes at a cost: developers can’t see how the animation will interact with other elements in the DOM. Using Blend, developers can scrub and edit animations directly in the context of their working application. This means that if you animate an element’s width, for example, you can see how it will impact the layout of adjacent elements.
While animation should be used sparingly in any application, it’s also the proverbial “icing on the cake” that makes the best apps feel responsive, polished and modern. We think the animation timeline editor will prove invaluable to UI developers looking to add a little motion to the mix.
Of all the design elements that impact a brand’s visual identity, none is more important than typography. The letter forms must be legible, render sharply at any size and create a unique impression. To achieve these goals, graphic designers often leverage font families that aren’t pre-installed with Windows. Historically, UI developers have shoehorned those same custom fonts into their websites and applications using image, Flash, or SVG text replacement. Unfortunately, text replacement is nearly impossible to implement for long strings of text (e.g. paragraphs) and increases both file size & load time.
To overcome these setbacks, the development community has recently seized upon the potential of CSS3 features like @font-face. The high-DPI era has also revived interest in custom icon fonts as a way to creatively deliver scalable graphics.
In keeping with this trend, Blend now provides some handy accelerators for adding custom fonts to your application using @font-face rules. A supported font file can be added to a given project and an @font-face rule for it can be created simply by selecting “Create @font-face Rule” from the right-click context menu.
Once an @font-face rule has been added to the appropriate CSS or HTML file, the font-family name selected will be available in the new rich font-family CSS property value editor. The full scope of Trident support for @font-face and font-family is available for use in these editors to maximize the number of situations it can be used.
The end result is that custom fonts can now be added to a project faster and there are fewer errors that come from referencing them manually
More often than not, Windows Store Apps avoid hard-coded text and, instead, consume dynamic content originating from a data source. In fact, the WinJS framework makes ample use of item templates that incorporate one-way data-binding to populate headline text, image URLs and body copy. In this release of Blend, we’ve added several dialogs that make it easier to work with data productively.
For example, authors can quickly create a template by selecting “Create Template” under the Windows App Control attributes. The resulting dialog will ask authors to identify a template name and select which data fields to insert. Finally, Blend will create an item template with clean, production-quality HTML markup ready for styling.
There are many additional improvements found in the preview release. Among them, you’ll find:
Give these features a spin and let us know what you think by commenting below, posting on our forums, or sharing a suggestion on UserVoice. Also, if you want to see some other great HTML5-related talks at Build, check out my filtered session list .
Ryan J. Salva: Program Manager, Visual Studio Client Tools Team
Cheers Ryan. If you know of an post that expands upon the data binding section that would be great. It would save me considerable time to see an example of what you describe in regards to the apps store.
Hi, Chilberto. We don't have any posts that expand on data binding in Blend for Visual Studio 2013... yet. But that's a great topic and one that we'll put on the list for the near future. In the meantime, you can learn a lot by examining how Blend handles data binding by playing with one of the code snippets available in the Assets pane.
(2) Search the Asset pane for "ListView with Sample Data". Drag it onto the design surface.
(3) Select any one of the list items on the art board. For example, "sampleONE"
(4) Open the HTML Attributes tab and find the value editor for "Text Content". Notice that it has a yellow border. Any time you see a yellow border around a value editor, that means the property is data bound. You can choose to bind the value to another property by clicking on the small square adjacent to value editor and selecting "Edit Data Binding"
(5) You can edit the item template by adding class names, attributes or inline styles directly to the same element. The changes you make will instantly affect all other items in the list because Blend maps the changes back to the original item template upon which all list items are based.
There is, of course, lots more you can do, but we've gotta save something for the next post (grin). If you have any specific questions, feel free to fire away. Hope this helps!
In Visual Studio, please provide us the ability to save and manage multiple FTP/SFTP sessions (url and credentials including passwords) to save time, especially when someone is working with multiple websites at a time.
Currently, its very painful to fill all the information every time you need to connect to a different FTP server.
I'm not interesting on Windows 8, Windows RT or Windows Phone.
I'm not interesting on Windows Store.
I'm not interesting on apps. I'm interested on real desktop applications on Windows 7.
I'm sticking on Windows 7 until the remove of the ugly, crappy and unusefull Windows 8 full screen interface that makes the Windows experience frustrating. Putting a phone user interface on the desktop is really not an intelligent decision.
I want to see about Windows desktop development.
I want to see advantages and new features on Windows Forms and WFC.
I want the Deploy & Setup projects again, instead of the Flexera Limited Edition of Installshield.
I want to know, me and all our customers, and Microsoft really tell to his customers explicitly and clarity, that if the only Microsoft future direction and development is about Windows 8 and Windows.
I want to know this to search for other alternatives for software development tools and for other operating systems.
If I need or want to develop mobile apps for phones or tablets, I do it with Google Android or Apple iOS. Not Microsoft. Microsoft has no experience and don't undestand the mobile market and not has very good products like Android or iOS. Also the market share is very low and Microsoft cant warranty revenues on his mobile platforms.
Loving the new guides, and the improved performance over the 2013 Preview.
My question is this, I use a satellite assembly containing my Fonts for my WPF application. But when I specify an external reference for the Font Family the 2013 RC reverts my changes back to a local font resource shortly after I make the change.
Try setting a font like this: FontFamily="/CounterSketch Studio;component/Fonts/#Helvetica Neue LT Std" and you will find that shortly after Blend has converted it back to: FontFamily="Helvetica Neue LT Std".
This means ever user control I open will be broken when I save it, and users won't have the fonts I have embedded... Frustrated...