Curious about Xamarin for Win8, IOS, and Android?

Here are some notes about downloading and setting up Xamarin’s Field Service sample app in Visual Studio. (It’s one of Xamarin’s cross platform sample apps. It includes a project for WinRT, iOS, Android, all of which leverage the same core set of business logic.)

I assume you already have Visual Studio 2012 and Xamarin installed on your Windows 8 dev box (and Xamarin on a Mac if you’re going to build / run the app on an IOS simulator).

Download Xamarin’s prebuilt apps from their public git repository
c:\repos> git clone https://github.com/xamarin/prebuilt-apps.git xamarinPrebuilt

Also download SQLite-net from their public repo
c:\repos\xamarinPrebuilt\fieldservice\dependencies\sqlite-net> git clone https://github.com/praeclarum/sqlite-net.git

Open the VS version of the Field Service solution (FieldService.VisualStudio.sln).

Set the WinRT project as the startup project.
Build and deploy the app and kick the tires.
Looks nice, eh?

You’ll have to manually add the IOS project to the FieldService solution. (Not sure why it wasn’t already a part of the solution, but it’s easy to add.)

If it’s not open already, open the Field Service solution (FieldService.VisualStudio.sln)
Add the FieldService.IOS project to the solution
Add the Bing Maps SDK for Windows RT via NuGet

Before you run the IOS version in the simulator, be sure to enter something in the IOS project’s properties for application name, identifier, and version. Otherwise the simulator may go crazy.
Set the IOS project as the startup project
Debug toolbar should have Debug, iPhoneSimulator, iPad 6.1

Run it.

Yep. It really works. C# and Visual Studio for Windows 8, IOS, and Android.

Handy reference for the IOS Simulator gestures:
http://developer.apple.com/library/ios/#documentation/IDEs/Conceptual/iOS_Simulator_Guide/InteractingwiththeiOSSimulator/InteractingwiththeiOSSimulator.html

Silverlight game loop – revisited for Windows 8 and Visual Studio 2012 RTM

I finally found the code I created when I ported Mike Snow’s Silverlight snowflake “game” into a Windows 8 C#/XAML “game.” http://jimblizzard.wordpress.com/2012/05/18/porting-a-simple-silverlight-game-loop-to-windows-8-metro-style/

(Yes I had checked my Release Preview-based code into Team Foundation Service, but I couldn’t remember which project I’d put it in. And I’ve rebuilt all my machines onto RTM bits, so I didn’t have a local copy. But, there it was, sitting right where I’d left it on the server. I love the Team Foundation Service in the sky.)

OK. Where was I?

For some reason in my previous version when I created the project I wound up with the files that are included for layout aware pages. (Code that helps wire up a page to respond to Snapped, Filled, Portrait, and Landscape view changes.) Anyway, there was a change from RP to RTM that affected ApplicationViewStateChangedEventArgs and ApplicationView.GetForCurrentView(), both of which are used in LayoutAwarePage.cs…. One of those files that’s part of the layout aware pages code that your project can leverage.

I took the easy route and created a new Blank C# Windows Store Application and copied my code from the RP version into the new project. And it worked without any changes. So now I yet again have a running snowstorm game in Windows 8.

Time to write a game of my own: perhaps using the accelerometer to send the snow moving left or right, or using the Shake event to allow the user to make it look like a snow globe that’s been shaken. And of course I’ll add ways to do this via touch, keyboard or mouse, for those who don’t have those device sensors.

Stay tuned. . .

Handy 2nd monitor for road warriors

Before the Tampa WinDev user group meeting started this past Tuesday, some of us were talking about the virtues of having a small second monitor to carry around in your laptop bag. I use two monitors at home, and really miss not having a second one while on the road. They really help when coding, debugging, etc. Second monitors just make you more productive. Everyone should have one.

Healy has a cool one that does both landscape and portrait mode. It’s about 10” diagonal and has a nice display. But my eyes just aren’t what they used to be and I need large fonts. We also debated the merits of having a touch monitor, and Kevinmentioned something about getting an cover that would turn a non-touch into a touch monitor.

