Create logos for Windows and Windows Phone with one SVG

In a previous post, How to make an app logo that doesn’t suck, we talked through the importance of using vector graphics for your logos to maintain fidelity as they are scaled up to higher pixel density screens. We used a tool that I wrote called Vector to then export the logo to all the different required sizes and scale factors.

Since I wrote that post, Microsoft has announced universal Windows apps for Windows and Windows Phone that you create one app that can be published for all Windows devices. It’s great because you can share most of your code between platforms, but it unfortunately expands the number of potential logo files from 30 images to 42 images. This can be a headache if you’re porting a few apps over, or you’re not an expert in imaging tools. People using Vector gave me the same feedback.

Vector now exports Windows and Windows Phone images

So I took the feedback to heart and updated Vector so it can now export all 42 potential images for Windows 8.1 and Windows Phone 8.1. You can take all the images that are exported, drop them in you Visual Studio shared project, and call it a day.

Go get it now and go make logos for both Windows and Windows Phone that don’t suck!

promo4

WindowsStore_badge_en_English_Green_large_120x462

Building a delicious “hamburger” button app layout

In the previous post, Designing a delicious “hamburger” button app layout, we walked through, why apps use the hamburger layout style and some design elements that make up a good implementation.

In this post, we’ll walk through how to build a great implementation in HTML and JavaScript, targeting Windows Phone and Windows 8. We’ll work to build something that has all of the ingredients of a good hamburger button app, and of course we’ll share the code!

Setup the viewport

First of all, we want to build a layout that accommodates up to three scrolling panels. The main content div in the center, and the secondary left-menu and right-menu divs on either side.  We put all of the panes in a surface div that will scroll left to right, and we wrap that with a viewport, that will be the outer scrolling div.

<div class="viewport">
    <div class="surface">
       <div class="content"></div>
       <div class="menu-left"></div>
       <div class="menu-right"></div>
    </div>
</div>

 

Sizing the viewport

Next, we’ll make the main content pane width 100% to make it fill the width of the screen, and give the menu panes a fixed with that’s less than the width of the screen, in this case 300px. We make them a smaller than the width of the screen to ensure you can always see the main content pain when you are scrolled over to a menu pane.

We need to explicitly size the width of the scrolling surface div to be bigger than the screen. Then we set up a grid with the sizes of each of our columns, and put the panes into the grid columns.

.viewport {
    width: 100%;
    overflow-x: scroll;
}

.surface {
    width: calc(300px + 100% + 300px);

    display: -ms-grid;
    -ms-grid-columns: 300px 1fr 300px;
    -ms-grid-rows: 1fr;
}

.menu-left {
    -ms-grid-column: 1;
}

.content {
    -ms-grid-column: 2;
}

.menu-right {
    -ms-grid-column: 3;
}

Add mandatory snap points

Snap points are magical. Scrolling is an amazingly complex system behavior, and since  scrolling surfaces are offloaded to the touch and graphics hardware it’s hard to manipulate it’s behavior. Snap points, however, let you change the scroll behavior with a little bit of CSS.

The snap points force touch scrolling to stop where  you set them. All we have to do as add snap points before each of the panes. We want one at the start of the view, one at the start of the content, and a last one that will make it stop at the end.

.viewport { 
    -ms-scroll-snap-type: mandatory; 
    -ms-scroll-snap-points-x: snapList(0%,
                                       300px,
                                       calc(300px + 300px)); 
}

Progress so far

So, after simply setting up a wide three-paned view with snap points inside of a viewport the size of the screen, we can see the basics of our hamburger layout coming together.

Since we built it on top of native scrolling behavior we get the nice buttery, stick to your finger touch interactions for free. Thanks snap points.

Add the hamburger button

Adding the button itself to the header is simple enough, but we want to make sure it behaves correctly and animates smoothly if someone were to click on it. First, we drop in the header with the hamburger button. Easy.

<div class="content">
    <div class="header">
        <button class="hamburger"/>
        <h1>Header</h1>
    </div>
 </div>

Then, we set up a handler that takes you over to the menu pane if you click the hamburger button. We use msZoomTo to programmatically pan between the different panes. MsZoomTo is nicely animated and better performing than simply changing the scroll offset values.

hamburgerButton.addEventListener("click", toggleMenu);

function toggleMenu(e) { 
    var scrollPos = (_viewport.scrollLeft > 0) ? 0 : _menuWidth; 
    _viewport.msZoomTo({ contentX: scrollPos }); 
}

