Let’s say you’re working on a HTML Metro app and you’d like to reuse some C# code instead of rewriting, the good new is that you can, here’s how:
Create a blank new WinJS application and add a div inside default.html page:
<body><divid="output"></div></body>
Now add a new C# library to WinJS solution:
Change the output type of the library project to WinMD file
let’s add a couple of classes to C# library, we’re going to consume them from our HTML application:
publicsealedclass Person
{
public Person(string name)
{
this.Name = name;
this.Address = new Address() { City = "Milano", Code = 20100 };
}
public Address Address { get; private set; }
publicint Age { get; set; }
publicstring Name { get; private set; }
publicint CalcSum(int a, int b)
{
return a + b;
}
}
publicsealedclass Address
{
publicstring City { get; set; }
publicint Code { get; set; }
}
When you are designing new HTML-based Metro style applications, you’ll likely want to add one or more WinJS AppBar controls to your app. In this short tutorial, we’ll cover how to use the HTML authoring tools in Blend to create, interact with, and customize WinJS AppBar controls.
You’ll find more information about using app bars on the Windows Developer Center:
Recently, I had the opportunity to talk to Robert Green about the HTML authoring features you can find in Blend. You can view the recording of this Visual Studio Toolbox episode below (or download a high-quality MP4):
During this talk, I demo’ed how a lot of the features we added can be used end-to-end to create a working (…and good looking!) HTML-flavored Metro style app.
Some of the big Blend features I covered include:
Working with the Styles pane, CSS Properties panel, and the Applied Rules list
Adding a ListView control and associating it with some data
Defining an item template and modifying how it looks
Specifying a binding
Laying out content with the Grid element
Creating a CSS3 transition
Using interactive mode to style the checked state of my ListView
Showing how to use the Platform panel to design for devices
Designing for devices by using media queries and listening to JavaScript events
I hope to provide more screencasts in the future that target specific features in Blend, so if you have any requests for topics you would like to see shown, please feel free to post in the comments below.
Cheers,
Kirupa
Welcome to the Blend team blog. This post is about creating a WWA (Windows Web Application) hybrid app with C++ and C#. With this type of Blend project, it is possible to have JavaScript code use functions and libraries from both C++ and C#. This post will walk you through how to create a basic hybrid app with both C# and C++.
Getting started: Create a New WWA app
The first thing you need to do is launch Blend for Visual Studio 11 Beta and create a new HTML app.
Choose File > New Project and select HTML (Windows Metro Style) in the left pane.
In the right pane, select the default template Blank Application.
To follow along with this post, name your project WwaHybridProject.
When you are designing new apps, you will want to make sure they can be viewed across various orientations and states. For a detailed discussion about design considerations for view states, orientations, and resolutions in Windows 8 be sure to read Scaling to different screens on the Building Windows 8 blog.
The two orientations are portrait and landscape:
The view states are:
You can also learn more about Supporting multiple views by reading the detailed document on the Windows Developer Center.
When you are building your apps, you are likely to be using Blend on a laptop or a monitor whose orientation is in Landscape. What you need is a way to design your application inside Blend while simulating the various views states and orientations at design-time.
Views inside the Platform Panel
To help you design applications that take advantage of view states and orientations, Blend enables you to select different preview views in the Platform panel.
The Views section contains four buttons, and these four buttons correspond to the view states and orientations that your application can find itself in.
Read the full post
A couple of weeks ago, we announced the availability of Blend for Visual Studio 11 Beta, which is included with Visual Studio 11 Beta Express for Windows 8 (as well as the Professional, Premium, and Ultimate versions of Visual Studio 11 Beta). Together, Blend and Visual Studio 11 provide the tools for creating Windows 8 Metro style apps.
If you haven’t yet, you can download the Windows 8 Consumer Preview and the developer tools to get started building your own apps. While the Blend Beta supports creating both HTML-based and XAML-based apps, this post focuses on the tools for working with HTML/CSS/JavaScript.
When you start building your own Metro style apps with Blend using HTML, you’ll notice right away that Blend is no ordinary code editor. In fact, it’s not simply a code editor. The HTML authoring features in Blend are designed to help professional web designers and developers become exceptionally productive while creating production quality code.
Read the full post
Blend for HTML, which is a part of Blend for Visual Studio 11 Beta is optimized to help you build Metro style apps using as HTML, CSS, and JavaScript. If you have existing web assets, you can use those as the foundation for building your new Metro style apps.
A first look at Blend
The default workspace in Blend will be familiar to Blend users: the artboard, panels, workspace configurations, authoring views, and menus.
For new users, although the general layout of the workspace looks the same regardless of what kind of project you are working on, the specific panels that are available will change slightly depending on the type of project that you choose.
Menus Create new projects and manage settings.
Tools panel Create and modify objects in your application.
Assets panel Displays all of the elements and media resources that are available to the project.
Artboard The artboard is where you’ll be doing most of the visual layout tasks. You’ll notice that the application area is framed by a virtual tablet device that accurately represents the display of the device parameters that you specify in the Platform panel.
Additional panels The specific panels that are available change depending on the type of project you are working on.
The Blend workspace for Metro style apps includes all of the visual interface elements of the default workspace. However, the tools that are available are specific to Metro style apps built using HTML.
Read the full post
At the //build/ conference, Christian Schormann presented A deep dive into Expression Blend for designing Metro style Apps with HTML that showed step-by-step how you can use Blend to create a UI from scratch in less than an hour.
The game he created is the basis for the nine-part end-to-end tutorial just we’ve just published. When you’re ready to try your hand at creating the UI for yourself, check out our step-by-step instructions. You’ll get to practice layout and styling for Windows 8 Metro style apps.
Read the full post
This tutorial provides a walkthrough for building and running your app.
About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.
Read the full post
This tutorial provides a walkthrough for adding CSS transitions to the game cards for your app.
About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.
Read the full post
Change the output type of the library project to WinMD file
let’s add a couple of classes to C# library, we’re going to consume them from our HTML application:
