<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Learning</title>
	<atom:link href="http://www.expressionblend.com/articles/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.expressionblend.com/articles</link>
	<description>Rich Application Design &#38; Development</description>
	<lastBuildDate>Sat, 12 May 2012 09:57:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Prevent ugly images on Windows Phone</title>
		<link>http://www.expressionblend.com/articles/2012/05/10/prevent-ugly-images-on-windows-phone/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/10/prevent-ugly-images-on-windows-phone/#comments</comments>
		<pubDate>Thu, 10 May 2012 20:16:31 +0000</pubDate>
		<dc:creator>Timmy</dc:creator>
				<category><![CDATA[windows phone 7]]></category>
		<category><![CDATA[16bit versions]]></category>
		<category><![CDATA[256 colors]]></category>
		<category><![CDATA[artwork]]></category>
		<category><![CDATA[gradients]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[phone application]]></category>
		<category><![CDATA[windows phone]]></category>

		<guid isPermaLink="false">http://www.timmykokke.com/?p=636</guid>
		<description><![CDATA[Problem Sometimes images look nice on a regular computer screen, but when used in your Windows Phone application they become ugly. This effect is most often seen on gradients and images with smooth coloring. In gradient images you’ll start to see stripes and bands. It looks like the colors in the image don’t blend anymore. [...]]]></description>
			<content:encoded><![CDATA[<h1>Problem</h1>
Sometimes images look nice on a regular computer screen, but when used in your Windows Phone application they become ugly. This effect is most often seen on gradients and images with smooth coloring. In gradient images you’ll start to see stripes and bands. It looks like the colors in the image don’t blend anymore.

Below are the 32bit and 16bit versions of the same images. Notice the banding on the right one.

<a href="http://www.timmykokke.com/wp-content/uploads/2012/05/32bit.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="32bit" src="http://www.timmykokke.com/wp-content/uploads/2012/05/32bit_thumb.png" alt="32bit" width="240" height="240" border="0" /></a><a href="http://www.timmykokke.com/wp-content/uploads/2012/05/16bit.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="16bit" src="http://www.timmykokke.com/wp-content/uploads/2012/05/16bit_thumb.png" alt="16bit" width="240" height="240" border="0" /></a>
<h1>Cause</h1>
This problem may be caused by a setting in your application or just by screen of the phone itself. It occurs when a 32bit image is shown on a 16bit screen. Because there are way more shades of colors available in 32bit images than in 16bit images, you’ll start to see these artifacts when the <em>depth</em> doesn’t match the screen.
<h1>Solution</h1>
The solution is relatively simple. Just scramble the pixels a bit to make the colors look like they blend. This process is called <em>dithering</em>. Maybe you’ll remember, back in the days with Windows 3.11, you often saw ‘gradients’ in images with only two colors. Starting with 1 color and along the image there appeared more and  more pixels of a different color.

&nbsp;

&nbsp;

<span id="more-920"></span>

Here’s another example of <em>dithering.</em> When you have only 256 colors available for a gradient, you’ll have to do something like this to blend from color to color.

<a href="http://www.timmykokke.com/wp-content/uploads/2012/05/image.png" target="_blank"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="image" src="http://www.timmykokke.com/wp-content/uploads/2012/05/image_thumb.png" alt="image" width="640" height="192" border="0" /></a>

Below is the dithering effect used on a 16bit image. On the left is the original 32bit image. The middle image is the plain 16bit version, with banding. The one on the right one dithering applied to it.

<a href="http://www.timmykokke.com/wp-content/uploads/2012/05/32bit1.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="32bit" src="http://www.timmykokke.com/wp-content/uploads/2012/05/32bit_thumb1.png" alt="32bit" width="170" height="400" border="0" /></a><a href="http://www.timmykokke.com/wp-content/uploads/2012/05/16bit1.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="16bit" src="http://www.timmykokke.com/wp-content/uploads/2012/05/16bit_thumb1.png" alt="16bit" width="176" height="400" border="0" /></a><a href="http://www.timmykokke.com/wp-content/uploads/2012/05/16bit-Dithered.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="16bit-Dithered" src="http://www.timmykokke.com/wp-content/uploads/2012/05/16bit-Dithered_thumb.png" alt="16bit-Dithered" width="170" height="400" border="0" /></a>
<h1>How to fix</h1>
The best way to fix this problem is to make sure your images look right. Don’t depend on the phones to fix the problem for you. I personally do not want to take the risk of any of my images looking ugly on someone’s phone. When the artwork is crap the app is probably too. Always make sure you walk the extra mile to make your apps look perfect. If a similar app looks better, people use that one instead of yours!

The easiest and free way to fix your images is to use <a title="Paint.NET" href="http://www.getpaint.net/" target="_blank">Paint.NET</a> with a <a title="Paint.Net Dithering" href="http://bit.ly/PaintNetDither" target="_blank">special plugin</a>.

After downloading and installing I’ve opened a splash screen for my app in Paint.NET. The image uses a lot of smooth transitions between colors and <em>will</em> look bad on some phones.

<a href="http://www.timmykokke.com/wp-content/uploads/2012/05/image1.png" target="_blank"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="image" src="http://www.timmykokke.com/wp-content/uploads/2012/05/image_thumb1.png" alt="image" width="240" height="228" border="0" /></a>

Next, go to <em>Effects</em> –&gt; <em>Photo</em> in the menu and select <em>Simulate Color Depth</em>…

<a href="http://www.timmykokke.com/wp-content/uploads/2012/05/image2.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="image" src="http://www.timmykokke.com/wp-content/uploads/2012/05/image_thumb2.png" alt="image" width="481" height="266" border="0" /></a>

I’ve you did not get the earlier part about the dithering and the different bit depths, I suggest you play a little with the settings to see what’s effect of the different bit depth settings. And turn <em>Dither</em> on and off a couple of times to see the magic happening.

I personally use the <em>Bayer Ordered 8×8</em> method on all my images. But you’ll free to use an other one if you like.

<a href="http://www.timmykokke.com/wp-content/uploads/2012/05/image3.png" target="_blank"><img style="background-image: none; margin: 7px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="image" src="http://www.timmykokke.com/wp-content/uploads/2012/05/image_thumb3.png" alt="image" width="303" height="206" border="0" /></a>

Hit <em>Ok</em> and you’re done.

If you are using Photoshop for your imagery, you can find an <em>action</em> to apply dithering to your images over at <a title="Photoshop Dithering" href="http://bit.ly/PhotoshopDither" target="_blank">Robby Ingebretsen’s blog</a>.
<h1>Wrap-up</h1>
Unfortunately not everyone is dithering their images, which results in bad looking apps. As you’ve seen it’s pretty simple to resolve. I hope to never see banding and ugly artifacts in applications anymore.]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/10/prevent-ugly-images-on-windows-phone/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Animated gifs in XAML/C# :)</title>
		<link>http://www.expressionblend.com/articles/2012/05/07/animated-gifs-in-xamlc/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/07/animated-gifs-in-xamlc/#comments</comments>
		<pubDate>Mon, 07 May 2012 20:45:16 +0000</pubDate>
		<dc:creator>advertboy</dc:creator>
				<category><![CDATA[Blend]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[XNA]]></category>
		<category><![CDATA[WinRT]]></category>

		<guid isPermaLink="false">https://advertboy.wordpress.com/?p=1778</guid>
		<description><![CDATA[Someone the other day tweeted a link to some very cool animated gifs. I love animated gifs !! I have always wanted animated gifs in Silverlight/WPF BUT for reasons unknown they never came. They would have been perfect for A … Continue reading →]]></description>
			<content:encoded><![CDATA[Someone the other day tweeted a link to some very cool animated gifs. I love animated gifs !! I have always wanted animated gifs in Silverlight/WPF BUT for reasons unknown they never came. They would have been perfect for A … <a href="http://advertboy.wordpress.com/2012/05/08/animated-gifs-in-xamlc/" target="_blank">Continue reading <span class="meta-nav">→</span></a><img src="http://stats.wordpress.com/b.gif?host=advertboy.wordpress.com&amp;blog=87214&amp;%23038;post=1778&amp;%23038;subd=advertboy&amp;%23038;ref=&amp;%23038;feed=1" alt="" width="1" height="1" border="0" />]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/07/animated-gifs-in-xamlc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>One Bitmap to Rule Them All &#8211; WriteableBitmapEx for WinRT Metro Style</title>
		<link>http://www.expressionblend.com/articles/2012/05/07/one-bitmap-to-rule-them-all-writeablebitmapex-for-winrt-metro-style/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/07/one-bitmap-to-rule-them-all-writeablebitmapex-for-winrt-metro-style/#comments</comments>
		<pubDate>Mon, 07 May 2012 17:51:00 +0000</pubDate>
		<dc:creator>Rene Schulte</dc:creator>
				<category><![CDATA[Metro]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[Xaml]]></category>
		<category><![CDATA[Windows 8]]></category>
		<category><![CDATA[windows phone]]></category>
		<category><![CDATA[WinRT]]></category>

		<guid isPermaLink="false">http://www.expressionblend.com/articles/?guid=4f0d7d924e3680087736aefb3e262281</guid>
		<description><![CDATA[A couple of weeks ago we added official WPF support to  WriteableBitmapEx. Today I'm happy to announce that WriteableBitmapEx now also officially supports Windows 8 Metro Stlye WinRT .NET XAML. With that WriteableBitmapEx is now available for 4 platforms: WPF, Silverlight, Silverlight for Windows Phone and Metro Style WinRT .NET. Although Direct2D is the best solution for [...]]]></description>
			<content:encoded><![CDATA[<div class="separator" style="clear: both; text-align: center;"><a style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" href="http://1.bp.blogspot.com/-ZGok4PyhBQ0/TqrwNmH-DII/AAAAAAAAAVg/WJw3hVEl0h8/s1600/wbx_rotated.jpg" target="_blank"><img src="http://1.bp.blogspot.com/-ZGok4PyhBQ0/TqrwNmH-DII/AAAAAAAAAVg/WJw3hVEl0h8/s1600/wbx_rotated.jpg" alt="" border="0" /></a></div>
A couple of weeks ago we <a href="http://kodierer.blogspot.de/2011/12/writeablebitmapex-10-coming-soon-test.html" target="_blank">added official WPF suppor</a>t to  <a href="http://writeablebitmapex.codeplex.com/" target="_blank">WriteableBitmapEx</a>. Today I'm happy to announce that <a href="http://writeablebitmapex.codeplex.com/" target="_blank">WriteableBitmapEx</a> now also officially supports Windows 8 Metro Stlye WinRT .NET XAML. With that WriteableBitmapEx is now available for 4 platforms: WPF, Silverlight, Silverlight for Windows Phone and Metro Style WinRT .NET.
Although <a href="http://msdn.microsoft.com/en-us/library/windows/desktop/dd370990(v=vs.85).aspx" target="_blank">Direct2D</a> is the best solution for fast 2D graphics with Windows 8 Metro Style, I think there are scenarios where the WriteableBitmapEx could be helpful, esp. when using C# with XAML. I also know that some devs were waiting for this to port their Windows Phone apps to Windows 8 Metro Style.

<strong>WinRT Differences</strong>
Unlike the Silverlight <a href="http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.writeablebitmap(v=vs.95).aspx" target="_blank">WriteableBitmap</a>, the Metro Style <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.imaging.writeablebitmap" target="_blank">WriteableBitmap</a> doesn't provide the pixel data directly. Its <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.imaging.writeablebitmap.pixelbuffer" target="_blank">IBuffer PixelBuffer</a> property doesn't have an interface to get the color information. Fortunately there are a few <a href="http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/39b3c702-caed-47e4-b7d3-b51d75cbca9b" target="_blank">C# extension methods available</a> which provide the pixel data as byte array or stream in the <a href="http://en.wikipedia.org/wiki/RGBA_color_space" target="_blank">BGRA pixel format</a>. Yes, BGRA and not like all the other platforms supported by WriteableBitmapEx as ARGB. The BGRA format is <a href="http://msdn.microsoft.com/en-us/library/windows/desktop/dd756766(v=vs.85).aspx#supported_formats_for_dxgi_surface_render_target" target="_blank">mainly used by Direct2D</a>, which might be the reason for this hidden, but important difference of the Metro Style <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.imaging.writeablebitmap" target="_blank">WriteableBitmap</a>.

&nbsp;

&nbsp;

<span id="more-908"></span>
The WriteableBitmapEx algorithms are written for the ARGB pixel format. Fortunately I was able to keep the details away from the library user by leveraging the BitmapContext concept we introduced with the WPF support. This approach makes it possible to share almost the same code for all 4 platforms without being cluttered with #if directives all over place.  Actually the most significant WinRT adaptation inside the WriteableBitmapEx methods was done in the FromContent method, which loads an image from the app content and provides it as WriteableBitmap. See <a href="http://stackoverflow.com/questions/10197170/in-winrt-how-do-i-load-an-image-and-then-wait-only-as-long-as-is-needed-for-it/10464949#10464949" target="_blank">this StackOverflow question I answered</a> if you're interested in the details.
Nothing comes for free, but if the BitmapContext is used the right way, the performance hit won't be that much thanks to an internal reference counting WriteableBitmapEx' BitmapContext uses. No worries, you don't have to change all your WriteableBitmapEx calls, just wrap your calls in a simple using(writeableBmp.GetBitmapContext()) and you will only have one buffer conversion instead of one for each draw call.
It's really simple to use:
<pre class="brush: c-sharp;">private void Draw(){   // Wrap updates in a GetContext call, to prevent invalidation overhead   using (writeableBmp.GetBitmapContext())   {      writeableBmp.Clear();      DrawPoints();      DrawBeziers();

   } // Invalidates on exit of using block}

private void DrawPoints(){   foreach (var p in points)   {      DrawPoint(p, Colors.Green, PointVisualSizeHalf);   }}

private void DrawPoint(ControlPoint p, Color color, int halfSizeOfPoint){   var x1 = p.X - halfSizeOfPoint;   var y1 = p.Y - halfSizeOfPoint;   var x2 = p.X + halfSizeOfPoint;   var y2 = p.Y + halfSizeOfPoint;   writeableBmp.DrawRectangle(x1, y1, x2, y2, color);}

private void DrawBeziers(){   if (points.Count &gt; 3)   {      writeableBmp.DrawBeziers(GetPointArray(), Colors.Yellow);   }}</pre>
<table class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;"><a style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;" href="http://3.bp.blogspot.com/-vCXNDnjuAmw/T6ZFFMHvv5I/AAAAAAAAAZo/ycWFOgLti40/s1600/wbx_winrt_screenshot.PNG" target="_blank"><img src="http://3.bp.blogspot.com/-vCXNDnjuAmw/T6ZFFMHvv5I/AAAAAAAAAZo/ycWFOgLti40/s640/wbx_winrt_screenshot.PNG" alt="" width="500" height="313" border="0" /></a></td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">Screenshot WinRT Metro Style sample running in the simulator</td>
</tr>
</tbody>
</table>
All samples were tested with the new version, but due to the refactoring more testing is needed. <strong>Please test this version with your projects and <a href="http://writeablebitmapex.codeplex.com/workitem/list/basic" target="_blank">report the bugs you encounter</a>. You can download the binaries <a href="http://writeablebitmapex.codeplex.com/releases/view/39577" target="_blank">here</a>. </strong>Note that this package only contains the WriteableBitmapEx binaries for Silverlight, Windows Phone, WinRT Metro Style .NET and WPF. All the samples can be found in the <a href="http://writeablebitmapex.codeplex.com/SourceControl/list/changesets" target="_blank">source code repository</a> in the branch "WBX_1.0_BitmapContext". If all goes well, this branch will become the trunk and the 1.0 RTM in a few weeks.

<strong>WinMD / Windows Runtime Component</strong>
There's also a <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh441572(v=vs.110).aspx" target="_blank">WinMD</a> version available which makes it possible to consume the WriteableBitmapEx library from all the WinRT Metro Style projections, although only C# and C++ XAML make actually sense.
I had to move some parts and leave some functionality like the ForEach out, but it contains 99% of the library's features. Unfortunately the C++ sample I created crashes when the WriteableBitmapExWinMD library is loaded. So for now this WinMD version can be found in a separate branch "WBX_1.0_WinMD" in the <a href="http://writeablebitmapex.codeplex.com/SourceControl/list/changesets" target="_blank">source code repository</a> and it won't be part of the trunk and release until it works with the sample. I'm a bit running out of time and don't know where to look for, since it seems all is wired up correctly and compiles fine. If you are a WinMD wizard and have a few minutes, I'd appreciate if you could look into the WinMD version.
<div class="blogger-post-footer"><img src="https://blogger.googleusercontent.com/tracker/563071785757928434-2501743908932264561?l=kodierer.blogspot.com" alt="" width="1" height="1" /></div>
<img src="http://feeds.feedburner.com/~r/Kodierer/~4/RIjg9Z_nxbU" alt="" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/07/one-bitmap-to-rule-them-all-writeablebitmapex-for-winrt-metro-style/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quick sketching using SketchBook Pro + Wacom Intuos 4</title>
		<link>http://www.expressionblend.com/articles/2012/05/07/quick-sketching-using-sketchbook-pro-wacom-intuos-4/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/07/quick-sketching-using-sketchbook-pro-wacom-intuos-4/#comments</comments>
		<pubDate>Mon, 07 May 2012 01:11:00 +0000</pubDate>
		<dc:creator>Pixel-in-Gene</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[quick sketch]]></category>
		<category><![CDATA[sketchbook]]></category>
		<category><![CDATA[wacom intuos]]></category>
		<category><![CDATA[wacom tablet]]></category>

		<guid isPermaLink="false">http://blog.pixelingene.com/2012/05/quick-sketching-using-sketchbook-pro-plus-wacom-intuos-4</guid>
		<description><![CDATA[Its been a while since I posted anything on this blog. Thought I’ll break the calm with a quick post about my recent sketch. I generally use Autodesk SketchBook Pro (SBP) on my Mac for the intial doodling. I then develop a fairly finished sketch before importing it into Photoshop for any post-processing. Luckily SBP [...]]]></description>
			<content:encoded><![CDATA[Its been a while since I posted anything on this blog. Thought I’ll break the calm with a quick post about my recent sketch.

I generally use <a href="http://itunes.apple.com/us/app/sketchbook-pro/id404243548?mt=12" target="_blank">Autodesk SketchBook Pro</a> (SBP) on my Mac for the intial doodling. I then develop a fairly finished sketch before importing it into Photoshop for any post-processing. Luckily SBP saves the files in PSD format, making it easy to do the Photoshop import. The following sketch was entirely done in SBP:

<img src="http://blog.pixelingene.com/images/2012-05-06-quick-sketching-using-sketchbook-pro-plus-wacom-intuos-4/rain_and_tears.png" alt="Rain and Tears" width="500" />

This was done in about 30 mins as a quick sketch to demonstrate the use of SBP and a Wacom tablet to a close friend. He was quite impressed and immediately ordered a bunch of items, including a <a href="http://www.wacom.com/en/Products/Bamboo/BambooStylus.aspx" target="_blank">Wacom Bamboo stylus for the iPad</a>. I guess <code>marketing</code> wouldn’t be a bad alternate career!

BTW, the sketch is called <strong>Rain and Tears</strong>.
<img src="http://blog.pixelingene.com/images/2012-05-06-quick-sketching-using-sketchbook-pro-plus-wacom-intuos-4/tiles.jpg" alt="Rain and Tears - Tiles" width="500" />
<div class="feedflare"><a href="http://feeds.feedburner.com/~ff/Pixel-In-Gene?a=ida5DmdTROA:xuCz__cw80E:yIl2AUoC8zA" target="_blank"><img src="http://feeds.feedburner.com/~ff/Pixel-In-Gene?d=yIl2AUoC8zA" alt="" border="0" /></a> <a href="http://feeds.feedburner.com/~ff/Pixel-In-Gene?a=ida5DmdTROA:xuCz__cw80E:gIN9vFwOqvQ" target="_blank"><img src="http://feeds.feedburner.com/~ff/Pixel-In-Gene?i=ida5DmdTROA:xuCz__cw80E:gIN9vFwOqvQ" alt="" border="0" /></a> <a href="http://feeds.feedburner.com/~ff/Pixel-In-Gene?a=ida5DmdTROA:xuCz__cw80E:V_sGLiPBpWU" target="_blank"><img src="http://feeds.feedburner.com/~ff/Pixel-In-Gene?i=ida5DmdTROA:xuCz__cw80E:V_sGLiPBpWU" alt="" border="0" /></a></div>
<img src="http://feeds.feedburner.com/~r/Pixel-In-Gene/~4/ida5DmdTROA" alt="" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/07/quick-sketching-using-sketchbook-pro-wacom-intuos-4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using FX effects in your managed metro apps</title>
		<link>http://www.expressionblend.com/articles/2012/05/06/using-fx-effects-in-your-managed-metro-apps/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/06/using-fx-effects-in-your-managed-metro-apps/#comments</comments>
		<pubDate>Sun, 06 May 2012 12:30:03 +0000</pubDate>
		<dc:creator>advertboy</dc:creator>
				<category><![CDATA[windows8]]></category>
		<category><![CDATA[XNA]]></category>
		<category><![CDATA[WinRT]]></category>

		<guid isPermaLink="false">https://advertboy.wordpress.com/?p=1749</guid>
		<description><![CDATA[In the WPF and Silverlight “desktop” worlds we have the luxury of being able to use shader effects (fx) in our apps, this infrastructure is not available in the “Windows Phone” or “WinRT XAML/C#” worlds. However thanks to SharpDx and … Continue reading →]]></description>
			<content:encoded><![CDATA[In the WPF and Silverlight “desktop” worlds we have the luxury of being able to use shader effects (fx) in our apps, this infrastructure is not available in the “Windows Phone” or “WinRT XAML/C#” worlds. However thanks to SharpDx and … <a href="http://advertboy.wordpress.com/2012/05/06/using-fx-effects-in-your-managed-metro-apps/" target="_blank">Continue reading <span class="meta-nav">→</span></a><img src="http://stats.wordpress.com/b.gif?host=advertboy.wordpress.com&amp;blog=87214&amp;%23038;post=1749&amp;%23038;subd=advertboy&amp;%23038;ref=&amp;%23038;feed=1" alt="" width="1" height="1" border="0" />]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/06/using-fx-effects-in-your-managed-metro-apps/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create Games for Windows 8 using Physamajig!</title>
		<link>http://www.expressionblend.com/articles/2012/05/03/create-games-for-windows-8-using-physamajig/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/03/create-games-for-windows-8-using-physamajig/#comments</comments>
		<pubDate>Thu, 03 May 2012 17:26:00 +0000</pubDate>
		<dc:creator>andy@andybeaulieu.com</dc:creator>
				<category><![CDATA[windows8]]></category>
		<category><![CDATA[designers]]></category>
		<category><![CDATA[expression]]></category>
		<category><![CDATA[metro]]></category>
		<category><![CDATA[microsoft research]]></category>
		<category><![CDATA[physics]]></category>

		<guid isPermaLink="false">http://www.expressionblend.com/articles/?guid=4cc62ae70f57bbba984422e4f869bf6f</guid>
		<description><![CDATA[The next update of Physamajig will allow users to create their own "Mini-Games" - without writing code! This new version will be released after the June 2012 Windows 8 Release Preview. Like the current release of Physamajig, you just draw out elements on the screen to create physics objects - but in the new version, you [...]]]></description>
			<content:encoded><![CDATA[The next update of <a href="http://www.andybeaulieu.com/Home/tabid/67/EntryID/223/Default.aspx" target="_blank">Physamajig</a> will allow users to create their own "Mini-Games" - without writing code! This new version will be released after the June 2012 <a href="https://twitter.com/#!/BuildWindows8/status/194627936115101696" target="_blank">Windows 8 Release Preview</a>. Like the <a href="http://apps.microsoft.com/webpdp/en-us/app/physamajig/b4ece0fe-ee25-4118-8efc-281f7823ae38/m/ROW" target="_blank">current release of Physamajig</a>, you just draw out elements on the screen to create physics objects - but in the new version, you can add Behaviors to your objects to add much more interactivity.

&nbsp;

So what kind of games will Physamjig allow you to create without using code? This video shows a few examples:

<iframe src="http://www.youtube.com/embed/-vR1y9KbPU0" frameborder="0" width="500" height="375"></iframe>

&nbsp;

&nbsp;

&nbsp;

<span id="more-894"></span>
My inspiration for the no-code approach came from Behaviors and Triggers inside Expression Blend, which I used for previous versions of the <a href="http://physicshelper.codeplex.com/" target="_blank">Physics Helper Library</a>. Inside Expression Blend, you just drag/drop Behaviors onto elements to add runtime logic to them. It was a great way to encapsulate complex logic and allow designers to add interactivity to their creations without needing to write code.

&nbsp;

Since Behaviors and Triggers are not (yet) present in WinRT Metro, I had to create my own custom implementation of them. A Trigger is generally an event, such as the user making a gesture on the screen, a collision, or an object being destroyed. A Behavior is what happens in response to the trigger, such as applying force to an object, playing a sound, or destroying an object. In Physamajig, the designer for adding Behaviors looks like this:

<img src="http://www.andybeaulieu.com/downloads/BehaviorDesignerInPhysamajig.png" alt="" />
If this designer looks familiar to you, it might be because you've seen the cool <a href="http://research.microsoft.com/apps/video/default.aspx?id=160768" target="_blank">Project Mayhem</a> from Microsoft Research which was another source of inspiration for me. Project Mayhem calls them "Events" and "Reactions," but really these are the same as Triggers and Behaviors. In Mayhem, the designer looks like this:

&nbsp;

<img src="http://www.andybeaulieu.com/downloads/mayhem-designer.jpg" alt="" />

&nbsp;

So is there really such a thing as the "no code scenario?" Will it ever be possible to put together complex, custom solutions using a simple UI to snap together various logic? I am not a believer yet, but I am convinced that adding Behaviors/Triggers (aka Reactions/Events) in a solution can greatly increase productivity and customization in many solutions.

&nbsp;

Let me know what you think, and I'll leave you with one last teaser video, this one with extra cheesiness!

<iframe src="http://www.youtube.com/embed/5WfMmHlIBfw" frameborder="0" width="500" height="375"></iframe>]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/03/create-games-for-windows-8-using-physamajig/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Free XNA Game Programming and Windows Phone 7 Events in Arizona in May</title>
		<link>http://www.expressionblend.com/articles/2012/05/01/free-xna-game-programming-and-windows-phone-7-events-in-arizona-in-may/</link>
		<comments>http://www.expressionblend.com/articles/2012/05/01/free-xna-game-programming-and-windows-phone-7-events-in-arizona-in-may/#comments</comments>
		<pubDate>Tue, 01 May 2012 21:14:02 +0000</pubDate>
		<dc:creator>dwahlin</dc:creator>
				<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[windows phone 7]]></category>
		<category><![CDATA[Xaml]]></category>
		<category><![CDATA[XNA]]></category>
		<category><![CDATA[building games]]></category>
		<category><![CDATA[game development tools]]></category>
		<category><![CDATA[phone application]]></category>
		<category><![CDATA[xna games]]></category>

		<guid isPermaLink="false">http://www.expressionblend.com/articles/?guid=3f3d12aec33d774b9c01824946582f83</guid>
		<description><![CDATA[Interested in learning more about game programming with XNA or building applications for Windows Phone 7? Two free all-day events are coming to Phoenix in May that you can attend to learn more. These events are always a ton of fun with some talks on the different technologies, labs, and hands-on time to actually build [...]]]></description>
			<content:encoded><![CDATA[<a href="http://weblogs.asp.net/blogs/dwahlin/Clipboard01_6E89A895.jpg" target="_blank"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; float: right; padding-top: 0px; border: 0px;" title="Clipboard01" src="http://weblogs.asp.net/blogs/dwahlin/Clipboard01_thumb_22519EE7.jpg" alt="Clipboard01" width="240" height="192" align="right" border="0" /></a>

Interested in learning more about game programming with XNA or building applications for Windows Phone 7? Two free all-day events are coming to Phoenix in May that you can attend to learn more. These events are always a ton of fun with some talks on the different technologies, labs, and hands-on time to actually build a custom game/application. Did I mention that there will be prizes given out and free food as well? Register at the links below and I’ll look forward to seeing you there!
<ul>
	<li><strong>XNA Game Development</strong> with Dan Wahlin, Spike Xavier, Rico Rodriguez, Lou Prado, and Ryan Plemons, May 5th, Tempe, AZ.<a href="http://www.winphoneunleashed.com/register?ticketType=49ec85c5-afc2-4c92-91c4-cd73af3a9453" target="_blank"><span style="font-size: small;">Register</span></a></li>
	<li><strong>Business Application Development</strong> with <a href="http://www.josephguadagno.net/" target="_blank">Joseph Guadagno</a>, May 12th, Chandler, AZ. <a href="http://www.winphoneunleashed.com/register?ticketType=0dd86188-b195-4c30-9285-969d81a89e18" target="_blank"><span style="font-size: small;">Register</span></a></li>
</ul>
<img src="http://www.selectgame.com.br/wp-content/uploads/xna-logo.png" alt="" width="162" height="74" />

&nbsp;

&nbsp;

<span id="more-895"></span>
<h4><a name="game"></a>Game Developers (May 5th in Tempe)</h4>
<h5><span style="color: #004080; font-size: small;">Introduction to XNA</span></h5>
<h6><span style="font-size: x-small;">XNA Game Basics</span></h6>
<ol>
	<li>What is XNA</li>
	<li>Game Development Tools</li>
	<li>XNA Game Projects</li>
	<li>XNA Game Loop</li>
	<li>Debugging Games</li>
</ol>
<h6><span style="font-size: x-small;">Working with Images, Sounds and Text</span></h6>
<ol>
	<li>Working with Textures</li>
	<li>Playing Songs and Sound Effects</li>
	<li>Drawing text with SpriteFonts</li>
</ol>
<h6><span style="font-size: x-small;">Getting User Input</span></h6>
<ol>
	<li>Getting input on the phone</li>
	<li>Using the Accelerometer</li>
	<li>Using Touch</li>
</ol>
&nbsp;
<h5><span style="color: #004080; font-size: small;">Game State Management</span></h5>
<h6><span style="font-size: x-small;">Managing Game Play</span></h6>
<ol>
	<li>Keeping Score</li>
	<li>Tracking Health and Lives</li>
	<li>Adding Levels</li>
</ol>
<h6><span style="font-size: x-small;">Managing Screens</span></h6>
<ol>
	<li>Creating Multi-Screen games</li>
	<li>Loading content in the background</li>
	<li>How to pause the game</li>
</ol>
<h6><span style="font-size: x-small;">Managing State</span></h6>
<ol>
	<li>Phone Application Lifecycle</li>
	<li>Supporting Fast Application Switching</li>
	<li>Persisting and Restoring State</li>
</ol>
<h6><span style="font-size: x-small;">Silverlight and XNA Integration</span></h6>
<ol>
	<li>Introduction to Silverlight</li>
	<li>Silverlight and XNA Integration</li>
	<li>Creating a Silverlight and XNA Game</li>
</ol>
&nbsp;
<h5><span style="color: #004080; font-size: small;">Advanced XNA Games</span></h5>
<h6><span style="font-size: x-small;">Marketplace and Advertisements</span></h6>
<ol>
	<li>Understanding the Windows Phone Marketplace</li>
	<li>Submitting your Game to the Marketplace</li>
	<li>Adding Advertisements to your game</li>
</ol>
<h6><span style="font-size: x-small;">3D Games</span></h6>
<ol>
	<li>3D Support in XNA</li>
	<li>Creating a simple 3D Game</li>
</ol>
<h6><span style="font-size: x-small;">Multi-Platform Games</span></h6>
<ol>
	<li>Building Games for Phone, PC and XBOX</li>
	<li>Other Multi-Platform options</li>
</ol>
<h6><span style="font-size: x-small;">Cloud Integration</span></h6>
<ol>
	<li>Using Windows Azure</li>
	<li>Social Gaming Toolkit</li>
</ol>
&nbsp;

&nbsp;
<h4><a name="app"></a>Business Applications Developers (May 12th in Chandler)</h4>
<h5>Introduction to Windows Phone 7 Programming</h5>
In this session, we start with a discussion of windows phone, the architecture changes made from 6.5 to 7.0, the hardware specifications and then move into the beginnings of building a WP7 application including...
<ol>
	<li>Application life cycle</li>
	<li>Hardware Foundation</li>
	<li>Files associated with project template</li>
	<li>Splash screen and the importance of 1 second / 19 second loading</li>
	<li>Application Bar</li>
	<li>Panorama and Pivot controls</li>
	<li>MVVM</li>
	<li>Marketplace</li>
</ol>
<h5>Connecting to Services</h5>
In this session, we will discuss how Cloud Services help to bring power to the phone. We will be binding to a rest based services and show how to search and display the information received. In this session we will also talk about Navigation, passing information between screens, while working with List and detail information.
<ol>
	<li>Navigation</li>
	<li>Location</li>
	<li>JSON Deserialization</li>
	<li>Bing Maps</li>
	<li>Isolated Storage</li>
	<li>Binding Sample Data</li>
	<li>Navigation</li>
</ol>
<h6><span style="font-size: x-small;">Recording Data</span></h6>
In this session we will be adding to our knowledge and learn the importance of live tiles. We will show you how to set up a periodic agent and how to set up and read and write to a SQL Database on Windows Phone.
<ol>
	<li>Live Tiles</li>
	<li>SQL CE</li>
	<li>Background Processes and Periodic Agents</li>
	<li>Launchers and Choosers</li>
</ol>
<img src="http://weblogs.asp.net/aggbug.aspx?PostID=8427879" alt="" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/05/01/free-xna-game-programming-and-windows-phone-7-events-in-arizona-in-may/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Video Demo:  Overview of XAML authoring features in Blend and Visual Studio</title>
		<link>http://www.expressionblend.com/articles/2012/04/30/video-demo-overview-of-xaml-authoring-features-in-blend-and-visual-studio/</link>
		<comments>http://www.expressionblend.com/articles/2012/04/30/video-demo-overview-of-xaml-authoring-features-in-blend-and-visual-studio/#comments</comments>
		<pubDate>Mon, 30 Apr 2012 16:39:09 +0000</pubDate>
		<dc:creator>Joanna Mason</dc:creator>
				<category><![CDATA[Blend]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[Xaml]]></category>
		<category><![CDATA[animations]]></category>
		<category><![CDATA[metro]]></category>
		<category><![CDATA[transitions]]></category>
		<category><![CDATA[visual studio]]></category>

		<guid isPermaLink="false">http://blendinsider.com/?p=1012</guid>
		<description><![CDATA[Now that many of you have had the opportunity to check out Kirupa’s Visual Studio Toolbox episode on Channel 9 for visually building HTML apps using Blend you are probably wondering where is the video for XAML authoring? Look no further! I met with Robert Green last week and we walked through building out a [...]]]></description>
			<content:encoded><![CDATA[Now that many of you have had the opportunity to check out Kirupa’s Visual Studio Toolbox episode on Channel 9 for visually building HTML apps using Blend you are probably wondering where is the video for XAML authoring? Look no further! I met with Robert Green last week and we walked through building out a simple Metro app starting with the Grid app project template. You can view the recording below (or <a href="http://media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35_high.mp4" target="_blank">download a high-quality MP4</a>):

<video width="320" height="240" poster="http://blendinsider.com/wp-content/uploads/2012/04/JM-RG-VStoolbox.jpg" controls="controls" preload="none"><source src="http://media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35_mid.mp4" type="video/mp4" /><source src="http://media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35.webm" type="video/webm" /><object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.expressionblend.com/articles/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=http%3A//media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35_mid.mp4&amp;poster=http%3A//blendinsider.com/wp-content/uploads/2012/04/JM-RG-VStoolbox.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="320" height="240" type="application/x-shockwave-flash" src="http://www.expressionblend.com/articles/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=http%3A//media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35_mid.mp4&amp;poster=http%3A//blendinsider.com/wp-content/uploads/2012/04/JM-RG-VStoolbox.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>


Your browser is unable to play this HTML5 video.
Please download the video and watch it in your favorite player.
</video>

During this video I used both the XAML Designer in VS and Blend, highlighting the similarities and differences for each product. Highlights include some tips and tricks for quickly creating the object hierarchy, laying out your scene, adding animations and transitions, and new tooling specific to Metro app controls and app design.

Joanna]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/04/30/video-demo-overview-of-xaml-authoring-features-in-blend-and-visual-studio/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35_high.mp4" length="703020679" type="video/mp4" />
<enclosure url="http://media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35_mid.mp4" length="490635202" type="video/mp4" />
<enclosure url="http://media.ch9.ms/ch9/907c/860f3248-6610-48a1-be11-ce578956907c/VSToolbox35.webm" length="4884" type="video/webm" />
		</item>
		<item>
		<title>Using C# code inside a Metro HTML application</title>
		<link>http://www.expressionblend.com/articles/2012/04/27/using-c-code-inside-a-metro-html-application/</link>
		<comments>http://www.expressionblend.com/articles/2012/04/27/using-c-code-inside-a-metro-html-application/#comments</comments>
		<pubDate>Fri, 27 Apr 2012 07:07:53 +0000</pubDate>
		<dc:creator>Corrado Cavalli</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Metro]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[metro]]></category>
		<category><![CDATA[WinJS]]></category>
		<category><![CDATA[WinRT]]></category>

		<guid isPermaLink="false">http://blogs.ugidotnet.org/corrado/archive/2012/04/27/using-c-code-inside-an-html-application.aspx</guid>
		<description><![CDATA[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: &#60;body&#62; &#60;div id="output"&#62;&#60;/div&#62; &#60;/body&#62; &#160; Now add a new C# library to WinJS [...]]]></description>
			<content:encoded><![CDATA[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:
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">body</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">id</span><span class="kwrd">="output"</span><span class="kwrd">&gt;&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">body</span><span class="kwrd">&gt;</span></pre>
&nbsp;

Now add a new C# library to WinJS solution:

<a href="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_2.png" rel="lightbox" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_thumb.png" alt="image" width="350" height="145" border="0" /></a>

Change the output type of the library project to <strong>WinMD</strong> file

<a href="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_4.png" rel="lightbox" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_thumb_1.png" alt="image" width="371" height="103" border="0" /></a>

let’s add a couple of classes to C# library, we’re going to consume them from our HTML application:
<pre class="csharpcode"><span class="kwrd">public</span> <span class="kwrd">sealed</span> <span class="kwrd">class</span> Person
{
      <span class="kwrd">public</span> Person(<span class="kwrd">string</span> name)
       {
          <span class="kwrd">this</span>.Name = name;
          <span class="kwrd">this</span>.Address = <span class="kwrd">new</span> Address() { City = <span class="str">"Milano"</span>, Code = 20100 };
       }

       <span class="kwrd">public</span> Address Address { get; <span class="kwrd">private</span> set; }

       <span class="kwrd">public</span> <span class="kwrd">int</span> Age { get; set; }

       <span class="kwrd">public</span> <span class="kwrd">string</span> Name { get; <span class="kwrd">private</span> set; }

       <span class="kwrd">public</span> <span class="kwrd">int</span> CalcSum(<span class="kwrd">int</span> a, <span class="kwrd">int</span> b)
       {
          <span class="kwrd">return</span> a + b;
       }
 }

<span class="kwrd">public</span> <span class="kwrd">sealed</span> <span class="kwrd">class</span> Address
{
      <span class="kwrd">public</span> <span class="kwrd">string</span> City { get; set; }

      <span class="kwrd">public</span> <span class="kwrd">int</span> Code { get; set; }
}</pre>
&nbsp;

&nbsp;

&nbsp;

<span id="more-888"></span>

note how both Person and Address <span style="text-decoration: underline;">are marked as sealed</span>, this is a mandatory requisite if you want expose them to others WinRT languages.

Let’s now add a reference from HTML application to our C# library:

<a href="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_6.png" rel="lightbox" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_thumb_2.png" alt="image" width="491" height="98" border="0" /></a>

and create an instance of Person class using Javascript:
<pre class="csharpcode">app.onactivated = <span class="kwrd">function</span> (eventObject) {
        <span class="kwrd">if</span> (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            <span class="kwrd">if</span> (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                <span class="rem">// TODO: This application has been newly launched. Initialize </span>
                <span class="rem">// your application here.</span>
            } <span class="kwrd">else</span> {
                <span class="rem">// TODO: This application has been reactivated from suspension. </span>
                <span class="rem">// Restore application state here.</span>
            }
            WinJS.UI.processAll();

            <span class="rem">//This uses C# objects</span>
            <span class="kwrd">var</span> person = <span class="kwrd">new</span> MyLib.Person(<span class="str">"corrado"</span>);
            person.age = 12;
            <span class="kwrd">var</span> res = person.calcSum(3, 5);
            output.innerText = <span class="str">"out is:"</span> + person.name + <span class="str">"-"</span> + person.age + <span class="str">"-"</span> + res + <span class="str">"-"</span> + person.address.city;
        }</pre>
&nbsp;

and here’s simulator output:

<a href="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_8.png" rel="lightbox" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="http://blogs.ugidotnet.org/images/blogs_ugidotnet_org/corrado/Windows-Live-Writer/Using-C-code-inside-an-HTML-application_78CF/image_thumb_3.png" alt="image" width="244" height="107" border="0" /></a>

I know it might sound strange to mix Javascript with C# when you can do exactly same things with both languages on Metro but when you have some complex logic

or you want to hide some code as much as possible (you can do exactly the same with C++ code) this may be a viable alternative.
<div id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:67cea6a2-1d47-4254-bfc9-b64fe4ff2225" class="wlWriterEditableSmartContent" style="float: none; margin: 0px; display: inline; padding: 0px;">Technorati Tags: <a href="http://technorati.com/tags/WinJS" rel="tag" target="_blank">WinJS</a>,<a href="http://technorati.com/tags/Metro" rel="tag" target="_blank">Metro</a></div>
<img src="http://blogs.ugidotnet.org/corrado/aggbug/100980.aspx" alt="" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/04/27/using-c-code-inside-a-metro-html-application/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing app bars for HTML Metro style apps using Blend and the WinJS AppBar control</title>
		<link>http://www.expressionblend.com/articles/2012/04/26/designing-app-bars-for-html-metro-style-apps-using-blend-and-the-winjs-appbar-control/</link>
		<comments>http://www.expressionblend.com/articles/2012/04/26/designing-app-bars-for-html-metro-style-apps-using-blend-and-the-winjs-appbar-control/#comments</comments>
		<pubDate>Thu, 26 Apr 2012 19:07:55 +0000</pubDate>
		<dc:creator>Ruben Rios</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[appbar]]></category>
		<category><![CDATA[apps]]></category>
		<category><![CDATA[design guidance]]></category>
		<category><![CDATA[html authoring tools]]></category>
		<category><![CDATA[metro]]></category>

		<guid isPermaLink="false">http://blendinsider.com/?p=958</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[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 <a href="http://msdn.microsoft.com/en-us/windows/apps" target="_blank">Windows Developer Center</a>:
<ul>
	<li>Design guidance: <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh761499" target="_blank">Commanding design for Metro style apps</a></li>
	<li><a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465309.aspx" target="_blank">Quickstart: Adding an app bar with commands</a></li>
	<li><a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465302.aspx" target="_blank">Guidelines and checklists for AppBars</a></li>
</ul>
&nbsp;

<span id="more-875"></span>
<h3>Using Blend to add an app bar to an HTML app</h3>
To add an AppBar control in Blend, open the Assets panel and search for an AppBar by typing AppBar in the search field. You’ll notice the first result is the AppBar control, followed by different types of AppBar Commands.
<p class="aligncenter size-full wp-image-964 no-border" title="appbar-showhide" align="center" data-win-control="" data-win-options="">Guidelines and checklists for AppBars.</p>
Let us know what you think about the features discussed above. If you have any feedback please let us know by either commenting below or e-mailing me directly at <strong><em>ruben.rios[at]microsoft.com.</em></strong>

Thanks,
Ruben Rios]]></content:encoded>
			<wfw:commentRss>http://www.expressionblend.com/articles/2012/04/26/designing-app-bars-for-html-metro-style-apps-using-blend-and-the-winjs-appbar-control/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: basic

Served from: www.expressionblend.com @ 2012-05-18 23:06:08 -->