Sweet. Now we have a working button, that works nicely in concert with the touch panning behavior.

We also want to make sure that when you are looking at a menu, if you click on the content area it will take you back. We’ll implement it just like the button.

content.addEventListener("click", returnToContent);
function returnToContent(e) { 
    if (_viewport.scrollLeft < _menuWidth || 
         _viewport.scrollLeft >= _menuWidth * 2) {

        _viewport.msZoomTo({ contentX: _menuWidth }); 
    }
}

Initial scroll position

When the launch the app, it will show the menu, which is probably not desired. Let’s start with the scroll position past the menu when you launch the app.

_viewport.scrollLeft = _menuWidth;

Hide the panning indicator

panning

You may have noticed panning indicator at the bottom of the view as you pan between the different menus. This makes sense to see when you’re panning through content, but when you’re panning between different parts of the app, it doesn’t really make sense and can be distracting.

-ms-overflow-style: none;

 

Shadows!

In all of the hamburger layout implementations that I’ve seen, there’s an inner shadow on the menus to make it appear as if the content is on a different plane than the menus. We can simply add this effect with a box-shadow on the left and right menu divs.

.menu-left {
    box-shadow: inset -5px 0 10px -2px rgba(0, 0, 0, 0.6);
}

.menu-right {
    box-shadow: inset 5px 0 10px -2px rgba(0, 0, 0, 0.6);
}

Add content

Now that we have the baseline layout created, now it’s just a matter of adding content. This this is a layout container, you can put anything inside!

Maybe some menu items in the left menu panel, some text in the content panel and a scrolling list in the right menu panel. As long as each panel doesn’t interfere with horizontal scrolling, you can go crazy and build highly interactive layouts. In this case, I add the pull to refresh behavior from a previous post.

Landscape, and bigger screens

What if we want to make this work in landscape, and on Windows 8 tablets, laptops and desktops? The great news is that since we used responsive layout techniques and controls, like grid, it already works great!

Get the code

So that’s it, we’ve fully implemented the hamburger button layout in a way that includes all of the important design elements, including touch interactivity.

The next step is to grab the code and integrate it into your app! Check out the Universal Project on GitHub:
https://github.com/dwcares/HamburgerLayout

Design a delicious “hamburger” button app layout


Facebook’s hamburger button layout is probably the most well known across platforms. In this post, we look at how to make a good one. Image from: thehamburgerbutton.com

An increasingly common trend in apps on all platforms is to create a clean landing page that reveals the purpose of the app, and neatly tuck away all the other functionality of the app off screen. The Windows design patterns beautifully support this through the Hub and Pivot controls, however, as with most patterns, these are meant as guides. And we’ve seen some of the best apps stray from the norm, in order to optimize their experience around their content, or build a design pattern that works across platform.

The “hamburger” app layout

hamburger-sketch

Whether you like it or not, the “hamburger” app layout, is a staple for mobile apps across iOS, Android, Windows Phone and the web. You’ve definitely seen it before, those unassuming three bars in the header, usually a navigation menu with search off to the left, and a list of some sort off to the right. I’m sure it has a lot of different names, from “off-screen menus”, to “slide” or “panorama” but for this post, we’ll just call it “hamburger.” We can debate whether it’s right for your app, but it’s out there, so let’s talk about it.

Six juicy reasons why it’s successful

  1. It’s offers a clean landing page
  2. Secondary navigation and tasks are off screen
  3. You know there’s more off screen, because of the hamburger button
  4. It feels slick to swipe over to reveal more content
  5. If you don’t know how to swipe over, you can just click the button
  6. It doesn’t rely on any one platform’s design aesthetic, pattern or controls

Some implementations aren’t very tasty

Like the layout’s food-counterpart, not all implementations in the category are created equally. I do not purport to be any kind of expert on the hamburger layout specifically, but I am an expert on touch interactions and app layouts, and I’ve seen enough of these with developers I’ve worked with to know that some are better than others.

Since it isn’t a platform-specific design pattern or control, we’re more likely to see the inconsistency: everything from design usage, to performance and interactivity. Like most touch interactions, it’s hard to know how to do it right, but it’s easy to tell if it’s wrong; whether it’s a stutter animation, or something that’s hard to use.

Ingredients for a good layout

Like the scorecard that we used in designing custom touch interactions, we can make a scorecard for the hamburger too:

  1. A hamburger button in the header, to tell you there’s something off screen. Tapping the button shows it.
  2. The main content area is still visible when you’re viewing the off screen menus. Tapping on the main content area, or the hamburger button brings you back to the main content.
  3. You can swipe over to the off screen content, to bring it in without tapping the button.
  4. You can drag between panels with buttery smooth, stick to your finger, direct manipulation goodness, that feels like you’re sliding on melted American cheese.

Does the touch stuff matter? There’s a button…

Yes, the touch stuff matters. If you chose to use this pattern in lieu of simply a button that navigates to a menu page, or show a popup, you’re carrying the load of user expectation with you. Because the content is off screen to the left, I should be able to drag over to it.

The pattern isn’t good because it looks good, it’s because our puny human brains are good at understanding spatial relationships. Like other spatial metaphors (see the desktop) you can build a mental map for how the app is laid out, even if you can’t see it all the time. The touch screen affords a way to navigate this spatial canvas. We’ve learned from interacting with tons of scrollable canvases that you can pull things from off screen by dragging them in; from panning around in the web browser, to flipping through photos, to scrolling lists.

Without a good direct manipulation swipe interaction, the hamburger layout is broken and incomplete. Even though it’s not required to use, with the button, in my opionin, it’s the whole reason for using

Building it

Easier said than done right? In the next post we’ll walk through one example of building a hamburger layout for Windows and Windows Phone, all in HTML, JavaScript and CSS.

Update: See the next post on building delicious hamburger button layouts.

Have you used or built a particularly good, or bad hamburger layout? I’d love to hear about it in the comments!


Image from Kingkong21 on Flickr

Saint Paul Universities

I’ll be all over Saint Paul this month helping students and grad students build apps for Windows Phone and Windows 8! If you’re a student at St. Thomas or Macalester, check it out!

Build your first app

Have you ever wanted to make an app for your phone? Come and build one for Windows Phone. People who come will be eligible to win a phone! No programming required. Bring your Mac or PC.

Macalester
April 23
5pm – 10pm

Saint Thomas Grad
OSS 326
May 2
2pm – 5pm

Port your Windows Phone app to Windows 8

You already made a sweet Windows Phone app, now you want to bring it to a potential 100M active Windows 8 users. In this session we’ll take the apps we already made in AppStudio and port them to Windows 8. People who come will be eligible to win a phone. No programming required. Bring your Mac or PC.

Saint Thomas ACM
OSS 210
April 29
6pm – 10pm

When artists make games…

lgaltab

Amazing things will happen. For the past few months I’ve been working with an incredible gallery here in Minneapolis, Light Grey Art Lab, on a top secret game project. Today, they just opened the call for art for “Dream Arcade.” Artists in their collective will start to sketch out their game ideas and to contribute to the Dream Arcade exhibition.

How does a code geek like you meet cool artists?

I met the folks who run Light Grey when Lindsay Nohl, their founder, gave a talk on some of the amazing projects they’ve done in their short two-years of existence. They’ve done exhibitions on everything, from spooky paper art, to whimsical local landscapes, to a geeky fantasy role playing card game.

What stood out to me, besides the great artists that they are able to draw for their exhibitions, is their ability to find a way to tie the whole story together into a cohesive event.

"Palacio de Cristal"  by Lauren Airriess
“Palacio de Cristal” by Lauren Airriess from the IN PLACE exhibition

RolemodelsPresale_004.jpg
ROLEMODELS exhibition with 99 unique playing cards

"Camp Beaver Lake" by Manuel Kilger
“Camp Beaver Lake” by Manuel Kilger from the GREAT PERSONALITY exhibition

7824217478_0173b90fc7_b.jpg
NIGHT OF THE EXQUISITE CORPSE paper art exhibition

What are the games going to be like?

DreamArcade_Screenshot2

The core game type is of the side-scrolling platformer variety…think Mario, Mega Man X. But the elements of each game will depend on what each of the artists comes up with. Over the past few months we’ve been working on the core game components from player behavior, to test levels and enemy types. Additionally, we’ve been working on ways to wrap up all of the per-level game assets in a way that each artist can replace them and still have a great game.

I love that I’m just the code monkey in the project, as Light Grey and each of the artists who submit, have total creative freedom to take the game where they want it.

What’s under the hood?

gameparts