I looked around on Amazon.com for a few minutes, read some reviews, and decided on a 14” LCD Lenovo ThinkVision LT1421 wide monitor. Resolution: 1366 x 768. The USB cable handles both the display feed and the power. It’s not a touch monitor, but it is very slim and lightweight, and it handles the 16:9 aspect ratio. Perfect.

It arrived the next day (have to love Amazon Prime!), and it is sweet. It has a cool little kickstand (which has a rubberized tip so it won’t slide – very nice touch). You can set it on its cover, which has some grooves in it to help make sure the kickstand doesn’t slide. The device has a solid feel, and a very clean look. Here’s a picture of it’s backside.

image
Back view of the ThinkVision, sitting on its cover.

It’s just a bit larger than the Samsung slate from //BUILD, and the slate can drive it quite nicely. They make a good looking pair. (I cut off about 2” from the right side of the ThinkVision when I took the picture below.)

image
Slate on the left, ThinkVision on the right.

So, what did it take to get it up and running? Especially on Windows 8 Release Preview?

I set it up on my laptop and my slate. Both are running Windows 8 Release Preview, and the setup was very easy. The “hardest” part was downloading the driver. (It comes with an installation CD for earlier operating systems, but I knew I’d have to download something new.)

Here’s what I did. NOTE: THIS WORKED FOR ME. YOUR MILEAGE MAY VARY.

1. I plugged it into the USB port on my laptop.

2. It appeared Device Manager, and device manager knew the device name, but didn’t have a driver for it.

image

image

3. I went to Lenovo.com/support to get the driver, and chose “Use Quick Path.”

4. For product information I put in 1452-DB6, which was on the label of the installation CD. (I tried using the model number from the back of the device itself, but that number wasn’t recognized by the website.)

5. This brought up a page for ThinkVision LT1421 14-inch Wide Flat Panel Monitor. Bingo. I clicked Devices & Software.

6. Lenovo only had drivers through Windows 7 on their site, but I went ahead and downloaded the Win7 driver. When I tried to install it, a dialog box popped up and told me where I could find the driver.

image

7. I went to www.displaylink.com/softwareand in the middle of the page I saw a wonderful sight:

image

8. I downloaded the beta driver and it installed without a hitch.

image

image

9. The installer didn’t give me a choice of where to put the driver. I poked around in Windows Explorer for a couple of minutes, but didn’t find it anywhere. So I looked again in Device Manager, and DM had found the driver, and placed the entry under the USB Display Adapters category. Nice.

image

10. After I installed the driver on my slate, I glanced over and saw the ThinkVision was already working. I didn’t have to do anything else! (On my laptop I had to reboot.)

