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.
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
This tutorial provides a walkthrough for styling 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
This tutorial provides a walkthrough for styling the game board and the items in the game board 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
This tutorial provides a walkthrough for aligning content to the flexible CSS grid for your app. Apps based on a flexible grid can adapt to run on a variety of devices with different display sizes, aspect ratios, and screen resolutions.
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 creating a flexible CSS grid for your app. Apps based on a flexible grid can adapt to run on a variety of devices with different display sizes, aspect ratios, and screen resolutions.
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 creating the basic style sheet you need to start the Memory game project. In addition, this tutorial provides tips for working with existing style sheets, including using tools like the Live DOM, CSS Properties, and Applied Styles panes.
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
< older posts