HTML5

For maximum flexibility we decided to go with HTML5. This way we can have a game that could work on any platform, and also work in the browser. HTML also happens to be my platform du jour, but if I was making the decision again, I may have considered Unity now that I have experience in it, and they are supporting plugin-free gaming with WebGL export in Unity5.

Ludus.js and Jaws.js

As a starting point, I built off of the amazing open source WootStudio Platformer Starter Kit. It employs a simple platformer harness called Ludus.js which is a wrapper of the Jaws.js game sprite and state libraries. Using an open source starter kit is key, so we have the ability to push and extend beyond the basic capabilities of the starter kit. From new enemy types, to new game states and transitions.

Tiled terrain map editor

Chris at Light Grey is designing all the levels using Tiled, a terrain map editor that lets you export level data to JSON that can be imported into the game. Tiled is a super flexible editor, not only useful for platformers. It’s worth checking out if you’re doing any level design.

Why Windows?

Light Grey Art Lab is going to release all thirty mini-games and the completed full game on the Windows Store. By submitting them to an app ecosystem like Windows, they’re opening up the games to be discovered and played by casual gamers who may have never played a game in their web browser or engaged with an art gallery before.

Windows is a great first option because Windows and Windows Phone natively support HTML5 apps, so I can literally drag and drop all of the game code between the Windows game project and the web site without having to deal with a web browser control. Windows also does a great job of keeping the game running at 60fps, even on low-CPU spec devices like the original Surface tablet. Finally with over 200,000,000 Windows 8 Phones, Tablets, Laptops and Desktops there is great potential reach for their games.

But of course, since it’s HTML5 they can always wrap the game in an web browser control on iOS and Android to increase their reach to more tablets. Or even us something like PhoneGap or Cordova to package it up.

What’s next

Watch blog.lightgreyartlab.com for submissions and updates on the Dream Arcade exhibition. Between now and September you’ll start to see the games start to take shape! If you’re an HTML5 game developer, definitely check out the Platformer Starter Kit to see what is possible.

My goal as a technical evangelist is to help folks be successful on the Windows Platform. Whether that be helping a wizard dev build killer app on Windows Phone, or a group of artists build 30 games without. If you want to make apps or games too, reach out to me…I can help. @dwcares

Add a touch gamepad to your HTML5 game

Screenshot (104)

As we discussed in the last post, Design a game that stands out, a great way to differentiate your game is by having touch interactivity. Many touch games are not nearly as great as their console counterparts simply because they have crummy controllers.

For many games, it’s appropriate to have some sort of game controller UI to move your character around, and trigger an attack or jump. Like designing other custom touch interactions, this is hard to get right. Seb Lee-Delisle has a great write up on Multi-touch game controller in JavaScript/HTML5 for iPad, so I adapted his design to be easily reusable in your WinJS HTML5 games.

In this post, I’ll show you how to quickly get it added to a game, step-by-step.

TouchControls: GamePad

gamepad

I’ve added a new WinJS GamePad control to TouchControls control library. It lets you plug and play a gamepad into your existing game implementation, as easy as detecting keyboard or physical game controller input.

Step 1: Add the TouchControls NuGet package

In order to add the TouchControls GamePad to your game, the first step is to add the DWCares.TouchControls.WinJS NuGet package to your game.

To do this, it’s super easy. Start by opening up your WinJS game solution in Visual Studio and then right-click on your solution and click ‘Manage NuGet packages.’

image

In the dialog that pops up, just go ahead and search for “TouchControls” and click the “Install” button next to the TouchControls search result.

image

The last step for adding the NuGet package is to add a script reference to the TouchControls javascript file that you just added in your Default.html file.

<!-- Game dependencies -->
<script src="TouchControls/touchControls.js"></script>

Step 2: Add the GamePad control to your <canvas>

The next step is to instantiate the TouchControls.GamePad WinJS control. You can do this either in HTML using the data-win-control pattern, or in JavaScript. You must add the control on an HTML element of type <canvas>, so it can be drawn and sized correctly.

How to add it using HTML

<canvas id="canvas" 
        data-win-control="TouchControls.GamePad">
</canvas>

How to add it using JavaScript

function init() {
   _canvas = document.querySelector("canvas");
    _gamepad = new TouchControls.GamePad(_canvas);
 }

Step 3: Draw the GamePad every frame