The slate only has one USB slot, not counting the USB slot on the base unit. I use a cheap USB hub to connect my headphones, keyboard & mouse, etc, to the slate. (I don’t bother using the one on the base unit. Cool thing is, even though the ThinkVision comes with a 1-to-2-USB plug extender, I was able to just plug in one of the USB plugs into the hub, and it worked just fine. Very nice.

And it even works great as a third monitor when connected to my laptop at home. I’m now at least 3x more productive than normal.

image
Three is definitely not a crowd.

This is going to be very handy. 🙂

–bliz (@SnowstormLife)

Windows 8 Dev Camps and Hackathons

Well, it was so much fun the last time around, and since it was SRO in every Florida city we went to, Healy and I have decided to give it another go. This time, not one but TWO full days of camping and hacking fun. Orlando and Ft. Lauderdale, look out! Healy and I are coming to town.

Ft Lauderdale

Orlando

Don’t live in Florida? Here’s a link to all of ‘em across the country.

See you there!

— bliz (@SnowstormLife)

Windows 8 Dev Camp recordings

[7/9/2012 – updated with the remainder of the webcasts.]

If you can’t make it to one of the live Windows 8 Dev Camp webcasts, no worries. They’re being recorded and posted online for on-demand viewing. It takes a few days for the recording to be posted.

I’ll update this blog post as more recordings are added.

Note, to view the “Intro” webcast, just click on the gray “View Online” button and media player will open. No need to click on the orange “Register” button. The “Designing” page has the webcast embedded on the page itself and also makes it available via download for offline viewing. Hopefully we’ll be able to get the “Intro” webcast page updated to be like the “Designing” page.

Happy viewing.

–bliz (@snowstormlife)

Porting a simple Silverlight game loop to Windows 8 Metro style

Yesterday evening I went on the hunt for a XAML/C#-based example of a game loop. I ran into a couple of OLD blog posts by Mike Snow. Naturally it caught my eye, simply because of his last name.

In his posts he described game loop based on Silverlight 2. OK. Silverlight uses XAML, and the code was C#. XAML/C# are first-class citizens in the Windows 8 Metro style app world, so I figured, why not see what it takes to make this work on Windows 8?

The posts I used as reference:

The first post contains the code for the majority of the application – the XAML and the C# code. In second post Mike switches the game loop to use CompositionTarget.Rendering instead of DispatcherTimer or the Storyboard timer. Are they still around in the Metro XAML world?

To find out, I open Visual Studio and took a look in the Object Browser. Guess what I found.

Yep. DispatcherTimer, Storyboard, and CompositionTarget are all alive and well in the Windows.UI.XAML namespaces.

So I figured, why not give it a try?

It turned out that most of the “work” was simple copy & paste. I had to change the using statements to point to the Windows.UI.Xaml namespaces for the controls. Had to change the signature for a couple of the event handlers. And a few other minor things.

Here are the steps I took to make the port.

MainPage.xaml

  1. Create a new C# Metro style BlankApplication called Win8Snowflakes.
  2. Delete BlankPage.xaml then added a new UserControl named MainPage.xaml. (Yes, we’re adding a UserControl and naming it a page.)
  3. Replace the contents of MainPage.xaml with the XAML for the UserControl Snowflakes.Page (from the blog post “making it snow”). Then . . .
    1. Replace All UserControl with Page
    2. Change x:Class=”Snowflakes.Page” to x:Class=“Win8Snowflakes.MainPage” to match the name of the app & page.
    3. Remove the full screen Button. Just delete that entire tag. We won’t worry about going full screen.

MainPage.xaml.cs

  1. Replace the contents of MainPage.xaml.cs with the C# code sample for public partial class Page : UserControl (from the blog post “making it snow”). Then. . .
    1. In the using statements you’ll see some red squigglies. To get rid of them, change Controls, Documents, Media, Media.Animation, Input, and Shapes to reference Windows.UI.Xaml instead of System.Windows
    2. Add the following using statement:
      using Windows.UI.Xaml.Controls.Primitives;
    3. Change namespace Snowflakes to namespace Win8Snowflakes
    4. Change Page : UserControl to MainPage : Page
    5. The method prototypes for the event handlers for Slider_ValueChanged and Wind_ValueChanged need to be changed. You need to replace RoutedPropertyChangedEventArgs<double> with RangeBaseValueChangedEventArgs, such as from this:
      1. Wind_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) to this:
        private void Wind_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    6. Remove the Button_Click method. (We’re not going to deal with changing the window size for now.)
    7. In the MainPage() constructor, we need to change the way the event handler is defined and the signature for the event handler.
      1. To wire up the event handler,
        _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      2. And the new signature for the event handler:
        void _snowflakeTimer_Completed(object sender, object e)

Snowflake.xaml

  1. Add a new UserControl to your project and name it Snowflake.xaml
  2. Replace the contents of Snowflake.xaml with the XAML for the Snowflakes.Snowflake (from the blog post “making it snow”). Then . . .
    1. Change x:Class=”Snowflakes.SnowFlake” to x:Class=”Win8Snowflakes.SnowFlake”

Snowflake.xaml.cs

  1. Replace the contents of Snowflake.xaml.cs with the C# code sample for public partial class Snowflake : UserControl (from the blog post “making it snow”). Then. . .
    1. Change the using statements just as we did in MainPage.xaml.cs to reference the Windows.UI.Xaml namespaces for Controls, Documents, Media, Media.Animation, Input, and Shapes
    2. Change namespace Snowflakes to namespace Win8Snowflakes

App.xaml.cs

  1. In the OnLaunched() method, change rootFrame.Navigate(typeof(BlankPage)); to rootFrame.Navigate(typeof(MainPage));

