<?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>JAPF</title>
	<atom:link href="http://www.japf.fr/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.japf.fr</link>
	<description>Jeremy Alles Presentation Foundation: WPF, Silverlight, Windows Phone 7, Windows 8</description>
	<lastBuildDate>Sat, 28 Apr 2012 14:00:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Introducing 2Day: a fast &amp; fluid todo-list WP7 app</title>
		<link>http://www.japf.fr/2012/04/introducing-2day-a-fast-fluid-todo-list-wp7-app/</link>
		<comments>http://www.japf.fr/2012/04/introducing-2day-a-fast-fluid-todo-list-wp7-app/#comments</comments>
		<pubDate>Wed, 18 Apr 2012 16:49:32 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[2day]]></category>
		<category><![CDATA[todo]]></category>
		<category><![CDATA[windowsphone]]></category>
		<category><![CDATA[wp7]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1180</guid>
		<description><![CDATA[Today is an important day for me. A couple of days ago, my colleague Charlotte and me released a new Windows Phone 7 app: 2Day. Because we put a lot of energy in the design and the realization of this app, I wanted to showcase it in a post 2Day is a todo-list app we [...]]]></description>
			<content:encoded><![CDATA[<p>Today is an important day for me. A couple of days ago, my colleague Charlotte and me released a new Windows Phone 7 app: <a href="http://www.2day-wp7.com">2Day</a>. Because we put a lot of energy in the design and the realization of this app, I wanted to showcase it in a post <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>2Day is a todo-list app we have been working on for several months. It can be summarized the following way:</p>
<ul>
<li><strong>fast &amp; fluid</strong>: 2Day is fast to run &amp; fast to use because of many tricks (you can add a task right from your home screen)</li>
<li><strong>connected</strong>: 2Day supports both ToodleDo and Exchange synchronization + SkyDrive as an online backup storage</li>
<li><strong>engaged</strong>: we listen feedback very carefully and users can reach us by mail, Twitter or UserVoice</li>
</ul>
<div>2Day is available in English, Italian, Spanish, German and French !</div>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/allscreens.png" rel="lightbox[1180]"><img class="alignnone size-large wp-image-1182" title="allscreens" src="http://www.japf.fr/wp-content/uploads/2012/04/allscreens-1024x262.png" alt="" width="1024" height="262" /></a></p>
<p style="text-align: center;"><em><span style="color: #808080;">click for full-resolution image</span></em></p>
<p>I will without any doubt write some articles about the technical story behind 2Day. They are many interesting things I would like to share with you.</p>
<p><strong>Please, if you appreciate my blog and think that 2Day is cool spread the word <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </strong></p>
<p>For more information:</p>
<ul>
<li>2Day&#8217;s website: <a href="http://www.2day-wp7.com">www.2day-wp7.com</a></li>
<li>contact us</li>
<ul>
<li>Twitter: <a href="http://www.twitter.com/2daywp7">@2daywp7</a></li>
<li>Email: <a href="mailto: support@2day-wp7.com">support@2day-wp7.com</a></li>
</ul>
<li>give feedback: <a href="http://2day.uservoice.com">2day.uservoice.com</a></li>
<li>download a trial <a href="http://windowsphone.com/s?appid=b4440e3b-85b7-493e-93bf-6d512671818a">in the marketplace</a></li>
</ul>
<p>You can use the following QR-code to go directly to the marketplace from your mobile:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/downloadqr.png" rel="lightbox[1180]"><img class="alignnone  wp-image-1181" title="downloadqr" src="http://www.japf.fr/wp-content/uploads/2012/04/downloadqr-300x300.png" alt="" width="180" height="180" /></a></p>
<p>Many thanks,</p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/04/introducing-2day-a-fast-fluid-todo-list-wp7-app/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hacking for fun: porting a Silverlight Windows Phone app to WinRT in 9hours</title>
		<link>http://www.japf.fr/2012/04/porting-a-silverlight-windows-phone-app-to-winrt-in-9hours/</link>
		<comments>http://www.japf.fr/2012/04/porting-a-silverlight-windows-phone-app-to-winrt-in-9hours/#comments</comments>
		<pubDate>Mon, 16 Apr 2012 16:12:52 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[CodeProject]]></category>
		<category><![CDATA[Windows 8]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[WinRT]]></category>
		<category><![CDATA[blend]]></category>
		<category><![CDATA[visualstudio]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[windowsphone]]></category>
		<category><![CDATA[winrt]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1211</guid>
		<description><![CDATA[Today I woke up and took a look outside: the weather was so awful I decided to so something cool, at home. Today, I ported a Silverlight Windows Phone 7 game to WinRT in 9 hours. In this post, I share the “journal” I wrote will porting the app so that you can follow this [...]]]></description>
			<content:encoded><![CDATA[<p>Today I woke up and took a look outside: the weather was so awful I decided to so something cool, at home. Today, I ported a Silverlight Windows Phone 7 game to WinRT in 9 hours. In this post, I share the “journal” I wrote will porting the app so that you can follow this process with many detail. I hope you will learn interesting stuff. <em>Warning</em>: the post is much longer than usual <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Context:</p>
<ul>
<li>The original Windows Phone application is a Silverlight game called <em>Touch’n’Match</em>. This game is available in the <a href="http://windowsphone.com/s?appid=c4834b7c-3786-45fe-9b02-53ca6f4256d1">marketplace</a> for free. The goal is to select appropriate items from a board creating pairs or sequences. The fastest the player creates pairs, the more points he has.</li>
<li>I’m not creating a common code base across the 2 platforms. I’m just “converting” the Silverlight version to WinRT.</li>
<li>I’m not targeting a “ready to publish” version of the app today. I <em>just</em> want to be able to play the game on my //BUILD/ slate <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </li>
</ul>
<p>Here is a quick video showing the game in action using the WP7 emulator:</p>
<p><a href="http://www.japf.fr/2012/04/porting-a-silverlight-windows-phone-app-to-winrt-in-9hours/#mediaPlayer_1211_0">Play Video</a></p>
<p>The video of the game running on the //BUILD/ slate is available at the end of this article <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Tooling used:</p>
<ul>
<li>Windows 8 Consumer Preview</li>
<li>Visual Studio 2011 Beta + Updates</li>
<li>Visual Studio 2010 + SP1</li>
<li>Windows Phone SDK 7.1.1 for Windows 8 support</li>
<li>Resharper 7 EAP (I’m a big fan of R# and it’s going to be very helpful to map and adjust the namespaces…)</li>
</ul>
<p>Now, let’s the hackaton begin <img src='http://www.japf.fr/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<h3>9:50AM</h3>
<p>The source code of Touch’N’Match is stored in SVN using <a href="http://www.assembla.com/">Assembla</a>. I’m performing a clean check out the trunk in my personal folder. I launch VS2010 to build the app and make sure the Windows Phone version works properly:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/01-windowsphone-version.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1236" title="01-windowsphone-version" src="http://www.japf.fr/wp-content/uploads/2012/04/01-windowsphone-version.png" alt="" width="590" height="575" /></a></p>
<p>Everything seems ok. It’s time to launch VS11:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/02-launching-vs11.png" rel="lightbox[1211]"><img class="alignnone size-medium wp-image-1213" title="02-launching-vs11" src="http://www.japf.fr/wp-content/uploads/2012/04/02-launching-vs11-264x300.png" alt="" width="264" height="300" /></a></p>
<p>And to create a new project:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/03-newproject.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1238" title="03-newproject" src="http://www.japf.fr/wp-content/uploads/2012/04/03-newproject.png" alt="" width="590" height="408" /></a></p>
<h3>9:55AM</h3>
<p>I’m going to start porting all the C# which is not linked to XAML. I expect to do that fairly quickly, the only thing I will have to rewrite (at least I think about at this time) is the part which deals with the isolated storage (API in SL for Windows Phone and WinRT are very different even though the principles are very similar).</p>
<p>I’m simply using drag’n’drop between the Windows Explorer and VS11 to add the files in the WinRT project.</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/04-dragdrop.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1239" title="04-dragdrop" src="http://www.japf.fr/wp-content/uploads/2012/04/04-dragdrop.png" alt="" width="590" height="355" /></a></p>
<p>I start with what I found the simple first, for example I start by porting the converters used in the XAML of the game. Because the interface has changed from:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code9'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p12119"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p1211code9"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">interface</span> IValueConverter
<span style="color: #008000;">&#123;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> Convert<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, CultureInfo culture<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> ConvertBack<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, CultureInfo culture<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>To:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code10'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121110"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p1211code10"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">interface</span> IValueConverter
<span style="color: #008000;">&#123;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> Convert<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, <span style="color: #6666cc; font-weight: bold;">string</span> language<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> ConvertBack<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, <span style="color: #6666cc; font-weight: bold;">string</span> language<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>I’m simply doing a “Search and replace” to fix all those errors in one shot:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/05-findreplace.png" rel="lightbox[1211]"><img class="alignnone size-medium wp-image-1216" title="05-findreplace" src="http://www.japf.fr/wp-content/uploads/2012/04/05-findreplace-248x300.png" alt="" width="248" height="300" /></a></p>
<p>The Model folder contains just simple C# code, I have nothing special to do (which is nice!)</p>
<p>The Windows Phone version contains a class named <em>ThemeService</em>. This class was responsible for giving colors to use in the app based on the current accent color of the phone. In WinRT we don’t have the concept of accent colors. The app is supposed to ship with its own accent color. So I’m removing this part entirely for the moment.</p>
<p>The ViewModel folder is linked to the <em><a href="http://mvvmlight.codeplex.com/">MVVM Light</a> </em>framework. I already have the Windows 8 version installed on my machine, so I just have to reference the new assemblies:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/06-reference-mvvmlight.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1240" title="06-reference-mvvmlight" src="http://www.japf.fr/wp-content/uploads/2012/04/06-reference-mvvmlight.png" alt="" width="590" height="258" /></a></p>
<p>Because I’m Resharper EAP for VS11 I can see very quickly the amount of errors when I open a file, using the indicators sitting next to the vertical scrollbars:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/07-using-resharper.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1218" title="07-using-resharper" src="http://www.japf.fr/wp-content/uploads/2012/04/07-using-resharper.png" alt="" width="334" height="448" /></a></p>
<p>I’m now facing problems with the string resources. In the Silverlight version the app was localized the all the strings contained in .resx files. We were then able to access them using the types auto-generated and a binding in the XAML. This is no longer possible in WinRT. So the first thing I do is to create the new .resw files and put the strings there:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/08-moving-resources.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1241" title="08-moving-resources" src="http://www.japf.fr/wp-content/uploads/2012/04/08-moving-resources.png" alt="" width="590" height="354" /></a></p>
<p>I then create a class to be able to access the string from C# (because the new .resw file does not generate static type automatically):</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code11'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121111"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code" id="p1211code11"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">class</span> AppResources
<span style="color: #008000;">&#123;</span>
    <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #0600FF; font-weight: bold;">readonly</span> ResourceLoader resourceLoader<span style="color: #008000;">;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">static</span> AppResources<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        resourceLoader <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> ResourceLoader<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;PrototypeZero/AppResources&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">string</span> GetResources<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> key<span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        <span style="color: #0600FF; font-weight: bold;">if</span> <span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span><span style="color: #008000;">.</span><span style="color: #0000FF;">IsNullOrEmpty</span><span style="color: #008000;">&#40;</span>key<span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
            <span style="color: #0600FF; font-weight: bold;">throw</span> <span style="color: #008000;">new</span> ArgumentNullException<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;key&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
        <span style="color: #0600FF; font-weight: bold;">return</span> resourceLoader<span style="color: #008000;">.</span><span style="color: #0000FF;">GetString</span><span style="color: #008000;">&#40;</span>key<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>I don’t know if the handling of .resw is going to change or not with the final version of VS11. If it does not I think it could be a good idea to use T4 templates to automatically generates the static types (that would make the porting much easier). But this is out of the scope of this post <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>I know have to change all the AppResources.Key to AppResources.GetString(Key)…</p>
<p>I then encountered an error with a call to ToShortDateTimeString() on a DateTime object. I replaced this call with ToString(“d”) which is supposed to do the same thing. It looks like all formatting and parsing of DateTime structure is now handle by the <a href="http://msdn.microsoft.com/en-us/library/windows/apps/br206828.aspx">DateTimeFormatter</a> class.</p>
<h3>10:35AM</h3>
<p>Conversion of the following folders is completed:</p>
<ul>
<li>Converters</li>
<li>Model</li>
<li>Services</li>
<li>ViewModel</li>
</ul>
<p>I’m now going to deal with the isolated storage… The API used in the Silverlight app was very simple:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code12'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121112"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p1211code12"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">class</span> IsolatedStorageHelper
<span style="color: #008000;">&#123;</span>
    T Load<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name<span style="color: #008000;">&#41;</span> <span style="color: #0600FF; font-weight: bold;">where</span> T <span style="color: #008000;">:</span> <span style="color: #6666cc; font-weight: bold;">class</span>, <span style="color: #008000;">new</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #6666cc; font-weight: bold;">void</span> Save<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name, T instance<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #6666cc; font-weight: bold;">void</span> Delete<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>The conversion was not very complicated. All synchronous methods became asynchronous and I use the new API available in WinRT. One noticeable thing is the fact that we don’t have a File.Exists() API, so I ended up writing the following helper method:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code13'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121113"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code" id="p1211code13"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">private</span> async <span style="color: #0600FF; font-weight: bold;">static</span> Task<span style="color: #008000;">&lt;</span>StorageFile<span style="color: #008000;">&gt;</span> GetFile<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name<span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    var folder <span style="color: #008000;">=</span> ApplicationData<span style="color: #008000;">.</span><span style="color: #0000FF;">Current</span><span style="color: #008000;">.</span><span style="color: #0000FF;">LocalFolder</span><span style="color: #008000;">;</span>
    <span style="color: #0600FF; font-weight: bold;">try</span>
    <span style="color: #008000;">&#123;</span>
        <span style="color: #0600FF; font-weight: bold;">return</span> await folder<span style="color: #008000;">.</span><span style="color: #0000FF;">GetFileAsync</span><span style="color: #008000;">&#40;</span>name<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
    <span style="color: #0600FF; font-weight: bold;">catch</span> <span style="color: #008000;">&#40;</span>FileNotFoundException<span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        <span style="color: #0600FF; font-weight: bold;">return</span> <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>And the final API in the WinRT project:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code14'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121114"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p1211code14"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">class</span> IsolateStorageHelper
<span style="color: #008000;">&#123;</span>
    async Task<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span> Load<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name<span style="color: #008000;">&#41;</span> <span style="color: #0600FF; font-weight: bold;">where</span> T <span style="color: #008000;">:</span> <span style="color: #6666cc; font-weight: bold;">class</span>, <span style="color: #008000;">new</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    async <span style="color: #6666cc; font-weight: bold;">void</span> Save<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name, T objectToSave<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    async <span style="color: #6666cc; font-weight: bold;">void</span> Delete<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> name<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>Notice that now, all the methods are asynchronous…</p>
<h3>10:50AM</h3>
<p>All the code ported in the WinRT project now builds with success. Let’s bring more code in the WinRT project…</p>
<p>I found out that the Storyboard.SetTargetProperty API has changed:</p>
<p>Silverlight version: <em>Storyboard.SetTargetProperty(Timeline, PropertyPath)</em></p>
<p>WinRT version: <em>Storyboard.SetTargetProperty(Timeline, string)</em></p>
<p>Also, the EasingFunction property of the DoubleAnimation type has changed from IEasingFunction (Silverlight) to EasingFunctionBase (WinRT).</p>
<p>Finally the GeneralTransform.Transform(Point) API has changed to GeneralTransform.TransformPoint(Point)</p>
<h3>11:00AM</h3>
<p>It looks like it’s now time to bring some XAML <img src='http://www.japf.fr/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<p>The home page of the WP7 version was using a pivot control. I don’t need a pivot and I can display everything on the screen at once. So I’m just replacing the PivotControl with a grid of 3 columns.</p>
<p>The issue I faced while moving the first XAML code was due do localization. In the Silverlight version we used a very common localization approach using a binding to a static resource:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code15'); return false;">View Code</a> XML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121115"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1211code15"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Button</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">&quot;{Binding Path=LocalizedResources.OnePlayer, Source={StaticResource LocalizedStrings}}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span></pre></td></tr></table></div>

<p>It looks like it’s not that easy to do that in WinRT… I looked up on the Internet and found <a href="http://social.msdn.microsoft.com/Forums/en/winappswithcsharp/thread/ae1ccf29-ef09-4de8-a50e-89476983a9ca">this post</a>. Because I’m lucky, <a href="http://timheuer.com/blog/">Tim Heuer</a> a Program Manager on the XAML team replied 3 days ago to explain how localization now works in XAML WinRT apps. Here is how it works (full documentation available <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh771181.aspx">here</a>):</p>
<ul>
<li>Assign a x:Uid to the XAML element you want to localize (for example x:Uid=”buttonOnePlayer”)</li>
<li>Create a resource in the resw file with a key buttonOnePlayer.Content (because we want to set the <em>Content</em> property of the button)</li>
<li>The resource will be automatically take at runtime</li>
</ul>
<p>I think I like this approach even though it is too early to come with a conclusion. I would like to have more tooling to pick the resources from the resw right from the XAML editor…</p>
<p>The other thing I must deal with is the fact that the Silverlight version was using multiple behaviors:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/09-behaviors.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1220" title="09-behaviors" src="http://www.japf.fr/wp-content/uploads/2012/04/09-behaviors.png" alt="" width="302" height="177" /></a></p>
<p>This is not available out of the box in WinRT. I found <a href="http://dotnetbyexample.blogspot.fr/2012/03/attached-behaviors-for-windows-8-metro.html">a post</a> describing an approach the port the Silverlight code to WinRT but I didn’t wanted to try it today. So my approach is to find a way to remove each those behaviors…</p>
<p>The Silverlight game was created with the Windows Phone 7.0 SDK, based on Silverlight 3. At this time there was no <em>Command</em> property<em> </em>available on a Button. This is no longer the case and of course neither the case in WinRT. So I can already fix a lot of them.</p>
<p>The other usages of behaviors are trickier and I will see how I fix them later…</p>
<p>A TriggerAction <em>NavigateToPageAction</em> was used to nagivate from page to page right from the XAML. In order to enable navigation from my ViewModel classes, I created a NavigationService class:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1211code16'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p121116"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="code" id="p1211code16"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">class</span> NavigationService
<span style="color: #008000;">&#123;</span>
    <span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #0600FF; font-weight: bold;">static</span> Frame rootFrame<span style="color: #008000;">;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">void</span> Initialize<span style="color: #008000;">&#40;</span>Frame frame<span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        rootFrame <span style="color: #008000;">=</span> frame<span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">bool</span> Navigate<span style="color: #008000;">&lt;</span>T<span style="color: #008000;">&gt;</span><span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> parameter <span style="color: #008000;">=</span> <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        var type <span style="color: #008000;">=</span> <span style="color: #008000;">typeof</span><span style="color: #008000;">&#40;</span>T<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
        <span style="color: #0600FF; font-weight: bold;">return</span> Navigate<span style="color: #008000;">&#40;</span>type, parameter<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">bool</span> Navigate<span style="color: #008000;">&#40;</span>Type source, <span style="color: #6666cc; font-weight: bold;">object</span> parameter <span style="color: #008000;">=</span> <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        <span style="color: #0600FF; font-weight: bold;">return</span> rootFrame<span style="color: #008000;">.</span><span style="color: #0000FF;">Navigate</span><span style="color: #008000;">&#40;</span>source, parameter<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>Of course this class should be hidden behind an interface to improve testability of ViewModel classes, but again, this is out of the scope of this article…</p>
<h3>12:05PM</h3>
<p>It’s time to take a look at the most complex page of the app…</p>
<p>The first step was to port the Resources section where converters and storyboard were defined. It was simply a copy-paste from VS2010 to VS11 <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Then I copy-paste the content of the page, and started to fix problems:</p>
<ul>
<li>I updated the localization using the techniques I described before</li>
<li>I commented (temporarily of course) the use of Triggers and Actions</li>
<li>I added a resource dictionary which was missing from the VS11 solution</li>
<li>I updated the resource usage, the Silverlight version had reference to phone-specific resources (like PhoneBackgroundBrush…)</li>
</ul>
<p>I fired Blend in order to find out the new resources available. Unfortunately for me I started by an error message when I wanted to create a new WinRT project or opened an existing one:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/10-blend-error.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1221" title="10-blend-error" src="http://www.japf.fr/wp-content/uploads/2012/04/10-blend-error.png" alt="" width="588" height="138" /></a></p>
<p>I looked up on the Internet but I cannot find the source of this issue. The most interesting thread is <a href="http://social.msdn.microsoft.com/Forums/en-US/toolsforwinapps/thread/9134799c-58d1-40b4-bd39-e35acadcd43c">this one</a> on MSDN forums… but it does not fix my issue.</p>
<p>So I ended up creating a new folder in the C:\Program Files (x86)\MSBuild\Microsoft\WindowsXaml by copying the V11.0 folder… It was enough to have Blend working like a charm:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/11-blend-running.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1222" title="11-blend-running" src="http://www.japf.fr/wp-content/uploads/2012/04/11-blend-running.png" alt="" width="334" height="409" /></a></p>
<p>And I can see what resources are available in WinRT:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/12-blend-resources.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1223" title="12-blend-resources" src="http://www.japf.fr/wp-content/uploads/2012/04/12-blend-resources.png" alt="" width="303" height="367" /></a></p>
<p>The next step is to use the Find &amp; Replace dialog to fix all the old references… Here is the mapping I used:</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="306">Silverlight for Windows Phone</td>
<td valign="top" width="306">XAML WinRT</td>
</tr>
<tr>
<td valign="top" width="306">PhoneForegroundBrush</td>
<td valign="top" width="306">AppBarItemForegroundBrush</td>
</tr>
<tr>
<td valign="top" width="306">PhoneBackgroundBrush</td>
<td valign="top" width="306">ApplicationPageBackgroundBrush</td>
</tr>
<tr>
<td valign="top" width="306">PhoneContrastBackgroundBrush</td>
<td valign="top" width="306">ApplicationHoverTextBrush</td>
</tr>
<tr>
<td valign="top" width="306">PhoneDisabledBrush</td>
<td valign="top" width="306">ControlDisabledBrush</td>
</tr>
<tr>
<td valign="top" width="306">PhoneHorizontalMargin</td>
<td valign="top" width="306">12,0</td>
</tr>
<tr>
<td valign="top" width="306">PhoneVerticalMargin</td>
<td valign="top" width="306">0,12</td>
</tr>
</tbody>
</table>
<h3>1:00PM</h3>
<p>I finally have something which can be launched (sorry for the ugly red background, I was just testing resource picking :p):</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/13-first-run1.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1234" title="13-first-run" src="http://www.japf.fr/wp-content/uploads/2012/04/13-first-run1.png" alt="" width="590" height="379" /></a></p>
<p>It’s time to take a break <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<h3>2:30PM</h3>
<p>I’m back. Even though I was able to launch the app before the break it was not yet functional… I commented a lot of things in the XAML just to make it build. In particular, I know must solve the an issue with sound playback: the WP7 was using an TriggerAction to play a sound. This TriggerAction was used directly in the XAML to play sound when a button was click for example.</p>
<h3>3:30PM</h3>
<p>I just spent about 1 hour trying to play sound in the app but I cannot get it working! I can play sound if I instantiate a MediaElement in the XAML, but if the MediaElement is instantiated in code, it doesn’t work. Because this issue is driving me crazy, I’m just assuming the version of today will be without sound <img src='http://www.japf.fr/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<h3>4:00PM</h3>
<p>Another use of the behavior in the WP7 version: switch the current state of a control based on the value of an enum. I’m replacing the behavior with some code:</p>
<ul>
<li>I created a custom control which has the enumeration as a dependency property</li>
<li>This dependency property is bound to the enumeration defined in the ViewModel</li>
<li>This dependency property has a PropertyChangedHandler callback defined to be notified each time its value change</li>
<li>When the value of the enum change, I manually update the current state (VisualStateManager.GoToState)</li>
</ul>
<h3>5:00PM</h3>
<p>The idea is described previously is supposed to work… but it doesn’t!</p>
<p>So after spending 30minutes trying to figure out why the animation between the states wasn’t working (+ other strange UI issues) I decided to recreate the template in Blend. It took me about 5minutes using Blend 4 for the original WP7 version and Blend 5 for the new WinRT version side by side:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/14-blend4-vs-blend5.png" rel="lightbox[1211]"><img class="alignnone size-full wp-image-1242" title="14-blend4-vs-blend5" src="http://www.japf.fr/wp-content/uploads/2012/04/14-blend4-vs-blend5.png" alt="" width="590" height="355" /></a></p>
<p>I now have to fix another issue: the WP7 hardcoded the layout of each item on the board (the number of columns and row was fix). I’m going to update that to be more flexible…</p>
<h3>6:30PM</h3>
<p>The hardcoded stuff was more complicated than expected but it’s now working… It was mainly due to the fact that we hardcoded the number of columns and rows in the WP7 version. Now because the resolution of the screen can change, I have to compute how many items fit on the board…</p>
<p>Another control was still missing and was used to display the scores. I create a new UserControl in VS11 and copy/paste the XAML from VS2010. I must do the usual work:</p>
<ul>
<li>Update the resource to have the appropriate mapping in the .resw file</li>
<li>Adjust namespace</li>
<li>Remove behavior and replace with standard Command</li>
<li>Remove sound effects</li>
</ul>
<h3>7:15PM</h3>
<p>At this point, only one minor issue is still bothering me, and I’m starting to get tired… When the app there was a DoubleAnimation animating the FontSize property of a TextBlock element. This does not work in WinRT… Because I don’t want to waste time finding out, I’m just using instead a ScaleTransform to achieve the same effect <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<h3>7:35PM</h3>
<p>I think it’s all for today. I can now launch the app and play the game it was my original objective !</p>
<p>Here is a video showing me playing the game:</p>
<p><a href="http://www.japf.fr/2012/04/porting-a-silverlight-windows-phone-app-to-winrt-in-9hours/#mediaPlayer_1211_1">Play Video</a></p>
<h3>Conclusion</h3>
<p>First of all, I’m kind of happy I finally had the occasion to jump into the WinRT world. Porting this app was a very interesting experience even though I must admit I was kind of angry sometimes!</p>
<p>Because I’m very familiar with XAML and C# it was easy to get into the WinRT world. Here is a summary of the main changes I made today between the 2 versions:</p>
<ul>
<li>Adjust namespaces</li>
<li>Rewrite the isolate storage layer</li>
<li>Remove any dependency toward behaviors (TriggerAction / Behavior&lt;T&gt;…)</li>
<li>Rewrite a part of the game engine because the WP7 version hardcoded the number of items on the board</li>
</ul>
<p>I was able to reuse most of the XAML, but I think this is true because the app was a game. I have another app I’m thinking to port in WinRT and I think it will need a major rewrite of its UI to leverage the size of the screen.</p>
<p>I hope your learnt interesting things in this post. Feel free to let a comment if you have any specific question.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/04/porting-a-silverlight-windows-phone-app-to-winrt-in-9hours/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>A lap around Team Foundation Service online</title>
		<link>http://www.japf.fr/2012/04/a-lap-around-tfs-online/</link>
		<comments>http://www.japf.fr/2012/04/a-lap-around-tfs-online/#comments</comments>
		<pubDate>Sat, 14 Apr 2012 14:51:58 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[.Net]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Visual Studio]]></category>
		<category><![CDATA[Windows 8]]></category>
		<category><![CDATA[tfs]]></category>
		<category><![CDATA[vs11]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[winrt]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1194</guid>
		<description><![CDATA[Back in September at //BUILD/ I got an invitation code for a new cloud service powered by Windows Azure: Team Foundation Service. A few days after I created an account but I didn&#8217;t had the chance until today to really use it. Now that I have some extra-time + an interesting project (involving Windows 8 and [...]]]></description>
			<content:encoded><![CDATA[<p>Back in September at <a href="http://www.buildwindows.com/">//BUILD/</a> I got an invitation code for a new cloud service powered by Windows Azure: Team Foundation Service. A few days after I created an account but I didn&#8217;t had the chance until today to really use it. Now that I have some extra-time + an interesting project (involving Windows 8 and Kinect&#8230;) it&#8217;s the perfect moment to get started. In this post, I share a couple of images (click any of them for full resolution) to show you what TFS online looks like.</p>
<h3>Get a TFS online account</h3>
<p>TFS online is available in as <em>Preview</em> as requires an invitation code to get in. If you don&#8217;t have a code, you can request on the website: <a href="https://tfspreview.com/_account/Signup">https://tfspreview.com/_account/Signup</a></p>
<p>I have no idea how long it can take to get an invitation code now&#8230; Once you have your code, you can create your account and pickup your server URL: <a href="https://your-server-name.tfspreview.com">https://your-server-name.tfspreview.com</a>.</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/01-create-account.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1198" title="01-create-account" src="http://www.japf.fr/wp-content/uploads/2012/04/01-create-account-300x226.png" alt="" width="300" height="226" /></a></p>
<h3>Log to TFS online</h3>
<p>Once you have created an account, it&#8217;s time to log in. To do so, simply navigate to the URL your created previously and you will be prompted for your credentials:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/02-sign-in.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1199" title="02-sign-in" src="http://www.japf.fr/wp-content/uploads/2012/04/02-sign-in-300x193.png" alt="" width="300" height="193" /></a></p>
<p>You will then land on the home page of your account:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/03-homepage.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1200" title="03-homepage" src="http://www.japf.fr/wp-content/uploads/2012/04/03-homepage-300x215.png" alt="" width="300" height="215" /></a></p>
<h3>Create a new team project</h3>
<p>You can now create a new team project. You must pick-up a name (which cannot be changed when the project is created) as well as the process template you want to use. In the preview, you have the following templates available:</p>
<ul>
<li>Microsoft Visual Studio Scrum 2.0 &#8211; Preview 3</li>
<li>MSF for Agile Software Development 6.0 &#8211; Preview 3</li>
<li>MSF for CMMI Software Development 6.0 &#8211; Preview 3</li>
</ul>
<p>I like the dialog when the message when the creation completes <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/04-project-created.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1201" title="04-project-created" src="http://www.japf.fr/wp-content/uploads/2012/04/04-project-created-300x134.png" alt="" width="300" height="134" /></a></p>
<h3>Connect to TFS online from VS11</h3>
<p>Now that the configuration stage is completed, it&#8217;s time to log in to TFS from Visual Studio 11.  All I had to do is to open the Team Explorer</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/05-connect-from-vs11.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1202" title="05-connect-from-vs11" src="http://www.japf.fr/wp-content/uploads/2012/04/05-connect-from-vs11-300x234.png" alt="" width="300" height="234" /></a></p>
<p>And then configure the server URL:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/06-add-server.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1203" title="06-add-server" src="http://www.japf.fr/wp-content/uploads/2012/04/06-add-server-300x196.png" alt="" width="300" height="196" /></a></p>
<p>Then the Team Explorer dialog is ready:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/07-team-explorer.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1204" title="07-team-explorer" src="http://www.japf.fr/wp-content/uploads/2012/04/07-team-explorer-238x300.png" alt="" width="238" height="300" /></a></p>
<h3>Check-in some code</h3>
<p>Just for the demo, I created a new WinRT XAML application and check the &#8220;Add to source control&#8221; checkbox during the creation of the project. Visual Studio asked me where to store this new project:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/08-add-solution-to-sourcecontrol.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1205" title="08-add-solution-to-sourcecontrol" src="http://www.japf.fr/wp-content/uploads/2012/04/08-add-solution-to-sourcecontrol-297x300.png" alt="" width="297" height="300" /></a></p>
<p>Then using the Team Explorer, I choose the Source Control Explorer in order to check-in the code, and I got this new dialog right in the Team Explorer panel:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/09-check-in.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1206" title="09-check-in" src="http://www.japf.fr/wp-content/uploads/2012/04/09-check-in-244x300.png" alt="" width="244" height="300" /></a></p>
<p>Which in my opinion is very nice and better than the previous version.</p>
<h3>Code review</h3>
<p>We know have the ability to request a code review right from the Team Explorer. This is another very nice feature:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/10-code-review.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1207" title="10-code-review" src="http://www.japf.fr/wp-content/uploads/2012/04/10-code-review-244x300.png" alt="" width="244" height="300" /></a></p>
<h3>Project home page</h3>
<p>Because I chose the agile process template, the project homepage is &#8220;agile-oriented&#8221;:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/04/11-website.png" rel="lightbox[1194]"><img class="alignnone size-medium wp-image-1197" title="11-website" src="http://www.japf.fr/wp-content/uploads/2012/04/11-website-300x182.png" alt="" width="300" height="182" /></a></p>
<h3>Conclusion</h3>
<p>This post was a very quick overview of what Team Foundation Service online looks like. I didn&#8217;t dig in any specific feature but I wanted to show you how it looks like. The experience from Visual Studio 11 is very straightforward and the new Team Explorer dialog easy and powerful.</p>
<p>Of course the benefits of TFS in Visual Studio 11 are now restricted in Team Foundation Service Online, it was just easy for me to do so.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/04/a-lap-around-tfs-online/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Hello World, WinRT !</title>
		<link>http://www.japf.fr/2012/04/hello-world-winrt/</link>
		<comments>http://www.japf.fr/2012/04/hello-world-winrt/#comments</comments>
		<pubDate>Wed, 11 Apr 2012 17:18:37 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[CodeProject]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[WinRT]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[winrt]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1155</guid>
		<description><![CDATA[Now that the mysterious WP7 app I was working on for the last few months is done (at least v1.0!) and is in the certification pipeline, I finally have some time to start playing with WinRT. Of course, the first thing I&#8217;m playing with is the port of this WP7 app to WinRT. In this [...]]]></description>
			<content:encoded><![CDATA[<p>Now that the mysterious WP7 app I was working on for the last few months is done (at least v1.0!) and is in the certification pipeline, I finally have some time to start playing with WinRT.</p>
<p>Of course, the first thing I&#8217;m playing with is the port of this WP7 app to WinRT. In this post, I&#8217;m sharing the aspects I discovered this afternoon while trying to port one of the project from Windows Phone to WinRT. Let&#8217;s be clear my goal was just to see what it&#8217;s look like to port the code, I wasn&#8217;t able of course to port the WP7 app to WinRT in an afternoon&#8230;</p>
<h3>Tooling</h3>
<p>The development environment for Windows 8 is currently:</p>
<ul>
<li>Windows 8 Consumer Preview</li>
<li>Visual Studio 11 Beta</li>
<li>Blend for Visual Studio Beta</li>
</ul>
<p>Because I wanted to have the Windows Phone environment too on this machine, I also installed:</p>
<ul>
<li>Visual Studio 2010 + SP1</li>
<li><a href="http://www.microsoft.com/download/en/details.aspx?displaylang=en&amp;id=27570">Windows Phone SDK 7.1</a></li>
<li><a href="http://www.microsoft.com/download/en/details.aspx?id=29233">Windows Phone SDK 7.1.1</a></li>
</ul>
<div>The WP7 app currently uses various libraries (all of them are described in <a href="http://www.japf.fr/2012/02/developping-an-app-for-the-windows-phone-platform/">this blog post</a>), today I just downloaded the <a href="http://mvvmlight.codeplex.com/releases/view/85317">Windows 8 version of MVVM Light</a> (thanks Laurent).</div>
<h3>Hello, World</h3>
<p>As a developer, one of the first thing we try when we target a new platform is to display some kind of message on the screen. So I first tried the famous MessageBox.Show() but I quickly realized the API has changed&#8230; If you want to display a message box, you must use the MessageDialog class:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code25'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115525"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1155code25"><pre class="csharp" style="font-family:monospace;">MessageDialog dialog <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> MessageDialog<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;Content&quot;</span>, <span style="color: #666666;">&quot;Title&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
dialog<span style="color: #008000;">.</span><span style="color: #0000FF;">ShowAsync</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008080; font-style: italic;">// execution continues here immediately after showing the dialog</span></pre></td></tr></table></div>

<p>As you can see, displaying the dialog is actually an asynchronous operation. If we want to perform an action when the dialog closed, we must <em>await</em> that call:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code26'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115526"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1155code26"><pre class="csharp" style="font-family:monospace;">MessageDialog dialog <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> MessageDialog<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;Content&quot;</span>, <span style="color: #666666;">&quot;Title&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
await dialog<span style="color: #008000;">.</span><span style="color: #0000FF;">ShowAsync</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008080; font-style: italic;">// execution continues here when the dialog closes</span></pre></td></tr></table></div>

<p>If you want to display additional buttons, you can add <em>commands</em> to the dialog:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code27'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115527"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1155code27"><pre class="csharp" style="font-family:monospace;">MessageDialog dialog <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> MessageDialog<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;Content&quot;</span>, <span style="color: #666666;">&quot;Title&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
dialog<span style="color: #008000;">.</span><span style="color: #0000FF;">Commands</span><span style="color: #008000;">.</span><span style="color: #0000FF;">Add</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">new</span> UICommand <span style="color: #008000;">&#123;</span> Label <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;test&quot;</span> <span style="color: #008000;">&#125;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
IUICommand result <span style="color: #008000;">=</span> await dialog<span style="color: #008000;">.</span><span style="color: #0000FF;">ShowAsync</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<h3>Namespace changes</h3>
<p>Many namespace has changed between Windows Phone and WinRT, you can use pre-processor directives like the following</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code28'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115528"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p1155code28"><pre class="csharp" style="font-family:monospace;"><span style="color: #008080;">#if WINDOWS_PHONE</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Windows.Data</span><span style="color: #008000;">;</span>
<span style="color: #008080;">#else</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">Windows.UI.Xaml.Data</span><span style="color: #008000;">;</span>
<span style="color: #008080;">#endif</span></pre></td></tr></table></div>

<h3>IValueConverter</h3>
<p>Another thing I noticed is the fact that the IValueConverter interface has changed (notice the last parameter&#8230;)</p>
<p>WPF/Silverlight/WindowsPhone version (<a href="http://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter.aspx">documentation</a>):</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code29'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115529"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p1155code29"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">interface</span> IValueConverter
<span style="color: #008000;">&#123;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> Convert<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, CultureInfo culture<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> ConvertBack<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, CultureInfo culture<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>WinRT version (<a href="http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.data.ivalueconverter.aspx">documentation</a>):</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code30'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115530"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p1155code30"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">interface</span> IValueConverter
<span style="color: #008000;">&#123;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> Convert<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, <span style="color: #6666cc; font-weight: bold;">string</span> language<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #6666cc; font-weight: bold;">object</span> ConvertBack<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> value, Type targetType, <span style="color: #6666cc; font-weight: bold;">object</span> parameter, <span style="color: #6666cc; font-weight: bold;">string</span> language<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<h3>Storage</h3>
<p>The storage story in WinRT can be summarized by the following:</p>
<ul>
<li>file system access is heavily restricted (this was already the case for Silverlight and Windows Phone)</li>
<li>most storage API are asynchronous</li>
</ul>
<p>Here is an example taken from the <a href="http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.applicationdata.localfolder.aspx">WinRT documentation</a>:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code31'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115531"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code" id="p1155code31"><pre class="csharp" style="font-family:monospace;"><span style="color: #008080; font-style: italic;">// write a file</span>
async <span style="color: #6666cc; font-weight: bold;">void</span> WriteTimestamp<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    StorageFolder localFolder <span style="color: #008000;">=</span> ApplicationData<span style="color: #008000;">.</span><span style="color: #0000FF;">Current</span><span style="color: #008000;">.</span><span style="color: #0000FF;">LocalFolder</span><span style="color: #008000;">;</span>
&nbsp;
    StorageFile sampleFile <span style="color: #008000;">=</span> await localFolder<span style="color: #008000;">.</span><span style="color: #0000FF;">CreateFileAsync</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;dataFile.txt&quot;</span>, CreationCollisionOption<span style="color: #008000;">.</span><span style="color: #0000FF;">OpenIfExists</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    await FileIO<span style="color: #008000;">.</span><span style="color: #0000FF;">WriteTextAsync</span><span style="color: #008000;">&#40;</span>sampleFile, DateTime<span style="color: #008000;">.</span><span style="color: #0000FF;">Now</span><span style="color: #008000;">.</span><span style="color: #0000FF;">ToString</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span>
&nbsp;
<span style="color: #008080; font-style: italic;">// read a file</span>
async Task ReadTimestamp<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    <span style="color: #0600FF; font-weight: bold;">try</span>
    <span style="color: #008000;">&#123;</span>
        StorageFolder localFolder <span style="color: #008000;">=</span> ApplicationData<span style="color: #008000;">.</span><span style="color: #0000FF;">Current</span><span style="color: #008000;">.</span><span style="color: #0000FF;">LocalFolder</span><span style="color: #008000;">;</span>
&nbsp;
        StorageFile sampleFile <span style="color: #008000;">=</span> await localFolder<span style="color: #008000;">.</span><span style="color: #0000FF;">GetFileAsync</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;dataFile.txt&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #6666cc; font-weight: bold;">String</span> timestamp <span style="color: #008000;">=</span> await FileIO<span style="color: #008000;">.</span><span style="color: #0000FF;">ReadTextAsync</span><span style="color: #008000;">&#40;</span>sampleFile<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #008080; font-style: italic;">// Data is contained in timestamp</span>
    <span style="color: #008000;">&#125;</span>
    <span style="color: #0600FF; font-weight: bold;">catch</span> <span style="color: #008000;">&#40;</span>Exception<span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span>
        <span style="color: #008080; font-style: italic;">// Timestamp not found</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<h3>Resources</h3>
<p>The WP7 app contains several resource files (.resx). The resources are available in the XAML (using a binding to a static resource) and in C# using the static types that are automatically generated with the resx file. Well, it looks like those static types do not exist anymore in WinRT (also, the extension of the resource file has changed to .resw).</p>
<p>The resources can now be accessed using the <em>ResourceLoader</em> type:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1155code32'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p115532"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p1155code32"><pre class="csharp" style="font-family:monospace;">res <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> ResourceLoader<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;PrototypeZero/AppResources&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #6666cc; font-weight: bold;">string</span> value <span style="color: #008000;">=</span> res<span style="color: #008000;">.</span><span style="color: #0000FF;">GetString</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;StringKey&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<h3>Conclusion</h3>
<p>I think .Net developers should not be afraid by WinRT. If you already start playing with C# Async you will be familiar with the new asynchronous API. As far as I&#8217;ve gone with the comparison I think we can reasonably imagine having a good code base shared between WinRT and Windows Phone. I can safely continue to use the XAML knowledge I got about 5 years ago on WinRT <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Of course there are many other things we can compare between WinRT and Windows Phone&#8230; This first post is just the beginning <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/04/hello-world-winrt/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>MVVM framework explorer updated !</title>
		<link>http://www.japf.fr/2012/03/mvvm-framework-explorer-updated-2/</link>
		<comments>http://www.japf.fr/2012/03/mvvm-framework-explorer-updated-2/#comments</comments>
		<pubDate>Sun, 25 Mar 2012 13:00:28 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[.Net]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Windows 8]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[mvvm]]></category>
		<category><![CDATA[winrt]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1147</guid>
		<description><![CDATA[After several requests, I finally took the time to update my MVVM Explorer Silverlight App ! Here is the changelog: update all download stats (based ONLY on CodePlex stats) refresh popularities remove StructuredMVVM (not available on CodePlex) add WinRT support (however, no toolkit seems to support if official yet) Top 5 (most downloaded &#38; supporting [...]]]></description>
			<content:encoded><![CDATA[<p>After several requests, I finally took the time to update my <a href="http://www.japf.fr/silverlight/mvvm" target="_blank">MVVM Explorer Silverlight App </a>!</p>
<p>Here is the changelog:</p>
<ul>
<li>update all download stats (based ONLY on CodePlex stats)</li>
<li>refresh popularities</li>
<li>remove StructuredMVVM (not available on CodePlex)</li>
<li>add WinRT support (however, no toolkit seems to support if official yet)</li>
</ul>
<div>Top 5 (most downloaded &amp; supporting WPF, Silverlight and Windows Phone):</div>
<div>
<ol>
<li><a href="http://mvvmlight.codeplex.com/">MVVM Light</a> (95k downloads)</li>
<li><a href="http://caliburnmicro.codeplex.com/">Caliburn Micro</a> (27k downloads)</li>
<li><a href="http://nroute.codeplex.com/">nRoute</a> (22k downloads)</li>
<li><a href="http://simplemvvmtoolkit.codeplex.com/">Simple MVVM toolkit</a> (10k downloads)</li>
<li><a href="http://catel.codeplex.com/">Catel</a> (8k downloads)</li>
</ol>
<p><a href="http://www.japf.fr/wp-content/uploads/2011/09/mvvm-frameworks.png" rel="lightbox[1147]"><img title="mvvm-frameworks" src="http://www.japf.fr/wp-content/uploads/2011/09/mvvm-frameworks.png" alt="" width="464" height="80" /></a></p>
</div>
<div>As always, feedbacks are welcome !</div>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/03/mvvm-framework-explorer-updated-2/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>WP7 performance tip: translate transforms</title>
		<link>http://www.japf.fr/2012/03/wp7-perf-tip-translate-transforms/</link>
		<comments>http://www.japf.fr/2012/03/wp7-perf-tip-translate-transforms/#comments</comments>
		<pubDate>Fri, 23 Mar 2012 19:56:17 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[animations]]></category>
		<category><![CDATA[compositor]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[wp7]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1099</guid>
		<description><![CDATA[In my previous blog post, I described a control called the PivotIndicator. The PivotIndicator is made of a small rectangle that is animated on an X axis: its position is updated every time the selected item of the Pivot changes. Here is the code which setup this animation: ?View Code CSHARP1 2 3 4 5 [...]]]></description>
			<content:encoded><![CDATA[<p>In my previous <a href="http://www.japf.fr/2012/03/introducing-the-pivotindicator-control/">blog post</a>, I described a control called the <a href="http://www.japf.fr/2012/03/introducing-the-pivotindicator-control/">PivotIndicator</a>.</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/03/PivotIndicator.png" rel="lightbox[1099]"><img class="alignnone  wp-image-1124" title="PivotIndicator" src="http://www.japf.fr/wp-content/uploads/2012/03/PivotIndicator.png" alt="" width="338" height="294" /></a></p>
<p>The PivotIndicator is made of a small rectangle that is animated on an X axis: its position is updated every time the selected item of the Pivot changes. Here is the code which setup this animation:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1099code35'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p109935"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p1099code35"><pre class="csharp" style="font-family:monospace;">var border <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Border <span style="color: #008000;">&#123;</span> <span style="color: #008080; font-style: italic;">/* init properties... */</span> <span style="color: #008000;">&#125;</span><span style="color: #008000;">;</span>
var animation <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> DoubleAnimation
<span style="color: #008000;">&#123;</span>
    Duration <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Duration<span style="color: #008000;">&#40;</span>TimeSpan<span style="color: #008000;">.</span><span style="color: #0000FF;">FromSeconds</span><span style="color: #008000;">&#40;</span><span style="color: #FF0000;">0.5</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>,
<span style="color: #008000;">&#125;</span><span style="color: #008000;">;</span>
&nbsp;
Storyboard<span style="color: #008000;">.</span><span style="color: #0000FF;">SetTarget</span><span style="color: #008000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">animation</span>, <span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">border</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
Storyboard<span style="color: #008000;">.</span><span style="color: #0000FF;">SetTargetProperty</span><span style="color: #008000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">animation</span>, <span style="color: #008000;">new</span> PropertyPath<span style="color: #008000;">&#40;</span>Canvas<span style="color: #008000;">.</span><span style="color: #0000FF;">LeftProperty</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<p>The problem I noticed was that this animation wasn&#8217;t fluid. In particular, when the PivotItem contains a lot of items&#8230;</p>
<p>As you probably already know, the WP7 platform introduces a <em>Compositor</em> thread. This thread does not exist in the &#8220;desktop&#8221; version of Silverlight. The idea is that this thread can handle simple animations independently from the UI thread (which can be quite busy&#8230;) and leverage the GPU.</p>
<p>Now, in my code, I&#8217;m using a DoubleAnimation to animate a Canvas.Left property. What is wrong with that ? Actually, the problem is the property I&#8217;m animating, not the animation itself. When I setup an animation using Canvas.Left, there is absolutely no way the Compositor thread can handle it. Why ?</p>
<p>Because when the property changes, it triggers a layout update in the Canvas. This process is totally &#8220;CPU-bound&#8221; and executes on the UI thread. The dependency property changes, it calls InvalidateLayout which update the position of the item (by calling .Arrange() on each of its child). In this case, the GPU &#038; the compositor thread cannot be used.</p>
<p>Now, the trick is to do the exact same animation with a different code:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1099code36'); return false;">View Code</a> CSHARP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p109936"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code" id="p1099code36"><pre class="csharp" style="font-family:monospace;">var border <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Border <span style="color: #008000;">&#123;</span> <span style="color: #008080; font-style: italic;">/* init properties... */</span> <span style="color: #008000;">&#125;</span><span style="color: #008000;">;</span>
var translateTransform <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> TranslateTransform<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
border<span style="color: #008000;">.</span><span style="color: #0000FF;">RenderTransform</span> <span style="color: #008000;">=</span> translateTransform<span style="color: #008000;">;</span>
var animation <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> DoubleAnimation
<span style="color: #008000;">&#123;</span>
    Duration <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Duration<span style="color: #008000;">&#40;</span>TimeSpan<span style="color: #008000;">.</span><span style="color: #0000FF;">FromSeconds</span><span style="color: #008000;">&#40;</span><span style="color: #FF0000;">0.5</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>,
<span style="color: #008000;">&#125;</span><span style="color: #008000;">;</span>
&nbsp;
Storyboard<span style="color: #008000;">.</span><span style="color: #0000FF;">SetTarget</span><span style="color: #008000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">animation</span>, translateTransform<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
Storyboard<span style="color: #008000;">.</span><span style="color: #0000FF;">SetTargetProperty</span><span style="color: #008000;">&#40;</span><span style="color: #0600FF; font-weight: bold;">this</span><span style="color: #008000;">.</span><span style="color: #0000FF;">animation</span>, <span style="color: #008000;">new</span> PropertyPath<span style="color: #008000;">&#40;</span>TranslateTransform<span style="color: #008000;">.</span><span style="color: #0000FF;">XProperty</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<p>Notice that all I change is using an TranslateTransform: the target of the animation is not the border but the translate transform it self. A TranslateTransform is an operation which can be handled by the GPU. Now, his animation is handled by the Compositor Thread and will be fluid even though the UI thread gets very busy !</p>
<p>Hope it helps <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/03/wp7-perf-tip-translate-transforms/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing the PivotIndicator control for Windows Phone</title>
		<link>http://www.japf.fr/2012/03/introducing-the-pivotindicator-control/</link>
		<comments>http://www.japf.fr/2012/03/introducing-the-pivotindicator-control/#comments</comments>
		<pubDate>Sun, 04 Mar 2012 13:22:47 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[Metro]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[controls]]></category>
		<category><![CDATA[metro]]></category>
		<category><![CDATA[windowsphone]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1111</guid>
		<description><![CDATA[Today I would like to share a nice control which is part of my mysterious Windows Phone 7 app which will be released later this month. I call this control the PivotIndicator control. It can be used in order to show the user all the items in a PivotControl on a single screen, as shortcuts. [...]]]></description>
			<content:encoded><![CDATA[<p>Today I would like to share a nice control which is part of my mysterious Windows Phone 7 app which will be released later this month. I call this control the PivotIndicator control. It can be used in order to show the user all the items in a PivotControl on a single screen, as shortcuts. A small rectangle (which use the phone&#8217;s accent color as background) is animated when the current pivot item changes. The user can press any item to immediately go to the associated pivot item.</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/03/PivotIndicator.png" rel="lightbox[1111]"><img class="alignnone  wp-image-1124" title="PivotIndicator" src="http://www.japf.fr/wp-content/uploads/2012/03/PivotIndicator.png" alt="" width="338" height="294" /></a></p>
<p>You can grab the source code <a href="http://www.japf.fr/wp-content/uploads/2012/03/PivotIndicatorDemo.zip">here</a>.</p>
<p>Here is a short video showing the control in action:</p>
<p><a href="http://www.japf.fr/2012/03/introducing-the-pivotindicator-control/#mediaPlayer_1111_0">Play Video</a></p>
<p>Now let&#8217;s see the details&#8230;</p>
<ul>
<li>How to use it?</li>
</ul>
<div>
<ol>
<li>Adjust the layout of your page to be able to display the PivotIndicator. Typically this involves adding a row with a &#8216;*&#8217; height.</li>
<li>Use a binding with an ElementName in order to set the Pivot property of the PivotIndicator control</li>
<li>Define the HeaderTemplate property of the PivotIndicator with a DataTemplate which will be used to render each item in the PivotIndicator</li>
<li>You&#8217;re done <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </li>
</ol>
<div>Here is what is looks like in the demo:</div>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1111code38'); return false;">View Code</a> XML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p111138"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
</pre></td><td class="code" id="p1111code38"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000066;">Background</span>=<span style="color: #ff0000;">&quot;Transparent&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid.RowDefinitions<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;Auto&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;Auto&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;*&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid.RowDefinitions<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;StackPanel</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;TitlePanel&quot;</span> <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">Margin</span>=<span style="color: #ff0000;">&quot;12,17,0,28&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;ApplicationTitle&quot;</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;PIVOT INDICATOR&quot;</span> <span style="color: #000066;">Style</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneTextNormalStyle}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;PageTitle&quot;</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;demo&quot;</span> <span style="color: #000066;">Margin</span>=<span style="color: #ff0000;">&quot;9,-7,0,0&quot;</span> <span style="color: #000066;">Style</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneTextTitle1Style}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/StackPanel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #808080; font-style: italic;">&lt;!-- here is the PivotIndicator control --&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;control:PivotIndicator</span></span>
<span style="color: #009900;">        <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;1&quot;</span></span>
<span style="color: #009900;">        <span style="color: #000066;">Pivot</span>=<span style="color: #ff0000;">&quot;{Binding ElementName=pivot}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;control:PivotIndicator.HeaderTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;DataTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #808080; font-style: italic;">&lt;!-- this the datatemplate used for each item in the PivotIndicator</span>
<span style="color: #808080; font-style: italic;">                        the DataContext is a PivotItemViewModel in our case --&gt;</span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> </span>
<span style="color: #009900;">                    <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;{Binding Title}&quot;</span></span>
<span style="color: #009900;">                    <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/DataTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/control:PivotIndicator.HeaderTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/control:PivotIndicator<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;ContentPanel&quot;</span> <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;2&quot;</span> <span style="color: #000066;">Margin</span>=<span style="color: #ff0000;">&quot;12,0,12,0&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;controls:Pivot</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;pivot&quot;</span> <span style="color: #000066;">ItemsSource</span>=<span style="color: #ff0000;">&quot;{Binding PivotItems}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;controls:Pivot.HeaderTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;DataTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                    <span style="color: #808080; font-style: italic;">&lt;!-- this is the datatemplate used for the header of the pivot item --&gt;</span>
                    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;{Binding Title}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/DataTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/controls:Pivot.HeaderTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;controls:Pivot.ItemTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;DataTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                    <span style="color: #808080; font-style: italic;">&lt;!-- this is the datatemplate of the content of the pivot item --&gt;</span>
                    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span></span>
<span style="color: #009900;">                        <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;{Binding Content}&quot;</span></span>
<span style="color: #009900;">                        <span style="color: #000066;">FontSize</span>=<span style="color: #ff0000;">&quot;40&quot;</span></span>
<span style="color: #009900;">                        <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span></span>
<span style="color: #009900;">                        <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/DataTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/controls:Pivot.ItemTemplate<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/controls:Pivot<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

</div>
<ul>
<li>How it works?</li>
</ul>
<div>Behind the scene, the PivotIndicator control is actually made of 3 parts:</div>
<div>
<ul>
<li>SplitPanel: this is a panel (it derives from Panel) which arrange its children on a single line, and where each item has the same width. The width is computed as the total available width divided by the number of items</li>
<li>PivotRectange: this is a small control which contains a rectangle. The rectangle uses the phone&#8217;s accent color. Its position is animated based on the currently selected index.</li>
<li>PivotIndicator: is the control you will use. It is made of an ItemsControl with a SplitPanel as ItemsPanelTemplate and the PivotRectangle</li>
</ul>
<div><a href="http://www.japf.fr/wp-content/uploads/2012/03/PivotIndicatorDemo.zip">Source code</a> is documented so you might want to dig in it for more details <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </div>
</div>
<div></div>
<div>Note that I didn&#8217;t try but I think the PivotIndicator control should works just fine with a Panorama (and few code adjustments&#8230;)</div>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/03/introducing-the-pivotindicator-control/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Windows Phone Tango (7.1.1)</title>
		<link>http://www.japf.fr/2012/02/windows-phone-tango-7-1-1/</link>
		<comments>http://www.japf.fr/2012/02/windows-phone-tango-7-1-1/#comments</comments>
		<pubDate>Mon, 27 Feb 2012 18:34:34 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[Events]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[mwc]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1103</guid>
		<description><![CDATA[Day 1 of Mobile World Congress has been the occasion for Microsoft to introduce officially the Windows Phone Tango, or Windows Phone 7.1.1 A CTP of the 7.1.1 SDK is now available. This CTP does NOT comes with a go-live license, it basically means you will NOT be able to publish apps to the marketplace [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.japf.fr/wp-content/uploads/2012/02/mwc.png" rel="lightbox[1103]"><img class="alignnone size-full wp-image-1090" title="mwc" src="http://www.japf.fr/wp-content/uploads/2012/02/mwc.png" alt="" width="299" height="102" /></a></p>
<p>Day 1 of <a href="http://www.mobileworldcongress.com/index.html">Mobile World Congress</a> has been the occasion for Microsoft to introduce officially the Windows Phone Tango, or Windows Phone 7.1.1</p>
<p>A CTP of the 7.1.1 SDK is <a href="http://www.microsoft.com/download/en/details.aspx?displaylang=en&amp;id=28962">now available</a>. This CTP does NOT comes with a go-live license, it basically means <strong>you will NOT be able to publish apps to the marketplace with it</strong>.</p>
<p><em>&#8220;The Windows Phone SDK 7.1.1 Update provides additional functionality to the existing Windows Phone SDK 7.1 software to enable mobile developers to better target applications for 256MB Windows Phone devices. This update includes an updated 512MB emulator, as well as a new 256MB emulator image, and Intellisense support to communicate device targeting preferences. Once installed, the WP SDK 7.1.1 update allows you to decide which emulator you would like to deploy your app to.&#8221;</em></p>
<p>It is important to note that generic background agents will NOT be available on devices will only 256MB of memory&#8230; Read the What&#8217;s new in <a href="http://msdn.microsoft.com/en-us/library/hh855084(v=vs.92).aspx">Windows Phone SDK 7.1.1</a> for more details. At this point it does not look like Microsoft has communicate any other details related to the OS itself (new features or bug fixes&#8230;).</p>
<p>As I said in my <a href="http://www.japf.fr/2012/02/windows-phone-vnext-windows-8-next-week/">last post</a>, the next big step now is Windows 8 Consumer Preview on wednesday&#8230;</p>
<p>Oh, and by the way, I case you missed it, Skype for Windows Phone 7 is now available in beta. Here is the QR code:</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/02/skype-beta-wp7.png" rel="lightbox[1103]"><img class="alignnone size-full wp-image-1107" title="skype-beta-wp7" src="http://www.japf.fr/wp-content/uploads/2012/02/skype-beta-wp7.png" alt="" width="156" height="156" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/02/windows-phone-tango-7-1-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Windows Phone vNext &amp; Windows 8 next week</title>
		<link>http://www.japf.fr/2012/02/windows-phone-vnext-windows-8-next-week/</link>
		<comments>http://www.japf.fr/2012/02/windows-phone-vnext-windows-8-next-week/#comments</comments>
		<pubDate>Sun, 26 Feb 2012 13:49:51 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[.Net]]></category>
		<category><![CDATA[Events]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Visual Studio]]></category>
		<category><![CDATA[Windows 8]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[WPF]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1079</guid>
		<description><![CDATA[Update 26th 7:37PM: Nokia keynote live tomorrow morning at 8:30 CET. Live webcast here: http://www.nokia.com/global/about-nokia/webcast-mwc/webcast/ The coming week should be pretty interesting for any folks interested in Microsoft technologies. The Mobile World Congress will take place in Barcelona from Monday to Friday. Windows Phone On the mobile space, we can expect first official information about Windows Phone [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Update 26th 7:37PM:</strong> Nokia keynote live tomorrow morning at 8:30 CET. Live webcast here: <a href="http://www.nokia.com/global/about-nokia/webcast-mwc/webcast/">http://www.nokia.com/global/about-nokia/webcast-mwc/webcast/</a></p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/02/mwc.png" rel="lightbox[1079]"><img class="alignnone size-full wp-image-1090" title="mwc" src="http://www.japf.fr/wp-content/uploads/2012/02/mwc.png" alt="" width="299" height="102" /></a></p>
<p>The coming week should be pretty interesting for any folks interested in Microsoft technologies. The <a href="http://www.mobileworldcongress.com/index.html">Mobile World Congress</a> will take place in Barcelona from Monday to Friday.</p>
<p><strong>Windows Phone</strong></p>
<p>On the mobile space, we can expect first official information about Windows Phone Tango. Tango is expected to be a version of the OS dedicated to low-end devices. From the various leaks that occurred in the last weeks we already have some ideas of what Tango might look likes:</p>
<ul>
<li>ability to import and export contacts directly from the SIM card</li>
<li>ability to send multiple images in a single MMS</li>
<li>more languages supported (120, whereas Mango supports &#8220;only&#8221; 35)</li>
<li>ability to run on devices with only 256MB or RAM</li>
</ul>
<div>None of those information have been confirmed yet but it&#8217;s only a matter of hours now <img src='http://www.japf.fr/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </div>
<div>Of course in the Windows Phone world, the next big step will be Apollo. Apollo is expected to be the next major version of the Windows Phone platform. At this point, we don&#8217;t know if Microsoft is going to talk about Apollo during MWC.</div>
<div></div>
<div>After <a href="http://pocketnow.com/windows-phone/exclusive-windows-phone-8-detailed">a leak</a> about Apollo, <a href="http://www.winsupersite.com">Paul Thurrot</a> wrote <a href="http://www.winsupersite.com/article/windows8/windows-phone-8-preview-142154">an article</a> describing various aspects of this new version. Here are some expected features:</div>
<div>
<ul>
<li>support for multi-core processors, new screen resolutions &amp; NFC support</li>
<li>shared components with Windows 8 (this brings a lot of question: are we talking about WinRT for example ?)</li>
<li>app-to-app communication (similar to what is available in Windows 8 )</li>
<li>IE10</li>
<li>SkyDrive &amp; Skype integration</li>
</ul>
</div>
<div>Again, none of those information have been confirmed yet. We will see if MWC brings more answers.</div>
<div></div>
<div></div>
<p><strong>Windows 8</strong></p>
<p>On wednesday 29th Microsoft will hold a special event in Barcelona for the release of Windows 8 Consumer Preview.</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/02/w8cp.jpg" rel="lightbox[1079]"><img class="alignnone  wp-image-1080" title="w8cp" src="http://www.japf.fr/wp-content/uploads/2012/02/w8cp.jpg" alt="" width="392" height="254" /></a></p>
<p>The Consumer Preview will be available for download to anybody and should be feature complete. I&#8217;m expecting a lot from this release as the Developer Preview was quite incomplete regarding XAML development (for example Blend was only able to target HTML WinRT projects).</p>
<p><strong>Visual Studio 11</strong></p>
<p>With the release of Windows 8 Consumer Preview, Microsoft confirmed this week that we are also going to have access to Visual Studio 11.</p>
<p><a href="http://www.japf.fr/wp-content/uploads/2012/02/vs11.png" rel="lightbox[1079]"><img class="alignnone size-full wp-image-1084" title="vs11" src="http://www.japf.fr/wp-content/uploads/2012/02/vs11.png" alt="" width="550" height="297" /></a></p>
<p>Visual Studio 11 will include most of the extensions currently available in the <a href="http://msdn.microsoft.com/en-us/vstudio/bb980963">Productivity Power Tools</a> for Visual Studio 2010. The XAML designer will be shared with Blend (hopefully that we will to better performance &amp; less design-time issues). There are tons of other changes, improvements and new features&#8230;</p>
<p>For more details, you can check out those posts: Introducing the new developer experience <a href="http://blogs.msdn.com/b/visualstudio/archive/2012/02/23/introducing-the-new-developer-experience.aspx">part 1</a> &amp; <a href="http://blogs.msdn.com/b/visualstudio/archive/2012/02/24/introducing-the-new-developer-experience-part2.aspx">part 2</a>.</p>
<p>Of course I&#8217;ll try to play with all those new toys as soon as possible. So you should expect more blog post this week !</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/02/windows-phone-vnext-windows-8-next-week/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Developping an app for the Windows Phone platform</title>
		<link>http://www.japf.fr/2012/02/developping-an-app-for-the-windows-phone-platform/</link>
		<comments>http://www.japf.fr/2012/02/developping-an-app-for-the-windows-phone-platform/#comments</comments>
		<pubDate>Thu, 09 Feb 2012 20:52:34 +0000</pubDate>
		<dc:creator>Jeremy</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Visual Studio]]></category>
		<category><![CDATA[Windows Phone]]></category>
		<category><![CDATA[agility]]></category>
		<category><![CDATA[management]]></category>
		<category><![CDATA[wp7]]></category>

		<guid isPermaLink="false">http://www.japf.fr/?p=1071</guid>
		<description><![CDATA[For the last few months my colleague Charlotte and I have been working on a Windows Phone 7 app we hope to release soon. Attendants of our &#8220;Performance tuning and analysis&#8220; during the Microsoft TechDays this week had a brief overview of this app. In this post, I wanted to share with you all the [...]]]></description>
			<content:encoded><![CDATA[<p>For the last few months my colleague Charlotte and I have been working on <a href="http://www.2day-wp7.com" target="_blank">a Windows Phone 7 app</a> we hope to release soon. Attendants of our &#8220;<em><a href="http://www.japf.fr/2012/01/windows-phone-performance-analysis-optimization-during-techdays/">Performance tuning and analysis</a>&#8220;</em> during the Microsoft TechDays this week had a brief overview of this app.</p>
<p>In this post, I wanted to share with you all the tools we&#8217;re using to build this app.Most of them are free, so they might interest you&#8230;</p>
<p>Productivity / Code</p>
<ul>
<li><a href="http://www.microsoft.com/visualstudio/en-us/products/2010-editions">Visual Studio 2010</a> and <a href="http://www.microsoft.com/expression/products/blend_overview.aspx">Blend 4</a></li>
<li><a href="http://visualstudiogallery.msdn.microsoft.com/d0d33361-18e2-46c0-8ff2-4adea1e34fef">Productivity Power Tools</a> (free)</li>
<li><a href="http://msdn.microsoft.com/en-us/devlabs/hh227299">Debugger Canvas</a> (free)</li>
<li><a href="http://www.jetbrains.com/resharper/">ReSharper 6.1</a> (C# only $150)</li>
<li><a href="http://msdn.microsoft.com/en-us/vstudio/gg316360">C# Async CTP</a> (free)</li>
</ul>
<p>Libraries</p>
<ul>
<li><a href="http://silverlight.codeplex.com/">Silverlight for Windows Phone toolkit</a> (free)</li>
<li><a href="http://mvvmlight.codeplex.com/">MVVM Light</a> (free)</li>
<li><a href="http://code.google.com/p/moq/">Moq</a> (easy unit-testing, free)</li>
<li><a href="http://msdn.microsoft.com/en-us/library/bb264574.aspx">Windows Live SDK</a> (free)</li>
<li><a href="http://www.flurry.com/">Flurry Analytics</a> (tracking / business intelligence, free)</li>
<li><a href="http://www.icsharpcode.net/opensource/sharpziplib/">SharpZipLib</a> (zip management, free)</li>
<li><a href="http://json.codeplex.com/">JSon.Net</a> (free)</li>
<li><a href="http://msdn.microsoft.com/en-us/data/gg577609">Reactive Extensions or Rx</a> (free)</li>
<li><a href="http://www.telerik.com/products/windows-phone.aspx">Telerik Controls</a> ($100)</li>
</ul>
<p>Source Control</p>
<ul>
<li><a href="http://www.assembla.com">Assembla</a> SVN hosting (private SVN repository, free)</li>
<li><a href="http://tortoisesvn.net">Tortoise SVN</a> (SVN client, free)</li>
</ul>
<p>Project Management</p>
<ul>
<li><a href="http://agilezen.com">AgileZen </a>(free for managing 1 single project)</li>
</ul>
<p>Cloud computing</p>
<ul>
<li><a href="https://windows.azure.com/">Windows Azure</a> (included in our MSDN Ultimate subscription)</li>
<li><a href="https://skydrive.live.com/">SkyDrive</a> (free)</li>
</ul>
<p>Web site</p>
<ul>
<li><a href="http://1and1.com">1and1</a> hosting (about $5/month)</li>
<li><a href="http://wp7appsite.codeplex.com/">WP7 App Site</a> template (free)</li>
</ul>
<p>I personally love all those tools and libraries ! What do YOU use for your Windows Phone 7 development ?</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.japf.fr/2012/02/developping-an-app-for-the-windows-phone-platform/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