I designed the control to be integrated in an existing HTML5 game loop, so I let you call draw from your game loop so you have control over it’s visibility, like any other game elements.

function draw() {   
    if(_gameOver) {
        drawMenu();   
    } else {
      _gamepad.draw();
      drawSprites();
      drawTiles();
      drawWorld();   
    }
}

Step 4: Handle input in your game loop

Like the draw loop, you can just as easily handle game controller input in your game update loop. Just like you were handling a key press or a physical game controller state.

function update() {
    if (_gamepad.leftController.position.x < 0 || 
        jaws.pressed("left")) {
           goLeft();
    }

    if (_gamepad.leftController.position.x > 0 || 
        jaws.pressed("right")) {
            goRight();
    }
}

Tweak till you’re done

After you handle input you’re gamepad will be fully operational. Just put your thumbs on your canvas and watch your player respond to your touch input! You can go further to tweak colors, opacity and controller mode. Read the github readme for full documentation.

Design a game that stands out

Mobile games are amazingly popular. Whether you’re launching an Angry Bird while you’re kicking back on the couch watching TV, or flapping a bird waiting in line at the grocery store, we love playing games. If you’re currently are, or considering entering the world of game dev, you may already know how competitive the space is. Even though there is a lot of money to potentially be made, there are also a lot of professionals investing a lot of money on a potential hit.

In this post, we’ll study a few of the elements that make great games stand out and talk through some examples of great games.

How do I differentiate?

In any given mobile marketplace there is an over-abundance of games, in each game category, it’s easy for any game, big or small, to get lost in that marketplace. Like planning any app, planning a game requires an amazing amount of focus, to set up how your game to be successful, and have a differentiated point of view from other games.

Starting with a great concept

title_69[1]

At the heart of every great game is a great concept. It’s usually a brief sentence that is the hook that makes you want to play it. There is really no formula to a great game concept. It is only limited by your creativity.

Example: EyeCycle

Recently at a local IGDA meetup, Zach Johnson pitched his Global Game Jam game, Eye Cycle. “It’s essentially a Tron or snake game, that you play on the surface of an eye.” Even before I saw the game, I wanted to play it. What’s great about this concept, is that it is unique, but simple. There’s a balance between clever and straightforward.

Addictive game play

starwhal

Another important way to set your game apart from the flock by having an amazing, or unique game play. This is something that is difficult to master. One key to building great game play is not being afraid to iterate. Many of the best games have their details tuned hundreds of times to make playing them just right.

Example: Starwhal

One game that I think exemplifies great game play is Starwhal: Just the tip. You’re essentially in a galactic Narwhal joust brawl (also a great concept) and with limited control of a blubbery beast, you have to flap your way to success by piercing the heart of your opponents with your tusk. Part of the reason it’s so great to play is you don’t have ultimate control over your beast, you have to clumsily flap your tail to make your attack. This paired with a slow-motion mode when a kill is possible, makes for a great game.

Beautiful art

Sword-and-Sworcery-1

Core to any great game, is beautiful art. In a sense, games are more art than computer science. You need the skills to develop it, but composing each frame of an interactive adventure, or arcade game is more like interactive art project than a programming puzzle. How do you pull together the right 2D or 3D background art, game objects, animations, sounds?

When building a game, find a way to team up with an artist. Even if you don’t have a “game illustrator” you’d be surprised how they’ll change your perspective on what the game is about. Not only are they likely to have the skills to help you differentiate your game art, you’d be surprised, many artists with amazing skills may have always wanted to pair up with someone and make a game.

Example: Sword and Sorcery

The game that always comes to mind for me when I think about a game that is centered around great art is Sword and Sorcery. From the minute you boot the game, you are immersed in these amazing landscapes with intricate detail. As you move through the game, you experience the different game atmospheres emotionally because the art itself draws emotion.

Make your game social

wordament

The best games always have some social component. As humans, we’ve evolved to interact with each other and if you’re game, cultivates that desire, it will be more successful.