Images

  1. Download the zip file containing the two image files (one is for the background and the other for the snowflake) from Mike’s download link.
  2. Unzip the files and copy them to your project’s folder.
    1. Right click on the project and Add Existing Item, and select the two files, to add them to the project itself.
       image

Time to run the app. You should see this

image
The running app.

Congratulations.

One more change

It’s very easy to change the game loop to use the CompositionTarget.Rendering event instead of a Storyboard.

  1. In the MainPage() constructor for MainPage.xaml.cs
    1. Remove the following 3 lines:

      _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(10);
      _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      _snowflakeTimer.Begin();

    2. And replace them with this one line:
      CompositionTarget.Rendering += CompositionTarget_Rendering;
    3. Change the signature for the event handler method itself
      1. from
        void _snowflakeTimer_Completed(object sender, object e)
      2. to
        void CompositionTarget_Rendering(object sender, object e)

And that’s it.

As you’ve probably heard over and over again, if you’re a Silverlight developer you have the skills to be a Windows 8 Metro style developer.

A great resource for developing Metro style apps on Windows 8 is http://dev.windows.com.

Happy Windows 8 developing!

–bliz (@snowstormlife)

Metro Accelerator Labs – Speeding Your App Development

Yesterday I blogged about the live webcast series on Windows 8 Metro style development that’s currently underway.

Today I want to make sure you’re aware that we have a Metro Accelerator Lab coming up at the end of May here in Tampa. Joe Healy and I are looking forward to seeing you there.

Oh, by the way, I “borrowed” Chris Bowen’s post on the Accelerator labs and inserted it below. (Thanks Chris!  : )

Do you have a Windows 8 or Windows Phone app idea?  Maybe you’re already working on an app and would like some guidance for getting it across the finish line?  Then come to one of the upcoming Metro Accelerator Labs

These are three-day opportunities to develop your app with experts on hand to help you with any questions:

MetroAcceleratorLabs

Please join us for a special event that you simply don’t want to miss – the Metro Accelerator Lab. This is your chance to dig deeper into Windows 8 and Windows Phone and gain all the knowledge you need to immediately start (or finish) building beautiful, fluid and immersive Metro style Windows and Windows Phone applications.

In this FREE, three-day developer event, you’ll get expert help building, testing and deploying your Metro style apps. Experience step-by-step advice from Microsoft and community experts and one-on-one technical assistance. Come for an hour, or all three days. Bring that app you’ve been tinkering with, or a new idea that you’re eager to build and we’ll help you get well on your way to releasing that killer app to the world.

We’ll also help you understand the steps needed to get your Windows 8 Metro style app into the Windows Store.

We’ll have Windows Slate and Windows Phone devices available on site so you can see exactly how your app will run. And of course, there’s always a chance we’ll have a few to give away during the course of the event.

Agenda (subject to change)

Day 1

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Designing Metro style: principles and personality”
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 5:00 – Wrap Up

Day 2

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Effective Metro Style Applications: User Experience (UX)” – To help you focus on making your Metro style apps great, we’ll review the essential features, design, and behavior of effective Metro style apps
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 5:00 – Wrap Up

Day 3

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Effective Metro Style Applications: UX (continued), Store, Performance” – Part two of our dive into the essential features, design, and behavior of effective Metro style apps
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 3:00 – “appX” – Your chance to show off your app and win prizes!
  • 4:30 – Wrap Up & Giveaways

Seating is limited and registration is not guaranteed. Secure your spot today!

Prerequisites

You must bring a laptop/notebook computer.  To develop Windows 8 Metro style apps, please install the Windows 8 Consumer Preview and Visual Studio 11 Express for Windows 8.  To develop for Windows Phone, install the Windows Phone SDK.

The focus is on your app, and while this isn’t a day of training (like our Windows Developer Camps), we will have a brief session every morning to give you ideas that you can turn into reality as you code.

Here in the eastern US, there are four Metro Accelerator Labs on the way:

Date Location  
May 30 – June 1 Tampa, FL Register
June 5-7 Alpharetta, GA Register
June 6-8 Waltham, MA Register
June 11 & 12 Orlando, FL
(at TechEd)
Open to all TechEd Attendees – just drop in!