There are multiple levels of social interactivity your game can have:

  1. Share information about the game. Offer some entry point to share that you’re playing the game, what your high score was or if you’ve unlocked some kind of achievement
  2. Offer a leaderboard. You could take the simplest game and add a leaderboard and you’ve added an entirely new element to the game. One example is Balloon, a game I wrote for Windows 8, where have to patiently tap every 2 seconds or so to keep a Balloon in the air and you get a point per tap. I added a worldwide leaderboard and people competed to get up to over 5000 taps..almost three hours of tapping! My colleague Stacey has a great post on how to easily create a leaderboard using Windows Azure like the one I made for Balloon.
  3. Versus play. If you offer a way for people to play against another player, that game will be more exciting and engaging. That could be turn-based play or real-time play and you can consider supporting online multi-player and device-to-device (e.g. wifi direct) multiplayer.
  4. Massively real-time multiplayer. The only thing better than playing against a few people is playing against everyone at once. Take any simple game concept and add, the fact that you’re playing against tens or hundreds of people at the same time, and you’ve got a hit.

Example: Wordament

Wordament is a great game success story. It takes a similar game mechanic from the Boggle board game and it has you play it with everyone at the same time. The massively multiplayer component creates an entirely new type of gameplay that is proportionally competitive to the size of the audience.

What single-player game would you be able to find the kid who can find hundreds of words per minute? It’s the competition that drives us.

Build great touch interactivity

Screenshot (104)

In mobile games, it’s easy to miss on building great interactive touch game play. If you build a game that was meant to be played with an Xbox controller, but you but simple buttons on screen, the kludginess of the UI could kill the game. Every touch game is loaded with custom touch interactions, and a lot of care has to go into ensuring these are designed and built correctly.

Example: Halo: Spartan Assault

Halo: Spartan Assault is a example of a game with great touch interactivity. They’ve essentially replicated the Xbox controller interactivity on-screen with a virtual gamepad. One thumb drives your character, and the other one shoots the gun the direction you point it. It provides an experience that mimics an Xbox controller, while being designed for touch.

Update: In a new post, how to add touch gamepad, you’ll see how to add a controller like Halo: Spartan Assault to your game using a WinJS control package that’s up on NuGet.

Don’t forget about the basics

It goes without saying, but any game that crashes, jitters, runs at a low framerate, or kills your battery is going to be dropped, regardless of how beautiful and differentiated it is.

I hope these examples are helpful when you’re considering how to make your game stand out. Now stop talking about it, go make a great game!

Bring your App Studio apps to Windows 8

Windows Phone App Studio Beta is awesome. It’s a great way to build your first app for Windows Phone. It lets you choose different design templates and styles, and lets you pull in different data sources, from RSS feeds, to YouTube, to Flicker or even Bing. In this post, we’ll talk about how to take an app that you created in App Studio go further by making it work on Windows 8 using the latest update to Windows Phone App Studio.

winphone copy

New features in App Studio

Just last week, the team announced an updated version of App Studio. Emilio, over at the Windows Phone Developer blog has a great blog post on the New UI and capabilities for Windows Phone App Stuido Beta developers.

The update is fairly comprehensive:

  1. A touch-enabled UI
  2. Rebuilt emulator
  3. Auto-image conversion
  4. Improved performance
  5. Improved generated source code
  6. Ability to generate a Windows Phone and Windows 8 solution

Hold the phone, it generates a Windows 8 solution?

Yeah, it’s great. The latest version actually exports cleanly-architected, full Visual Studio solution with a shared data model, and platform-specific view models and views. You essentially end up with a great launching point for a cross-platform app.

It doesn’t go as far as exporting the Windows Store upload package, so you still need to make some edits in Visual Studio, but it gets you most of the way there.

Building your first App Studio app

Before you can bring your app to Windows 8, you need to first build it for Windows Phone. There are tons of great tutorials online on how to create your first app using App Studio. My favorite is Christine Matheney’s tutorial, Build a Windows Phone app before lunch!

I went ahead and created a simple app for Olympics fans.

image

Generate and download your Source Code Package

Once you’ve designed and built your Windows Phone App Studio app, just go ahead and click the “Generate” button from the Finish step.

image

Even if you’ve already generated your app with the previous version of App Studio, you’ll need to do this again, in order to get the Windows 8 source project.

image

You’ll get this new dialog that let’s you choose the Windows Phone 8.0 and Windows 8.1 Visual Studio solution.

image

A few seconds later you’ll be ready to download. Rather than downloading the app to your phone, or Windows Phone publish package, you’re going to want to download the source code.

image

Just go ahead and download, extract and open up that folder and browse it’s contents. You’ll see the different shared libraries, and the source for both Windows 8 and Windows Phone.

image

Configure the solution

image

This next step requires Windows 8.1 and Visual Studio Pro or higher, so you can open a solution that includes both Windows 8 and Windows Phone projects. Anyone with a student DreamSpark Premium or startup BizSpark account should have access to it. In the solution, you should see both the Phone projects and the Windows 8.1 projects. After you open the solution, it only needs a little bit of configuration to get it working. You just need to load in the dependencies, set the startup project and load in your app logos.

Restore NuGet Packages

The App Studio generated code has some dependencies on some public libraries. You need to make sure these are loaded properly. It’s super simple to do this, just right click on the AppStudio.Store.UI solution, and select Manage NuGet Packages…

image

In the dialog that pops, there is a gold bar at the top that says, “Some NuGet packages are missing from this solution.” Go ahead and click the restore button, to load all the dependencies.

image

Set the startup project

The last you thing you need to do before you run it, is right-click on the AppStudio.Store.UI solution, and choose Set as Startup Project. This will make the Windows 8 project run, instead of the Windows Phone project.

image

Run your Windows 8 app

Hit F5, and watch your Windows 8 app run. All of the same functionality from your Windows Phone app is available, with the same styles, just adapted for the larger screen.

simulator

Getting ready for publishing

Before you can publish your app to the Windows Store, you’ll need to make a few more changes to get ready for primetime.

Update your application manifest

Screenshot (94)

Windows 8 has different tile sizes and splash screen sizes so you’ll need to create new images for Windows 8. To update the images, just open the package.appxmanifest file in the the Windows 8 project. If you’re going to design a logo for your app, see my other post on How to make an app logo that doesn’t suck for some tips.

Don’t forget about privacy policy

The generated Windows 8, app currently doesn’t have a privacy policy added by default. All Windows 8 apps that access the internet need a privacy policy to be accepted and published to the Windows Store. ExpressionBlend.com has a great tutorial and source code for adding this.

What’s next: The sky is the limit

Even though the app is ready for publishing, don’t stop there. How can you edit the code to make this app even more useful, desirable, and potentially profitable?

A few ideas:

  1. Add more custom behaviors, or views
  2. Support push notifications with Windows Azure
  3. Style the design in Blend
  4. Add the in-app advertising control

In conclusion, go bring all of your Windows Phone App Studio apps to Windows 8. Based upon the improvements that we’ve seen App Studio make so far, I would expect that App Studio will continue to evolve!

win8app copy

Introducing WinJS TouchControls

In an earlier post, I walked through step-by-step how to build pull to refresh. While informative, it is a lot of work if you just want to add this cool trick to your app. In this video, I show you how to use TouchControls to add pull to refresh to your existing app in a couple minutes.

I made TouchControls, in order to help WinJS developers who want to easily improve the touch interactivity of their apps. It’s a NuGet package of WinJS controls that you can add through Visual Studio. Over time I’ll continue to add more controls based on common app patters I see and feature requests. Add a comment on this post if you have feature ideas!

TouchControls is availiable on NuGet:
https://www.nuget.org/packages/DWCares.TouchControls.WinJS

Here is GitHub link for TouchControls for code and documentation:
https://github.com/dwcares/TouchControls

Pro Tip: If you want to make your own WinJS controls, read Brandon Paddock’s post on custom WinJS controls. I wish he had written this before I made TouchControls!

Handle projectors when using actual size in your app

projector

In a previous post, Using Actual Size in your Windows 8.1 app, we talked through step-by-step how to build an app that displays content with consideration of the actual screen size. Since then, I was demoing my awesome RealRuler app, and it didn’t work on the projector.

Screen size info can be zero

As good as the post was, it left out one important case: projectors. When you project a Windows 8.1 PC and duplicate your screen, Windows doesn’t know which screen to give you the pixel density of, so it gives you zero. Even if you aren’t duplicating your screen, many projectors, and older monitors don’t provide accurate display size information through their EDID, so it’s a good error case to handle anyway.

Handle it

It’s simple enough to handle this case, just check if the returned value is greater than zero.

var info = Windows.Graphics.Display.DisplayInformation.getForCurrentView();
if (info.rawDpiX > 0) {
    // Do the actual size stuff
} else {
    // Fake it till you make it, or fail out
}

Updated RealRuler code

WindowsStore_badge_en_English_Green_large_120x462

I submitted an update to RealRuler published on the Windows Store, and updated the code published on github for you. Go check it out if you want to see how I simulate screen size when it’s not available.

GitHub