So register today, bring your PCs and apps/ideas, and get ready to accelerate!

And as always, if you wasn’t to dig into Windows 8 Development, here are a couple of places to go first:

Can’t make it to a Windows 8 Dev Camp?

. . . But wish you could?

You’re in luck! Microsoft is going to be delivering the content via webcasts, beginning TODAY (May 14) at 11:30 AM Eastern. Too late for today’s session.

[UPDATE: Webcast recordings are being made available. Please see http://jimblizzard.wordpress.com/2012/05/21/windows-8-dev-camp-recordings/ for details and links. — bliz]

Here is the session list via Jamie. Good lunchtime feasting! (for Eastern Time Zone anyway)

And here it is, for your convenience. . .

Monday May 14th, 2012  8:30 AM PST
Introduction to the Windows 8 platform and the Windows store
Jennifer Marsman
Windows 8 is Windows re-imagined!  Join this session to learn about the new platform for building Metro-style applications.  Get an understanding of the platform design tenets, the programming language choices, and the integration points with the operating system and across Metro-style apps.  We will also discuss the enormous opportunity for developers to make crazy money with the Windows Store.  You will walk away with the resources to begin writing Metro applications for Windows 8.

Since that session is already history, here are a couple of links to information about the Windows 8 platform and store:

Wednesday, May 16th, 2012    8:30 AM PST
Designing apps with Metro style principles and the Windows personality
Chris Bernard
Metro style design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Metro style apps. Consider these principles as you plan your app, and always ensure your design and development choices live up to these principles.

Monday, May 21, 2012    8:30 AM PST
Building Metro style apps with XAML: What .NET developers need to know
John Wiese

If you are experienced with .NET or Silverlight and are already familiar with XAML, this session will teach you everything you need to know to create a Metro style app for Windows 8. This session will cover updates to familiar features and explore concepts that are new for Windows 8. We’ll talk about building reusable Windows Runtime Components in C#, Async programming in Windows 8 and both the Visual Studio and Expression designers. This session will show you how to turn your XAML skills into money-making Metro style apps.

Wednesday May 23, 2012    8:30 AM PST
What HTML developers need to know about coding Windows 8 Metro style apps
Michael Palermo
This session is perfect for any web developer wanting to leverage his/her skillset to develop Windows 8 Metro style apps. The session begins by proving how much web developers already know about building apps for Windows 8. The focus then turns to how to write JavaScript code with WinJS. Key points for Metro style app development will be highlighted by implementing popular feature requests using HTML5, CSS3, and JavaScript.

Thursday, May 31, 2012    8:30 AM PST
Win as One: How Contracts in Windows 8 Help You Build a Killer Metro App
G. Andrew Duthie
Contracts are agreements between Windows and your Metro style app that allow you to integrate Windows 8 features into your app. For example, Windows 8 lets users share content from one application to another by using the Share contract.

In this session, you’ll learn how contracts work and how to implement the built-in contracts such as Search, Share, Settings, and More. With Contracts, you can help users get more out of your app, and in a way that is consistent and intuitive, and they will reward you by coming back to your app again and again.

Monday, June 4th, 2012     8:30 AM PST
Bring Your Windows 8 Metro Style Apps to Life with Tiles and Notifications
Chris Bowen

Tiles and Notifications are important ways to draw attention to your app and improve your users’ experiences.  Tiles can draw users back into your app when your tile comes to life on Start screen.  They can also let users personalize their Start screen by creating deep links to specific places within your app.  Notifications, delivered through the Windows Push Notification Service, can inform and draw your users back into your app even when it’s not running.
In this session, you will learn how to effectively implement Tiles and Notifications to help your apps shine.

Wednesday, June 6th, 2012    8:30:00 AM PST
Building Windows 8 Metro style casual games using HTML 5
David Isbitski

The intent of this session is to help HTML5/JavaScript developers with writing their first Metro Style App in a fun, immersive way. We will cover the basics of HTML5 Canvas gaming and how we can easily bring it to Windows 8.  We will then add additional game functionality as we introduce HTML5 Audio,  CSS3 styling and web fonts, implementing a game loop with JavaScript, 3rd party frameworks, touch, camera, accelerometer, and WinJS controls.