SilverlightShow: Silverlight Community http://www.silverlightshow.net/ Silverlight articles, Silverlight tutorials, Silverlight videos, Silverlight samples SilverlightShow.net http://www.rssboard.org/rss-specification Argotic Syndication Framework 2008.0.2.0, http://www.codeplex.com/Argotic en-US estoychev@completit.com (Emil Stoychev) Windows 8 Metro: Layout, view states and navigation <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-Metro-Layout-view-states-and-navigation.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-Metro-Layout-view-states-and-navigation.aspx" data-count="horizontal" data-text="Read @aboschin's article '#Windows8 Metro: Layout, view states & navigation' #win8 #win8dev" data-url="http://slshow.net/JirY2v">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-Metro-Layout-view-states-and-navigation.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <div style="border:1px solid #dddddd;border-image: initial; background-color: #f3f3f3; margin-top: 5px; margin-left: 150px; padding-left: 10px; padding-top: 10px; width: 400px; text-align: center;"><strong><a href="http://www.silverlightshow.net/Storage/Sources/XPG.Metro.NavigationAndViewStates.zip" target="_blank">Download the source code for this article</a></strong> <ul> </ul> </div> <p style="text-align: justify;">The target devices where it is expected Windows 8 to runs are something of really amazing, since it should run from tablet devices of the most various sizes to the the widest monitor. </p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/news/Webinar-Live-Tiles-and-Notifications-in-Windows-8.aspx">Free webinar on May 17: Live Tiles and Notifications in Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx">The article series: Windows 8 and the future of XAML</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/wp75.aspx">Ebook by A. Boschin: WP 7.5 Fundamentals</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/wp75.aspx" target="_self"><img style="width: 70px; height: 99px;" alt="Ebook: Windows Phone 7.5 Fundamentals" src="http://www.silverlightshow.net/Storage/Ebooks/wp75_thumb.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> Dealing with various display sizes and with mobile devices requires new capabilities that go beyond the ones required to run on a simple smartphone. First of all you need to adapt the size of your app to the screen, probably reducing or increasing the amount of content you show to the user. Connected with the use of fingers instead of mouse, it is required you are able to use all available space on the screen, expecially with low resolutions. Finally you have to deal with orientation. It is easy and natural to rotate the screen to best fit the content you are using, as an example using a vertical orientation while reading a page. <p style="text-align: justify;">All these constraints change the game and have been answered by metro-style application. From the point of view of screen size, you are able to deal with it in different ways, adapting the content or introducing additional elements. You are also able to detect changes in orientation and you can take advantage of the whole screen snapping applications on the side and using a navigation paradigm.</p> <h4 style="text-align: justify;">Navigate your apps...</h4> <p style="text-align: justify;">Navigation applications are something you already know for sure. They exists in WPF and in Silverlight but probably you know the benefits of this paradigm from the web that has originally introduced it with the browser. A metro-style application is by default a navigation application, since in the very first rows of code they runs the Window content is injected with a Frame control. There isn't anything preventing you from using something of different from a Frame as main element but if you want to give the better experience to your user this is a one-way street. </p> <div style="text-align: justify;"> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">protected</span> <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span> OnLaunched(LaunchActivatedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #008000;">// Create a Frame to act navigation context and navigate to the first page</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> var rootFrame = <span style="color: #0000ff;">new</span> Frame();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> rootFrame.Navigate(<span style="color: #0000ff;">typeof</span>(BlankPage));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #008000;">// Place the frame in the current Window and ensure that it is active</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> Window.Current.Content = rootFrame;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> Window.Current.Activate();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> }</pre> <!--CRLF--></div> </div> </div> <p style="text-align: justify;">In these lines, from the default App.xaml.cs file you see how the frame is injected and then the Window activated. Having in you hands the code to initialize the frame is important just because you can wrap the fram itself with some application-wide service like, an example, a wait layer that appears when the application is busy with asynchronous activities. </p> <p style="text-align: justify;">Inside the Frame you can navigate Page instances. A page of your application directly of indirectly inherits from the Page class so it is a good candidate to be navigated to. Differently from Silverlight you didn't use an Uri to navigate to a page but its Type. This choice comes probably from the fact that metro-style applications does not need to have deep-linking from a web page, so there is not any reason of having a complete Uri.</p> <p style="text-align: justify;">The Frame control exposes all the methods and properties you may need to perform navigation and to detect navigation state. Here is the main:</p> <p style="text-align: justify;"><strong>Navigate(Type page)</strong>: Perform navigation to a page. This have also an overload you can use to pass a parameter to the destination page. The parameter is of type object so you can pass complex objects.</p> <p style="text-align: justify;"><strong>GoBack(), GoForward()</strong>: There go along the navigation stack, back of forward. Side by side with these methods there are two properties, CanGoBack and CanGoForward used if you reached one end of the stack.</p> <p style="text-align: justify;"><strong>StopLoading()</strong>: Stop le loading of a page, e.g. if it is taking longer to load. </p> <p style="text-align: justify;"><strong>CurrentSourcePageType</strong>:  The type of the page currently loaded. </p> <p style="text-align: justify;"><strong>Navigated, Navigating, NavigationFailed, NavigationStopped</strong>: These events, exposed also as overridable methods on the Page class let you know when something related to navigation happens.</p> <p style="text-align: justify;">Given that your application is subject to be freezed and/or terminated under particular circumstances, the Frame control provides a way to persist the navigation backstack, so it may be resumed when the application is loaded again. In the example project attached to this article, I wrote a simple code to persist and restore navigation across different sessions. No matter if the application is suspended or terminated, the navigation starts always from the last point where it was interrupted:</p> <div style="text-align: justify;"> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> GoToNext(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">this</span>.Frame.Navigate(<span style="color: #0000ff;">typeof</span>(FirstPage));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">this</span>.SaveAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">public</span> async <span style="color: #0000ff;">void</span> SaveAsync()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> Dictionary<<span style="color: #0000ff;">string</span>, <span style="color: #0000ff;">string</span>> values = <span style="color: #0000ff;">new</span> Dictionary<<span style="color: #0000ff;">string</span>, <span style="color: #0000ff;">string</span>>();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> values[Consts.NavigationKey] = <span style="color: #0000ff;">this</span>.Frame.GetNavigationState();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">this</span>.Frame.CurrentSourcePageType != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> values[Consts.CurrentKey] = <span style="color: #0000ff;">this</span>.Frame.CurrentSourcePageType.FullName;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> await Utilities.SaveDictionaryAsync(Consts.FileName, values);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> }</pre> <!--CRLF--></div> </div> </div> <p style="text-align: justify;">This code, inside a page persists the navigation state every time it changes. You have simply to call the SaveAsync methos every time you move across pages, just after the call to the navigation method. It saves the current page and the navigation state using the GetNavigationState() method. Then, in the App.xaml.cs you ar requested to restore the state:</p> <div style="text-align: justify;"> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">protected</span> <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span> OnLaunched(LaunchActivatedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #008000;">// Create a Frame to act navigation context and navigate to the first page</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> var rootFrame = <span style="color: #0000ff;">new</span> Frame();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">if</span> (args.PreviousExecutionState != ApplicationExecutionState.Running)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">this</span>.LoadAsync(rootFrame, <span style="color: #0000ff;">typeof</span>(FirstPage));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #008000;">// Place the frame in the current Window and ensure that it is active</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> Window.Current.Content = rootFrame;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> Window.Current.Activate();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> LoadAsync(Frame frame, Type defaultPage = <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> var values = await Utilities.LoadDictionaryAsync(Consts.FileName);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <span style="color: #0000ff;">if</span> (values.ContainsKey(Consts.NavigationKey))</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> frame.SetNavigationState((<span style="color: #0000ff;">string</span>)values[Consts.NavigationKey]);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <span style="color: #0000ff;">if</span> (values.ContainsKey(Consts.CurrentKey))</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> Type page = Type.GetType((<span style="color: #0000ff;">string</span>)values[Consts.CurrentKey]);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> frame.Navigate(page);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (defaultPage != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> frame.Navigate(defaultPage);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> }</pre> <!--CRLF--></div> </div> </div> <p style="text-align: justify;">To restore the navigation it reads the string representing the navigation from the filesystem and use the SetNavigationState method to load it in the frame. Then it navigates again to the last page hit by the user. The result is awesome since the application always remember the entire set of actions made by the user.</p> <p style="text-align: justify;">As for Silverlight, navigation implies caching. The Page class exposes a NavigationCacheMode property useful to define if your page have to be cached after it is loaded the first time. This means you have to handle your page slight differently. The first time your page ctor will be called and the load event raised. All the following calls omit to call ctor and Load so you have to handle the OnNavigated event to know when the page is loaded again.</p> <h4 style="text-align: justify;">Layout and ViewState</h4> <p style="text-align: justify;">Once in front of your empty page, there are a number of options to dispose your content on the page. If you ever used layout controls in Silverlight and WPF, you already know the whole story. Grid, StackPanel and Canvas are still there and they works as you already know. </p> <p style="text-align: justify;">The real problem with layout in metro-style application comes from two points of view. First of all, applications are requested to go beyond the boundaries of the screen to maximize the space available, and for this aspect there are a set of controls available, but also to handle different size of the screen. The size of the screen can vary from the minimum of 1024x768 (10.6") to huge sizes like 2560x1440. The size of 1366x768 is considered a reference point.</p> <p style="text-align: justify;">If you try to start the simulator, on the right side you will find a button that opens a menu with a set of resolutions. Playing with this menu may be interesting to understand what it happens at different resolutions. When you are in start menu and change the value between the 10.6" resolutions, you will notice that the actual size of the tiles remains unchanged also if the pixel density drastically increases. What Windows does is to adapt the size of the elements to three steps: 100%, 140% and 180%. if you take 1366x768 corresponding to 100% you can easily calculate that 1920x1080 corresponds to 140% and 2560x1440 to 180%. The reason to operate this automatic scaling is to always have a size good for finger manipulation. If this scale would not applied the size of a tile at the maximum resolution will be too small to be hit accurately from a finger.</p> <p style="text-align: justify;">This automatic resize is good for vector-based graphics but may be drastically bad for bitmap images. It is the reason why you can use a trick to specify three sizes of every image. If you use a Image tag in XAML, since you specify a fixed name for the image you can create three versions and use a name pattern to let the system load the better for the current resolution:</p> <div style="text-align: justify;"> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Image</span> <span style="color: #ff0000;">Source</span><span style="color: #0000ff;">="Assets/image.jpg"</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="100"</span> <span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="100"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--></div> </div> </div> <p style="text-align: justify;">So after this create three versions of the image adding "scale-*" between the file name and the extension. Windows automatically loads the better image according with the selected resolution. Here is an example:</p> <ul> <li> <div style="text-align: justify;">image.<strong>scale-100</strong>.jpg</div> </li> <li> <div style="text-align: justify;">image.<strong>scale-140</strong>.jpg</div> </li> <li> <div style="text-align: justify;">image.<strong>scale-180</strong>.jpg</div> </li> </ul> <p style="text-align: justify;">While designing the layout of your application there are two strategies you can embrace. You can go for a fixed or adaptive layout. Every choose best fit a specific scenario:</p> <p style="text-align: justify;"><strong>Fixed</strong>: While in fixed layout your application will be scaled according with the screen resolution. The trick is to use a ViewBox control to wrap the entire content of the screen so when the resolution increases it is scaled automatically. This scenario is mostly choosed with games and dashboards where the screen does not go outside the screen boundaries.</p> <p style="text-align: justify;"><strong>Adaptive</strong>: In this layout, the size of items is fixed (according to pixel density rules) but when the screen il larger the number of items presented increases to fill the empty space left. Handling this layout is most difficult then the other but the common applications requires it.</p> <div style="text-align: justify;"> <table border="0" cellspacing="0" cellpadding="2" width="574" align="center"> <tbody> <tr> <td valign="top" style="width: 286px;"> <p style="text-align: center;"><img style="margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/_image_5.png" width="240" height="135" /></p> </td> <td valign="top" style="width: 286px;"> <p style="text-align: center;"><img style="margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/_image_6.png" width="240" height="135" /></p> </td> </tr> <tr> <td valign="top" style="width: 286px;"> <p style="text-align: center;">23" - 1920x1080</p> </td> <td valign="top" style="width: 286px;"> <p style="text-align: center;">10.6" - 1366x768</p> </td> </tr> </tbody> </table> </div> <p style="text-align: justify;">According with user actions, an application can assume 4 different state. FullScreenLandscape, Filled, Snapped and FullScreenPortrait. The figure behind shows the states:</p> <p style="text-align: justify;"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image_17.png" width="594" height="512" /></p> <p style="text-align: justify;">The application have to support all the states to give an effective experience to the user. To detect the states changes you have to subscribe the ViewStateChanged event on the ApplicationView object. When the event raises the arguments let you know the new state so you have to switch on or off the parts of your application to best fit the available space. The best way to accomplish this task is using the LayoutAwarePage class, created by VisualStudio in the Common folder of the project. This class automatically handles states and map them to VisualStateManager states. Thanks to this mapping you can easily use Blend to edit the page like you are defining the states of a control. </p> <h4 style="text-align: justify;">An important argument</h4> <p style="text-align: justify;">In this article I've scratched the surface of layout and navigation. Especially layout is something that needs to be deeply understand to create effective apps, able to give a good experience to the user. I suggesto to read some good MSDN articles: </p> <ul> <li> <div style="text-align: justify;"><a title="http://msdn.microsoft.com/en-us/library/windows/apps/hh780612.aspx" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh780612.aspx">http://msdn.microsoft.com/en-us/library/windows/apps/hh780612.aspx</a></div> </li> <li> <div style="text-align: justify;"><a title="http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx">http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx</a></div> </li> <li> <div style="text-align: justify;"><a title="http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx">http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx</a></div> </li> </ul> <p style="text-align: justify;">In the next article I will go depth in the lifetime matter to understand suspension and how to handle this important task.</p> http://www.silverlightshow.net/items/Windows-8-Metro-Layout-view-states-and-navigation.aspx editorial@silverlightshow.net (Andrea Boschin ) http://www.silverlightshow.net/items/Windows-8-Metro-Layout-view-states-and-navigation.aspx#comments http://www.silverlightshow.net/items/Windows-8-Metro-Layout-view-states-and-navigation.aspx Mon, 07 May 2012 00:21:25 GMT Windows 8 and the future of XAML Part 6: Tiles, toasts and badges <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-6-Tiles-toasts-and-badges.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-6-Tiles-toasts-and-badges.aspx" data-count="horizontal" data-text="Reading @gillcleeren's article '#Windows8 & the future of #XAML: Tiles, toasts & badges' #win8 " data-url="http://slshow.net/IGbxzg">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-6-Tiles-toasts-and-badges.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <div style="border:1px solid #dddddd;border-image: initial; background-color: #f3f3f3; margin-top: 5px; margin-left: 150px; padding-left: 10px; padding-top: 10px; width: 400px; text-align: center;"><strong><a href="http://www.silverlightshow.net/Storage/Sources/WorkingWithTiles.zip">Download the source code for this article</a></strong> <ul> </ul> </div> <p>Welcome to part 6 already in this Windows 8 series. Since the goal of this articles is bringing you in touch with all the important aspects of Windows 8 development, we need to dive into tiles.</p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/Webinars.aspx">Recordings of SilverlightShow Win 8 webinars</a></li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Windows-8-Metro-Create-your-apps-with-simplicity-in-mind.aspx">The article series: Windows 8 Metro</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> Tiles are therefore the main topic of this very article. If you’re coming from a Windows Phone 7 background, the concept of tiles is probably already familiar to you. However, Windows 8 brings quite a few new things to the table, including the concept of badges. Toasts are also covered here; conceptually, these already existed in Windows Phone 7 development as well but have been adapted for use in a Windows 8 environment. <h2>The concepts of tiles</h2> <p>In Windows 8, due to the new way application lifetime management, only one application can be running at any point in time (except when the user has two applications side-by-side using snap view; in that case, two applications are running at the same time). </p> If not running, the application is suspended. We’ll cover the lifetime management in a coming article. <p>If an application wants to inform the user about an event or any update really, by default, it can only do so while it’s running in the foreground. Because this wouldn’t lead to a great user experience, Microsoft invented tiles. Tiles are the little blocks, pinned to the start screen. The image below shows some tiles. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_5d8693b1-e6ee-44f5-86b9-a50814b9c7d7.png" width="453" height="533" /> </p> <p>While a tile is a way to launch an application, it can be much more. Users will pin applications they use most to their start screen. A tile can be made a live tile. A live tile is being updated with new information while the application is or isn’t running. Therefore, the tile can be seen as an extension of the application, allowing the developer to convey information while the application is not the foreground application (read: when it’s not running). </p> <p>Like in Windows Phone 7, the start screen is a means of giving the user access to his most important info. Using a live tile, this becomes possible. The tile can be a way of engaging the user back in the application: imagine you’ve written an RSS application. Using a live tile, you can update the information shown in the start screen. When the user notices the article showing, it can result in a launch of the application. </p> <p>Looking at the live tiles (and frankly, screenshots don’t do them justice), they may seem a bit complicated for developers to create at first sight. All the animations and different types that exist however, are all based on templates which are pure XML. Indeed, there’s no need to create tiles from scratch, Microsoft did the hard part. For developers, it’s just using these templates and Windows 8 will handle the rest. We’ll see these templates in a minute. </p> <h2>Tiles: basic ones and live ones</h2> <p>Let’s now look at how we can create these tiles. Up first, basic tiles. </p> <h3>Basic tiles</h3> <p>In Visual Studio, we can as a bare minimum, include the default tile, which is a square. When installing the application, the tile that’s shown by default is the square tile. It’s the user who can select that your application gets a wide tile. However, it’s up to the developer on the other hand to include a wide tile in Visual Studio as well. In the screenshot below, you can see the package manifest editor where we are selecting images. Notice that Visual Studio hints at what the sizes of these should be. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_22a933b9-8525-4829-a585-2576354fb11e.png" width="609" height="190" /> </p> <p>At this point, our application has a basic tile, which isn’t doing anything at all. It’s acting like an icon on the desktop basically. Below is the wide tile. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_f185ee50-06de-40b6-b0a8-67a3850c71f3.png" width="430" height="222" /> </p> <p>And here’s the square tile. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_4bbfd14d-6912-425b-a20f-636e4afc0c15.png" width="276" height="241" /> </p> <p>Both wide and square tiles can get updates. When receiving updates, tiles become live tiles. </p> <h3>Live tiles</h3> <p>Live tiles are where the fun begins. A live tile can display updates to the user. Below you can see a tile displaying different statuses. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_4595445c-401f-4903-92c8-03dec1e2f475.png" width="353" height="214" /> </p> <p>It’s easy to understand that this way of displaying information extends the way the application works: in many apps, the information on the tile is some summary of the most important information of the application. Apart from text, tiles can also display images or a combination of the two. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_8b554412-5352-4c06-8c26-64a54346994d.png" width="359" height="184" /> </p> <p>To make a tile become a live tile, we need to send it a message. This message consists of XML in the form of a predefined template. Microsoft has included quite a few templates for both the square and the wide templates; below we can see a sample of this XML: </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">tile</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">visual</span> <span style="color: #ff0000;">version</span><span style="color: #0000ff;">='1'</span> <span style="color: #ff0000;">lang</span><span style="color: #0000ff;">='en-US'</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">binding</span> <span style="color: #ff0000;">template</span><span style="color: #0000ff;">='TileWideText03'</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">text</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">='1'</span><span style="color: #0000ff;">></span>Hello World! My very own tile notification</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">text</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">binding</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">binding</span> <span style="color: #ff0000;">template</span><span style="color: #0000ff;">='TileSquareText04'</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">text</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">='1'</span><span style="color: #0000ff;">></span>Hello World! My very own tile notification</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">text</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">binding</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">visual</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"></</span><span style="color: #800000;">tile</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>The template takes complete care of the display of the tile: rendering of the tile as well as all animations are done entirely based on the XML. We as developers don’t need to worry about these; the only thing we need to do is sending the tile updated XML. In a tile, we can include text (in some predefined fields in the XML) as well as images. Images can be *.png or *.jpg files (we’ve seen these in the above screenshots). </p> <p>Let’s see how we can create a live tile. In this article, we are working with an application called “WorkingWithTiles”. The UI is very simple, it contains a few buttons which will trigger the execution of a tile update. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_63685347-65a2-470e-a2e3-1004f12d6a7a.png" width="609" height="390" /> </p> <p>We can work with the raw XML (shown above) where we modify the XML and send that XML directly to the tile. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> UpdateTileWithText(<span style="color: #0000ff;">string</span> text)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlNodeList textElements = tileXml.GetElementsByTagName(<span style="color: #006080;">"text"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileNotification tile = <span style="color: #0000ff;">new</span> TileNotification(tileXml);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p> </p> <p>In the code above, we first retrieve the content using the TileUpdateManager.GetTemplateContent. TileTemplateType is an enumeration that contains all templates. In the following lines, we replace the contents of the text field. Finally, we create a TileNotification instance, which in the next line is sent to the TileUpdateManager. </p> <p>Below you can see the updated tile. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_76353f85-e672-4f58-9982-4852a0ab451f.png" width="328" height="172" /> </p> <p>Now we’ll take a look at updating both text and an image. The code is similar although a bit longer since we are adding an image and text. Notice that we are also including the contents of the square tile here, since we don’t know if the user has a wide tile or a square tile pinned from our app.</p> <pre>      </pre> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> UpdateTileWithImage(<span style="color: #0000ff;">string</span> text, <span style="color: #0000ff;">string</span> imageSrc)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlNodeList textElements = tileXml.GetElementsByTagName(<span style="color: #006080;">"text"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlNodeList imageElements = tileXml.GetElementsByTagName(<span style="color: #006080;">"image"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlElement imageElement = (XmlElement)imageElements.Item(0);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> imageElement.SetAttribute(<span style="color: #006080;">"src"</span>, imageSrc);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> imageElement.SetAttribute(<span style="color: #006080;">"alt"</span>, <span style="color: #006080;">"Image description"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlNodeList squareImageElements = squareTileXml.GetElementsByTagName(<span style="color: #006080;">"image"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> XmlElement squareImageElement = (XmlElement)squareImageElements.Item(0);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> squareImageElement.SetAttribute(<span style="color: #006080;">"src"</span>, imageSrc);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> squareImageElement.SetAttribute(<span style="color: #006080;">"alt"</span>, <span style="color: #006080;">"Image description"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> IXmlNode subnode = tileXml.ImportNode(squareTileXml.GetElementsByTagName(<span style="color: #006080;">"binding"</span>).Item(0), <span style="color: #0000ff;">true</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileXml.GetElementsByTagName(<span style="color: #006080;">"visual"</span>).Item(0).AppendChild(subnode);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileNotification tile = <span style="color: #0000ff;">new</span> TileNotification(tileXml);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>When we look at the start screen now, we’ll see the following tile. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_6abcf027-b0a8-4eef-8c1c-43b01db7efd0.png" width="339" height="181" /> </p> <p>Using the XML directly is maybe a bit cumbersome. In the SDK samples, a handy library is included called NotificationExtensions. This wraps the XML editing and gives us types to work with. The XML editing is abstracted away. Below you can see the code for the text -only tile update. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> UpdateTileWithTextExtensions(<span style="color: #0000ff;">string</span> text)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileContent.TextHeadingWrap.Text = text;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> squareContent.TextBodyWrap.Text = text;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileContent.SquareContent = squareContent;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <pre></pre> <p>And below is the tile update containing an image and text. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> UpdateTextAndImageExtensions(<span style="color: #0000ff;">string</span> text, <span style="color: #0000ff;">string</span> imageSrc)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileContent.TextCaptionWrap.Text = text;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileContent.Image.Src = imageSrc;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileContent.Image.Alt = <span style="color: #006080;">"Web image"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> squareContent.Image.Src = imageSrc;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> squareContent.Image.Alt = <span style="color: #006080;">"Web image"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileContent.SquareContent = squareContent;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>As you can see, it’s much easier to work with these instead of directly editing the XML. The result is of course exactly the same. </p> <h3>Secondary tiles</h3> <p>By default, an app can only have a single tile. There are quite a few scenarios however where the user may want more than one tile of your application pinned to his start screen. Imagine you’re building a weather application. The user may want to pin to his start screen his current location but also the cities he’s to visit in the coming time. Or imagine you have again that RSS application. In such an app, a user may want to pin one or more RSS feeds so he gets notified about their updates on the start screen. </p> <p>To cover this, we have secondary tiles. Such a tile works in the same way as a regular live tile, but it can be added to the start screen by the user from within the application. To be able to pin content, the developer however has to build in this option in the application (for example adding a Pin to Start button in the App Bar on the detail page of the weather for a city). Let’s look at this in some code. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> CreateSecondaryTile_Click_1(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> Uri logo = <span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"ms-appx:///assets/small.png"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> Uri smallLogo = <span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"ms-appx:///assets/secondary.png"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">string</span> tileActivationArguments = <span style="color: #006080;">"timeTileWasPinned="</span> + DateTime.Now.ToLocalTime().ToString();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">// Create a 1x1 Secondary tile</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> SecondaryTile secondaryTile = <span style="color: #0000ff;">new</span> SecondaryTile(<span style="color: #006080;">"AppSecondaryTile"</span>,</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #006080;">"Next webinar"</span>,</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #006080;">""</span>,</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> tileActivationArguments,</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> TileOptions.ShowNameOnLogo,</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> smallLogo);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> secondaryTile.ForegroundText = ForegroundText.Light;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">bool</span> isPinned = await secondaryTile.RequestCreateForSelectionAsync</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> (GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Right);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <pre></pre> <p>Notice that it’s also possible to pass contextual information from the tile. It wouldn’t be a good experience if the user clicks the tile and arrives on the default landing page of the application. Creating a secondary tile is done by using asynchronous code, hence the use of the await/async pattern. </p> <p>The user has to approve the secondary tile. This is done using the RequestCreateForSelectionAsync. The result of this is shown below. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_2b214062-658a-445c-a7bf-e8f0e77860e9.png" width="384" height="342" /> </p> <p>If we run this code now, we get the following secondary tile. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_2e1cfb14-2bfa-4607-b780-bdce74ded3a6.png" width="203" height="195" /> </p> <h5></h5> <h3>Badges</h3> <p>Finally, as developers, we have the ability to display badges on the tile. A badge consists of a number between 0 and 99 or a glyph. The badge is an overlay on top of the tile. Adding a badge is done again using XML templates: by sending some XML to the tile (or to the secondary tile), the badge gets added to the tile. Let’s take a look at adding the badge from code. In here, we are updating the tile with a number. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> UpdateBadgeWithNumber(<span style="color: #0000ff;">int</span> number)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> BadgeNumericNotificationContent badgeContent = <span style="color: #0000ff;">new</span> BadgeNumericNotificationContent((<span style="color: #0000ff;">uint</span>)number);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <pre></pre> <p>The tile now looks as follows. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_a60f4902-04ba-42be-94ef-4b93537e9655.png" width="163" height="142" /> </p> <p>Now that we’ve seen tiles and their options, let’s look at notifications. </p> <h2>Notifications</h2> <p>A tile update isn’t guaranteed to be seen by the user. If our application has an important update to convey to the user, it might not be a good idea to just update the tile. In this case, it might be better to send a notification that the user will see on top of the running application. If you’ve been doing Windows Phone 7 development, you’ll probably recognize this pattern. </p> <p>Like a tile, notifications are also built using XML templates. Because of the fact they are displayed over the running application, they are bound to get the user’s attention more quickly. Notifications aren’t permanent (they disappear automatically) and only 4 are shown at the same time. Just like with secondary tiles, it’s possible to pass context so that the user is brought automatically to the correct location within the application. </p> <p>Notifications shouldn’t be used to spam the user though. Ultimately, the user remains in control: he can decide to turn off notifications for your app or for the entire system altogether. Therefore, don’t count on the fact that the user has seen the update! </p> <p>Let’s add a notification message to the code now. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> CreateToast()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> IToastNotificationContent toastContent = <span style="color: #0000ff;">null</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> IToastText01 templateContent = ToastContentFactory.CreateToastText01();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> templateContent.TextBodyWrap.Text = <span style="color: #006080;">"SilverlightShow webinar starts now!"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> toastContent = templateContent;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> ToastNotification toast = toastContent.CreateNotification();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> ToastNotificationManager.CreateToastNotifier().Show(toast);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <pre></pre> <p>Below you can see the notification being shown to the user. </p> <p>If your toasts aren’t displaying, check that in the manifest declaration, this has been set to enabled. </p> <h4></h4> <h2>But what about non-running applications?</h2> <p>We’ve now seen how we can update the tiles as well as send notifications from the main code of the application? But what if the app isn’t running? That will be covered in the next part of this series! </p> <h2>Summary</h2> <p>In this article, we’ve looked at the different types of updates applications can send to the user. We haven’t looked at how to do so from the cloud. That will be covered in the next article. Stay tuned! </p> <h2>About the author</h2> <p>Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (<a href="http://www.visug.be/" target="_blank">www.visug.be</a>), the largest .NET user group in Belgium. Gill is the author of “Silverlight 4 Data and Services Cookbook”. In 2012, the second edition, “Silverlight 5 Data and Services Cookbook” is released. </p> <p>You can find his blog at <a href="http://www.snowball.be/" target="_blank">www.snowball.be</a>. </p> <p>Twitter: <a href="http://twitter.com/gillcleeren" target="_blank">@gillcleeren</a> </p> http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-6-Tiles-toasts-and-badges.aspx editorial@silverlightshow.net (Gill Cleeren ) http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-6-Tiles-toasts-and-badges.aspx#comments http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-6-Tiles-toasts-and-badges.aspx Tue, 01 May 2012 13:47:22 GMT Windows 8 Metro: Starting your first App from scratch <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-Metro-Starting-your-first-App-from-scratch.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-Metro-Starting-your-first-App-from-scratch.aspx" data-count="horizontal" data-text="Read @aboschin's article '#Windows8 Metro: Starting your 1st App from scratch' #win8 #win8dev" data-url="http://slshow.net/IREer7">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-Metro-Starting-your-first-App-from-scratch.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <div style="border:1px solid #dddddd;border-image: initial; background-color: #f3f3f3; margin-top: 5px; margin-left: 150px; padding-left: 10px; padding-top: 10px; width: 400px; text-align: center;"><strong><a href="http://www.silverlightshow.net/Storage/Sources/Application1.zip">Download the source code for this article</a></strong> <ul> </ul> </div> <p style="text-align: justify;"> <br /> After the <a href="http://www.silverlightshow.net/items/Windows-8-Metro-Create-your-apps-with-simplicity-in-mind.aspx" target="_self">first article in this series</a>, where I briefly discussed about design aspects of the new Metro interface, involving simplicity, flatness, emptiness and the pillars of this new beautiful paradigm, as promised, it is now time to start exploring the tools available to start create your applications. </p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/Webinars.aspx">Our two Win 8 webinars on April 24 and May 17</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx">The article series: Windows 8 and the future of XAML</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/wp75.aspx">Ebook by A. Boschin: WP 7.5 Fundamentals</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/wp75.aspx" target="_self"><img style="width: 70px; height: 99px;" alt="Ebook: Windows Phone 7.5 Fundamentals" src="http://www.silverlightshow.net/Storage/Ebooks/wp75_thumb.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> At the date of this article, you have to be aware that I'm discussing about the "Windows 8 Consumer Preview" bits so, when then next releases will be available, something I've written might become obsolete due to changes made by the team. However, being at the second public preview of Windows 8 means that it is sufficiently stable to write something of reliable. <p style="text-align: justify;">To follow this article and probably the next ones, it is obviously required an installation of Windows 8 CP. You can download it from <a href="http://msdn.microsoft.com/en-us/windows/apps/br229516" target="_blank">this page</a>. After you installed the operating system, you have to install Visual Studio 11 Express beta and Blend. These tools are included in the SDK you can download from the same page. My suggestion is to use a Virtual Machine to host all this software because when it will be obsoleted by a new version you can easily delete the virtual machine and create another one from scratch. Finally, it is important to download the "design assets", a 48MB zip files that contains a number of templates and images to help designers and developer to work with Metro constraints. I will be back to some of these templates in following articles.</p> <h4 style="text-align: justify;">Meet the Visual Studio IDE</h4> <p style="text-align: justify;"><a href="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/_image_2.png"><img style="margin-top: 15px; margin-right: 20px; margin-bottom: 5px; margin-left: 0px; display: inline; float: left;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/__image_thumb.png" width="302" height="450" /></a>Give that you downloaded and installed all the requirements, I guess you have firstly opened Visual Studio 2011 and problably you have been doomed by the great difference between its IDE and the previous versions. Since Visual Studio 2010 has been a big step with its new user interface, the IDE you have just opened makes a triple jump forward and embraces a number of Metro UI pillars, first of all the one I posed at the first in my list, that says "Be Authentically Digital". The new Visual Studio IDE have lost any minimal <a href="http://medialoot.com/blog/skeuomorphic-design/" target="_blank">skeuomorphism</a> in favor of a more flat appearance. </p> <p style="text-align: justify;">At the moment I've suspended my judgement about this new look&feel. The reason for this suspension is that I'm too much accustomed to the older interface and I'm now too much confused to be objective in my judgment but I need to be in touch with it for sometime to understand if this interpretation of Metro pillars makes me happy. What I can say at the moment is that I do not have any nostalgia of the skeuomorphic UI of VS2010 but I think they should have to use a more wide palette to avoid to make interface flatness to be semantically flat. </p> <p style="text-align: justify;">From the functional point of view, the IDE has a number of advantages. As an example I've added a screenshoot of the new Solution Explorer. What immediately catches the eye is the new hierarchy that is able to show the structure of the classes, methods, properties and so on. Another new feature is the automatic preview of files. When you select a file in the explorer, it is automatically opened as an interactive preview and if you make a change in the code, the file is finally opened. Hard to explain but simple to try if you select *.cs files in the tree.</p> <h4 style="text-align: justify;">Create and understand the project structure</h4> <p style="text-align: justify;"><a href="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image_4.png"><img style="margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; display: inline; float: right;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image_thumb_1.png" width="191" height="126" /></a>Once you gained the "New Project" window from the start screen or from the File menu, you choose between a number of templates. Metro applications can be created using two ways. If you like you can embrace HTML5 and Javascript or you can choose to use XAML coupled with C#, VB.NET or C++. The choose of the language to use currently is not matter of features because there are very few differences between what you can do in HTML or XAML. It is for sure matter of skills and development effort. Coupling XAML with C# is the most effective and fast way to develop a Metro application and it should be the primary choice when you are doing something more than an exercise. C# let you have real object orientation, compile time checking and other facilities. If you or your team have strong HTML skills, nothing prevent you from use it and Javascript but you have to plan for almost double or triple of the development time. It is for this reason in this series I will cover primary XAML and C#. </p> <p style="text-align: justify;">The templates in Visual Studio are modeled on this choice; you have templates for HTML+Javascript, XAML+C#, XAML+VB and XAML+C++. As the figure shows you have three templatates available:</p> <ul> <li> <div style="text-align: justify;">Blank: is the most simple template and probably it will be always the better point to start from. </div> </li> <li> <div style="text-align: justify;">Grid: It creates an application the uses the new GridView control as the main Application Hub.</div> </li> <li> <div style="text-align: justify;">Split: It is an example of an application that splits contents in columns.</div> </li> </ul> <p style="text-align: justify;">If Grid and Split templates are good for the first exercises, the Blank Application template is probably to most useful for real world purposes. After you create the project you will get the structure shown in the Solution Explorer screenshot in the previous paragraph. There is a number of items in the project, mostly of them are known to people that have already used Silverlight but other are specific to Metro applications. Here is the most important elements:</p> <ul> <li> <div style="text-align: justify;"><strong>App.xaml/App.xaml.cs</strong> - Silverlight, Windows Phone and WPF developers already known this file. It handles the lifetime of the application. In Metro apps it handles events like Launched, Suspending, Activated and Resume. These can be used to manage the state of the application when it is suspended by the operating system. In the OnLaunched method, called when the application starts, it is initialized the main Frame. Metro applications are basically navigable applications; nothing prevents to inject directly a page instead of a Frame but you lose the entire navigation facilities. <br /> </div> </li> <li> <div style="text-align: justify;"><strong>BlankPage.xaml</strong> - This is the first page your application will show. If you want you can change it by editing the App.xaml.cs file and it does not have nothing different from every other page. Every page takes a reference to the main frame and can use it to navigate from one to another. <br /> </div> </li> </ul> <ul> <li> <div style="text-align: justify;"><strong>Application1_TemporaryKey.pfx</strong> - This file is a self generated certificate, required to sign the application package. To run in the metro AppContainer, an application needs to be signed so Visual Studio automatically generates a certificate and adds it to the project. The certificate is used for development purposes. It happened sometimes I've got errors caused by a not trusted certificate. In the case, you can manually regenerate the certificate or try to add it to the Windows Trust Root store of the machine where you work. <br /> </div> </li> <li> <div style="text-align: justify;"><strong>Package.appxmanifest</strong> - This represents the manifest of the application. The manifest contains all the informations required to run the application, define its capabilities, the way it communicate with other apps and how it is packaged. If you double click the file you get an editor that let you easily change its content. There is a number of things you can define: application logos, orientation, titles and notifications. You can also determine capabilities that is what the application can and can't do. Finally if you needs to manage the certificate this is the right place, going to the packaging tab. <br /> </div> </li> <li> <div style="text-align: justify;"><strong>Common (directory)</strong> - The content of this directory is someway strange. Inside it there are a number of classes that helps to manage layout, databinding and a bunch of converters. It contains also a ResourceDictionary (StandardStyles.xaml) with a series of styles. I think it is strange because I expect to have mosto of them compiled inside an assembly but have a look at this directory because i may contains something you really need.</div> </li> </ul> <p style="text-align: justify;"><a href="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/_image_10.png"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; display: inline; float: right;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/_image_thumb_4.png" width="379" height="235" /></a>The first time you compile or run an application, Visual Studio (but also Blend) asks you to create a developer account. To accomplish this task you have to enter a live id account and you will be granted of a 1 month long license that you can use for free. Every time you activate another instance of Visual Studio (e.g. creating another virtual machine) your license is renewed and the month starts again. </p> <h4 style="text-align: justify;">Create your first app</h4> <p style="text-align: justify;">Now that the project has been created you can start to implement your application interface and logic. For the first touch I will avoid a simple Hallo World but I'll drive you to create a single page application that is able to download a rss feed and display the titles in a grid layout. Inside this very basic app (view a screenshot on the right side) I used some of the interesting features of XAML for Metro. </p> <p style="text-align: justify;">All the code of the application is inside the BlankPage.xaml and BlankPage.xaml.cs files. As usual the xaml file represents the user interface description and the cs file is the codebehind of the page. Here is the very basic XAML content of my application. You have simply to cut & paste it in the BankPage.xaml file (be aware I called it Application1):</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Page</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #ff0000;">x:Class</span><span style="color: #0000ff;">="Application1.BlankPage"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #ff0000;">xmlns:x</span><span style="color: #0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #ff0000;">xmlns:local</span><span style="color: #0000ff;">="using:Application1"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #ff0000;">xmlns:d</span><span style="color: #0000ff;">="http://schemas.microsoft.com/expression/blend/2008"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #ff0000;">xmlns:mc</span><span style="color: #0000ff;">="http://schemas.openxmlformats.org/markup-compatibility/2006"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #ff0000;">mc:Ignorable</span><span style="color: #0000ff;">="d"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Grid</span> <span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="White"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ItemsControl</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="items"</span> <span style="color: #ff0000;">VerticalAlignment</span><span style="color: #0000ff;">="Center"</span> <span style="color: #ff0000;">HorizontalAlignment</span><span style="color: #0000ff;">="Stretch"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ItemsControl.ItemContainerTransitions</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">TransitionCollection</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">EntranceThemeTransition</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">TransitionCollection</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ItemsControl.ItemContainerTransitions</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ItemsControl.ItemsPanel</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ItemsPanelTemplate</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">VariableSizedWrapGrid</span> <span style="color: #ff0000;">Orientation</span><span style="color: #0000ff;">="Horizontal"</span> <span style="color: #ff0000;">MaximumRowsOrColumns</span><span style="color: #0000ff;">="3"</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <span style="color: #ff0000;">ItemWidth</span><span style="color: #0000ff;">="240"</span> <span style="color: #ff0000;">ItemHeight</span><span style="color: #0000ff;">="120"</span> <span style="color: #ff0000;">HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span> <span style="color: #ff0000;">VerticalAlignment</span><span style="color: #0000ff;">="Center"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ItemsPanelTemplate</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ItemsControl.ItemsPanel</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ItemsControl.ItemTemplate</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Border</span> <span style="color: #ff0000;">Padding</span><span style="color: #0000ff;">="10"</span> <span style="color: #ff0000;">Margin</span><span style="color: #0000ff;">="10"</span> <span style="color: #ff0000;">d:DesignWidth</span><span style="color: #0000ff;">="387.5"</span> <span style="color: #ff0000;">d:DesignHeight</span><span style="color: #0000ff;">="101.5"</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> <span style="color: #ff0000;">PointerReleased</span><span style="color: #0000ff;">="HandlePointerReleased"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> <span style="color: #ff0000;">BorderBrush</span><span style="color: #0000ff;">="#FF666666"</span> <span style="color: #ff0000;">BorderThickness</span><span style="color: #0000ff;">="1"</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> <span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="#FFFF9900"</span> <span style="color: #ff0000;">Tag</span><span style="color: #0000ff;">="{Binding}"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span> <span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="{Binding Title.Text}"</span> <span style="color: #ff0000;">TextWrapping</span><span style="color: #0000ff;">="Wrap"</span> <span style="color: #ff0000;">Foreground</span><span style="color: #0000ff;">="White"</span> <span style="color: #ff0000;">FontSize</span><span style="color: #0000ff;">="16"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">Border</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ItemsControl.ItemTemplate</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ItemsControl</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">Page</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p style="text-align: justify;">The main content of the screen is a simple ItemsControl. This control let you display a collection and apply a DataTemplate to define the elements used to visually represent each item in the collection. The ItemsControl usually have a stacked layout; to display elements in a grid I use a layout element called "VariableSizedWrapGrid". This element organizes the items in a grid using a layout similar to the Silverlight's WrapPanel. </p> <p style="text-align: justify;">In the ItemTemplate property I've created a DataTemplate with a simple Border and TextBlock. This will display the title of an item into a rectangle. Finally, to make the application a bit more pleasant, I've added a EntranceThemeTransition that gives a beautiful entrance effect hard to describe using words. Then go to the BlankPage.xaml.cs file and change the OnNavigatedTo method and enter the following code: </p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">protected</span> async <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span> OnNavigatedTo(NavigationEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">this</span>.items.ItemsSource = await GetFeed();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">private</span> async Task<IEnumerable<SyndicationItem>> GetFeed()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;">try</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> Uri uri = <span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"http://www.xamlplayground.org/syndication.axd"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> SyndicationClient client = <span style="color: #0000ff;">new</span> SyndicationClient();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> var feed = await client.RetrieveFeedAsync(uri);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;">return</span> feed.Items;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <span style="color: #0000ff;">catch</span>(Exception ex)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> Windows.UI.Popups.MessageDialog dlg = <span style="color: #0000ff;">new</span> Windows.UI.Popups.MessageDialog(ex.Message);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> dlg.ShowAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <span style="color: #0000ff;">throw</span> ex;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> HandlePointerReleased(<span style="color: #0000ff;">object</span> sender, PointerEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> FrameworkElement border = sender <span style="color: #0000ff;">as</span> FrameworkElement;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> <span style="color: #0000ff;">if</span> (border != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> SyndicationItem item = border.Tag <span style="color: #0000ff;">as</span> SyndicationItem;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> Windows.System.Launcher.LaunchUriAsync(<span style="color: #0000ff;">new</span> Uri(item.Id));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> }</pre> <!--CRLF--></div> </div> <p style="text-align: justify;">The code here downloads the feed of my weblog at <a href="http://xamlplayground.org/">http://xamlplayground.org</a> and then load it into the ItemsControl using the ItemsSource property. Pay attention to this code that use the awesome async and wait keywords. I will be back on asynchronous programming later in this series, but to full understand this code think at these keywords like your best friends to simplify the calling of asynchronous methods thanks to the integration of the Task Parallel Library. Take note also the that asynchronicity hightly pervades Metro applications and WinRT at a level you don't expect for sure.</p> <p style="text-align: justify;"><a href="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image_12.png"><img style="margin-top: 5px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; display: inline; float: left;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image_thumb_5.png" width="202" height="130" /></a>After you completed the code in XAML and C# as I described you can run the application using F5 in Visual Studio. This task deployes the application to the AppContainer and runs it in debug mode like every other application you are habit to develop. Using the Metro UI of your operating system is probably good to appreciate the user interface aspects, but if you do not have a touch enabled monitor you can use the simulator. It allows to use the mouse like a finger on your touch device and includes the simulation of gestures like drag, hold, pinch and rotate but also a gps tool to inject locations in tested applications. It is not like having a true touch enabled device but you can spare a lot of money and start today your development.</p> <h4 style="text-align: justify;">Deploy and run</h4> <p style="text-align: justify;"><a href="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image21.png"><img style="margin-top: 9px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; display: inline; float: right;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/AndreaBoschin/image21_thumb.png" width="247" height="290" /></a>But, what it happens when the application is compiled and then deployed? Visual Studio is a good friend for the developer but it hides the details that are automatically accomplished when you hit F5. This is good for most of the times but annoying if you are curious to know the insides of Metro apps. I will start saying that your C# code is simply an abstraction created on top of WinRT, the core runtime that is shared between all the consumer languages (C#, Javascript, VB.NET and Managed C++). This abstraction is made to (luckily) hide the fact that under the hoods of WinRT there is still C++ and COM. These APIs are exposed to your C# code with a bunch of metadata files that "translates" them to the C# compiler like normal assembly references. These metadata containers are known as .winmd files.</p> <p style="text-align: justify;">So, when you hit F5 in Visual Studio the very first operation is to compile your C# code connecting all the referenced APIs and, the product of this compilation is a exe file paired with a AppManifest.xml file and all the resources (mostly are xaml and images). All these files are created in the bin directory related to the target configuration. See  the image on the side for an example. </p> <p style="text-align: justify;">This is only the first stage. If you try to run the exe that is output of this stage you get an error stating that it can run only in the context of an AppContainer. This is because the compilation follows a new target output "<a href="http://www.google.com/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=1&ved=0CCcQFjAA&url=http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Fhh547139(v%3Dvs.110).aspx&ei=2teKT5TMGcTe4QTs1KTvCQ&usg=AFQjCNHUMpu8-x7hdZr8SFjd-OQrfSImcw&sig2=FQ8leS8zASLNK7rJ3_0srw" target="_blank">appcontainerexe</a>". So, after the compilation, the application needs to be packaged into a zip file (do you remember xap files?) called APPX before it is deployed. To create this package Visual Studio uses the <a href="http://msdn.microsoft.com/en-us/library/windows/desktop/hh446767(v=vs.85).aspx" target="_blank">MakeAppx.exe utility</a>. You can manually pack or unpack appx using this executable from a command prompt targeting Visual Studio 2011. </p> <p style="text-align: justify;">The last step before the package is deployed is the signing process. For this purpose Visual Studio takes the certificate linked to the project and using the signtool.exe utility it signs the package then deployes it to the Metro AppContainer. To fully satisfy your curiosity you can manually accomplish this task using the Add-AppxPackage cmdlet included in powershell. Here is a reference to all the cmdlets available for common tasks: <a title="http://technet.microsoft.com/en-us/library/hh856045.aspx" href="http://technet.microsoft.com/en-us/library/hh856045.aspx">http://technet.microsoft.com/en-us/library/hh856045.aspx</a>. For example running the Get-AppxPackage without parameters you will get the full listing of installed apps.</p> <h4 style="text-align: justify;">Moving forward to the next step</h4> <p style="text-align: justify;">In this article I've introduced a numeber of features, some have been explained and other remains open for the next articles in this series. Now that that you have been introduced to the concepts of Metro an you wrote your first example it is time to take in serious consideration the programming aspects of a Metro application. In the next article I will introduce how to handle the layout and navigation. Layout is a very important aspect in Metro since it involves the orientation and the view states. Navigation let you expand your scope to multipage apps. For the moment enjoy yourself with attached code.</p> http://www.silverlightshow.net/items/Windows-8-Metro-Starting-your-first-App-from-scratch.aspx editorial@silverlightshow.net (Andrea Boschin ) http://www.silverlightshow.net/items/Windows-8-Metro-Starting-your-first-App-from-scratch.aspx#comments http://www.silverlightshow.net/items/Windows-8-Metro-Starting-your-first-App-from-scratch.aspx Wed, 18 Apr 2012 01:18:00 GMT Windows 8 and the future of XAML: Part 5: More contracts in WinRT/Windows 8 <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-5-More-contracts-in-WinRT-Windows-8.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-5-More-contracts-in-WinRT-Windows-8.aspx" data-count="horizontal" data-text="Reading @gillcleeren's article '#Windows8 & the future of #XAML: More Contracts in #WinRT/#Win8" data-url="http://slshow.net/I2Q007">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-5-More-contracts-in-WinRT-Windows-8.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>In the previous article, we’ve introduced contracts in Windows 8. To quickly recapitulate, a contract allows Metro style applications in Windows 8 to communicate which each other or with Windows, without there being a hard reference between the participants of the communication. We’ve seen how the search contract allows applications to open themselves up to Windows so they can be search. There’s of course a contract that specifies how this searching is to be done: an application has to follow the rules specified in the contract so that Windows can communicate with the app in the way it needs to do.</p> <p>In this article, we’ll dive some more in contracts, more specifically, the share contract. </p> <p><strong><a href="http://www.silverlightshow.net/Storage/Sources/Share_contract.zip">The code for this article can be downloaded here</a>. </strong></p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/news/Webinar-Contracts-and-Charms-in-Windows-8.aspx">Gill's webinar on April 24: Contracts and Charms in Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx">Article: Using the Live SDK in Windows 8 XAML/C# Metro Applications</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> <h2>We love sharing</h2> <p>Sharing information has become something very trivial. Millions of sites out there have sharing options. “Share this on Twitter”, “Post on Facebook”, “Share via mail” and tons of other options have been popping up everywhere on the internet. Why? People love sharing. When they find something cool or they’ve just read the most interesting article, people want to share that with their contacts. Perhaps they want to broadcast it, using a social network. Or perhaps they want to target a specific contact and send the information via mail. Also, people sometimes want to share information related to something they have done or found inside an application. Perhaps they’ve achieved a high-score in some game and they want to brag with it. Or, they have found a great recipe in a cookbook application. </p> <p>As you can see, sharing is all around us. One problem though is the fact that it’s sometimes still too hard for people to quickly share the information they want to share. As said, a lot of sites have embedded sharing icons. But are they always easy to find? Or what happens if you use a social network that the site you’re using isn’t listed? In that case you need to go and paste the link to the social networking site. Or as mentioned with the game high-scores: if the game doesn’t support sharing, how are you going to proof that you’ve really attained that high-score? Perhaps through a screenshot that you manually have to take, copy and paste to another site or application. </p> <p>From a developer’s perspective as well, implementing the right sharing options can be hard. Sites offer often quite a few sharing options and maintaining all these external links can be a time-consuming task. What if tomorrow Twitter decides they want to implement that option differently? You as the developer need to go and change your implementation. And even then, perhaps the visitor of your site (or user from your application) uses some obscure social network (perhaps one that’s relevant in his home country) that you haven’t implemented… </p> <p>Microsoft thought about offering an integrated sharing experience in Windows 8. It’s built into the system to offer both the end-user and the developer an easy and universal way of sharing information. This is the share contract. </p> <h2>The share contract</h2> <p>Through the share contract, Windows 8 makes it possible for 2 applications to share information with each other. The big plus for developers is that the 2 application don’t have to know each other. Sharing is always done between two applications: the share source and the share target. The share source will share information in a specific format defined by the contract; the share target will be getting that information through Windows. Since the information is in a specific format, the developer of the share target can anticipate on this and write his code based on this format. </p> <p>Note that Windows is the mediator between the two apps. It handles the process of getting the information from the share source and getting it to the share target. It’s safe to say that we have some kind of pub/sub architecture. </p> <p>Let’s take a look at the share contract in action. Below you can see the CookBook application. I’m not very much of a cook but I can image that people would love to share a recipe with someone via mail or perhaps on Facebook. From within the Cookbook application, we use the Charms (swipe in from the right or use Win + C) and select Share. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image001" alt="clip_image001" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image001_d7a1fdce-890f-48ef-861d-abc3c2a7e2bb.png" width="328" height="430" /> </p> <p>In most apps (at least from the list of apps currently available), it’s the developer who has chosen what we can share. In the CookBook app, it’s created this way as well. Of course, the developer of the application can also select to allow the user to specify the information he wants to share. After clicking/tapping on Share, the list of share targets appears. If you’ve read the previous article, it’s easy to see a similarity between this and the list of apps that registered for Search. Indeed, being a Share target is done through a declaration (as we’ll see later in this article). Based on the contents of the data being shared, this list is filtered automatically by Windows. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image002" alt="clip_image002" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image002_42e0f34a-8805-4744-80d1-15add17bc9b9.png" width="501" height="401" /> </p> <p>Now that the user made a selection, the share target app opens. In most cases, the app doesn’t open in its default view. Instead, it opens a specific view for handling the sharing operation. Below, we see the SDK Sample Target application accepting the share data. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image004" alt="clip_image004" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image004_744a1ef4-0a53-40c6-9117-3dee9457dac4.jpg" width="609" height="329" /> </p> <p>Let’s now look at how we can create both an application that is a share source and an application that is a share target. We’ll start with the source. </p> <h2>Making your application a share source</h2> <p>Implementing the share contract as source in your application comes down to the following steps: </p> <ul> <li>Via code, registering your application with the DataTransferManager. </li> <li>Your application should register itself for the DataRequested event of the DataTransferManager.</li> <li>Filling up the DataPackage when the above mentioned event is fired by Windows</li> </ul> <p>Let’s look at these steps in a sample application. Create a new C# Metro style application and name it MyShareSource. The UI is nothing more than a basic Button that triggers the display of the Share UI. We are going to share basic text here. The UI of the app is shown below. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image006" alt="clip_image006" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image006_a394dcde-1878-4945-8dcc-cd81933233d7.jpg" width="609" height="210" /> </p> <p>The registration with the DataTransferManager is done in a separate method named RegisterForSharing() which we’ve called from the constructor. We retrieve the DataTransferManager and then register for the DataRequested event. This event will be triggered when the user indicates he/she wants to share data from the application. This event is triggered by Windows; in fact, it is triggered by the Share Broker. The Share Broker is the component that sits between the source and the target applications. The first thing it does is handling the incoming sharing request (triggered by the user willing to share) and routing it to the source application. Below we see the RegisterForSharing() method. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">public</span> BlankPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.InitializeComponent(); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> RegisterForSharing();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">} </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> RegisterForSharing()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> DataTransferManager datatransferManager;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> datatransferManager = DataTransferManager.GetForCurrentView();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> datatransferManager.DataRequested += newTypedEventHandler<DataTransferManager,DataRequestedEventArgs>(<span style="color: #0000ff;">this</span>.DataRequested);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <pre></pre> <p>In the DataRequested event, we create the something called the Data Package. This can be seen as a container for data; it contains the data that the source application shares with the target. It can contain several formats, varying from simple text and URIs to images and even custom data formats. The latter should mostly be used if you want to target a specific share target app (for example, you’ve created 2 Metro style apps between which you want to exchange data). You can add more than one type of format (for example, an image, text, URI and a custom format all at once). Based on the contents, the Share Broker will filter the list of target applications. Below is the code for the DataRequested event where we build up the Data Package. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> DataRequested(DataTransferManager sender, DataRequestedEventArgs e) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{ </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> e.Request.Data.Properties.Title = <span style="color: #006080;">"Sample sharing source"</span>; </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> e.Request.Data.Properties.Description = <span style="color: #006080;">"This is some Lorem ipsum text"</span>; </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> e.Request.Data.SetText(ShareContent.Text); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Run the application now and notice that when clicking, you’ll see that the Share UI is shown. If you have any apps registered as target, you can go ahead and share the text.<br /> <img style="border:0px; border-image: initial; display: inline;" title="clip_image007" alt="clip_image007" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image007_49d618e9-7949-4078-8a82-62459b8d683b.png" width="554" height="418" /> </p> <p>Now that we can share data, let’s see what we need to do to accept data. </p> <h4>Making your application a share target</h4> <p>We’ve seen that the Share Broker has asked the source application to create the Data Package. Once ready, it will inspect it and look at the different data types included. Based on this, the long list of all registered target apps is filtered to only those that can handle at least one of the included types. This is something we don’t have to worry about, it’s done for us. </p> <p>When the user selects an application, the Share Broker will start the target app. It gets activated (remember the search activation from the last article) and gets passed in the data package (the target app gets read-access). The target app can (but is not forced) to send a completion so that the source app knows it can continue its normal run. </p> <p>Notice that the sharing experience is in-context, meaning that the user doesn’t leave the application to go and copy/paste some information in another application! </p> <p>Let’s see how we can make this working. Create a new Metro style app and name it MyShareTarget. </p> <p>First, add a new Share Target Contract from the Project template window and name it SimpleShareTarget. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image006[1]" alt="clip_image006[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image006%5B1%5D_51dc2b40-76b4-437d-abe5-a0452ee8f94f.jpg" width="609" height="210" /> </p> <p>Adding this template does a number of things. First, it adds a declaration to your manifest: the Share Target declaration. Based on this, Windows will know that your application can be the target of a share operation. We need to specify the types of content, shared via the Data Package, we want to receive. Since we are sharing text in the MyShareSource application, we specify that as the only type here. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image009" alt="clip_image009" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image009_c68f0c5e-82e7-4fe6-9dd0-ab41d7b11f4a.jpg" width="609" height="251" /> </p> <p>Secondly, your App.xaml.cs is modified: it overrides the OnShareTargetActivated, accepting a ShareTargetActivatedEventArgs instance. The code is shown below. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">protected</span> <span style="color: #0000ff;">override</span> <span style="color: #0000ff;">void</span> OnShareTargetActivated(Windows.ApplicationModel.Activation.ShareTargetActivatedEventArgs args) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{ </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var shareTargetPage = <span style="color: #0000ff;">new</span> MyShareTarget.SimpleShareTarget(); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> shareTargetPage.Activate(args); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Notice what this code does: it doesn’t load the default start page, instead it activates a new page of type SimpleShareTarget. The code for this Activate() method is also generated. We need to make some changes to it so that the shared text will also appear. Below is the code for this method. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">public</span> async <span style="color: #0000ff;">void</span> Activate(ShareTargetActivatedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>._shareOperation = args.ShareOperation;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">// Communicate metadata about the shared content through the view model</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var shareProperties = <span style="color: #0000ff;">this</span>._shareOperation.Data.Properties;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var thumbnailImage = <span style="color: #0000ff;">new</span> BitmapImage();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"Title"</span>] = shareProperties.Title;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"Description"</span>] = shareProperties.Description;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"Image"</span>] = thumbnailImage;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"Sharing"</span>] = <span style="color: #0000ff;">false</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"ShowImage"</span>] = <span style="color: #0000ff;">false</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">if</span> (_shareOperation.Data.Contains(StandardDataFormats.Text))</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"MainText"</span>] = await _shareOperation.Data.GetTextAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> Window.Current.Content = <span style="color: #0000ff;">this</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> Window.Current.Activate();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">// Update the shared content's thumbnail image in the background</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">if</span> (shareProperties.Thumbnail != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var stream = await shareProperties.Thumbnail.OpenReadAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> thumbnailImage.SetSource(stream);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.DefaultViewModel[<span style="color: #006080;">"ShowImage"</span>] = <span style="color: #0000ff;">true</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>We also need to update the UI for the SimpleShareTarget.xaml view so that we see the text. </p> <pre> </pre> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">Grid</span> <span style="color: #ff0000;">Grid</span>.<span style="color: #ff0000;">Row</span><span style="color: #0000ff;">="1"</span> <span style="color: #ff0000;">Grid</span>.<span style="color: #ff0000;">ColumnSpan</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="{Binding MainText}"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">Foreground</span><span style="color: #0000ff;">="{StaticResource ApplicationSecondaryTextBrush}"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">Style</span><span style="color: #0000ff;">="{StaticResource BodyTextStyle}"</span><span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"></</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>Now run the MyShareTarget app. You won’t see anything, since now the BlankPage.xaml is running. Behind the scenes though, your app has registered itself to be a share target. </p> <p>To see that in action, run the MyShareSource application again. Now when you click on Share, you’ll see your application listed. Select it and watch your content being shared with the target application! </p> <h4><img style="border:0px; border-image: initial; display: inline;" title="clip_image011" alt="clip_image011" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image011_a5ae959c-83fd-4a41-8c36-80dc3d84d749.jpg" width="527" height="494" /></h4> <h2>Summary</h2> <p>In this article, we’ve taken a look at a second interesting contract in Windows 8: the sharing contract. It allows two applications to communicate with each other without there being a hard reference between the two. </p> <p>In the next article, we’ll dive into the creation of tiles! Stay tuned! </p> <h2>About the author</h2> <p>Gill Cleeren is Microsoft Regional Director (<a href="http://www.silverlightshow.net/sitefinity/admin/www.theregion.com" target="_blank">www.theregion.com</a>), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (<a href="http://www.silverlightshow.net/sitefinity/admin/www.visug.be" target="_blank">www.visug.be</a>), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at <a href="http://www.silverlightshow.net/sitefinity/admin/www.snowball.be" target="_blank">www.snowball.be</a>. </p> <p>Twitter: @gillcleeren </p> http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-5-More-contracts-in-WinRT-Windows-8.aspx editorial@silverlightshow.net (Gill Cleeren ) http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-5-More-contracts-in-WinRT-Windows-8.aspx#comments http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-5-More-contracts-in-WinRT-Windows-8.aspx Tue, 17 Apr 2012 09:04:00 GMT Windows 8 and the future of XAML: Part 4: Contracts in WinRT/Windows 8 <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-4-Contracts-in-WinRT-Windows-8.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-4-Contracts-in-WinRT-Windows-8.aspx" data-count="horizontal" data-text="Reading @gillcleeren's article '#Windows8 & the future of #XAML: Part 4: Contracts in #WinRT/#Win8" data-url="http://slshow.net/IGTnGR">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-4-Contracts-in-WinRT-Windows-8.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>In the previous article of this series, we wrote our first lines of code for WinRT. The main message was that although WinRT is a new API, we can still use our familiar languages to create Metro style applications. We have used the XAML/C# combination, but it’s perfectly possible to use XAML/VB or XAML/C++ as well. We’ll be using more of the API in the coming articles but in this article, we’ll focus on some specifics around contracts, more specifically, the Search contract. Contracts enable Metro applications to communicate with each other or with Windows itself without there being a hard reference in place.</p> <p><a href="http://www.silverlightshow.net/Storage/Sources/SearchTest.zip">The code for this article is available here.</a></p> <h2>Contracts: what are they</h2> <p>You are probably familiar with the term and meaning of a contract. It’s basically an agreement between two parties where they agree on some mutual aspect. </p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/news/Webinar-Contracts-and-Charms-in-Windows-8.aspx">Gill's April webinar: Contracts and Charms in Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx">Article: Using the Live SDK in Windows 8 XAML/C# Metro Applications</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> When you use an interface, you’re using a software contract: your interface defines a contract that classes implementing this interface need to oblige to. If they don’t, they are breaking the contract, hence the functionality is not guaranteed. <p>Windows 8 defines contracts as well. Like with other contracts, they are a way of making sure that the users of the contract will oblige certain rules. In the case of Windows 8, the participants for the contract are the apps: some contracts take place between two applications, mediated by Windows itself, others are between an app and Windows.</p> <p>Windows 8 defines quite a few contracts. The most important ones are the search contract, the share contract, the settings contract and the App-To-App picker contract. There are more contracts available, but when you start with implementing these in your application, you’ll definitely be adding a good experience to your app. For the other contracts, head over to <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh464906.aspx">this page</a> on MSDN.</p> <p>Now that we have a basic understanding of what a contract is, let’s take a look at how the end-user will experience these contracts. We’ll start our exploration by looking at the search contract.</p> <h4>The Search contract from the end-user perspective</h4> <p>Searching for information is very important in today’s world. We are constantly searching on the web but also locally on our machine/device. During a regular day, I often enter a search query in my Outlook search bar (thank God it still likes searching over 15GB of mails…) or I enter a short string as search query in my start menu. Quite often, I (and countless of users worldwide) rely on search to quickly find the information we need on our machine without remembering where we put it in the first place. The same thing happens when I need to find something in my control panel: when I look for the administrative tools, I don’t start clicking my way to them. Instead, I enter a query and find them, probably faster than when I would have started navigating.</p> <p>Windows 8 is built around apps. These apps have a lot of information available as well. This information is by default reachable by opening the app and then searching from within the app.</p> <p>In Windows 8, Microsoft has built in an integrated way of searching. When we enter a search query when we are in the Metro environment, Windows will by default search for apps, settings and files as can be seen on the image below. Note that this search is conducted from within Windows itself (you’ll see why this is important in just a second).</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image001" alt="clip_image001" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image001_e3cf4571-fe38-4a46-882f-96bf02a50570.png" width="395" height="346" /></p> <p>When we select any of the top 3 options, we can see that the list of results is being shown. Here we see results for apps.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image003" alt="clip_image003" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image003_b7d514a7-46d1-4b82-8d7e-f8c46358227f.jpg" width="609" height="151" /></p> <p>Below we see results for files being shown.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image005" alt="clip_image005" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image005_885b333c-804f-4470-9410-f29762e657a5.jpg" width="609" height="274" /></p> <p>Down at the bottom of the search pane, we see a list of apps. This list is composed out of all the apps that have implemented the search contract. To do so, they have made it clear through a declaration (we’ll see what exactly is a declaration later in this article) that they can be searched from within Windows. When selecting an app (here we have used the Store app), the app will open and we are immediately transported to the search results page. Below, you can see the Store app showing search results. The app was activated through search. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image007" alt="clip_image007" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image007_66728430-4097-4312-94db-6fe744abd5cf.jpg" width="608" height="170" /></p> <p>With this app open, we can search again. Notice now that at the top, we are searching within the app. Searching is made consistent all throughout Windows. The active app can now send query suggestions and result suggestions. Query suggestions are returned by the running application to help the end user in finding what he’s probably looking for. Result suggestions are more specific in that they also contain an icon of the search result. Both of these can be implemented through code inside your application.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image008" alt="clip_image008" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image008_ad71a94f-26b8-490d-9258-f816e61ed40e.png" width="335" height="410" /></p> <p>Below you can see result suggestions.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image009" alt="clip_image009" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image009_e7c93ed0-5982-4048-a73b-679046f000f3.png" width="339" height="259" /></p> <p>Let’s now take a look at how we can build an app that implements the search contract.</p> <h2>The Search contract from the developer perspective</h2> <p>If we think of the possible ways of searching we just saw above, we can see the following items to be implemented by the developer to make his application implement the search contract:</p> <ul> <li>Declare that the application can be search through a declaration</li> <li>Write code that reacts to the application being activated ( while it wasn’t running) for search and show the results of that search query</li> <li>Write code to accept a search query while it was already running</li> <li>Send search suggestions and query suggestions to Windows to be shown in the search pane while it’s running</li> </ul> <p>We’ll now build a sample application that implements the search contract in full in the steps below. Create a new Windows 8 Metro style application and name it SearchTest.</p> <h3>Adding the declaration for search</h3> <p>Metro style apps are using a specific way of letting Windows know about their intentions and capabilities once installed on a user’s device.</p> <p>By adding one or more capabilities, they are saying that they need to use a specific API for them to run properly on the system. For example, when an application needs to use the webcam, the developer needs to check the Webcam capability. This will then be shown in the Windows store so that the end user can decide on not using the application. Also, while running, the capabilities are checked by the runtime broker. </p> <p>A declaration is different. It’s a way for the application to say to Windows that it will take part in some operations or contracts. One of the possible declarations is search. By enabling the search declaration, Windows will show your application in the list of possible search targets. We’ll see other declarations being used later in this article series.</p> <p>We can enable the declaration in 2 ways. To do things manually, go to the manifest editor by double clicking on the Package.appxmanifest. In the Declarations tab, check Search as shown below.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image011" alt="clip_image011" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image011_bd4666af-b22c-4957-a154-4edf51a260eb.jpg" width="608" height="345" /></p> <p>A better way that will save us quite some work is adding a Search contract to the application. To do so, in the Add new item dialog, select Search contract. Files are being updated and added as well as the declaration being enabled for you.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image013" alt="clip_image013" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image013_f0a39c95-2da0-49ac-8e77-873b93c46552.jpg" width="608" height="245" /></p> <p>To test things out, let’s run the application now. When selecting the Search charm on the right, the Search pane pops up. Notice that it’s now scoped to search the current running application. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image014" alt="clip_image014" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image014_d8680082-a9e4-4106-af5d-446a1c27e98f.png" width="359" height="347" /></p> <p>Also, when searching from within Windows, the application is now shown in the list.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image015" alt="clip_image015" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image015_74274a83-d9b8-4d3f-bba6-7d115416fcec.png" width="351" height="431" /></p> <p>Both cases of searching don’t work yet (which is quite logical since we haven’t implemented searching yet). Let’s work on that!</p> <h3>React to search activation</h3> <p>Another things that’s done automatically by the Search contract template, is adding code in the OnSearchActivated() in the App.xaml.cs. Before we look at the code, a word on activation.</p> <p>A Metro application in Windows 8 can be “started” in several ways. The most normal way is starting the app by tapping/clicking the tile. This triggers the OnLaunched() to be called in the App.xaml.cs. When the app isn’t running though and the user selects the app as the target for his/her search query, the application also executes the OnSearchActivated(). Effectively, the application gets activated for search. Through this event handler, the search query entered by the user is also passed in via the SearchActivatedEventArgs instance. This way, we know what the user wanted to find in our application. The code generated by the template is shown below.</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">protected</span> <span style="color: #0000ff;">override</span> voidOnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgsargs)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> SearchTest.MainSearch.Activate(args.QueryText);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//TODO: Move the following code to OnLaunched to speed up searches when your</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">// application is already running:</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted+=</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//(sender,queryArgs)=></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//{</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">// SearchTest.MainSearch.Activate(queryArgs.QueryText);</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//};</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>In the first line of the code, what happens is that MainSearch.Activate() event is called. This is code, generated in the MainSearch.xaml.cs (I called my search result page MainSearch here, you can give it any name of course) sets an instance of the MainSearch page through navigation of the application frame as the content of the application. This way, when the application is activated for search, the search results page is navigated to. If we start the application now again, go to Metro, enter a search query and target our application, the application activates and automatically goes to the search result page as you can see below.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image017" alt="clip_image017" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image017_4e25a8ed-baba-4ad3-b7aa-c6ebf392170c.jpg" width="609" height="202" /></p> <p>In the commented-out code, we see that VS11 is pointing us to the next topic: reacting to queries being submitted with the application running.</p> <h3>Reacting to submitting queries</h3> <p>When the application is running as the main foreground application (that does not include running in snap mode), the user can search by using the search charm the current application. To do so, we as developers need to subscribe to the QuerySubmitted() event. In the constructor of the BlankPage.xaml.cs, we can do so using the code below.</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">private</span> SearchPanesearchPane;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">public</span> BlankPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//Get SearchPane object</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.searchPane=SearchPane.GetForCurrentView();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;">//Register for SearchPaneQuerySubmitted event</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">this</span>.searchPane.QuerySubmitted+=searchPane_QuerySubmitted;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>When we run the application now and hit search (the search is of course scoped to the application since it has the search declaration), the entered query is returned to our application. We are automatically redirected to the event handler of the QuerySubmitted event. In there, we can get hold of the value through the SearchPaneQuerySubmittedEventArgs instance that is passed in, as shown below.</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> searchPane_QuerySubmitted(SearchPanesender,SearchPaneQuerySubmittedEventArgsargs)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> SearchResultTextBlock.Text=<span style="color: #006080;">"You've searched for: "</span> + args.QueryText;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Of course, in a real-life application, we can write code to perform a search (perhaps by calling a service) and then redirect the user to the search results page.</p> <h5>Sending query suggestions</h5> <p>An application that is running as the main application in the foreground can send query and result suggestions to Windows. Windows will show a maximum of 5. Note that by default, Windows will also show a search history. This comes for free; we don’t have to develop anything for this. Let’s see how we can make search suggestions work.</p> <p>The first thing we need to do is registering for the SuggestionRequested event coming in. This event will be raised by Windows when the user starts typing in the search box. </p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">this</span>.searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;</pre> <!--CRLF--></div> </div> <p>When the event is effectively raised, we need to send suggestions. Just like with queries, the results can come from a service. In this sample code, we have hard-coded the list of possible suggestions. In the SearchPageSuggestionsRequestedEventArgs instance, we add our suggestions to the SearchSuggestionCollection. This list is then shown by Windows. Every time the user types something, this code is again executed. Therefore, be cautious what you place in there!</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> searchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">string</span>[] suggestions={<span style="color: #006080;">"AAA"</span>,<span style="color: #006080;">"AAABBB"</span>,<span style="color: #006080;">"AAACCC"</span>,<span style="color: #006080;">"AAADDD"</span>,<span style="color: #006080;">"EEE"</span>,<span style="color: #006080;">"FFF"</span>,<span style="color: #006080;">"GGG"</span>,<span style="color: #006080;">"HHH"</span>,<span style="color: #006080;">"III"</span>,<span style="color: #006080;">"JJJ"</span>,<span style="color: #006080;">"KKK"</span>,<span style="color: #006080;">"LLL"</span>,<span style="color: #006080;">"MMM"</span>,<span style="color: #006080;">"NNN"</span>,<span style="color: #006080;">"OOO"</span>,<span style="color: #006080;">"PPP"</span>,<span style="color: #006080;">"QQQ"</span>};</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">foreach</span>(<span style="color: #0000ff;">string</span> suggestion <span style="color: #0000ff;">in</span> suggestions)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">if</span>(suggestion.StartsWith(args.QueryText, StringComparison.CurrentCultureIgnoreCase))</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> args.Request.SearchSuggestionCollection.AppendQuerySuggestion(suggestion);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">if</span>(args.Request.SearchSuggestionCollection.Size >= 5)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">break</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Below we can see the result of the search suggestions being sent by our application.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image018" alt="clip_image018" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image018_0b3793d4-dcac-42d1-a76e-dbcf6028f8ee.png" width="354" height="359" /></p> <p>We have successfully implemented the Search contract in our application.</p> <h2>Summary</h2> <p>Implementing the right contracts in your application is vital to its success. The user will come to expect that applications work as prescribed by the OS. In this sample, we saw how we could use WinRT code to implement the search contract in our applications. In the next article, we’ll see how to implement the share contract.</p> <h2>About the author</h2> <p>Gill Cleeren is Microsoft Regional Director (<a href="http://www.theregion.com/" target="_blank">www.theregion.com</a>), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (<a href="http://www.visug.be/" target="_blank">www.visug.be</a>), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at <a href="http://www.snowball.be/" target="_blank">www.snowball.be</a>. </p> <p>Twitter: @gillcleeren </p> http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-4-Contracts-in-WinRT-Windows-8.aspx editorial@silverlightshow.net (Gill Cleeren ) http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-4-Contracts-in-WinRT-Windows-8.aspx#comments http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-4-Contracts-in-WinRT-Windows-8.aspx Tue, 10 Apr 2012 00:40:05 GMT Creating the SilverlightShow Windows Phone App: part 1 <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Creating-the-SilverlightShow-Windows-Phone-App.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Creating-the-SilverlightShow-Windows-Phone-App.aspx" data-count="horizontal" data-text="Reading @Mister_Goodcat's article: Creating the SilverlightShow #WindowsPhone App: part 1 #wpdev" data-url="http://slshow.net/GCLG2S">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Creating-the-SilverlightShow-Windows-Phone-App.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>At the end of February, the official SilverlightShow Windows Phone app has been accepted into the Marketplace. The app gives you access to some of the content of this website, including <strong>news</strong>, <strong>articles </strong>and <strong>events</strong>, and is completely free for use (also ad-free!). Some of the convenience features include the possibility to<strong> create reminders for upcoming events and webinars directly on your phone</strong>, to get <strong>notifications about new content in the form of live tiles</strong>, and to maintain a local list of <strong>favorites </strong>that allows you to permanently store items for later reading. If you haven’t checked out the app yet, you can find more details and a quick intro video <a href="http://www.silverlightshow.net/video/SilverlightShow-WP7-App-Intro.aspx">here</a>, or visit its Marketplace page <a href="http://windowsphone.com/s?appid=aa47a1d4-3418-496d-862f-36eb1ec78f43">here</a>.</p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; padding-top: 5px;"> <h3>More resources...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/news/Webinar-Advanced-MVVM-for-Windows-Phone.aspx">Upcoming webinar by Peter Kuhn: Advanced MVVM for Windows Phone Developers</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Windows-Phone-Raw-Camera-Webinar.aspx">Recording of webinar by Peter Kuhn: Windows Phone Raw Camera Access</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/wp7_exam.aspx">Peter's ebook: Getting Ready for the Windows Phone 7 Exam 70-599</a></li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/wp7_exam.aspx"><img style="border-color: initial; border-image: initial; border-color: initial; width: 80px; height: 113px; border-color: initial; border-width: 0px;border-style: solid;" alt="Getting Ready for the Windows Phone 7 Exam 70-599" src="http://www.silverlightshow.net/Storage/Ebooks/wp7_exam_cover.png" usemap="#rade_img_map_1291385581316" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> <p>The creation of the app was an interesting experience, because unlike other phone projects I had worked on in the past, this one wasn’t a greenfield development. Obviously the SilverlightShow portal already existed, had a long-established production infrastructure and already a lot of existing content available.  <br />  <br /> During the course of developing the application, we thought it would be a nice idea to share some of the experiences with the SilverlightShow readers, because it is a nice example of discussing a real-world application, with real-world problems (and solutions :)). The idea of this mini-series of articles was born, where you will discover both details about the development process as well as some technical challenges we came across. <strong>This first part will deal with the process itself, so prepare for some more text and less code (read: no code) than usual.</strong></p> <h2>Prerequisites</h2> <p>With almost every piece of software you are developing, you usually (hopefully?) don’t start coding right away, but begin with some sort of requirements engineering, and then create the concept of your software. You may not be aware of the order and existence of these actions if you’re only a hobby programmer, or you may not be familiar with the formal terms and definitions, but even if you’re only creating a really small app, these steps are part of the development process in one form or the other. We can sum up these two elements by two simple questions:</p> <ul> <li>What is it our software is intended to do?</li> <li>How shall our software achieve this goal?</li> </ul> <p>As I wrote, the details on how sophisticated you analyze these questions and the ways you maintain the results of this analysis is a direct result of several factors, like the development process you intend to use, your personal experience, external requirements, and the complexity of the project you’re taking on. Sometimes all this information may only exist in your head, in other situations it will result in huge documents being produced upfront.</p> <p>When you’re developing an app based on an already existing eco system, there are additional steps you need to perform. In particular, you have to do an analysis of the existing infrastructure to see what parts you can make use of and integrate with your own development, <em>how</em> you can achieve this, whether other parts require work or need to change, and what features you rely on are missing completely. Sometimes, the intended requirements of the result even depend on what’s possible to achieve with a reasonable amount of effort, taking the given system into consideration. This is how extending an existing system can be both good and evil: it may speed up your development when you’re able to reuse components that are already available, but it may also limit your possibilities, and even bring up whole new problems that you wouldn’t have to face if you started from scratch.</p> <h2>The Existing Infrastructure</h2> <p>Building an app for the SilverlightShow portal wasn’t any different in this. The web site obviously existed already, and a great variety of people, consisting of both the SilverlightShow staff as well as external authors, actively contributes to the content. To allow comfortable and easy editing, the SilverlightShow team has put a great amount of work into integrating the site nicely with WYSIWYG tools, especially Windows Live Writer. As a result, the content available on the site is maintained in a blog-like manner, and stored as rich content in a corresponding data store.</p> <p><a href="http://www.silverlightshow.net/Storage/Users/MisterGoodcat/______________image_2.png"><img style="border:0px; border-image: initial; background-image: none; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 0px;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/MisterGoodcat/_______________image_thumb.png" width="418" height="203" /></a></p> <p>On the consuming side of things, we have the web user interface you’re directly interacting with at the moment, but there are other options to access the content of the site which are optimized for machine/automated access. This includes several RSS feeds that can be consumed by special reader software, so you can access the site through your favorite client and presentation software. Some other areas of the site also offer specialized web services tailored for being accessed by Silverlight clients.</p> <p><a href="http://www.silverlightshow.net/Storage/Users/MisterGoodcat/___________image_4.png"><img style="border:0px; border-image: initial; background-image: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-left: 0px; padding-right: 0px; display: block; float: none; padding-top: 0px;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/MisterGoodcat/____________image_thumb_1.png" width="243" height="175" /></a></p> <p>Since both working with the site itself as well as the authoring of content is a well-known, proven process that has evolved and been established over a longer period of time, it was a logical consequence to put the Windows Phone app on top of this existing infrastructure, and introduce as little changes as possible to the existing system. This was one of the first and most central requirements established in the development process of the app.</p> <h2>Requirements</h2> <p>Starting with the above information, we established a set of features we wanted to see in the app. In particular, we wanted to expose the most popular content of the site (news, articles, events/webinars), and at the same time make sure that we blend in nicely with the phone platform, by implementing typical features the user would expect: notifications, reminders, and a Metro-style native experience.</p> <h2>Concept</h2> <p>If you carefully read through the requirements and the result of the infrastructure analysis listed above, then maybe you can see how a lot of this more or less determined fundamental parts of the concept and later implementation already. Let’s pick some of the more interesting details, all of which will be covered over the course of this mini-series:</p> <ul> <li>Like said, we wanted to make use of the existing system and introduce as little changes as possible. A logical consequence of this was that we would make use of the already existing rich content directly if possible, so both the web interface and phone app could work directly on the same data.</li> <li>Another logical step of this was to use the already existing RSS feeds to get access to that data, instead of creating a whole new solution that would exist in parallel (and require additional implementation and maintenance costs).</li> <li>Consequently, that same premise also affected features of the app you would not expect or think about at first. Take the notifications requirement, for example. Implementing a full-blown push notification solution would’ve required setting up quite some additional server infrastructure and server-side logic, something that we didn’t want to do. Eventually, this resulted in the decision to use a local background agent to add the notification features to the app.</li> <li>Since we wanted to create a nice and smooth Metro-style experience with the app, we ruled out alternate ways of creating such an accompanying app pretty quickly. For example, I have seen quite some “wrapper” apps in the Marketplace that are using a web browser control to display a mobile version of a web site – simple, quick to set up, but in no way living up to the expectations of the SilverlightShow users and definitely not what we were looking for. We wanted to present a rich, familiar look and feel based on a native Silverlight implementation. And, after all, this is SilverlightShow.net, not WebBrowserControlWrapper.net :-). </li> </ul> <h2>Prototype</h2> <p>In some areas, we weren’t sure whether it really would be possible to achieve good results in terms of performance and user experience by using the concept we created. This is a common problem when you’re developing software: sometimes the complexity is just too high, or the involved technology is not understood well enough or has too many dependencies to allow for a definite answer and final design just by thinking about it in theory. In these cases, the way you should probably take into consideration is to create a prototype. This is a small piece of software that takes on the most pressing aspects of your concept and delivers a proof that what you intend to do will work as expected, or can work by modifying some details of the concept or add tuning – hence the naming “proof of concept”. </p> <p>This is exactly what we did with some of the fundamental topics I have listed above. The small prototype allowed us to eliminate some mistakes in the concept that had slipped through, and to identify other issues we would be running into later on, which we now could plan for accordingly, early in the process. This very short phase of the development process helped enormously with clarifying some details and laying out the foundation and basic structure of the app.</p> <p>By the way, the result of creating a prototype can also be that what you intended to do is not feasible – you should not think of a situation like that as a defeat, but a huge success. Imagine the wasted effort if you discovered the dead end only months after starting development. It’s much better to return to the drawing board early.</p> <h2>Implementation</h2> <p>For a passionate developer, starting with the actual implementation is the most exciting moment during a development process like this, after having built up all the excitement during the previous phases. And if you have worked on some projects like that before, you know that during implementation you get to crack the real problems, low-level, that nobody anticipated when they wrote the specs. Even when you have used advanced techniques like prototyping you <em>will</em> run into those pesky little details in your daily work that you hate, curse, and love to beat. So did we during the implementation phase of the app – some of these details and experiences will be covered in the next part of the series, and it will become a lot more technical then.</p> <h2>Conclusion</h2> <p>I didn’t go into the details of specific techniques of requirements engineering, creating specifications or even the implementation process itself. This of course exceeds the scope of this article. But whether you’re using agile processes or classic approaches doesn’t matter. What I wanted to show you is that things you may know from your day job can also be applied to this much smaller scale of creating relatively simple phone apps, and that it in fact helps with being more effective. I hope you enjoyed this first part, and are looking forward to dive into some of the technical problems we were facing next time.</p> http://www.silverlightshow.net/items/Creating-the-SilverlightShow-Windows-Phone-App.aspx editorial@silverlightshow.net (Peter Kuhn ) http://www.silverlightshow.net/items/Creating-the-SilverlightShow-Windows-Phone-App.aspx#comments http://www.silverlightshow.net/items/Creating-the-SilverlightShow-Windows-Phone-App.aspx Wed, 21 Mar 2012 10:06:00 GMT SilverlightShow Interview with Tim Huckaby - Keynote Speaker at Visual Studio Live! Las Vegas 5-day Conference <p><strong>In this SilverlightShow interview, we talk with <a href="http://ads.silverlightshow.net/a.aspx?ZoneID=71&Task=Click&Mode=HTML&SiteID=1&PageID=2211" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=71&Task=Get&Mode=HTML&SiteID=1&PageID=2211" width="0" height="0" style="border-width: 0px;border-style: solid;" />Tim Huckaby</a> – keynote speaker on the 3<sup>rd</sup> day of <a href="http://ads.silverlightshow.net/a.aspx?ZoneID=55&Task=Click&Mode=HTML&SiteID=1&PageID=47104" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=55&Task=Get&Mode=HTML&SiteID=1&PageID=47104" width="0" height="0" style="border-width: 0px;border-style: solid;" />Visual Studio Live! Las Vegas</a> conference (March 26-30, 2012). The keynote will be focused on </strong><a href="http://ads.silverlightshow.net/a.aspx?ZoneID=72&Task=Click&Mode=HTML&SiteID=1&PageID=86367" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=72&Task=Get&Mode=HTML&SiteID=1&PageID=86367" width="0" height="0" style="border-width: 0px;border-style: solid;" /><strong>The Future of User Experience: The Natural User Interface (NUI)</strong></a><strong>. <br /> As we have announced, SilverlightShow is the </strong><a href="http://vslive.com/events/las-vegas-2012/information/sponsors.aspx"><strong>Social Media Premiere Partner</strong></a><strong> for this conference and we are </strong><a href="http://www.silverlightshow.net/community/contest_vslive.aspx"><strong>sending one SilverlightShow member to this conference for free</strong></a><strong>.</strong></p> <p><strong><em></em></strong></p> <p><strong><em><a href="http://www.silverlightshow.net/Storage/Users/SilverlightShow/tim_h_2.jpg"><img style="border-style: initial; border-color: initial; border-image: initial; background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; float: left; margin-right: 10px; border-color: initial; border-width: 0px;border-style: solid;" title="tim_h" alt="tim_h" src="http://www.silverlightshow.net/Storage/Users/SilverlightShow/tim_h_thumb.jpg" /></a>About Tim:</em></strong><em> </em><em>Tim Huckaby is focused on the Natural User Interface (NUI)- Touch, Gesture, and Neural in Rich Client Technologies like HTML5, Silverlight, WPF, & IOS on a broad spectrum of devices that include computers, tablets, the Surface, the Kinect, and mobile devices. </em></p> <p><em></em></p> <p><em>Tim has been called a “Pioneer of the Smart Client Revolution” by the press. Tim has been awarded many times for the highest rated technical presentations and keynotes for Microsoft and many other technology conferences around the world. Tim is consistently rated in the top 10% of all speakers at these events. Having worked for or with Microsoft for over 20 years, Tim has been on stage with, and done numerous keynote demos for many Microsoft executives including Bill Gates and Steve Ballmer. </em></p> <p><em></em></p> <p><em>Tim founded InterKnowlogy, experts in .NET and Microsoft Platforms in 1999 and Actus Interactive Software in 2011 and has over 30 years of experience including serving on a Microsoft product team as a development lead on an architecture team on a Server Product. Tim is a Microsoft Regional Director, a Microsoft MVP and serves on many Microsoft councils and boards like the Microsoft .NET Partner Advisory Council. </em></p> <p><em></em></p> <p><strong>SilverlightShow: </strong>Hi Tim! Your upcoming keynote at Visual Studio Live!Las Vegas is one of the most awaited ones, according to the conference organizers. What aspect or direction of development of Natural User Experience (NUI) is currently important for developers, what’s bringing them to your keynote?</p> <p><strong>TH: </strong>Well, thanks for the kind words. Clearly the conference organizers are friends of mine. I really am looking forward to doing this keynote for numerous reasons. Firstly, because I will strive to make the message clear: You may not be doing natural user interfaces in your software solutions now, but you will be. It’s just a matter of time. I reinforce that with demos of some of the most compelling NUI software out there. And then I will speculate about the future of NUI with more compelling use cases. I bring it back to reality by going through the past 30 years of user interfaces. I was there when the mouse came out. I remember thinking how unnatural is was to take my right hand off the keyboard and grab the mouse. Now we consider that second nature. I will argue that in a timely manner we’ll say the same thing about waving at software…using simple gestures to manipulate the interface. <strong></strong></p> <p style="text-align: center;"><a href="http://ads.silverlightshow.net/a.aspx?ZoneID=58&Task=Click&Mode=HTML&SiteID=1&PageID=28122" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=58&Task=Get&Mode=HTML&SiteID=1&PageID=28122" width="468" height="60" style="border-width: 0px;border-style: solid;" /></a></p> <p><strong>SilverlightShow:</strong> What are the main difficulties developers have when building NUI in their applications, and how will the technology evolve to allow easier creation and integration of such interfaces?</p> <p><strong>TH: </strong>Great question. I find it so interesting that the challenges of NUI software are not as much technical as they are of usability. Let’s face it. CRUD applications are simply not a good use case for NUI. Nothing that I know of can produce text as quickly as a keyboard. So finding the right use cases for touching, or gesturing or voice controlled software is the real challenge. It’s also very interesting to me that Microsoft has pretty much dominated and paved the way for multi-touch support in .NET for years. Yet, it wasn’t until that magically expensive Apple device to make multi-touch a mainstream way to use software. Now with the Kinect for Windows SDK shipping we have an extremely powerful and compelling dev stack for NUI based applications.</p> <p><strong>SilverlightShow:</strong> NUI is already available in Win8, mobile platforms, Kinect and others. On which platforms do you think it will have the biggest potential to evolve, to become a standard, and push related innovations?</p> <p><strong>TH: </strong>Let’s add Windows 7 in all forms, and the Microsoft Surface to your list. And then we can say on the Microsoft and IOS platforms we will have multi-touch covered end to end. What I tell developers is that from here on in you are going to get multi-touch capability in the hardware whether you want it or not. So, now is the time to start leveraging it. Kinect clearly is an awesome differentiator on the Microsoft side. But, what is most exciting to me, and is really not well known, is that the HTML5 spec calls for multi-touch capability and programmatic access. In that respect the Multi-touch part of NUI truly can be called a standard. </p> <p><strong>SilverlightShow: </strong>Can you name 1 or 2 applications that are best using NUI at this current moment, and why?</p> <p><strong>TH: </strong>Well, let’s be clear. I’m a Kinect fanatic. I have not seen anything so powerful and cool from Microsoft in years. So, that being said, the work we do in health care and life sciences is truly futuristic cool because of the complexity, the 3d, and the gesture and voice controlled interfaces with Kinect. I’ll be demoing a good number of these apps in my keynote. On the other side of the spectrum of Kinect is simple gesture based interfaces to control an interactive kiosk. In many environments, especially in a public place you do not want to touch anything. So a simple wave of the right hand from right to left is a very legitimate use case for next. An important part of my professional life right now is interactive kiosk and active digital signage solutions, and with Actus Interactive software we plan to rock that world. In fact, we already are.</p> <p><strong>SilverlightShow:</strong> How do you see the future of NUI? In which areas of life should we also expect to see NUIs very soon?<strong></strong></p> <p><strong>TH: </strong>In the keynote I will talk about the future. And I will show off some of the innovative work that is being done now for the future of NUI. It’s high tech stuff: it’s holodeck like software and it’s neural interfaces to software. Imagine a world where you think at software to use it. it’s not so far in the future. And Microsoft research is already doing proofs of concepts in totally virtual environments. Crazy exciting stuff.<strong></strong></p> <p><strong>SilverlightShow: </strong>How and where may conference attendees meet you during the conference?</p> <p><strong>TH: </strong>I just love talking to technologists… not just developers, but everyone involved in the computing lifecycle. So, it is absolutely my pleasure to hang out and talk to as many VSLive attendees as possible.</p> <p><strong></strong></p> <p><strong>Thanks Tim for this interview! Wish you, as well as our free pass winner a great conference event!</strong></p> <p><strong></strong></p> <p><strong><em>Do you know about applications that give an outstanding example of successful use of Natural User Interfaces? Share it with us by commenting below this interview! </em></strong></p> http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Tim-Huckaby-Keynote-Speaker-at-Visual-Studio-Live-Las-Vegas-5-day-Conference.aspx editorial@silverlightshow.net (Silverlight Show ) http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Tim-Huckaby-Keynote-Speaker-at-Visual-Studio-Live-Las-Vegas-5-day-Conference.aspx#comments http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Tim-Huckaby-Keynote-Speaker-at-Visual-Studio-Live-Las-Vegas-5-day-Conference.aspx Mon, 05 Mar 2012 14:27:00 GMT SilverlightShow Interview with Billy Hollis - Presenter in a Visual Studio Live! Las Vegas Workshop <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Billy-Hollis-Presenter-in-a-Visual-Studio-Live-Las-Vegas-Workshop.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Billy-Hollis-Presenter-in-a-Visual-Studio-Live-Las-Vegas-Workshop.aspx" data-count="horizontal" data-text="Interview with @BillyHollis - Presenter in a @VSLive Las Vegas Workshop" data-url="http://slshow.net/y7ZHob">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Billy-Hollis-Presenter-in-a-Visual-Studio-Live-Las-Vegas-Workshop.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p><strong>In this SilverlightShow interview, we talk with <a href="http://ads.silverlightshow.net/a.aspx?ZoneID=70&Task=Click&Mode=HTML&SiteID=1&PageID=52138" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=70&Task=Get&Mode=HTML&SiteID=1&PageID=52138" width="0" height="0" style="border-width: 0px;border-style: solid;" />Billy Hollis</a> – the presenter at the most-awaited workshop at <a href="http://ads.silverlightshow.net/a.aspx?ZoneID=55&Task=Click&Mode=HTML&SiteID=1&PageID=47104" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=55&Task=Get&Mode=HTML&SiteID=1&PageID=47104" width="0" height="0" style="border-width: 0px;border-style: solid;" />Visual Studio Live! Las Vegas</a> conference (March 26-30, 2012) - </strong><a href="http://ads.silverlightshow.net/a.aspx?ZoneID=61&Task=Click&Mode=HTML&SiteID=1&PageID=15184" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=61&Task=Get&Mode=HTML&SiteID=1&PageID=15184" width="0" height="0" style="border-width: 0px;border-style: solid;" /><strong>‘Creating Today’s User Experiences - An Entry Point for Developers’</strong></a><strong>. <br /> As we have announced, SilverlightShow is the </strong><a href="http://vslive.com/events/las-vegas-2012/information/sponsors.aspx" target="_blank"><strong>Social Media Premiere Partner</strong></a><strong> for this conference and we’ll be </strong><a href="http://www.silverlightshow.net/community/contest_vslive.aspx"><strong>sending one SilverlightShow member to this conference for free</strong></a><strong>.</strong></p> <p><strong><em>About Billy:</em></strong><em> Billy Hollis is an author and software developer from Nashville, Tennessee. Billy is co-author of the first book ever published on Visual Basic .NET, VB .NET Programming on the Public Beta. He has written many articles, and is a frequent speaker at conferences. He is the Regional Director of Developer Relations in Nashville for Microsoft, and runs a consulting company focusing on user experience design and rich client applications. You can visit his website at: </em><a href="http://www.billyhollis.com/"><em>www.billyhollis.com</em></a><em></em></p> <p><strong>SilverlightShow: </strong>Hi Billy! According to info from the kitchen of Visual Studio Live!Las Vegas, your workshop has so far attracted most interest by the conference registrants. The topic of the workshop is: ‘Creating Today’s User Experiences - An Entry Point for Developers’. Why do you think user experience has become an important topic for developers right now? Isn’t it better for developers to just leave this work to a UX expert, and focus on development only?</p> <p><strong>BH:</strong> The biggest reason developers are shifting focus to user experience is simple. Apple is kicking us to the curb in some key spaces. Executives are demanding, for example, that corporate apps be made available on iPads, and the users just expect the experience on such devices to be excellent. </p> <p>I believe that the notion that developers can delegate user experience design to a UX expert, and then just stop worrying about it, is just not feasible for most applications. First, such UX experts are hard to find. If you’re in, say, Springfield, Illinois, where do you get one? Certainly small to medium teams often can’t find or can’t afford such help. Second, designing great user experience requires a deep understanding of the application domain. Developers usually have that, and pure designers generally don’t. Designers do a lot better in the consumer space, because they are themselves consumers, but it’s much harder for them to put themselves inside the mind of a typical corporate application user.</p> <p>Finally, I think the best designs, particularly for complex business applications, come through collaboration. Even if a designer is involved, the end product will be better if there is collaboration with developers, and developers will be better collaborators if they understand the principles and speak the language of design.</p> <p><a href="http://ads.silverlightshow.net/a.aspx?ZoneID=58&Task=Click&Mode=HTML&SiteID=1&PageID=28122" target="_blank"><img alt="" style="display: block; float: none; margin-left: auto; margin-right: auto; border-width: 0px;border-style: solid;" src="http://ads.silverlightshow.net/a.aspx?ZoneID=58&Task=Get&Mode=HTML&SiteID=1&PageID=28122" width="468" height="60" /></a></p> <p><strong>SilverlightShow:</strong> What are some of the key user experience concepts you plan to touch upon in this workshop, why should attendees join it?</p> <p><strong>BH:</strong> I’ll be covering over two dozen key concepts, out of a universe of about 150 design principles that I’ve studied in the past five years. The ones I zero in on are the ones that have helped me most in doing designs for my own clients. </p> <p>I cover them in families of related concepts. One family concerns how users efficiently select options and navigate through an application. It includes Hick’s Law, inattentional blindness, and gestalt principles, among others. These principles are mostly concerned with how the user’s visual and cognitive systems work. Then there’s another family of design principles based on the human preference for natural things. It includes whitespace, proper use of gradients and animation, layering to get 3D effects, and so forth. </p> <p>Then I talk some about purely aesthetic concepts, plus ideas such as mapping and affordances. I also discuss the need to use context to decide good designs, because sometimes design principles involve tradeoffs, and the right balance depends on circumstances.</p> <p><strong>SilverlightShow:</strong> That sounds like a lot of material! Can attendees really learn all that in one day?<strong></strong></p> <p><strong>BH:</strong> It is a lot, and that’s why I used the term “entry point” in the workshop title. I can’t teach everything, but I can build a skeleton that will enable attendees to keep learning on their own.</p> <p>But I think it’s quite true that they would walk out with their heads spinning if I just talked all day. So instead, we do regular exercises to help them apply the concepts themselves, and I require class interaction at certain points. That makes it real to them. </p> <p>Some exercises are just a minute or two – for example, analyzing an elevator panel to see what’s wrong with it. Others take as long as twenty minutes. I think there are about ten or twelve exercises scattered throughout the day. In that sense, it really is a workshop, not a day long technical lecture session.</p> <p><strong>SilverlightShow: </strong>What knowledge do you expect attendees to gain after this workshop, and how would you advise them to continue their education?</p> <p><strong>BH:</strong> First, they should walk out with a sense of how important this material is. In fact, I actually scare them at certain points. I’ve seen an entire dominant ecosystem of this industry become irrelevant in ten years – IBM, from 1985 to 1995. I don’t want that to happen to the Microsoft side of the industry, and meeting rising user expectations is, I think, one of the essential foundations to prevent that.</p> <p>Then I hope they find out if this kind of work resonates with them. I believe almost all developers can do a lot better in user experience design than they realize, but some just don’t take to it. Others get really lit up about it.</p> <p>Finally, they will have learned the raw essentials, and be directed to resources that will take them further. If they really like this area, they’ll be studying it for years. But I think they can take some of the basic ideas out of the workshop and begin applying them in their own projects the day they get back home.</p> <p><strong>SilverlightShow:</strong> What is the trickiest part in building user interfaces, where do you think developers stumble most?</p> <p><strong>BH:</strong> The trickiest part by far is breaking out of the ruts they’ve formed from old technologies. Modern technologies, such as HTML5 and XAML, give us enormous freedom in the way we interact with the user. But most developers have ingrained habits to just divide the screen up into rectangles and pour something into each one. Some of my exercises are designed, in fact, primarily to force them out of their ruts.</p> <p>Another tricky part is finding the right level of understanding of the problem space before beginning design. With our current emphasis on agile, a lot of developers interpret that to mean they need to get down to coding really early in the process, and figure out requirements as they go. For certain phases of development, that works OK, but to come up with, say, the central navigation theme for the entire application, it doesn’t. A certain breadth of understanding of the problem space is needed to do that, and even then usually some experimentation and user feedback is needed to get a good design.</p> <p><strong>SilverlightShow:</strong> Most SilverlightShow community members are already quite fluent with Windows Phone development and have created one or more applications for this platform. In your opinion, to what extent does user experience contribute to the success of such an application, compared to functionality?<strong></strong></p> <p><strong>BH:</strong> Functionality comes first, in the sense that no one will use an application without functionality they need, regardless of how pretty or well designed it is. </p> <p>However, if you assume that most developers can get the functionality part figured out, then user experience becomes the differentiator. User experience also weighs as heavy as functionality on how much value the user perceives in the typical application. Plus, to be blunt, really bad user experience repels users, especially when they’ve become accustomed to better UX in other apps.</p> <p>I like to put it like this. For most of our careers, success has been measured by our ability to make something possible. That’s not enough anymore. Now, we are also expected to make it easy.</p> <p><strong>SilverlightShow: </strong>How and where may conference attendees meet you during the conference (outside the workshop)?</p> <p><strong>BH:</strong> Oh, I’m pretty easy to find. I spend a fair amount of time in the areas outside sessions, lounging around, and I’m there specifically for people to come up and talk if they need to. I usually come to lunch too, even though I don’t usually eat lunch, and anyone who sees me wandering through the lunch hall is welcome to flag me down for a discussion. Finally, I’ll be MC at the evening event, Wild Wednesday. I do about twenty minutes of comedy ranting there, plus draw the tickets to give away prizes and such. I’m usually available afterwards for a conversation or two.</p> <p><strong></strong></p> <p><strong>Thanks Billy for this interview! Wish you, as well as our free pass winner, a successful workshop and conference event!</strong></p> <p><strong></strong></p> <p><strong><em>Do you, as a developer, manage to create good user experience for your apps, what are the difficulties you face? Feel free to comment below this interview. </em></strong></p> http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Billy-Hollis-Presenter-in-a-Visual-Studio-Live-Las-Vegas-Workshop.aspx editorial@silverlightshow.net (Silverlight Show ) http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Billy-Hollis-Presenter-in-a-Visual-Studio-Live-Las-Vegas-Workshop.aspx#comments http://www.silverlightshow.net/items/SilverlightShow-Interview-with-Billy-Hollis-Presenter-in-a-Visual-Studio-Live-Las-Vegas-Workshop.aspx Tue, 28 Feb 2012 13:44:14 GMT Windows Phone + SignalR = Awesome Possibilities! <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-Phone-SignalR-Awesome-Possibilities.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-Phone-SignalR-Awesome-Possibilities.aspx" data-count="horizontal" data-text="Reading @samidip's article '#WindowsPhone + #SignalR = Awesome Possibilities!' #wpdev" data-url="http://slshow.net/xgcRV8">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-Phone-SignalR-Awesome-Possibilities.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>Real-time communication. Many software applications on variety of platforms & form factors have a genuine need for it. But persistent networks, real-time connectivity & asynchrony continue to challenge us developers in building such applications. Is there a silver lining? Could we have near-real-time communication in our mobile apps? Imagine the possibilities.</p> <h4><a href="http://www.silverlightshow.net/Storage/Sources/SignalR_WP7.zip">Download Source Code</a></h4> <h4> </h4> <h4>Live Demo</h4> <p>Now, let’s do something a little fun before we get to the crux of what this article is about. </p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/10-Best-Practices-for-Windows-Phone-Devs-Webinar.aspx">Recording of Samidip's Webinar: 10 Best Practices for WP devs</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Producing-and-Consuming-OData-in-a-Silverlight-and-Windows-Phone-7-application.aspx">The article series: Producing and Consuming OData in a Silverlight and WP7 application</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/odata_cloud.aspx">Samidip's Ebook 'OData & Cloud Augmentation of Windows Phone Apps':</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/odata_cloud.aspx"><img style="width: 107px; height: 150px;" alt="Producing and Consuming OData in a Silverlight and WP7 App Ebook" src="http://www.silverlightshow.net/Storage/Ebooks/odata_cloud.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> How about a live demo of the sample application in action? Works from anywhere on earth with a data connection; in fact, more & diverse the user demographics, the merrier. Let’s do this: <ul> <li>This demo will work with your Windows Phone emulator; but better with your unlocked Windows Phone that can side-load apps, given XAP or source code. </li> <li>Download the Source Code & extract the Windows Phone solution. </li> <li>Load in Visual Studio, build & Deploy to emulator/phone. </li> <li>The sample Windows Phone app essentially shares your location & connects you to a backend SignalR server for continuous real-time chat. </li> <li>Go to <a href="http://signalrserver.cloudapp.net/" target="_blank">http://signalrserver.cloudapp.net/</a> and keep it open. </li> <li>Fire up the app and give yourself a name for the Chatroom. </li> <li>Share your location & join the fun. </li> <li>If on a Windows Phone, you should see a pushpin on the Bing map for your actual location (if allowed by your settings). On the emulator, you’ll start out at the mothership, that is, Seattle. Feel free to use the location simulator to fake your position. </li> <li>See yourself pop up in the chat dialog box? </li> <li>Now fire away what you want to say .. no profanity please. </li> <li>See what you say show up in your phone’s chat dialog & on the Server almost immediately? Fun, eh? </li> <li>Exit the chatroom and you’ll see yourself leave, along with a disappearing pushpin on map. </li> </ul> <p>The result should be something like this:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_24.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_10.png" width="604" height="284" /></a></p> <p>I’m hoping if we keep the site running, we can see Pushpins show up on different parts of the world map; the Bing map used should zoom in & out to accommodate all pins. Having said that, the server side code isn’t hosted on massive hardware. I’ll try to keep it up; but if load or other issues force it down, please feel free unpack the server code & run it locally. It is a simple MVC3 app that should run just fine on your machine. Only change you would have to do is to point your Windows Phone app to <em>Localhost</em>, instead of the above server. So, let’s hope the site stays up & we can see folks from different places show up on live map & chatroom.</p> <h4>Introduction</h4> <p>SignalR is an async persistent connection library for client-server communication that aids in building real-time, multi-user connected applications across multiple platforms. The connection between clients & server is persisted over best possible transport mechanism, which could be a combination of long polling, periodic polling & sockets. The point is the transport layer is abstracted away to provide a seamless persistent connection for ease of development in making connected applications across the web, mobile & other form factors.</p> <p>SignalR was started by <a href="https://twitter.com/#!/DamianEdwards" target="_blank">Damian Edwards</a> & <a href="https://twitter.com/#!/davidfowl" target="_blank">David Fowler</a> from the ASP.NET team and is now an OSS on GitHub (<a href="https://github.com/SignalR/SignalR" target="_blank">https://github.com/SignalR/SignalR</a>). Want to chat with these & other cool folks working with SignalR? Join the conversations @ <a href="http://jabbr.net/#/rooms/signalr" target="_blank">http://jabbr.net/#/rooms/signalr</a>. The easiest way to start using SignalR is to utilize the Nugets as need in your application. They are:</p> <ul> <li><a href="http://nuget.org/List/Packages/SignalR" target="_blank">SignalR</a> - Package for SignalR.Server and SignalR.Js </li> <li><a href="http://nuget.org/List/Packages/SignalR.Server" target="_blank">SignalR.Server</a> - Server components needed for SignalR endpoints </li> <li><a href="http://nuget.org/List/Packages/SignalR.Js" target="_blank">SignalR.Js</a> - Javascript client for SignalR </li> <li><a href="http://nuget.org/List/Packages/SignalR.Client" target="_blank">SignalR.Client</a> - .NET client for SignalR </li> <li><a href="http://nuget.org/List/Packages/SignalR.Ninject" target="_blank">SignalR.Ninject</a> - Ninject dependeny resolver for SignalR </li> </ul> <p>These can be incorporated in your project by using the visual Nuget Library Manager or the command-based Management console. This one statement gets you all dependencies:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_12.png"><img style="background-image: none; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_4.png" width="444" height="44" /></a></p> <p>While there are other technologies that have tried to solve the real-time communication problem, like Socket.IO or HTML5 WebSockets, few do it as simply as SignalR and support cross-platform between the web and mobile platforms like Windows Phone, <a href="https://github.com/DyKnow/SignalR-ObjC" target="_blank">iOS</a> & Android (through Mono). While the low-level <em>PersistenceConnection</em> class might give you more control, most times the abstraction over it called the <em>Hub</em> class & your implementation of it, will provide easy persistence between client & Server. Want to learn more about SignalR? Try these wonderful posts:</p> <ul> <li><a title="http://bit.ly/qeJFyf" href="http://bit.ly/qeJFyf">http://bit.ly/qeJFyf</a> </li> <li><a href="http://jbeckwith.com/2011/10/12/building-a-user-map-with-signalr-and-bing/">http://jbeckwith.com/2011/10/12/building-a-user-map-with-signalr-and-bing/</a> </li> <li><a href="http://blog.maartenballiauw.be/post/2011/12/06/Using-SignalR-to-broadcast-a-slide-deck.aspx">http://blog.maartenballiauw.be/post/2011/12/06/Using-SignalR-to-broadcast-a-slide-deck.aspx</a> </li> <li><a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=780">http://www.dotnetcurry.com/ShowArticle.aspx?ID=780</a> </li> </ul> <h4> </h4> <h4>The Sample</h4> <p>So, having learnt a little about SignalR, do you think it would work with and have applications in Windows Phone development? Absolutely! Real-time communication with a backend server on a personal device like the Windows Phone has potentially tons of ways to leverage the technology in Apps. Allow me to show you two here – mapping Windows Phone App users across the globe and real-time chat dialog between multiple Windows Phones & the web. The rest is up to your imagination ..</p> <h4>The Server</h4> <p>You obviously have choices here. I started with a default MVC3 web application; but wanted to change the look to showing mapping & chat dialog. First up, let’s get it ready to be a SignalR server. Here’s how to add the Nuget package:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_14.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_5.png" width="544" height="364" /></a></p> <p>With that, we know what a <em>Hub</em> is. Let us extend it to make something our own. We essentially want to uniquely keep track of Windows Phone users using our app; so let’s define a class for the phone clients:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #008000;">// Individual Phone clients.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> PhoneClient</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">string</span> PhoneClientId { get; set; }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">float</span> Latitude { get; set; }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">float</span> Longitude { get; set; }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> }</pre> <!--CRLF--></div> </div> <p>Next, let’s add functionality to add phone clients to Hub, disconnect & broadcast messages to all:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #008000;">// The Hub of communication.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> MessagingHub : Hub</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">static</span> List<PhoneClient> PhoneClientList = <span style="color: #0000ff;">new</span> List<PhoneClient>(); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> JoinFromPhone(<span style="color: #0000ff;">string</span> phoneID, <span style="color: #0000ff;">float</span> latitude, <span style="color: #0000ff;">float</span> longitude)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> PhoneClient phoneClientToAdd = <span style="color: #0000ff;">new</span> PhoneClient();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> phoneClientToAdd.PhoneClientId = phoneID; </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> phoneClientToAdd.Latitude = latitude;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> phoneClientToAdd.Longitude = longitude;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> PhoneClientList.Add(phoneClientToAdd);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> Clients.addClient(phoneClientToAdd);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #0000ff;">this</span>.Caller.addClients(PhoneClientList.ToArray());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> Disconnect(<span style="color: #0000ff;">string</span> phoneID)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> PhoneClient client = <span style="color: #0000ff;">null</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <span style="color: #0000ff;">foreach</span> (PhoneClient existingClient <span style="color: #0000ff;">in</span> PhoneClientList)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> <span style="color: #0000ff;">if</span> (phoneID == existingClient.PhoneClientId)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> client = existingClient;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> <span style="color: #0000ff;">break</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> PhoneClientList.Remove(client);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> Clients.removeClient(client);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> PushMessageToClients(<span style="color: #0000ff;">string</span> message)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum36" style="color: #606060;"> 36:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum37" style="color: #606060;"> 37:</span> Clients.addChatMessage(message);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum38" style="color: #606060;"> 38:</span> } </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum39" style="color: #606060;"> 39:</span> }</pre> <!--CRLF--></div> </div> <p>Wondering what some of the function calls are within our Hub? Well .. that’s the magic! These are actually JavaScript methods defined in our web UI view. So, let’s shoot for a UI like this (in the Index view off our Home controller).. Chat dialog on left & Bing Maps to show the pushpins on the right:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_16.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_6.png" width="604" height="332" /></a></p> <p>Here’s what’s on the view, along with subtle styling included in the downloadable code:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <script charset=<span style="color: #006080;">"UTF-8"</span> type=<span style="color: #006080;">"text/javascript"</span> src=<span style="color: #006080;">"http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"</span>></script></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <script src=<span style="color: #006080;">"@Url.Content("</span>~/Scripts/jquery-1.6.4.min.js<span style="color: #006080;">")"</span> type=<span style="color: #006080;">"text/javascript"</span>></script></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <script src=<span style="color: #006080;">"@Url.Content("</span>~/Scripts/jquery.signalR.min.js<span style="color: #006080;">")"</span> type=<span style="color: #006080;">"text/javascript"</span>></script></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <script type=<span style="color: #006080;">"text/javascript"</span> src=<span style="color: #006080;">"@Url.Content("</span>~/signalr/hubs<span style="color: #006080;">")"</span>></script></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <div id=<span style="color: #006080;">'container'</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <div id=<span style="color: #006080;">'chat'</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <b>Chatroom:</b></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <br /><br /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <input type=<span style="color: #006080;">"text"</span> id=<span style="color: #006080;">"message"</span> maxlength=<span style="color: #006080;">"20"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <input type=<span style="color: #006080;">"button"</span> id=<span style="color: #006080;">"broadcast"</span> <span style="color: #0000ff;">value</span>=<span style="color: #006080;">"Broadcast"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <input type=<span style="color: #006080;">"button"</span> id=<span style="color: #006080;">"clear"</span> <span style="color: #0000ff;">value</span>=<span style="color: #006080;">"Clear"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <br /><br /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <ul id=<span style="color: #006080;">"chatdialog"</span>></ul> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> </div></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <div id=<span style="color: #006080;">'map'</span>></div></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> </div></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <div id=<span style="color: #006080;">"legend"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <label <span style="color: #0000ff;">for</span>=<span style="color: #006080;">"userCount"</span>>Mapped Users: </label></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <span id=<span style="color: #006080;">"userCount"</span>>0</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> </div></pre> <!--CRLF--></div> </div> <p>The Bing Maps on the page would be using the <a href="http://www.microsoft.com/maps/isdk/ajax/" target="_blank">Bing Maps Ajax/JavaScript SDK</a>. If you need to use this on your own, please make sure to get yourself a developer ID that you could pass along to Bing; get it <a href="http://www.microsoft.com/maps/developers/web.aspx" target="_blank">HERE</a>.</p> <p>Now, most of the connectivity magic offered by the SignalR server will be in the code bits below. You’ll see how we open a connection to our SignalR Hub from the web client and define JavaScript methods to manipulate the UI that will be used by the Hub. You’ll notice how we add/remove PushPins on the map using JavaScript & location of phone clients joining the Hub. Also, you’ll see the code sending off Chat messages typed in from the web and appending those received from the server. So, here goes:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <script type=<span style="color: #006080;">"text/javascript"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> var map = <span style="color: #0000ff;">null</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> $(function () </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #008000;">// Create the connection to our SignalR Hub.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> var signalRHub = $.connection.messagingHub;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #008000;">// Define some Javascript methods the server-side Hub can invoke.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #008000;">// Add a new client to the map.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> signalRHub.addClient = function (client) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> var pins = getPushPins();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> addClient(client);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> centerMap();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> $(<span style="color: #006080;">"#userCount"</span>).html(pins.length + 1)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> };</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <span style="color: #008000;">// Remove a client from the map.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> signalRHub.removeClient = function (client) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> <span style="color: #0000ff;">for</span> (var i = map.entities.getLength() - 1; i >= 0; i--) {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> var pushpin = map.entities.get(i);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> <span style="color: #0000ff;">if</span> (pushpin instanceof Microsoft.Maps.Pushpin) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> <span style="color: #0000ff;">if</span> (pushpin.getLocation().latitude == client.Latitude && pushpin.getLocation().longitude == client.Longitude) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> map.entities.removeAt(i);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> var pins = getPushPins();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> $(<span style="color: #006080;">"#userCount"</span>).html(pins.length)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum36" style="color: #606060;"> 36:</span> };</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum37" style="color: #606060;"> 37:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum38" style="color: #606060;"> 38:</span> <span style="color: #008000;">// Add chat messages from server to dialog.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum39" style="color: #606060;"> 39:</span> signalRHub.addChatMessage = function (message) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum40" style="color: #606060;"> 40:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum41" style="color: #606060;"> 41:</span> $(<span style="color: #006080;">'#chatdialog'</span>).append(<span style="color: #006080;">'<li>'</span> + message + <span style="color: #006080;">'</li>'</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum42" style="color: #606060;"> 42:</span> };</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum43" style="color: #606060;"> 43:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum44" style="color: #606060;"> 44:</span> <span style="color: #008000;">// Click event-handler for broadcasting chat messages.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum45" style="color: #606060;"> 45:</span> $(<span style="color: #006080;">'#broadcast'</span>).click(function () </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum46" style="color: #606060;"> 46:</span> { </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum47" style="color: #606060;"> 47:</span> <span style="color: #008000;">// Call Server method.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum48" style="color: #606060;"> 48:</span> signalRHub.pushMessageToClients($(<span style="color: #006080;">'#message'</span>).val());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum49" style="color: #606060;"> 49:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum50" style="color: #606060;"> 50:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum51" style="color: #606060;"> 51:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum52" style="color: #606060;"> 52:</span> <span style="color: #008000;">// Start the SignalR Hub.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum53" style="color: #606060;"> 53:</span> $.connection.hub.start(function () </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum54" style="color: #606060;"> 54:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum55" style="color: #606060;"> 55:</span> showMap();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum56" style="color: #606060;"> 56:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum57" style="color: #606060;"> 57:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum58" style="color: #606060;"> 58:</span> <span style="color: #008000;">// Click event-handler for clearing chat messages.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum59" style="color: #606060;"> 59:</span> $(<span style="color: #006080;">'#clear'</span>).click(function () </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum60" style="color: #606060;"> 60:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum61" style="color: #606060;"> 61:</span> $(<span style="color: #006080;">'ul li'</span>).remove();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum62" style="color: #606060;"> 62:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum63" style="color: #606060;"> 63:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum64" style="color: #606060;"> 64:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum65" style="color: #606060;"> 65:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum66" style="color: #606060;"> 66:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum67" style="color: #606060;"> 67:</span> function addClient(client) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum68" style="color: #606060;"> 68:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum69" style="color: #606060;"> 69:</span> var location = <span style="color: #0000ff;">new</span> Microsoft.Maps.Location(client.Latitude, client.Longitude);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum70" style="color: #606060;"> 70:</span> var pushpin = <span style="color: #0000ff;">new</span> Microsoft.Maps.Pushpin(location, { text: <span style="color: #006080;">'P'</span>});</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum71" style="color: #606060;"> 71:</span> map.entities.push(pushpin);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum72" style="color: #606060;"> 72:</span> } </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum73" style="color: #606060;"> 73:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum74" style="color: #606060;"> 74:</span> function showMap() </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum75" style="color: #606060;"> 75:</span> { </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum76" style="color: #606060;"> 76:</span> var mapOptions = {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum77" style="color: #606060;"> 77:</span> credentials: <span style="color: #006080;">"AuoGTNP56_kmS3IKUa0E-p_PBX1oWJO6WTpw2xFd-hZqFsffSh3FhKGXhFHQD52y"</span>,</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum78" style="color: #606060;"> 78:</span> center: <span style="color: #0000ff;">new</span> Microsoft.Maps.Location(39.80, -98.55),</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum79" style="color: #606060;"> 79:</span> zoom:5</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum80" style="color: #606060;"> 80:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum81" style="color: #606060;"> 81:</span> map = <span style="color: #0000ff;">new</span> Microsoft.Maps.Map(document.getElementById(<span style="color: #006080;">"map"</span>), mapOptions); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum82" style="color: #606060;"> 82:</span> } </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum83" style="color: #606060;"> 83:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum84" style="color: #606060;"> 84:</span> function centerMap() </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum85" style="color: #606060;"> 85:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum86" style="color: #606060;"> 86:</span> var pins = getPushPins();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum87" style="color: #606060;"> 87:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum88" style="color: #606060;"> 88:</span> var locations = []; </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum89" style="color: #606060;"> 89:</span> <span style="color: #0000ff;">for</span> (var i = pins.length-1; i>=0; i--) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum90" style="color: #606060;"> 90:</span> locations.push(pins[i].getLocation());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum91" style="color: #606060;"> 91:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum92" style="color: #606060;"> 92:</span> map.setView({</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum93" style="color: #606060;"> 93:</span> bounds: Microsoft.Maps.LocationRect.fromLocations(locations),</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum94" style="color: #606060;"> 94:</span> zoom: 6</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum95" style="color: #606060;"> 95:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum96" style="color: #606060;"> 96:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum97" style="color: #606060;"> 97:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum98" style="color: #606060;"> 98:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum99" style="color: #606060;"> 99:</span> function getPushPins() </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum100" style="color: #606060;"> 100:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum101" style="color: #606060;"> 101:</span> var pins = [];</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum102" style="color: #606060;"> 102:</span> <span style="color: #0000ff;">for</span> (var i = map.entities.getLength() - 1; i >= 0; i--) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum103" style="color: #606060;"> 103:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum104" style="color: #606060;"> 104:</span> var pushpin = map.entities.get(i);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum105" style="color: #606060;"> 105:</span> <span style="color: #0000ff;">if</span> (pushpin instanceof Microsoft.Maps.Pushpin) </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum106" style="color: #606060;"> 106:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum107" style="color: #606060;"> 107:</span> pins.push(pushpin); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum108" style="color: #606060;"> 108:</span> } </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum109" style="color: #606060;"> 109:</span> } </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum110" style="color: #606060;"> 110:</span> <span style="color: #0000ff;">return</span> pins;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum111" style="color: #606060;"> 111:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum112" style="color: #606060;"> 112:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum113" style="color: #606060;"> 113:</span> </script></pre> <!--CRLF--></div> </div> <h4> </h4> <h4> </h4> <h4>The Windows Phone Client</h4> <p>Now that we have the SignalR server all set up and waiting for interaction from phone clients, let us develop our Windows Phone client app. We’ll build a regular one page Windows Phone application just to demo functionality & connectivity to the SignalR Hub. Let’s begin by adding the appropriate SignalR nuget as below:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_18.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_7.png" width="604" height="404" /></a></p> <p>As we launch the app, we ask for a one-time user name so the phone client can be identified in the chatroom. For brevity, let us skip showing the simple XAML markup; you may find it in the downloadable code. Both UIs as below:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_20.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_8.png" width="254" height="484" /></a>  <a href="http://www.silverlightshow.net/Storage/Users/samidip/_image_22.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/samidip/_image_thumb_9.png" width="254" height="484" /></a></p> <p>As the user indicates with button click that he/she wants to join, we use location awareness in Windows Phone to figure out current geo-coordinates of the user with a physical device or read mock emulator inputs. Here’s some code:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> GeoCoordinateWatcher gcw;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">double</span> phoneLatitude;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">double</span> phoneLongitude;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> connectButton_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">if</span> (gcw == <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #008000;">// Look for present geo-location with GPS.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> gcw = <span style="color: #0000ff;">new</span> GeoCoordinateWatcher(GeoPositionAccuracy.High);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> gcw.MovementThreshold = 10;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> gcw.StatusChanged += <span style="color: #0000ff;">new</span> EventHandler<GeoPositionStatusChangedEventArgs>(gcw_StatusChanged);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> gcw.Start(); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> }</pre> <!--CRLF--></div> </div> <p>Once we have location, it’s time to fire up the reference to the SignalR server and try to connect. Here’s the sample code:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> IHubProxy SignalRServerHub;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> HubConnection connection = <span style="color: #0000ff;">new</span> HubConnection(<span style="color: #006080;">"http://localhost:49968/"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> gcw_StatusChanged(<span style="color: #0000ff;">object</span> sender, GeoPositionStatusChangedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">if</span> (e.Status == GeoPositionStatus.Ready)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #008000;">// Get position from watcher & stop it to conserve battery.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> phoneLatitude = gcw.Position.Location.Latitude;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> phoneLongitude = gcw.Position.Location.Longitude;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> gcw.Stop();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #008000;">// Reference to SignalR Server Hub & Proxy. </span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> var messagingHub = connection.CreateProxy(<span style="color: #006080;">"SignalRServer.MessagingHub"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> SignalRServerHub = messagingHub; </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <span style="color: #008000;">// Fire up SignalR Connection & share location. </span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> connection.Start().ContinueWith(task =></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <span style="color: #0000ff;">if</span> (task.IsFaulted)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <span style="color: #008000;">// Oopsie, do some error handling.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <span style="color: #008000;">// Join the Server's list of mapped clients.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> messagingHub.Invoke(<span style="color: #006080;">"JoinFromPhone"</span>, deviceID, phoneLatitude, phoneLongitude).Wait();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> <span style="color: #008000;">// Tell the chatroom that you joined.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> SignalRServerHub.Invoke(<span style="color: #006080;">"PushMessageToClients"</span>, App.Current.userName + <span style="color: #006080;">" just joined!"</span>).Wait(); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> }</pre> <!--CRLF--></div> </div> <p>Notice how we build a proxy on the fly (not tight-binding though) and invoke the “<em>JoinFromPhone()</em>” method of the server from the phone app, passing in some identifying information & location coordinates. The point is, you can pass in whatever your server needs. The unique qualifier that we pass in for every phone client to the server is the unique Device ID of the phone. Once pinged, the SignalR Hub wakes up, adds the incoming phone client to an internal collection (which you can persist) and reaches back to each web client (MVC3 view) to invoke some JavaScript functions that actually add a Pushpin on the map. Next up, we also announce on the Chatroom that a new user has joined the Hub by invoking the “<em>PushMessageToClients()</em>” server method. Simple enough, right?</p> <p>When the user types in some content and hits the Chat button, we got to let the SignalR server know, so that the chat message gets posted on the web front-end & all connected Windows Phone clients. Here’s how we achieve that .. notice that we are making some of these server calls on background threads so as to not hose up our UI:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> chatButton_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">if</span> (chatTextbox.Text != <span style="color: #0000ff;">string</span>.Empty && chatTextbox.Text != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #008000;">// Fire off background thread to post message to server Chatroom.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> chatMessage = chatTextbox.Text.Trim();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> chatTextbox.Text = <span style="color: #0000ff;">string</span>.Empty;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> ChatBackgroundDataWorker.RunWorkerAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> ChatBackgroundDataWorker_DoWork(<span style="color: #0000ff;">object</span> sender, DoWorkEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #008000;">// Post message to server chatroom.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> SignalRServerHub.Invoke(<span style="color: #006080;">"PushMessageToClients"</span>, chatMessage).Wait();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> chatMessage = <span style="color: #0000ff;">string</span>.Empty;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> }</pre> <!--CRLF--></div> </div> <p>Now, this takes care of the chat message posting part where the server informs all other clients. However, if someone posts a chat message from the web front-end or other phone clients, how does our app know to update the chat dialog with content? There has to be a trigger, right? Unlike JavaScript clients which the SignalR server can directly reach out to in case something of interest happens, there isn’t an easy proposition for .NET clients since we do not have a reference. But, we do have a persistent connection and there is an “<em>On</em>” method on the connection that can be rigged up to fire anytime a certain event happens on the server. Let us do that any time the server posts a message to all clients. Here’s the code .. you’ll be surprised how instantaneously this mechanism posts the chat message to all connected Windows Phone clients:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #008000;">// Listen in on when Server posts anything to Chatroom.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> SignalRServerHub.On<<span style="color: #0000ff;">string</span>>(<span style="color: #006080;">"addChatMessage"</span>, message =></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #008000;">// Add to local ChatRoom.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> chatDialog.Text += <span style="color: #006080;">"\r\n"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> chatDialog.Text += message.Trim();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> });</pre> <!--CRLF--></div> </div> <p>Now, when you are done chit-chatting with your fellow geeks, you would like to disconnect officially and take your Pushpin out, right? Let’s add this code to disconnect, so that the corresponding Disconnect method is fired on the server. Again, notice how we do this on the background thread and officially sign out of the chatroom:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> disconnectButton_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> { </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> DisconnectBackgroundDataWorker.RunWorkerAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> chatTextbox.IsEnabled = <span style="color: #0000ff;">false</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> chatButton.IsEnabled = <span style="color: #0000ff;">false</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> disconnectButton.IsEnabled = <span style="color: #0000ff;">false</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> connectButton.IsEnabled = <span style="color: #0000ff;">true</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> DisconnectBackgroundDataWorker_DoWork(<span style="color: #0000ff;">object</span> sender, DoWorkEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #008000;">// Send Farewell to Chatroom.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> SignalRServerHub.Invoke(<span style="color: #006080;">"PushMessageToClients"</span>, App.Current.userName + <span style="color: #006080;">" just left!"</span>).Wait();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #008000;">// Disconnect from Hub.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> SignalRServerHub.Invoke(<span style="color: #006080;">"Disconnect"</span>, deviceID).Wait();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> }</pre> <!--CRLF--></div> </div> <h4> </h4> <h4>Conclusion</h4> <p>That’s it. A functional Windows Phone client that connects to a SignalR server backend and allows us to see the interactions on a web front-end. The SignalR magic simply provides the persistent connectivity through whatever transport means feasible. Now, could there be potential benefit in leveraging such technology in our Windows Phone apps? Think, think ...</p> <h4> </h4> <h4>About the Author</h4> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_ActualPic_5.jpg"><img style="background-image: none; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; float: left; border-width: 0px;border-style: solid;" title="ActualPic" alt="ActualPic" src="http://www.silverlightshow.net/Storage/Users/samidip/_ActualPic_thumb_4.jpg" width="154" height="188" /></a></p> <p>Samidip Basu (<a href="https://twitter.com/#!/samidip">@samidip</a>) is a technologist & gadget-lover working as a Manager & Solutions Lead for Sogeti USA out of the Columbus Unit. With a strong developer background in Microsoft technology stack, he now spends much of his time in spreading the word to discover the full potential of the Windows Phone platform & cloud-backed mobile solutions in general. He passionately runs the Central Ohio Windows Phone User Group (<a href="http://cowpug.org/">http://cowpug.org</a>), labors in M3 Conf (<a href="http://m3conf.com/">http://m3conf.com/</a>) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at <a href="http://samidipbasu.com/">http://samidipbasu.com</a>.</p> http://www.silverlightshow.net/items/Windows-Phone-SignalR-Awesome-Possibilities.aspx editorial@silverlightshow.net (Samidip Basu ) http://www.silverlightshow.net/items/Windows-Phone-SignalR-Awesome-Possibilities.aspx#comments http://www.silverlightshow.net/items/Windows-Phone-SignalR-Awesome-Possibilities.aspx Mon, 27 Feb 2012 04:29:00 GMT Windows 8 and the future of XAML: Part 3: Using WinRT <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-Using-WinRT.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-Using-WinRT.aspx" data-count="horizontal" data-text="Reading @gillcleeren's article '#Windows8 & the future of #XAML: Part 3: Using #WinRT' #win8" data-url="http://slshow.net/zFRoWy">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-Using-WinRT.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>In this third part of our exploration of Windows 8 and WinRT, we’re going to start applying the concepts we learned about in the 2 first parts by using them in code. By now, you should have a good understanding of what Windows 8 Metro style applications are all about. In part 1, we’ve thoroughly explained how Windows 8 applications work inside the Metro environment. We’ve also looked at the improvements made to the desktop mode of Windows 8, which is a place where a lot of us will be spending most of their time I assume.</p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx">Webinar recording: Introduction to XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx">Article: Using the Live SDK in Windows 8 XAML/C# Metro Applications</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> <p>In <a href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx" target="_self">Part 2</a>, we’ve seen some very important concepts. We’ve covered WinRT itself: we’ve looked at its architecture and its cornerstones, such as the runtime broker, Windows Metadata and asynchronous development. We’ve also touched on the Windows 8 tailored profile. </p> <p>This brings us to Part 3. In this article, we’ll start writing code that makes use of WinRT components. Although most of us like to write XAML and C# code, we’ll leave the regular path for once and we’ll write some JavaScript/HTML as well. After some “Hello Worlds”, we’ll dive in more advanced concepts including Capabilities, the Share contract, working with the webcam and some more. Here we go!</p> <h2>Hello World… This time for real</h2> <p>In part 2, I already had the same heading. However, we hadn’t really written any code yet. So let’s do that right now. Note that for all the code we are writing here, you need Visual Studio 11 Express for Windows Developer Preview installed on a Windows 8 machine. To keep things simple, when I use the term”Visual Studio” from now on, it’s this version I’m referring to. If you have Visual Studio 11 installed on your Windows 8 environment as well, the templates that come with the Express edition will also be added to VS11.</p> <p>A small disclaimer is in place here: the code written in this article is written and tested on the developer preview and may not work correctly with later releases.</p> <h3>Hello Visual Studio</h3> <p>When opening Visual Studio, you’ll notice that things haven’t changed a lot (of course, at the time of writing, we’re using a very early version). When clicking on the New Project link on the Start Page, you get the New Project dialog, shown below.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image002" alt="clip_image002" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image002_a9eeb6e8-c580-4d49-a50e-c27130dee284.jpg" width="609" height="420" /></p> <p>In part 2, we talked about the so-called language projections of WinRT. A language projection makes it possible to use WinRT, which is written in native code, from another language. Because of this, developers can keep using the language of their choice to write Metro style applications. The language projection makes sure that language constructs remain intact. Things like a constructor, the var keyword, the await keyword all remain the same if you choose to use WinRT from C#. The language projections that are available can be seen here: we can build Metro style apps from JavaScript, C#, VB and C++. All languages have the same project templates available as well.</p> <p>Let’s start by selecting the C# option. Create a new project (just select the regular Application template for now) and name it HelloWinRTFromCs. Visual Studio opens a designer that should look familiar to the Silverlight developer. We have our regular drag-and drop interface and a XAML editor, as shown below. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image004" alt="clip_image004" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image004_6a1d1cd4-507d-44c1-91a4-0914c871c64f.jpg" width="609" height="344" /></p> <p>In the XAML editor, we can start writing our typical “Hello World” application as follows:</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">UserControlx:Class</span><span style="color: #0000ff;">="HelloWinRTFromCs.MainPage"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">xmlns:x</span><span style="color: #0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">xmlns:d</span><span style="color: #0000ff;">="http://schemas.microsoft.com/expression/blend/2008"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">xmlns:mc</span><span style="color: #0000ff;">="http://schemas.openxmlformats.org/markup-compatibility/2006"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">mc:Ignorable</span><span style="color: #0000ff;">="d"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">d:DesignHeight</span><span style="color: #0000ff;">="768"</span><span style="color: #ff0000;">d:DesignWidth</span><span style="color: #0000ff;">="1366"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">Grid</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="LayoutRoot"</span><span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="#FF0C0C0C"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="HelloWorldTextBlock"</span> <span style="color: #ff0000;">FontSize</span><span style="color: #0000ff;">="42"</span> <span style="color: #ff0000;">Margin</span><span style="color: #0000ff;">="20"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">TextBlock</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">Button</span> <span style="color: #ff0000;">Content</span><span style="color: #0000ff;">="I'm the Hello World generator button"</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="HelloWorldButton"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #ff0000;">Click</span><span style="color: #0000ff;">="HelloWorldButton_Click"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">Button</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"></</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"></</span><span style="color: #800000;">UserControl</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>In the event handler of the Button, we write the following code:</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> System;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> System.Collections.Generic;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> System.Linq;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> System.Threading.Tasks;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> Windows.Foundation;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> Windows.UI.Xaml;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> Windows.UI.Xaml.Controls;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">using</span> Windows.UI.Xaml.Data;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">namespace</span> HelloWinRTFromCs</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">partial</span> <span style="color: #0000ff;">class</span> MainPage</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">public</span> MainPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> HelloWorldButton_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> HelloWorldTextBlock.Text = <span style="color: #006080;">"Hello World from SilverlightShow"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Ready? Start your debugging engines! Simply hit F5 as you’re used to. Your first Windows is now being prepared. If you take a look in the Output Window, you can see that an *.exe is being created and that *.exe is being packaged into an *.appxrecipe. This file is basically the deployment file that will be “hosted” inside of the Metro environment. After a few seconds, you’ll see your Metro app up and running as shown below. Hit the Button and you’ll be greeted with a nice Hello World from your app when you click the button.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image006" alt="clip_image006" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image006_c200084f-1a8c-4115-939d-26857e474b1e.jpg" width="609" height="344" /></p> <p>Visual Studio also comes with a simulator. To use it to test your app on, simply select it from the debug options. The simulator is shown below. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image008" alt="clip_image008" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image008_6ef8e924-034a-43e6-b241-8f7de68fbccf.jpg" width="609" height="344" /></p> <h3>Hello C++</h3> <p>Managed developers should feel reassured already a bit now that they’ve seen that it’s pretty much the same thing we’re doing to build a Metro style app. But what about C++ developers? Let’s build the same app but now from C++. The XAML code can be directly copied and pasted inside the new project. This will work since all XAML classes (such as Button and TextBlock) have now moved into the Windows.UI.Xaml namespace. This namespace is part of WinRT and it is thus the same one we’re using in both C# and C++.</p> <p>The C++ code for the event handler is shown below.</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">void</span> Application33::MainPage::HelloWorldButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">HelloWorldTextBlock->Text = <span style="color: #006080;">"Hello World"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>When running the application, you should get the exact same result. Behind the scenes, our C++ code is being compiled into a native x86 instruction stream (if we would be running this on an ARM-based device, this would be an ARM instruction stream). C++ is directly interacting with the WinRT components.</p> <h3>And why not… Hello JavaScript and HTML</h3> <p>To make the circle complete, let’s write a Hello World app from JavaScript as well. Of course, we’re unable to copy the XAML; JavaScript works in combination with HTML code. Create a new project and select JavaScript this time. </p> <p>In the HTML code, write your Hello World app as follows:</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><!</span><span style="color: #800000;">DOCTYPE</span> <span style="color: #ff0000;">html</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta</span> <span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>WinWebApp6<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #008000;"><!-- WinJS references --></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">link</span> <span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span> <span style="color: #ff0000;">href</span><span style="color: #0000ff;">="/winjs/css/ui-dark.css"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">script</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/winjs/js/base.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <script src=<span style="color: #006080;">"/winjs/js/wwaapp.js"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> </script></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <!-- WinWebApp6 references --></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <link rel=<span style="color: #006080;">"stylesheet"</span> href=<span style="color: #006080;">"/css/default.css"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <script src=<span style="color: #006080;">"/js/default.js"</span>></pre> <!--CRLF--><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;"><</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>Hello World<span style="color: #0000ff;"></</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <h2>More WinRT</h2> <p>Although new development platform or language you learn starts with Hello World, it doesn’t get you very far. Let’s look at some more concepts.</p> <h3>Selecting files on the local file system using the FileOpenPicker</h3> <p>Metro apps can’t directly access system resources such as the file system. It’s pretty much the same story as Silverlight that we have here: in-browser Silverlight apps can only get access to file if the user selects the file through an OpenFileDialog. In that case, Silverlight gets read-only access to the file. Apps with elevated permissions can get access to the local system.</p> <p>In WinRT, we have file pickers. Such a picker allows the user to select a file on the “underlying” Windows desktop environment. In the following code, we are using the FileOpenPicker to allow the user to select an image, which we’ll then display in an Image control.</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> SelectImageButton_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var filePicker = <span style="color: #0000ff;">new</span> Windows.Storage.Pickers.FileOpenPicker();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> filePicker.FileTypeFilter.Add(<span style="color: #006080;">".png"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var selectedImageGuFile = await filePicker.PickSingleFileAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> BitmapImage bitmapImage = <span style="color: #0000ff;">new</span> BitmapImage();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> bitmapImage.SetSource(await selectedImageGuFile.OpenAsync(Windows.Storage.FileAccessMode.Read));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> myImage.Source = bitmapImage;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Notice the line where we are selecting the file. It makes use of the await keyword. Every call that can take longer than 50ms is done asynchronously by default in WinRT. Silverlight developers are already used to writing async code: when accessing a service, this is the default. Traditionally, we solved this with a callback method. There’s nothing wrong with that. However, this new approach using the await keyword, makes things cleaner: all the lines that are behind the line with the await keyword are only executed when the asynchronous call is completed. Note that the method itself has the async keyword added to it.</p> <p>When clicking the Button, the file picker displays itself as follows:</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image010" alt="clip_image010" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image010_94349b5d-7bd6-4682-81d1-0724268c9eb1.jpg" width="609" height="344" /></p> <p>Again, through language projections, the asynchronous development is made natural in the language. In JavaScript, the same can be achieved through a JavaScript promise:</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">var</span> picker = <span style="color: #0000ff;">new</span> Windows.Storage.Pickers.FileOpenPicker;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">picker.fileTypeFilter.append(<span style="color: #006080;">".jpg"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">picker.pickSingleFileAsync().then;</pre> <!--CRLF--></div> </div> <h3>Accessing the picture library and Capabilities</h3> <p>Next to the pickers API, Metro-style applications can also access some folders directly such as the pictures library. Although stating “directly” may not be very good, let me explain.</p> <p>In Windows 8, Metro style applications can declare capabilities. A capability is a way for the application to declare that for it to function properly, it needs to have a certain permission. Such a permission can be accessing the webcam, sending text messages, accessing the picture, movie or documents library and quite a few more. This information will be used in the Windows Store: with this information, the Windows Store can notify the potential user that the application will have the declared permissions so that the user may decide on not installing the application. This is the same process as in the Windows Phone Marketplace. </p> <p>Let’s take a look at working with capabilities. We’ll try them out using a project which can access the picture library. Create a new C# project and name it WorkingWithCapabilities. </p> <p>To define a capability, we can open the appxmanifest file, included in each Metro style project. In the Capabilities tab, check the “Picture Library Access”. </p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image012" alt="clip_image012" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image012_332f935a-7e93-4ae5-9c21-73f6e2aec2d5.jpg" width="609" height="452" /></p> <p>In the XAML, add a GridView (we’ll look at the GridView later on, for now, just remember that it’s a control allowing you to scroll through items horizontally) as follows:</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;"><</span><span style="color: #800000;">GridView</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="PicturesGridView"</span> <span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="500"</span> <span style="color: #ff0000;">VerticalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">GridView</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>In the code-behind, add the following code:</p> <div id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">public</span> MainPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> LoadImages();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> LoadImages()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">{</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> StorageFolder picturesFolder = KnownFolders.PicturesLibrary;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> IReadOnlyList<IStorageFile> fileList = await picturesFolder.GetFilesAsync();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">foreach</span> (IStorageFile file <span style="color: #0000ff;">in</span> fileList)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> <span style="color: #0000ff;">if</span> (file.FileType.Equals(<span style="color: #006080;">".JPG"</span>))</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var bmp = <span style="color: #0000ff;">new</span> BitmapImage();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> var f = await file.OpenAsync(FileAccessMode.Read);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> bmp.SetSource(f);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> Image image = <span style="color: #0000ff;">new</span> Image();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> image.Width = 200;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> image.Height = 200;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> image.Source = bmp;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> imageControls.Add(image);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> image.Tag = file;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"> PicturesGridView.ItemsSource = imageControls;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;">}</pre> <!--CRLF--></div> </div> <p>Notice that we are accessing the Picture Library through the use of the KnownFolders enumeration, which gives us access to the folder from code. This code will however only work when you have indicated in the Capabilities tab that your app needs access to this folder. Then, we read out the files through another async call (remember, we are accessing the drive, which could be a slow process, hence, the async call). Finally, through data binding, we bind a list of images to the GridView. The running app is shown below:</p> <p><img style="border:0px; border-image: initial; display: inline;" title="clip_image014" alt="clip_image014" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image014_22139f77-70d0-4db4-9172-0e91722799de.jpg" width="609" height="344" /></p> <h2>Summary</h2> <p>In this article, we have done our first development in WinRT. We have looked at the first concepts as well, such as the file pickers and the capabilities. In the next article, we’ll continue on this path, exploring more concepts such as contracts/charms in Windows 8.</p> <h2>About the author</h2> <p>Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released March 2012. You can find his blog at www.snowball.be. </p> <p>Twitter: @gillcleeren </p> http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-Using-WinRT.aspx editorial@silverlightshow.net (Gill Cleeren ) http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-Using-WinRT.aspx#comments http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-Using-WinRT.aspx Mon, 20 Feb 2012 17:33:00 GMT Windows 8 and the future of XAML: Part 2: The Windows Runtime (WinRT) <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx" data-count="horizontal" data-text="Reading @gillcleeren's article: #Windows8 & the future of #XAML: Windows Runtime (#WinRT) #win8" data-url="http://slshow.net/A7PzMY">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>Welcome to part 2 in this series on Windows 8 and the future of XAML. The goal of this series is to give you an overview of the Windows 8 platform and teach you how you will be building Metro style applications when Windows 8 will be released. </p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx">Webinar recording: Introduction to XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx">Article: Using the Live SDK in Windows 8 XAML/C# Metro Applications</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> <p>In the first of this series, we looked at the developer preview of Windows 8, mostly from an end-user perspective. While showing you the new version, along the way, I explained several concepts which are new in this upcoming version of Windows, such as tiles, Metro style apps, charms and many more. From this article onwards, I won’t be explaining these concepts, you can refer to the first part for an explanation (of course, when the concept wasn’t covered, we’ll look into it!).</p> <p>More importantly, what will we be looking at in this part? In the first part, we saw that Metro style apps are built using the Windows Runtime (aka WinRT). One question that I had after watching the first sessions of the BUILD conference (www.buildwindows.com) was a very simple question: “What exactly is WinRT and how does it relate to .NET?”. On top of that, I wondered if I would have to learn a new language or be able to leverage my .NET/Silverlight knowledge. All valid questions that I reckon many people have today. In this (and the next) part of this series, I will dive into WinRT: we’ll start writing some code that will eventually lead us to writing our first Windows 8 Metro style app! Fasten your seatbelt; we are ready for take-off!</p> <h2>Hello World… sorry, WinRT</h2> <p>What exactly is Windows Runtime (WinRT)? Well, it can be described as a new programming model/framework that enables us to build Metro style apps using the language of our choice, be that a managed language (C# or VB.NET), C++ or JavaScript. It enables developers to build applications that heavily use functionality exposed by Windows, which was previously difficult to achieve. Below, you can once again see the Windows 8 diagram, shown at BUILD and discussed a lot since then. Note here that WinRT sits right on top of Windows as a thin layer, exposing functions of Windows. These functions can be used in Metro style apps from all languages. In this context, Microsoft speaks of a language projection, which makes it possible to use WinRT in a way that is native to the language. For .NET developers, using WinRT is very similar to writing .NET code. Concepts such as constructors, properties, async development and many more are exactly the same when writing Metro style apps based on WinRT. We’ll see that further in this article.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image002[1]" alt="clip_image002[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image002%5B1%5D_381d7455-bb98-450f-92a5-c6b7287a9b30.png" width="609" height="437" /></p> <p>Note that XAML is the way to build up your UI when using either a managed language (C# or VB.NET) or C++. When choosing the JavaScript way, we can only use pure HTML/CSS, at this point, there’s no support for example to use something like Razor syntax.</p> <p>WinRT exposes quite a lot of functions to Metro style apps. A lot of things that we are used to doing by writing some .NET code is now covered by WinRT. Things like IO, service access and even XAML itself has now become a part of WinRT. In quite a few places though, including in XAML, you won’t even notice that you aren’t writing .NET code (but again, more on this later in this articles). The following image shows the functions covered by WinRT (this image comes from slides shown at BUILD).</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image004[1]" alt="clip_image004[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image004%5B1%5D_434e4713-b003-41f8-862b-3f235061fa45.png" width="609" height="405" /></p> <h2>WinRT architecture</h2> <p>Take a look at the image below. This schema gives an overview of the architecture of WinRT; we explain the different parts next.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image006[1]" alt="clip_image006[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image006%5B1%5D_5a5b65cf-0bdd-4a78-97e2-95fd646517c4.png" width="609" height="405" /></p> <p>At the very base, we have Windows. Directly on top of Windows, we have the core building blocks of WinRT. As mentioned above, WinRT contains quite a few things we’ll discover later, such as XAML, pickers (FilePicker), IO and storage…</p> <h3>Windows Metadata</h3> <p>The Windows Metadata is depicted on the left in the picture above. Windows Metadata (aka WinMD) refers to metadata files, similar to metadata for assemblies we have in .NET (a self-describing assembly). In WinRT, WinMD is conceptually the same: it describes what a WinRT component can do. It’s different in that it’s a separate file (whereas in .NET, metadata is included in the assembly itself). WinMD files are present on every installation of Windows 8 and they form the base of IntelliSense when writing Metro style apps in Visual Studio.</p> <p>To see the WinMD files, simply points your Windows Explorer to Windows –> System32 -> WinMetaData as shown below. Note that these *.winmd files only contain the metadata itself!</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image008[1]" alt="clip_image008[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image008%5B1%5D_11b3b0ec-71d8-4449-8a2e-4bd2fa05fa78.jpg" width="609" height="366" /></p> <p>We can even open these files with ILDASM and browse the code inside. Below, I have opened the Windows.Storage.Pickers metadata file. We can see all the methods and much more supported by this component. As you can see, there’s a definite influence by .NET on the way WinRT was built.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image010[1]" alt="clip_image010[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image010%5B1%5D_25ea2ecd-bfad-46ff-99ce-d50339bbf19c.jpg" width="417" height="529" /></p> <p>The Windows namespace refers to the fact that all WinRT classes are under the Windows.* namespace.</p> <h3>Language projections</h3> <p>We have briefly touched already on the language projection. WinRT is written in native (C++) code. Being native, the WinRT APIs would normally have to be called using interop code (COM). Most developers don’t like to write COM code; luckily for us Microsoft understood this. They didn’t give us the native APIs to work with. No, instead, we get language projections. Basically such a projection enables us to use the native components in a way that’s natural and familiar for the language. Microsoft isn’t forcing us to learn a new language: they simply “project” WinRT in languages we already have and know today. We’ll see some code soon that proves this!</p> <p>The Metro style apps we will write are built using WinRT components but using a managed language, C++ or JavaScript.</p> <h3>The runtime broker</h3> <p>Finally, the broker is responsible for checking if a Metro style app is declaring all its capabilities (such as accessing the Pictures library) and showing the user whether or not he/she permits this. We’ll see this broker further in this articles series again when we work with the webcam.</p> <h3>Being async</h3> <p>If you’ve watched some of the BUILD sessions online, you probably heard one of the speakers refer to the Windows 8 user experience being “Fast and Fluid”. Microsoft is clearly committed to performance with Windows 8. They want to user to have a responsive device, even on lower end devices. To achieve fast and fluid, we as developers need to break with a habit of the past: writing synchronous code and adopt the fact that we’ll have to focus on asynchronous code.</p> <p>This “being async” is baked into the WinRT platform. Every call that takes longer than 50ms is by default now async. Previously in Silverlight, calls to a service were already asynchronous. That very concept is now applied on a much wider scale throughout Windows and WinRT. This results in writing async code when for example accessing the file system.</p> <p>To anticipate on this, Microsoft introduced the “await” keyword in C#: this makes dealing with async calls in WinRT APIs much easier. Through the language projection, which makes WinRT feel familiar to the managed developer, we are able to use this keyword when writing Metro style apps. We’ll see in the code samples in the coming articles how this works.</p> <h2>What’s in WinRT </h2> <p>Now that we have a clearer understanding of WinRT, let’s take a look at what exactly there is available in WinRT. The following is a list of top-level namespaces in the WinRT API (developer preview):</p> <ul> <li>Windows.ApplicationModel </li> <li>Windows.Data </li> <li>Windows.Devices </li> <li>Windows.Foundation </li> <li>Windows.Globalization </li> <li>Windows.Graphics </li> <li>Windows.Management </li> <li>Windows.Media </li> <li>Windows.Networking </li> <li>Windows.Security </li> <li>Windows.Storage </li> <li>Windows.System </li> <li>Windows.UI[.Xaml] </li> <li>Windows.Web </li> </ul> <p>A lot of things that were previously covered by .NET are now moved into WinRT. For these functionalities, you will be using WinRT APIs in your code. When writing XAML and you’re using a Button control, you are no longer using the System.Windows.Controls namespace and the Button class that’s part of it. Instead, you are using the Button class which is now living in the Windows.UI.Xaml namespace, courtesy of WinRT.</p> <p>But what if you want to use something that’s part of .NET but isn’t covered in WinRT? Things like LINQ, threading… Aren’t they available anymore?</p> <p>The answer is: probably yes. I say probably because of the following. Microsoft adds a so-called Windows 8 Tailored Profile of .NET. The following image tries to clarify this concept. </p> <p>We have the huge .NET API. Silverlight’s API is a tailored profile. It’s basically a subset of .NET. The same goes for Windows Phone 7: it contains some APIs of the full .NET and some specific ones, not used in any other tailored profile.</p> <p>For Windows 8, there’s also a tailored profile available.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image012[1]" alt="clip_image012[1]" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image012%5B1%5D_fa77a918-1a84-43d9-b7f1-e5741a51cfd0.png" width="490" height="490" /></p> <p>In that tailored profile of Windows 8, the following APIs are available:</p> <ul> <li>System.Collections </li> <li>System.ComponentModel </li> <li>System.Diagnostics </li> <li>System.Dynamic </li> <li>System.Globalization </li> <li>System.IO </li> <li>System.Linq </li> <li>System.Net </li> <li>System.Numerics </li> <li>System.Reflection </li> <li>System.Resources </li> <li>System.Runtime </li> <li>System.Security </li> <li>System.ServiceModel </li> <li>System.Text </li> <li>System.Threading </li> <li>System.Xml </li> </ul> <p>Although the list is quite long, the tailored profile is in fact quite small. It’s even smaller currently than the Windows Phone one. As Metro-style apps are focused on the consumer side of things, the enterprise level stuff is not covered. There’s no Console support, ASP.NET integration, Entity Framework support… Keep this in mind when thinking of your first Metro-style app!</p> <h2>Summary</h2> <p>In this article, we’ve now deeply covered technical concepts surrounding the development of WinRT, setting the stage for writing Metro-style apps. And that’s exactly what we’ll be doing in the next articles of this series. Stay tuned for part 3!</p> <h2>About Gill Cleeren</h2> <p>Gill Cleeren is Microsoft Regional Director (<a href="http://www.theregion.com/">www.theregion.com</a>), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (<a href="http://www.ordina.be/">http://www.ordina.be/</a>). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (<a href="http://www.visug.be/">www.visug.be</a>), the largest .NET user group in Belgium. Gill recently published his first book: “<a href="https://www.packtpub.com/microsoft-silverlight-4-data-and-services-cookbook/book">Silverlight 4 Data and Services Cookbook</a>” (Packt Publishing). His second book, <a href="http://www.packtpub.com/microsoft-silverlight-5-data-and-services-cookbook/book">Silverlight 5 Data and Services Cookbook</a> will be released early 2012. You can find his blog at <a href="http://www.snowball.be/">www.snowball.be</a>. </p> <p>Twitter: @gillcleeren</p> http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx editorial@silverlightshow.net (Gill Cleeren ) http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx#comments http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-2-The-Windows-Runtime-WinRT.aspx Tue, 31 Jan 2012 00:37:06 GMT Using the Live SDK in Windows 8 XAML/C# Metro Applications <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx" data-count="horizontal" data-text="Reading @mbcrump's article 'Using the Live SDK in #Windows8 XAML/C# Metro Applications' #win8" data-url="http://slshow.net/zsh5cA">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <h3>Introduction</h3> <p>The Microsoft’s Live SDK (or commonly referred to as Live Connect), provides a set of controls and APIs that enables applications to integrate single sign-on (SSO) functionality using Windows Live ID. You can also use it to access data in SkyDrive, Hotmail, and Windows Live Messenger.</p> <div style="border:1px solid #dddddd;width: 200px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; margin-top: 5px; margin-right: 5px; margin-left: 10px; float: right; background-color: #f3f3f3; border-image: initial;"> <h3>Don't miss...</h3> <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px; list-style-type: circle;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx">Webinar recording: Introduction to XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/news/Free-SilverlightShow-Webinar-Metro-and-WinRT-for-the-Silverlight-WPF-Developer-.aspx">Webinar on Feb 2nd: Metro and WinRT for the Silverlight/WPF Developer</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> The library supports multiple platforms, including Windows Phone 7 Mango and Windows 8 Metro Style applications using either C#, Visual Basic or JavaScript.  In this article, we will build our first metro style application using the Live SDK and XAML/C#. <h3>Download the Bits</h3> <p>Let’s begin by downloading the following items:</p> <ul> <li>You will need to download the <a href="http://msdn.microsoft.com/en-us/windows/">Windows 8 Developer Preview</a> to follow along with this article. This will install Windows 8 along with the new Visual Studio 11 which is required to build Metro applications. </li> <li>Download the <a href="http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=28195">Live SDK v5.0</a> or higher - The Live SDK provides a set of controls and APIs that enable applications to integrate single sign-on (SSO) using Windows Live ID and to access data in SkyDrive, Hotmail, and Windows Live Messenger. </li> <li>Optional, but highly recommended - The <a href="http://code.msdn.microsoft.com/windowsapps/">Metro Style App Samples</a> which provides various sample metro applications for future reference. It is licensed for public use, so feel free to use it in your own applications. </li> <li>Optional, but recommended - Read the <a href="http://download.microsoft.com/download/1/E/4/1E455D53-C382-4A39-BA73-55413F183333/Windows_Developer_Preview-Windows8_guide.pdf">Windows 8 Developer Preview guide</a> to start learning about the features/functionality coming in Windows 8. </li> </ul> <h3> <br /> Signing into Windows 8 Using your Windows Live ID</h3> <p>One of the most important things to learn before building your first application that uses the Live SDK is the various ways to sign into your Windows 8 machine. <br /> <br /> You currently have two ways to sign into your Windows 8 machine and each way determines the prompts the users will receive when launching a application that uses the Live SDK. </p> <ol> <li>A Local Account – which stores all of the data regarding your profile on the local machine. <ul> <li>If you user is using this method, then they will get the prompt to sign in and to allow access. </li> </ul> </li> <li>A Windows Live ID – retrieves profile information directly from your Live ID and enables features such as roaming and easy sign-on to Microsoft services. <ul> <li>If you user is using this method, then they will only get the prompt to allow access.  </li> </ul> </li> </ol> <p>In this tutorial, we will be signing into <strong>Windows 8 using our Live ID</strong>. </p> <p>If you have already setup a “Local Account” then you can switch very easily by going to Control Panel –> Users then clicking on “Switch to a Windows Live ID” as shown below. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/__1_4.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="1" alt="1" src="http://www.silverlightshow.net/Storage/Users/mbcrump/__1_thumb_1.png" width="574" height="108" /></a></p> <p>You will then be prompted to enter your current password of the local account and log in using your Live ID username/password. If you don’t have one then you may sign up for one through this wizard. </p> <p>Immediately following you should receive an email similar to the one below: </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/___________2_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="2" alt="2" src="http://www.silverlightshow.net/Storage/Users/mbcrump/___________2_thumb.png" width="569" height="301" /></a></p> <p>If you click on the link to confirm your identity then a web browser will pop open and you will be greeted with “Manage Security Info”. This screen will list mobile devices, email address and trusted PC linked to your account. As we can see below that I have three Windows 8 machines linked to my account. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/__________3_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="3" alt="3" src="http://www.silverlightshow.net/Storage/Users/mbcrump/__________3_thumb.png" width="331" height="106" /></a></p> <p>You can also add a new trusted PC manually with the “Add New” link. To use this feature, you must access your account using Internet Explorer and have Windows Live Essentials installed.</p> <h3>Let’s Get Started</h3> <p>Now that we have the necessary tools to begin building a Metro Application using C#/XAML and we we have signed into Windows 8 using our Live ID, let’s begin. </p> <p>In this sample application, we are going to retrieve the following information from the users profile: </p> <ul> <li>Users First and Last Name </li> <li>What gender they are and what region they live in </li> <li>URL to their Live Profile </li> </ul> <p>As well as add a contact to their address book. </p> <p>Launch Visual Studio 11 Developer Preview and select <strong>Visual C#</strong> -> <strong>Windows Metro style</strong> –> <strong>Application</strong>. Give the project the name <strong>MyFirstLiveConnectApp</strong> and hit OK. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/_________4_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="4" alt="4" src="http://www.silverlightshow.net/Storage/Users/mbcrump/_________4_thumb.png" width="663" height="419" /></a></p> <h3>Adding the Live SDK References</h3> <p>In case you haven’t already, please download and install the <a href="http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=28195">Live SDK v5.0</a> before proceeding.  </p> <p>Once that is complete, we can add the references to our project by Right Clicking on References inside of Visual Studio 11 and selecting “Add Reference”. Next, you will need to select Windows –> Extension SDKs –> Live SDK then Add. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/_5_4.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="5" alt="5" src="http://www.silverlightshow.net/Storage/Users/mbcrump/_5_thumb_1.png" width="629" height="353" /></a></p> <h3>Registering the Application with Windows Live</h3> <p>Before we begin building this app, you need to register it with Windows Live.  You can register your app by going to the <a href="https://manage.dev.live.com/build">application management site</a> and following the instructions on the site.</p> <p>The only item that you want to pay special attention to is the <strong>Package Name</strong> in Step 3 as you will copy and paste that into your <strong>Application’s Package.appxmanifest</strong> file. (A walk-through is included in that site).</p> <p>If you don’t register your application and try to use Live services, then your user will be presented with the following error message. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/6_6.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="6" alt="6" src="http://www.silverlightshow.net/Storage/Users/mbcrump/6_thumb_2.png" width="469" height="114" /></a></p> <p>Once this process is complete you can view your registered applications <a href="https://manage.dev.live.com/Applications/Index">here</a>. This page will contain all the API settings needed to use the Live SDK in your projects. </p> <h3>Understanding what is under the hood…</h3> <p>When we select the C#/XAML Application template, Visual Studio 11 provides us with basic application structure. Before we begin building our own, it makes sense to spend a few minutes examining the XAML pages included in the existing structure.  </p> <ul> <li><strong>References – </strong>It is empty by default because Microsoft decided that all the WinRT assemblies are always referenced by default and they have no reason to display them. Any of your own referenced assemblies or third party references will be shown as in this case our Windows Live SDK is shown. </li> <li><strong>App.xaml</strong> is used by Metro applications (amongst other XAML technologies) to declare shared resources like brushes, various style objects etc. The code behind file of App.xaml is used to handle global application level events like OnLaunched and OnActivated. </li> <li><strong>MainPage.xaml</strong> contains the markup of what our user interface will look like once the application is executed. The default Metro MainPage.xaml file consists of a UserControl and a Grid. </li> <li><strong>Package.appxmanifest</strong> – Is basically an XML file, but if you double click it then you will notice four tab panels inside it (named: Application UI, Capabilities, Declarations and Packaging) </li> </ul> <h3> <br /> Back to Building a Simple User Interface</h3> <p>Here is a mock-up screen of what our app will look like: </p> <h3><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/_____8_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="8" alt="8" src="http://www.silverlightshow.net/Storage/Users/mbcrump/______8_thumb.png" width="556" height="271" /></a></h3> <p>As you can see we have 2 buttons: </p> <ol> <li>Windows Live Sign-In – Provided by the Live SDK and is used to log the user into the app to retrieve Live Services information. </li> <li>Create Contact – Just a regular button that will be used to create a contact in the users address book. </li> </ol> <p>On the left hand side you can see information retrieved by the Live SDK including first and last name, gender, location and live profile URL. </p> <p>Double click on your MainPage.xaml and replace the existing Grid with the code snippet provided below.</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Grid</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="LayoutRoot"</span> <span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="#FF0C0C0C"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Grid.ColumnDefinitions</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ColumnDefinition</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="251*"</span><span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ColumnDefinition</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="1116*"</span><span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">Grid.ColumnDefinitions</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">StackPanel</span> <span style="color: #ff0000;">Grid</span>.<span style="color: #ff0000;">ColumnSpan</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">live:SignInButton</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="btnLogIn"</span> <span style="color: #ff0000;">Scopes</span><span style="color: #0000ff;">="wl.signin wl.basic wl.contacts_create"</span><span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Button</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="btnCreateContact"</span> <span style="color: #ff0000;">Content</span><span style="color: #0000ff;">="Create Contact"</span> <span style="color: #ff0000;">Click</span><span style="color: #0000ff;">="btnCreateContact_Click"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="tbName"</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="600"</span> <span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="150"</span> <span style="color: #ff0000;">FontSize</span><span style="color: #0000ff;">="32"</span> <span style="color: #ff0000;">TextWrapping</span><span style="color: #0000ff;">="Wrap"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="tbGender"</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="600"</span> <span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="150"</span> <span style="color: #ff0000;">FontSize</span><span style="color: #0000ff;">="32"</span> <span style="color: #ff0000;">TextWrapping</span><span style="color: #0000ff;">="Wrap"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="tbLiveProfile"</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="600"</span> <span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="150"</span> <span style="color: #ff0000;">FontSize</span><span style="color: #0000ff;">="32"</span> <span style="color: #ff0000;">TextWrapping</span><span style="color: #0000ff;">="Wrap"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">TextBlock</span> <span style="color: #ff0000;">Name</span><span style="color: #0000ff;">="tbError"</span> <span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="Error Message"</span> <span style="color: #ff0000;">Width</span><span style="color: #0000ff;">="600"</span> <span style="color: #ff0000;">Height</span><span style="color: #0000ff;">="150"</span> <span style="color: #ff0000;">FontSize</span><span style="color: #0000ff;">="32"</span><span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>You will also want to make sure that your XML Namespaces for the Live SDK have been added to the page: </p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> xmlns:live="using:Microsoft.Live.Controls"</pre> <!--CRLF--></div> </div> <p><em>Note: You will get “Invalid Markup” with the XAML provided because we are still in the developer preview stage. It is ok to proceed. </em></p> <p>The only thing to really pay attention to here is the <a href="http://msdn.microsoft.com/en-us/library/hh243646.aspx">Scopes</a> listed in the <strong>SignInButton</strong>. As you see we have three scopes. </p> <ol> <li>wl.signin - Single sign-in behavior. With <em>single sign-in</em>, users who are already signed in to Live Connect are also signed in to your website. </li> <li>wl.basic - Read access to a user's basic profile info. Also enables read access to a user's list of contacts. </li> <li>wl.contacts_create - Creation of new contacts in the user's address book. </li> </ol> <p>The first two are core and the last is an extended scope. We need all three of these to complete the requirements listed in this sample application. </p> <p>This will give us our user interface, now we will just need to wire up the event handlers which I am going to split up into two sections for learning purposes. </p> <h3>Coding Time – Basic User Information</h3> <p>Let’s go ahead and add in functionality to retrieve basic user information from the Live SDK. </p> <p>First, add the proper namespaces and then the following code:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">using</span> Microsoft.Live;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">using</span> Microsoft.Live.Controls;</pre> <!--CRLF--></div> </div> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> LiveConnectClient liveClient;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">private</span> LiveConnectSession session;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">public</span> MainPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">this</span>.btnLogIn.SessionChanged += btnLogIn_OnSessionChanged;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> btnLogIn_OnSessionChanged(<span style="color: #0000ff;">object</span> sender, LiveConnectSessionChangedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #0000ff;">if</span> (e.Session != <span style="color: #0000ff;">null</span> && e.Status == LiveConnectSessionStatus.Connected)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;">this</span>.liveClient = <span style="color: #0000ff;">new</span> LiveConnectClient(e.Session);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> session = e.Session;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;">this</span>.liveClient.GetCompleted += OnGetCompleted;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <span style="color: #0000ff;">this</span>.liveClient.GetAsync(<span style="color: #006080;">"me"</span>, <span style="color: #0000ff;">null</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <span style="color: #0000ff;">else</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <span style="color: #0000ff;">this</span>.liveClient = <span style="color: #0000ff;">null</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> OnGetCompleted(<span style="color: #0000ff;">object</span> sender, LiveOperationCompletedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> { </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> <span style="color: #0000ff;">if</span> (e.Error == <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> dynamic result = e.Result;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> <span style="color: #0000ff;">this</span>.tbName.Text = <span style="color: #006080;">"Hello, "</span> + result.first_name + <span style="color: #006080;">" "</span> + result.last_name;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> <span style="color: #0000ff;">this</span>.tbGender.Text = <span style="color: #006080;">"You are a "</span> + result.gender + <span style="color: #006080;">" that lives in "</span> + result.locale + <span style="color: #006080;">"."</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> <span style="color: #0000ff;">this</span>.tbLiveProfile.Text = <span style="color: #006080;">"Your Live Profile can be found at: "</span> + result.link;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> <span style="color: #0000ff;">else</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum36" style="color: #606060;"> 36:</span> <span style="color: #0000ff;">this</span>.tbError.Text = e.Error.ToString();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum37" style="color: #606060;"> 37:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum38" style="color: #606060;"> 38:</span> }</pre> <!--CRLF--></div> </div> <p>The first thing that you will notice is that we are creating an event hander to handle the SessionChanged event. If we can determine that the session is valid then we create a new LiveConnectClient and pass the session to our LiveConnectSession. We finish up with adding an event handler on GetCompleted which will return the current users profile information and display them in our TextBlocks. Finally, we are outputting all errors to the tbError TextBlock. </p> <h3>Coding Time – Adding a new contact to the users Address Book</h3> <p>Let’s go ahead and add in functionality to add a new contact to the users address book from the Live SDK. </p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> btnCreateContact_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> LiveConnectClient createContact = <span style="color: #0000ff;">new</span> LiveConnectClient(session);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> var contact = <span style="color: #0000ff;">new</span> Dictionary<<span style="color: #0000ff;">string</span>, <span style="color: #0000ff;">object</span>>();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> contact.Add(<span style="color: #006080;">"first_name"</span>, <span style="color: #006080;">"Michael"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> contact.Add(<span style="color: #006080;">"last_name"</span>, <span style="color: #006080;">"Crump"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> createContact.PostCompleted +=</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;">new</span> EventHandler<LiveOperationCompletedEventArgs>(CreateContactProperties_PostCompleted);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> createContact.PostAsync(<span style="color: #006080;">"me/contacts"</span>, contact);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;">void</span> CreateContactProperties_PostCompleted(<span style="color: #0000ff;">object</span> sender, LiveOperationCompletedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;">if</span> (e.Error == <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> tbName.Text = <span style="color: #006080;">"Contact"</span> +</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> e.Result[<span style="color: #006080;">"first_name"</span>].ToString() + <span style="color: #006080;">" "</span> + e.Result[<span style="color: #006080;">"last_name"</span>].ToString() +</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <span style="color: #006080;">" created with ID "</span> +</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> e.Result[<span style="color: #006080;">"id"</span>].ToString();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> <span style="color: #0000ff;">else</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> tbError.Text = <span style="color: #006080;">"Error calling API: "</span> + e.Error.ToString();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> }</pre> <!--CRLF--></div> </div> <p>In this sample, we are creating a new <strong>LiveConnectClient</strong> by passing into it the existing session. Once that is complete, we create a Dictionary and add the users first_name and last_name to the dictionary. Finally, we create a PostCompleted event handler which will return the textblock with a success or an error. The last call is PostAsync which send a POST request to the specified Uri as an asynchronous operation.</p> <h3>Ready for Liftoff</h3> <p>Go ahead and build the application and run it. </p> <p>When you first hit the “Sign In” Button you will be presented with the following: </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/____7_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="7" alt="7" src="http://www.silverlightshow.net/Storage/Users/mbcrump/____7_thumb.png" width="504" height="429" /></a></p> <p><em>Note: After you accept this one time then you will not have to accept it again.</em> </p> <p>Notice that the application says it you allow access then it will view your profile and contact list. The application automatically knows which features it is using by the scopes defined earlier. </p> <p>Select “Yes” and then click the “Sign In Button” located on the right hand side of your screen and you should see your Live profile information as long as you have filled it out in Windows Live. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/____9_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="9" alt="9" src="http://www.silverlightshow.net/Storage/Users/mbcrump/____9_thumb.png" width="326" height="219" /></a></p> <p>Next, click on the Create Contact button and you should see the following: </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/____10_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="10" alt="10" src="http://www.silverlightshow.net/Storage/Users/mbcrump/____10_thumb.png" width="411" height="63" /></a></p> <p>You can now sign into your <a href="http://explore.live.com/">Windows Live</a> account and select “Contacts” under “Hotmail” and see the contact that you just created. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/____11_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="11" alt="11" src="http://www.silverlightshow.net/Storage/Users/mbcrump/____11_thumb.png" width="541" height="208" /></a></p> <p>Congratulations, you have now completed your first Metro application using XAML/C# that uses the Live SDK. </p> <h3>Conclusion</h3> <p>At this point, we have seen how you would create a Windows 8 Metro application using XAML/C# that retrieves and updates information from the Live SDK. Now that you are equipped with the basics of using the Live SDK, I encourage you to explore the Live SDK further as we have barely scratched the surface. I want to thank you for reading this article and if you ever have any questions feel free to contact me on the various sources listed below. I also wanted to thank SilverlightShow for giving me the opportunity to share this information with everyone. </p> <p>You can follow Michael on Twitter at <a href="http://www.twitter.com/mbcrump">mbcrump</a> or keep up with his blog by visiting <a href="http://michaelcrump.net/">michaelcrump.net</a>.</p> http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx editorial@silverlightshow.net (Michael Crump ) http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx#comments http://www.silverlightshow.net/items/Using-the-Live-SDK-in-Windows-8-XAML-C-Metro-Applications.aspx Mon, 30 Jan 2012 03:59:34 GMT Windows 8 and the future of XAML: Part 1: An overview of the Windows 8 platform <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx" data-count="horizontal" data-text="Reading @gillcleeren's article: Windows 8 & the future of XAML: An overview of the #Win8 platform" data-url="http://slshow.net/tw8fVY">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; margin-left: 10px; padding-top: 5px;"> <div style="text-align: center;"> <p style="text-align: center;"><strong>Is there a specific Win 8 topic you need covered in this series?<br /> </strong><strong><a href="http://www.silverlightshow.net/Forums/general-discussions/new-article-series-by-gill-cleeren--windows-8-and-the-future-of-xaml--any-additional-topics-you-need-covered-in-this-series.aspx" target="_self">Check out the currently planned TOC for the whole series</a>, and feel free to suggest more topics for inclusion.</strong></p> </div> </div> <h2> <br /> Introduction to the series</h2> <p>Welcome to this first part of a whole series on Windows 8 articles, which I’ll be writing over the coming weeks and months. It’s my goal in this series to introduce you to what we know at this point about Windows 8 and how we as (XAML) developers will need to adapt to the new platform. </p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx">Webinar recording: Introduction to XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData.aspx">Article series: Windows 8 XAML Metro Apps with OData</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx">Ebook: Windows 8 XAML Metro Apps with OData</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/win8_odata.aspx" target="_self"><img style="width: 107px; height: 150px;" alt="Ebook: Windows 8 XAML Metro Apps with OData" src="http://www.silverlightshow.net/Storage/Ebooks/win8_odata.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> Since you’re probably a XAML developer like I am, we are going to see things from a XAML point-of-view. In some of the upcoming articles, I’m going to describe you how you can leverage what you already know in XAML when Windows 8 will be ready. I’m also going to spend time looking at how you can convert existing Silverlight applications to Windows 8 Metro apps, so that they follow the rules of the OS. We will also be spending time of course on digging into the developer framework making the development on Windows 8 easy: Windows Runtime or shorter, WinRT. Finally, the series will close with a step-by-step guide on building a complete Windows 8 Metro-style application. <p>Now in this first part, we’ll focus on Windows 8 itself and the relation to Metro-style apps. We won’t be focusing on the development part yet; I just want to make sure that everyone is on board with the new OS itself as well as being able to place the terms Metro, Metro apps, WinRT etc.</p> <p>I hope you join me on this trip through the Windows platform of the future.</p> <p><em>Small note: in this articles, I try to refer to specific versions as little as possible, since I want the information to stay valid as much as humanly possible when Windows 8 will RTM. Therefore, you won’t find download links in these articles. Doing a small search will get you the downloads you need!</em></p> <h2>Part 1: An overview of the Windows 8 platform</h2> <p>To be honest, I’m writing this very article in the morning of January 1st, 2012… yes indeed, New Year’s Day 2012. And come to think of it, I couldn’t have chosen a better moment - at the beginning of a new year - to write about one of the biggest things awaiting us in that new year: the launch of a new version of the world’s most widely used operating, Windows 8. (Note that at the time of writing of this article, no announcements have been made by Microsoft on any launch date of the OS, but everyone assumes that we’ll see the OS in its final form on our machines sometime in 2012…). As mentioned, in this first article, I will take you through the most important concepts as well as show you some nice improvements.</p> <h3>Let’s BUILD… and all the panic</h3> <p>At Mix in the spring of 2011, Microsoft said that they were planning to hold a conference in September where they would show off Windows 8, mainly for developers. While many assumed this was going to be a new edition of PDC, Microsoft named the conference BUILD (www.buildwindows.com). In the months between Mix and Build, some early footage of Windows 8 was shown (http://www.youtube.com/watch?v=p92QfWOw88I), where we saw for the first time the Windows 8 Metro interface. This and next videos sparked a lot of rumors, announcing the death of Silverlight and XAML: some had totally misunderstood the context of the story and thought that HTML5 and JavaScript was going to become the only way of building applications for Windows 8.</p> <p>Nothing however could be further from the truth. When Microsoft showed Windows 8 at Build, it became clear that the HTML5/JavaScript combination was one way of building apps, but certainly not the only one. Managed developers who build their apps in .NET are going to be doing more or less the same when building apps for Windows 8, based on the same languages (C#, VB). Take a look at the next image, which I took from a slide deck from Build.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image002" alt="clip_image002" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image002_871dba3b-3de8-4500-bb81-70dc72a3027a.png" width="614" height="441" /></p> <p>As you can see, there’s basically two ways of building applications for Windows 8. The part on the right (Desktop Apps) is the same thing as we are doing today. This includes WinForms, ASP.NET, C++, WPF, Silverlight etc applications. Nothing is really changing here, apart from the fact that .NET is being updated to 4.5. This means new features to for example WPF. We aren’t going to focus on that a lot in this series, since as mentioned, not much new is to be discovered, things are staying the same. </p> <p>The big change is the left part, Metro style apps, which is essentially a new type of applications and a new way of building apps. HTML5/JavaScript is one way of building these apps; however, the combination XAML/C# (or XAML/VB) is going to be the way that most managed developers today are going to select. Note that below XAML/C#, a new layer is added, WinRT (aka Windows Runtime). In one sentence, WinRT will allow us to leverage the power of Windows to build Metro style apps using the language of our choice, be it C#, VB, C++ or JavaScript. Much more on WinRT in the next articles!</p> <h3>BUILD hardware and software announcements</h3> <p>At Build, Microsoft added another type of platform that they are targeting. Previously, we could develop applications for the web/browser or for the desktop. Web applications are traditionally built using ASP.NET/ASP.NET MVC or Silverlight. Optionally, a client-side library such as jQuery can be used here as well. When targeting the desktop, WPF or also Silverlight were viable solutions.</p> <p>Microsoft is now adding something in between here: they are now focusing on tablet devices as well. These devices as well as the software running on them is optimized for touch-based input. However, we’ll see that Metro applications should also be able to be controlled using the mouse and keyboard. In the image below, we can see Steven Sinofsky at the BUILD keynote with a touch-based tablet device, running Windows 8. Note Windows 8 running on regular PCs and notebooks as well: it’s not ONLY for tablet devices.</p> <p><img style="border:0px; border-image: initial; display: inline;" title="image" alt="image" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/image_826091a0-d260-45c4-8abb-e9192b518c20.png" width="971" height="514" /> </p> <p>To build Metro-apps today, Microsoft announced an Express edition of Visual Studio 11. At the point of writing, this is the only way of building Metro apps (vice-versa: being an Express edition, this version only supports building Metro apps; we can’t use it to build for example WPF applications). We will be using this version extensively in the upcoming articles. </p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image003" alt="clip_image003" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image003_f8a9a2d1-9150-4dd2-bca5-6e1aecdec807.png" width="551" height="386" /></p> <p>A new edition of the full-blown version of Visual Studio was also announced: this version supports .NET 4.5 and allows us to build any kind of application, including Silverlight 4 and 5. This version doesn’t require Windows 8 and can run on Windows 7 therefore as well.</p> <p>I’ve now referred to “Metro-style apps” several times already, although it may not be 100% clear what exactly is meant with the term “Metro-style apps”. To make this perfectly clear, let’s open Windows 8!</p> <h3>Exploring Windows 8 and Metro-style apps</h3> <p>Upon starting a Windows 8 installation for the first time, you arrive in the following environment. This is the Metro environment where Metro-style apps live.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image005" alt="clip_image005" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image005_eff3365c-6730-44c4-86a1-301628157ec0.png" width="609" height="458" /></p> <p>The rectangles we see here are “tiles” (we don’t say icons anymore). When tapping (or clicking if using a mouse) on one of them, we are launching the application behind it. Most tiles you can see in the above screenshot link to Metro-style apps: applications that run in this environment itself. </p> <p>But wait, what’s this icon, sorry, tile at the bottom left?</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image006" alt="clip_image006" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image006_9f80e08f-004c-4c67-9054-b6a3a7c1646a.png" width="289" height="183" /></p> <p>When opening this Desktop tile, we are brought to the traditional Desktop environment. </p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image008" alt="clip_image008" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image008_c2a9471a-d86d-4fc1-8fd7-da1555d182e7.png" width="609" height="458" /></p> <p>In this desktop mode, regular applications such as Office, WinZip, Google Chrome etc will run as they do now on Windows 7. Also, all the applications we wrote in .NET (or will write in .NET 4.5), will run here with nothing really different than before.</p> <p>So, with Windows 8, we can say that we have 2 environments where applications can run: in the desktop mode and in the Metro environment. No application can run in both environments. It’s not possible for a desktop application to run in the Metro environment. It’s also not possible for a Metro application (built with WinRT as we’ll see in further articles) to run in the desktop environment. There’s a clean separation between the two.</p> <p>Another way of thinking of this is the following. Although technically not correct, we can think of the Metro environment as a shell on top of the desktop mode which can in turn run Metro applications.</p> <p>The Metro environment is tightly linked to the desktop mode. In the current version, there’s no Start menu anymore in the desktop mode. When clicking on the Windows Orb button in the left button corner, we’re taken back to the Metro environment. So, one could say that the Metro environment is also an extended Start menu which is now capable of running applications. However, I don’t really support thinking of the Metro environment in this way.</p> <p>Let’s now look at some typical Metro-style applications.</p> <h4>Typical Metro-style apps</h4> <p>With the default installation, some (small) Metro-style applications, created by Microsoft, are installed by default. Let’s open for example the News app, shown below.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image010" alt="clip_image010" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image010_e5fbea7e-fb8b-4a7a-885d-220baa429e81.png" width="609" height="458" /></p> <p>Note that this is a full-screen screenshot, I haven’t cut off anything. Several things are strikingly different from traditional applications. For one thing, they are filling the screen by default. Content is important, not the chrome of the application. The application shows no menus or toolbars by default; it’s kept very simple and easy to use. The interface itself is also optimized for touch, but can be controlled with the mouse as well.</p> <p>When opening one of the titles, some details are shown about the post, as shown below.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image012" alt="clip_image012" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image012_19d31e44-ffdd-4fb0-8e22-33c8e82d7293.png" width="609" height="458" /></p> <p>Again, no toolbars and a very neat and clean interface, optimized for touch. </p> <p>But how can we now go back to the overview screen? If you’re using a touch-based device, simply swipe in from the top of the screen. If using a mouse, simply right-click. Both actions will result in a so-called Application Bar to be shown at the bottom of the screen. Using the only button in this bar, we can navigate back. The application bar is customizable and we’ll see how to do so in later articles. Readers with a WP7 background will immediately recognize the application bar as well.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image014" alt="clip_image014" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image014_165a4964-320f-4284-aee4-aa455839ff70.png" width="609" height="458" /></p> <p>Let’s open another application, the Memories application, shown below.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image016" alt="clip_image016" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image016_80e6a316-c1ac-4516-87d1-8d904811e1cb.png" width="609" height="458" /></p> <p>This application as well is a beautiful example of the Metro style being used. When opening an album, we get the details.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image018" alt="clip_image018" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image018_0e25e6e8-aba6-4f29-8b9c-a91656a17beb.png" width="609" height="458" /></p> <p>And we can edit content using the Application Bar as well.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image020" alt="clip_image020" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image020_8b419c95-d61c-4413-b9d4-474d7162413b.png" width="609" height="458" /></p> <h4>Internet Explorer in Metro</h4> <p>If you’ve taken a good look at the Metro environment screenshot, you may have noticed that there’s a tile for Internet Explorer there as well. Indeed, there’s a Metro version of IE available, again with the same characteristics as other Metro apps. This version of IE is optimized for the content so it’s not cluttered with tabs and toolbars.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image022" alt="clip_image022" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image022_70651c16-2574-4737-adbc-11633cd9436d.png" width="609" height="458" /></p> <p>This version however doesn’t support plug-ins, so it’s not possible to run Silverlight (or Flash) applications in this browser. To do so (and in line with what we said earlier), we need to go to the full browser in the desktop mode. There, a Silverlight application can run perfectly.</p> <p>It’s possible from the Metro IE to jump to the regular version, using the following button. This effectively means that if you arrive on a Silverlight site in the Metro version of IE, you can switch to the full version on the fly.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image023" alt="clip_image023" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image023_ff2a3416-3e03-4e83-bfb1-d4ba6bce7c85.png" width="172" height="185" /></p> <h4>The Metro control panel</h4> <p>Another nice example of the touch interface in Windows 8 Metro is the control panel.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image024" alt="clip_image024" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image024_d1ed54bd-adab-4ad5-ab41-0a4c9e46c6bf.png" width="132" height="139" /></p> <p>As can be seen from the screenshot below, the interface of this Metro control panel is optimized to be used using your fingers as input device. The control panel inside the Metro environment is specific to settings that influence the Metro environment itself. The regular control panel lives inside the Desktop mode and it gives us access to the regular settings, just like in Windows 7.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image026" alt="clip_image026" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image026_2ee10c1c-672d-429c-b29f-630023273138.png" width="609" height="458" /></p> <h4>More on the desktop mode</h4> <p>With all the novelties being added, one might get the idea that the desktop mode isn’t being changed at all. Well, luckily that isn’t true: there are some major improvements being done in the “regular” Windows environment as well. </p> <p>One area that’s getting an overhaul is the Windows Explorer itself. A ribbon is being added, known to millions of Office users already. Microsoft added some new actions directly to the ribbon. In the screenshot below, you can see the explorer ribbon.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image028" alt="clip_image028" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image028_3.png" width="609" height="461" /></p> <p>Just like in Office, the ribbon is context-sensitive: depending on your action or selection within the explorer window, one or more tabs might appear. In the screenshot below, you can see what happens if I select a picture.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image030" alt="clip_image030" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image030_4589668f-8e89-41ec-8785-f4617e3cf7d1.png" width="609" height="239" /></p> <p>The next screenshot shows what happens if we select a hard drive.</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image032" alt="clip_image032" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image032_307ae197-ec5c-4602-b3ee-aca30adf6432.png" width="609" height="210" /></p> <p>Another item that got an overhaul is the Task Manager. Below you can see a screenshot of the new Task Manager. Notice that it’s as if some Metro-sauce has been added over the old version of the Task Manager!</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image034" alt="clip_image034" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image034_d7bd39d1-95e4-4204-8266-3dff7816084c.png" width="609" height="556" /></p> <p>Take a look at the Processes tab. Notice anything in particular here?</p> <p><img style="display: inline; border-width: 0px;border-style: solid;" title="clip_image036" alt="clip_image036" src="http://www.silverlightshow.net/Storage/Users/gillcleeren/clip_image036_00011fef-0ab6-49b3-bfd0-aa992ad7e006.png" width="560" height="296" /></p> <p>The Metro-apps are shown in this list as well. However, they are in a suspended state. Again, for the WP7 developers, this may seem familiar with the application lifecycle we have in WP7. Indeed, in the Metro environment, applications can remain in memory without getting access to CPU cycles. In this case, they are in the suspended state. We’ll see more about the lifecycle of Metro applications later in this series as well!</p> <h4>Where will I be working?</h4> <p>A question I’ve received quite a few times while presenting about Windows 8 is “Will I be working in the Desktop Mode or in the Metro environment mostly”. Like so many things in life, the answer is here again: “It depends”.</p> <p>At this point, I reckon that if you’re working on a regular machine and you’re doing your daily job (be that working as a developer, writing in Word, making Excel sheets…), you’ll default to the Desktop Mode. If however, you’re working on a tablet, the Metro environment will suite your needs better.</p> <p>The answer to this question is however a difficult one, certainly at the time of writing where we don’t have a public beta yet. Therefore, this remains a “to be continued”!</p> <h3>Summary</h3> <p>In this first article, I’ve given you an overview of Windows 8, explaining you how Windows 8 contains 2 modes and shown you what exactly Metro applications are. This is just the tip of the iceberg (in fact, I think it’s even less!).</p> <p>In the following article, we’ll start our exploration of the Windows Runtime so stay tuned! </p> http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx editorial@silverlightshow.net (Gill Cleeren ) http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx#comments http://www.silverlightshow.net/items/Windows-8-and-the-future-of-XAML-Part-1-An-overview-of-the-Windows-8-platform.aspx Tue, 03 Jan 2012 23:59:00 GMT 10 Laps around Silverlight 5 (Part 10 of 10) <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-10-of-10.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-10-of-10.aspx" data-count="horizontal" data-text="Reading SilverlightShow article '10 Laps around Silverlight 5 (Part 10 of 10)' by @mbcrump #sl5" data-url="http://slshow.net/vtToOa">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-10-of-10.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; padding-top: 5px; text-align: center;"><em><strong>This article is sponsored by <a href="http://ads.silverlightshow.net/a.aspx?ZoneID=81&Task=Click&Mode=HTML&SiteID=1&PageID=41808" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=81&Task=Get&Mode=HTML&SiteID=1&PageID=41808" width="0" height="0" style="border-width: 0px;border-style: solid;" />Telerik RadControls for Silverlight</a>. For similarly awesome content check out <a href="http://ads.silverlightshow.net/a.aspx?ZoneID=82&Task=Click&Mode=HTML&SiteID=1&PageID=3019" target="_blank"> <img alt="" src="http://ads.silverlightshow.net/a.aspx?ZoneID=82&Task=Get&Mode=HTML&SiteID=1&PageID=3019" width="0" height="0" style="border-width: 0px;border-style: solid;" />Telerik XAMLflix</a>, your step-by-step guide to Telerik Silverlight and WPF controls. Get access to video tutorials, written tutorials, and tons of code! </strong></em></div> <p> <br /> To contact me directly please visit my blog at <a href="http://michaelcrump.net/">http://michaelcrump.net/</a> or through twitter at <a href="http://twitter.com/mbcrump">http://twitter.com/mbcrump</a>.</p> <div style="border:1px solid #dddddd;border-image: initial; padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; padding-top: 5px;"> <h3>More resources...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/news/Free-Silverlight-Show-Webinar-Introduction-to-XAML-Development-on-Windows-8.aspx">Recording of Webinar: XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/GetStarted.aspx">Get Started with Silverlight 4</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/silverlight_exam.aspx">'Getting Ready for Microsoft Silverlight Exam 70-506' Ebook </a></li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/silverlight_exam.aspx"><img style="border:0px solid; border-image: initial;" alt="Getting Ready for Microsoft Silverlight Exam 70-506: Ebook" src="http://www.silverlightshow.net/Storage/sl_exam_thumb_small.png" usemap="#rade_img_map_1291385581316" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> <p>This article is Part 10 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below. </p> To refresh your memory on what Silverlight is: <p>Microsoft Silverlight is an application framework for writing Rich Internet Applications. </p> The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux. <p>To recap what we learned in the previous section:</p> <ul> <li>We took a look at several new controls in Silverlight 5 including: Double and Triple click support and ComboBox Type-Ahead. </li> <li>We then took a deeper dive into the PivotViewer control as it is more complex than the others and provided additional links. </li> </ul> <p>In this article, I am going to discuss several new features that did not fit in any of the above categories.  We will discuss In-Browser HTML, PostScript and Tasks for TPL. Please review the Roadmap for the series before going any further.</p> <h3>The Roadmap for this Series</h3> <p>I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.</p> <p>1) <strong><a href="http://www.silverlightshow.net/items/Silverlight-5-Part-1-of-10.aspx">Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.</a></strong> </p> <p>2) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-2-of-10.aspx">Binding- Ancestor Relative Source Binding and Implicit Data Templates.</a></strong></p> <p>3) <strong></strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-3.aspx" target="_self"><strong>Graphics</strong> <strong>–XNA 3D API and Improved Graphics Stack</strong>.</a></p> <p>4) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-4-of-10.aspx">Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.</a></strong></p> <p>5) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-5-of-10.aspx">Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.</a></strong></p> <p>6) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-6-of-10.aspx">Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.</a></strong></p> <p>7) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-7-of-10.aspx">Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.</a></strong></p> <p>8) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-8-of-10.aspx">Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.</a></strong></p> <p>9) <strong><a href="http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-9-of-10.aspx">Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.</a></strong></p> <p>10) <strong>Other items <strong>[This post] </strong></strong>- In-Browser HTML, PostScript and Tasks for TPL.</p> <h3></h3> <h3>In-Browser HTML</h3> <p>In Silverlight 4, we could use the WebBrowser control only in an “Out-of-Browser” application. This has changed in Silverlight 5 as we can now use the WebBrowser control in the browser (IE). It will however require that you make a few changes to your system. Let’s get started: </p> <p>1)<strong> Update the registry</strong> – Locate the following keys:</p> <p>If you running on a 32 bit machine, </p> <p><strong>HKEY_LOCAL_MACHINE\Software\Microsoft\Silverlight\</strong></p> <p>and if you are running on a 64-bit machine, </p> <p><strong>HKEY_LOCAL_MACHINE\Software\Wow6432Node\Microsoft\Silverlight\</strong></p> <p>change the <strong>UpdateConsentMode</strong> from a 0 to 1. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/________1_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="1" alt="1" src="http://www.silverlightshow.net/Storage/Users/mbcrump/________1_thumb.png" width="627" height="282" /></a></p> <p>2) <strong>Sign the XAP File</strong> - Right click on the Silverlight application and go to properties. Choose <strong>Signing</strong> and check the checkbox<strong> Sign the .XAP file</strong>. Now click on the button <strong>Create Test Certificate</strong>. Enter any password that you want and hit the OK button. Now click on the <strong>More Details</strong> button.</p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/__________2_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="2" alt="2" src="http://www.silverlightshow.net/Storage/Users/mbcrump/__________2_thumb.png" width="544" height="350" /></a></p> <p>Click on the <strong>Install Certificate</strong> button. Clicking on the button brings up the <strong>Certificate Import wizard</strong>. Click on the <strong>Next</strong> button and choose Place all certificates in the following store. Click on the Browse button. This will show you a Certificate Store. Choose <strong>Trusted Publisher</strong> and finish the wizard. Now repeat the same step to install this certificate in <strong>Trusted Root Certification Authorities</strong>.</p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/3_4.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="3" alt="3" src="http://www.silverlightshow.net/Storage/Users/mbcrump/3_thumb_1.png" width="486" height="442" /></a></p> <p>3) <strong>Enable Out-of-Browser and Require elevated trust when running in-browser.</strong> Right click on the Silverlight application and go to properties. Place a checkmark in <strong>Enable Out-of-Browser</strong> and <strong>Require elevated trust when running in-browser.</strong></p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/________4_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="4" alt="4" src="http://www.silverlightshow.net/Storage/Users/mbcrump/________4_thumb.png" width="573" height="464" /></a></p> <p>Now let’s switch over to the MainPage.xaml and replace the Grid with the following code:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Grid</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="LayoutRoot"</span> <span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="White"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">WebBrowser</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="webBrowser"</span> <span style="color: #ff0000;">Source</span><span style="color: #0000ff;">="http://michaelcrump.net/"</span><span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">Grid</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>If we run our application now (using Internet Explorer), then we will see the WebBrowser control working inside of the browser.</p> <p><em>Note: This will not work in Chrome, Safari, others (Only Internet Explorer).</em></p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/______5_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="5" alt="5" src="http://www.silverlightshow.net/Storage/Users/mbcrump/______5_thumb.png" width="566" height="360" /></a></p> <p>You can also add html pages to your project and point the source to that file as well. </p> <h3>PostScript Vector Printing</h3> <p>In Silverlight 4, we had bitmap-based printing. This meant that every time a page was going to print that Silverlight 4 sent the bitmap representing the entire page to the printer. We quickly found out that this resulted in horrible performance for larger print jobs. Now in Silverlight 5 we have PostScript Vector printing. This provides us with a much faster solution. Let’s get started building a sample application that uses this features. </p> <p>Let’s switch over to the MainPage.xaml and replace the Grid with the following code:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">StackPanel</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="LayoutRoot"</span> <span style="color: #ff0000;">Background</span><span style="color: #0000ff;">="White"</span> <span style="color: #ff0000;">HorizontalAlignment</span><span style="color: #0000ff;">="Center"</span> <span style="color: #ff0000;">VerticalAlignment</span><span style="color: #0000ff;">="Center"</span><span style="color: #0000ff;">></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Button</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="basicVector"</span> <span style="color: #ff0000;">Click</span><span style="color: #0000ff;">="basicVector_Click"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">Button</span> <span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="forceVector"</span> <span style="color: #ff0000;">Click</span><span style="color: #0000ff;">="forceVector_Click"</span> <span style="color: #0000ff;">/></span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">></span></pre> <!--CRLF--></div> </div> <p>We can navigate over to our MainPage.xaml.cs file and add in the following code snippet for our button event handlers:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> basicVector_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> PrintDocument document = <span style="color: #0000ff;">new</span> PrintDocument();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> document.PrintPage += (s, ea) =></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> StackPanel stPanel = <span style="color: #0000ff;">new</span> StackPanel(); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">int</span> i = 0; i < 10; i++)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> TextBlock tb = <span style="color: #0000ff;">new</span> TextBlock();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> tb.Text = <span style="color: #006080;">"Basic Vector mode."</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> stPanel.Children.Add(tb);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> ea.PageVisual = stPanel;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> ea.HasMorePages = <span style="color: #0000ff;">true</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> };</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> document.Print(<span style="color: #006080;">"Basic Vector Demo"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> forceVector_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> PrintDocument document = <span style="color: #0000ff;">new</span> PrintDocument();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> document.PrintPage += (s, ea) =></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> StackPanel stPanel = <span style="color: #0000ff;">new</span> StackPanel();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> <span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">int</span> i = 0; i < 10; i++)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> TextBlock tb = <span style="color: #0000ff;">new</span> TextBlock();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum36" style="color: #606060;"> 36:</span> tb.Text = <span style="color: #006080;">"Forced Vector mode."</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum37" style="color: #606060;"> 37:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum38" style="color: #606060;"> 38:</span> stPanel.Children.Add(tb);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum39" style="color: #606060;"> 39:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum40" style="color: #606060;"> 40:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum41" style="color: #606060;"> 41:</span> ea.PageVisual = stPanel;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum42" style="color: #606060;"> 42:</span> ea.HasMorePages = <span style="color: #0000ff;">true</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum43" style="color: #606060;"> 43:</span> };</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum44" style="color: #606060;"> 44:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum45" style="color: #606060;"> 45:</span> PrinterFallbackSettings settings = <span style="color: #0000ff;">new</span> PrinterFallbackSettings();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum46" style="color: #606060;"> 46:</span> settings.ForceVector = <span style="color: #0000ff;">true</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum47" style="color: #606060;"> 47:</span> settings.OpacityThreshold = 0.7;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum48" style="color: #606060;"> 48:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum49" style="color: #606060;"> 49:</span> document.Print(<span style="color: #006080;">"Forced Vector Print"</span>, settings);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum50" style="color: #606060;"> 50:</span> }</pre> <!--CRLF--></div> </div> <p>In our first button, we have a basic PostScript Vector Printing job. We create a <strong>PrintDocument</strong> (which was also in SL4), then add a <strong>PrintPage</strong> with some basic text to it. We finally print the document using Vector printing with <strong>document.Print</strong>.</p> <p>In our second button, we do the same thing but we call <strong>PrinterFallbackSettings</strong> and force the print job to print in Vector mode. We can also set the Opacity value by calling <strong>OpacityThreshold</strong>. </p> <h3>Tasks Parallel Library (TPL)</h3> <p>In short, TPL is to simply asynchronous methods. Silverlight 5 does not include the full TPL but it does provide Tasks and it’s related factories. Which is exactly what you want! Let’s get started. </p> <p>We are going to use a sample XML file provided by Microsoft found <a href="http://msdn.microsoft.com/en-us/library/windows/desktop/ms762271(v=vs.85).aspx">here</a>. Go ahead and download it and add it to your Web Project with the name of books.xml. </p> <p>Next, Let’s go ahead and navigate over to our MainPage.xaml.cs file and add in the proper namespaces to use TPL. Next, we will add in the second code snippet:</p> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">using</span> System;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;">using</span> System.Linq;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">using</span> System.Net;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">using</span> System.Threading.Tasks;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;">using</span> System.Windows;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">using</span> System.Windows.Controls;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">using</span> System.Diagnostics;</pre> <!--CRLF--></div> </div> <div style="border:1px solid silver;border-image: initial; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">public</span> MainPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> Loaded += <span style="color: #0000ff;">new</span> RoutedEventHandler(MainPage_Loaded);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">void</span> MainPage_Loaded(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #0000ff;">string</span> uri = <span style="color: #006080;">"http://localhost:15863/books.xml"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> var request = HttpWebRequest.Create(uri);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> Task.Factory.FromAsync<WebResponse>(</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> request.BeginGetResponse, request.EndGetResponse, <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> .ContinueWith(</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> task =></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> var response = (HttpWebResponse)task.Result;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> Debug.WriteLine(<span style="color: #006080;">"Content Type: "</span> + response.ContentType);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> Debug.WriteLine(<span style="color: #006080;">"Content Length: "</span> + response.ContentLength);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> Debug.WriteLine(<span style="color: #006080;">"Method: "</span> + response.Method);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> Debug.WriteLine(<span style="color: #006080;">"Status Code: "</span> + response.StatusCode);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> Debug.WriteLine(<span style="color: #006080;">"Status Description: "</span> + response.StatusDescription); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> });</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> }</pre> <!--CRLF--></div> </div> <p><em>Note: You will need to change the localhost port in the above code sample before proceeding. </em></p> <p>Go ahead and run the application and then look at your Output window in VS2010. You should see the following information. </p> <p><a href="http://www.silverlightshow.net/Storage/Users/mbcrump/______6_2.png"><img style="border:0px; border-image: initial; background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" title="6" alt="6" src="http://www.silverlightshow.net/Storage/Users/mbcrump/______6_thumb.png" width="479" height="311" /></a></p> <p>The thing to note here is Task.Factory.FromAsync. This creates a Tasks that represents a pair of begin and end methods that conform to the Asynchronous Programming Model Pattern. </p> <h3>Conclusion</h3> <p>At this point, we have taken a dive into all of the new features of Silverlight 5. Now that you are equipped with a solid understanding of what Silverlight 5 has to offer, you can begin to use this in your own applications. I want to thank you for reading this series and if you ever have any questions feel free to contact me on the various sources listed below. I also wanted to thank <a href="http://www.silverlightshow.net/">SilverlightShow.Net</a> and <a href="http://www.telerik.com/">Telerik</a> for giving me the opportunity to share this information  with everyone. I hope that you enjoyed this series and if you To contact me directly please visit my blog at <a href="http://michaelcrump.net/">http://michaelcrump.net/</a> or through twitter at <a href="http://twitter.com/mbcrump">http://twitter.com/mbcrump</a>.</p> http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-10-of-10.aspx editorial@silverlightshow.net (Michael Crump ) http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-10-of-10.aspx#comments http://www.silverlightshow.net/items/10-Laps-around-Silverlight-5-Part-10-of-10.aspx Mon, 12 Dec 2011 21:50:15 GMT Windows 8 XAML Metro Apps with OData - Part 2 <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx" data-count="horizontal" data-text="Reading the article 'Win8 XAML Metro Apps with OData - Part 2' by @samidip" data-url="http://slshow.net/vbeH7T">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>So, you have heard the buzz about the brave new world of <em>Windows 8</em> from MSFT’s <em>BUILD</em> Conference! </p> <div style="border:1px solid #dddddd;padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx">Webinar recording: Introduction to XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Producing-and-Consuming-OData-in-a-Silverlight-and-Windows-Phone-7-application.aspx">Article series: Producing and Consuming OData in a Silverlight and WP7 application</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/odata_cloud.aspx">Samisip's Ebook 'OData & Cloud Augmentation of Windows Phone Apps':</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/odata_cloud.aspx"><img style="width: 107px; height: 150px;" alt="Producing and Consuming OData in a Silverlight and WP7 App Ebook" src="http://www.silverlightshow.net/Storage/Ebooks/odata_cloud.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> May be you even attended the wonderful SilverlightShow webinar about “<a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx" target="_blank">Getting Started with XAML Development in Windows 8</a>” by <a href="https://twitter.com/#!/gillcleeren" target="_blank">Gill Cleeren</a>. Ready to get your hands muddy? In this short 2-part article series, we talk about how to get started towards writing data-driven (specifically OData) Windows 8 Metro apps with XAML & C#. Here’s what we’ll cover: <ul> <li><strong></strong><a href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData.aspx" target="_self"><strong>Part 1</strong> – Handling of OData from our XAML Metro App [Consumption & Updates to OData source]</a></li> <li><strong>Part 2 – How to make your XAML App a well-behaved Windows 8 citizen [Artwork, Snapped Views, Contracts, Application Bar etc]</strong></li> </ul> <p> As always, the demo solution, along with all code samples is available for download through the link below:<br />  </p> <h4><a href="http://www.silverlightshow.net/Storage/Sources/TeamMetro.zip" target="_self">Download Source Code</a></h4> <h2> </h2> <h2>Introduction</h2> <p>At the BUILD Conference in August 2011, Microsoft launched Windows 8 .. the next iteration of Windows. It isn’t a forked world between desktop & mobile/tablet Operating Systems; rather “One OS to rule them all..” which runs on variety of form factors with touch-based interaction being a first-class citizen. We could obviously talk a lot about Windows 8; but for the sake of the length of this post, let me refer you to 2 valuable resources:</p> <ol> <li><em>BUILD</em> Website @ <a title="http://www.buildwindows.com/" href="http://www.buildwindows.com/">http://www.buildwindows.com/</a>. Great place to start would be the 5 Keynotes, followed by tons of recorded Session content. </li> <li><em>Windows 8 Developer Home</em> @ <a title="http://msdn.microsoft.com/en-us/windows/home" href="http://msdn.microsoft.com/en-us/windows/home">http://msdn.microsoft.com/en-us/windows/home</a>. On this site is a link to download the Windows 8 Developer Preview – the latest Windows 8 bits along with Development tools. Also, as you get into serious Windows 8 Metro development, the <a href="http://code.msdn.microsoft.com/windowsapps/" target="_blank">samples</a> from Microsoft & contributions from our fabulous community should be very valuable. </li> </ol> <p>In <a href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData.aspx">Part 1 of this article series</a>, we talked about how to get started with building a Windows 8 Metro App with XAML/C# and how to consume OData in our application. While we might have a functional data-driven application, we developers should strive to make our native applications feel at home in the target operating system. Windows 8 is Windows re-imagined with Metro UI, and as such, introduces some new paradigms that most Metro applications should adhere by. In this post, we talk about how to ensure our application does not produce a jarring UX for the Windows 8 user; in essence, how to make our application a well-behaved citizen in Window 8.</p> <h2>Prerequisites</h2> <p>To follow along or to try the Demo or build something similar yourself, you need the following:</p> <ol> <li>Windows 8 Developer Preview running “on the metal” on some laptop/tablet. </li> <li>Alternatively, you could also run Windows 8 in a VM (VirtualBox being the best fit at this time) or off a VHD. </li> <li>Visual Studio 11 included as a part of Windows 8 Developer Preview. At this point, the templates to build Metro Apps aren’t available outside the Windows 8 bits. </li> <li>Curiosity </li> </ol> <h2></h2> <h2> </h2> <h2>The Application Bar</h2> <p>Remember our UI to show/manipulate our list of Team members? Here it is again:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/_TeamList%20%20with%20App%20Bar_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="TeamList with App Bar" alt="TeamList with App Bar" src="http://www.silverlightshow.net/Storage/Users/samidip/_TeamList%20%20with%20App%20Bar_thumb.png" width="644" height="364" /></a></p> <p>You’ll notice that the main UI has been kept clean with minimal controls. You can obviously add much much more to utilize the real estate; but the point is, commonly used actions should be tucked away in what’s called the <em>Application Bar</em> at the bottom & also at the top. If you have a touch-enabled tablet or PC, you could get to the Application Bars in any Metro App by swiping a little from the top or bottom of the screen. If using Windows 8 in a traditional mouse/keyboard computer, we need to right-click in the App to bring up the Application Bars. </p> <p>Please note that these Application Bars are optional – you can add an Application Bar at the bottom, top, both or none, as per your App’s needs. Commonly used App functionality tucked away in Application Bars like this just makes your App sit well with the rest of the Windows 8 OS & utilizes the UX the end-users are already used to.</p> <p>Quick Trivia – Why do you think the Application Bar buttons are at either end & not at the center ?? The answer lies is some detailed research Microsoft conducted to figure out what portion of the tablet form-factor’s screen is most accessible with thumbs when holding the tablet in both hands. See the point now? <img style="border-style: none;" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/__wlEmoticon-smile_2.png" /></p> <p>So, let’s take a look at what we had to do to build our Application Bar. The round Metro-looking icons are nothing but regular buttons with click-handlers behind them. Here’s how we add the Application Bars to our <em>MainPage.xaml</em> UI:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <UserControl x:Class=<span style="color: #006080;">"TeamMetro.MainPage"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> xmlns=<span style="color: #006080;">"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> xmlns:x=<span style="color: #006080;">"http://schemas.microsoft.com/winfx/2006/xaml"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> xmlns:d=<span style="color: #006080;">"http://schemas.microsoft.com/expression/blend/2008"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> xmlns:mc=<span style="color: #006080;">"http://schemas.openxmlformats.org/markup-compatibility/2006"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> mc:Ignorable=<span style="color: #006080;">"d"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> d:DesignHeight=<span style="color: #006080;">"768"</span> d:DesignWidth=<span style="color: #006080;">"1366"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <!--Content--></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <Grid x:Name=<span style="color: #006080;">"LayoutRoot"</span> Background=<span style="color: #006080;">"Chocolate"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #008000;">// All the other content stuff ..</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <!--Application Bar--></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <ApplicationBar x:Name=<span style="color: #006080;">"BottomAppBar"</span> VerticalAlignment=<span style="color: #006080;">"Bottom"</span> Height=<span style="color: #006080;">"100"</span> Opacity=<span style="color: #006080;">".8"</span> IsPersistent=<span style="color: #006080;">"False"</span> DismissMode=<span style="color: #006080;">"LightDismiss"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <Grid></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <Grid.ColumnDefinitions></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <ColumnDefinition Width=<span style="color: #006080;">"*"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <ColumnDefinition Width=<span style="color: #006080;">"Auto"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> </Grid.ColumnDefinitions></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <StackPanel Grid.Column=<span style="color: #006080;">"0"</span> Orientation=<span style="color: #006080;">"Horizontal"</span> HorizontalAlignment=<span style="color: #006080;">"Left"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <Button Content=<span style="color: #006080;">"Edit"</span> Style=<span style="color: #006080;">"{StaticResource EditButtonStyle}"</span> Click=<span style="color: #006080;">"EditButton_Click"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> <Button Content=<span style="color: #006080;">"Delete"</span> Style=<span style="color: #006080;">"{StaticResource DeleteButtonStyle}"</span> Click=<span style="color: #006080;">"DeleteButton_Click"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <StackPanel Grid.Column=<span style="color: #006080;">"1"</span> Orientation=<span style="color: #006080;">"Horizontal"</span> HorizontalAlignment=<span style="color: #006080;">"Right"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> <Button Content=<span style="color: #006080;">"Add"</span> Style=<span style="color: #006080;">"{StaticResource AddButtonStyle}"</span> Click=<span style="color: #006080;">"AddButton_Click"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> <Button Content=<span style="color: #006080;">"Refresh"</span> Style=<span style="color: #006080;">"{StaticResource RefreshButtonStyle}"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> </Grid></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> </ApplicationBar></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> <ApplicationBar x:Name=<span style="color: #006080;">"TopAppBar"</span> VerticalAlignment=<span style="color: #006080;">"Top"</span> Height=<span style="color: #006080;">"100"</span> Opacity=<span style="color: #006080;">".8"</span> IsPersistent=<span style="color: #006080;">"False"</span> DismissMode=<span style="color: #006080;">"LightDismiss"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> <StackPanel Margin=<span style="color: #006080;">"20,0,0,0"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> <TextBlock x:Name=<span style="color: #006080;">"topBarText"</span> Text=<span style="color: #006080;">"You can add stuff here as well .."</span> FontSize=<span style="color: #006080;">"26"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum36" style="color: #606060;"> 36:</span> </ApplicationBar></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum37" style="color: #606060;"> 37:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum38" style="color: #606060;"> 38:</span> </Grid> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum39" style="color: #606060;"> 39:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum40" style="color: #606060;"> 40:</span> </UserControl></pre> <!--CRLF--></div> </div> <p>And here’s the button template defined in our <em>App.xaml</em> as a global resource. You could obviously have one template for all buttons and include any other styles you want re-used. If you overlook the story-board, each Application Bar is essentially an image icon inside an ellipse. Makes sense?</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <Application xmlns=<span style="color: #006080;">"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> xmlns:x=<span style="color: #006080;">"http://schemas.microsoft.com/winfx/2006/xaml"</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> x:Class=<span style="color: #006080;">"TeamMetro.App"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <Application.Resources></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <ResourceDictionary></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <Style x:Key=<span style="color: #006080;">"EditButtonStyle"</span> TargetType=<span style="color: #006080;">"Button"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <Setter Property=<span style="color: #006080;">"Background"</span> Value=<span style="color: #006080;">"Transparent"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <Setter Property=<span style="color: #006080;">"Foreground"</span> Value=<span style="color: #006080;">"White"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <Setter Property=<span style="color: #006080;">"BorderBrush"</span> Value=<span style="color: #006080;">"Transparent"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <Setter Property=<span style="color: #006080;">"FontFamily"</span> Value=<span style="color: #006080;">"Segoe UI"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <Setter Property=<span style="color: #006080;">"FontSize"</span> Value=<span style="color: #006080;">"9"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <Setter Property=<span style="color: #006080;">"Template"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <Setter.Value></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <ControlTemplate TargetType=<span style="color: #006080;">"Button"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <Grid></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <VisualStateManager.VisualStateGroups></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <VisualStateGroup x:Name=<span style="color: #006080;">"CommonStates"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <VisualState x:Name=<span style="color: #006080;">"Normal"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> <VisualState x:Name=<span style="color: #006080;">"MouseOver"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> <VisualState x:Name=<span style="color: #006080;">"Pressed"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> <Storyboard></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <ColorAnimation Duration=<span style="color: #006080;">"0"</span> To=<span style="color: #006080;">"White"</span> Storyboard.TargetProperty=<span style="color: #006080;">"(Ellipse.Fill).(SolidColorBrush.Color)"</span> Storyboard.TargetName=<span style="color: #006080;">"ButtonEllipse"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> <ColorAnimation Duration=<span style="color: #006080;">"0"</span> To=<span style="color: #006080;">"Black"</span> Storyboard.TargetProperty=<span style="color: #006080;">"(TextBlock.Foreground).(SolidColorBrush.Color)"</span> Storyboard.TargetName=<span style="color: #006080;">"Glyph"</span> /></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> </Storyboard></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> </VisualState></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> </VisualStateGroup></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum30" style="color: #606060;"> 30:</span> </VisualStateManager.VisualStateGroups></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum31" style="color: #606060;"> 31:</span> <StackPanel Orientation=<span style="color: #006080;">"Vertical"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum32" style="color: #606060;"> 32:</span> <Grid Margin=<span style="color: #006080;">"0,14,0,5"</span> ></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum33" style="color: #606060;"> 33:</span> <Ellipse x:Name=<span style="color: #006080;">"ButtonEllipse"</span> Height=<span style="color: #006080;">"40"</span> Width=<span style="color: #006080;">"40"</span> Fill=<span style="color: #006080;">"Transparent"</span> HorizontalAlignment=<span style="color: #006080;">"Center"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum34" style="color: #606060;"> 34:</span> Stroke=<span style="color: #006080;">"White"</span> StrokeThickness=<span style="color: #006080;">"2"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum35" style="color: #606060;"> 35:</span> <Image Source=<span style="color: #006080;">"/Images/appbar.edit.png"</span> HorizontalAlignment=<span style="color: #006080;">"Center"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum36" style="color: #606060;"> 36:</span> </Grid></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum37" style="color: #606060;"> 37:</span> <TextBlock Text=<span style="color: #006080;">"{TemplateBinding Content}"</span> HorizontalAlignment=<span style="color: #006080;">"Center"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum38" style="color: #606060;"> 38:</span> FontFamily=<span style="color: #006080;">"Segoe UI"</span> FontSize=<span style="color: #006080;">"12"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum39" style="color: #606060;"> 39:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum40" style="color: #606060;"> 40:</span> </Grid></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum41" style="color: #606060;"> 41:</span> </ControlTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum42" style="color: #606060;"> 42:</span> </Setter.Value></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum43" style="color: #606060;"> 43:</span> </Setter></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum44" style="color: #606060;"> 44:</span> </Style></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum45" style="color: #606060;"> 45:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum46" style="color: #606060;"> 46:</span> </ResourceDictionary></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum47" style="color: #606060;"> 47:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum48" style="color: #606060;"> 48:</span> </Application.Resources></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum49" style="color: #606060;"> 49:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum50" style="color: #606060;"> 50:</span> </Application></pre> <!--CRLF--></div> </div> <h2> </h2> <h2>UI Modes</h2> <p>Windows 8, being a hybrid OS supporting multiple form factors, will have enough hardware horsepower to support true multi-tasking even in Metro UI mode.. And the additional real estate offered by tablets form factors means that people should be allowed to run multiple applications side by side. Yes, you can do that, unlike the competition <img style="border-style: none;" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/__wlEmoticon-smile_2.png" /></p> <p>So, if are running Windows 8, try a few Metro Apps one after another .. and then swipe from left or hover mouse-cursor on left edge. What you should see pop-out is the last running application, which you can drag out onto the viewable area & also dock it. Accordingly, all Windows 8 Metro applications support three UI modes:</p> <ul> <li><strong>FullScreen</strong> – This is when the App has the full center-stage & nothing else is in the foreground. </li> <li><strong>Filled</strong> – This happens when a Metro App consumes about 75% of the screen real-estate and another App has been snapped to one side. </li> <li><strong>Snapped</strong> – This is the mode where the App in question is actually the one that has been snapped and has about 25% of screen real estate. </li> </ul> <p>It is important to note that supporting these modes is very highly recommended for Metro Apps, lest you do not care about the UX when users snap your App. So, we have seen how our Demo application looks in full-screen mode; here’s how it would be if another application was snapped to the side:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Filled_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Filled" alt="Filled" src="http://www.silverlightshow.net/Storage/Users/samidip/Filled_thumb.png" width="644" height="364" /></a></p> <p>And here’s how our App would look if snapped:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Snapped_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Snapped" alt="Snapped" src="http://www.silverlightshow.net/Storage/Users/samidip/Snapped_thumb.png" width="644" height="364" /></a></p> <p>So, let’s see what one has to do to support this snapping behavior. First up, in our application, we need to notified as when these layout changes happen so we can take appropriate action. So, let’s subscribe, as below:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #cc6633;">#region</span> <span style="color: #006080;">"Constructor"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">public</span> MainPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #008000;">// Subscribe to Layout changes.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> ApplicationLayout.GetForCurrentView().LayoutChanged += <span style="color: #0000ff;">new</span> TypedEventHandler<ApplicationLayout,ApplicationLayoutChangedEventArgs>(MainPage_LayoutChanged);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #008000;">// Other stuff.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #cc6633;">#endregion</span></pre> <!--CRLF--></div> </div> <p>Did you notice the <em>ApplicationLayout</em> object? Yeah, we subtly tap into a WinRT namespace called using <em>Windows.UI.ViewManagement</em> and trust the OS to inform us about layout changes in current view.</p> <p>And here’s how we respond to the change in Layout:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> MainPage_LayoutChanged(ApplicationLayout sender, ApplicationLayoutChangedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">if</span> (args.Layout == ApplicationLayoutState.Filled || args.Layout == ApplicationLayoutState.FullScreen)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;">this</span>.fullMode.Visibility = Windows.UI.Xaml.Visibility.Visible;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;">this</span>.snappedMode.Visibility = Windows.UI.Xaml.Visibility.Collapsed;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;">this</span>.BottomAppBar.Visibility = Windows.UI.Xaml.Visibility.Visible;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #0000ff;">this</span>.topBarText.Text = <span style="color: #006080;">"You can add stuff here as well .."</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (args.Layout == ApplicationLayoutState.Snapped)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #0000ff;">this</span>.fullMode.Visibility = Windows.UI.Xaml.Visibility.Collapsed;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;">this</span>.snappedMode.Visibility = Windows.UI.Xaml.Visibility.Visible;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;">this</span>.BottomAppBar.Visibility = Windows.UI.Xaml.Visibility.Collapsed;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <span style="color: #0000ff;">this</span>.topBarText.Text = <span style="color: #006080;">"Snapped Mode:"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> }</pre> <!--CRLF--></div> </div> <p>A few things happened .. so let’s dig in. For my demo application, I am not really limited in real estate in Filled mode .. so I treat that the same as in FullScreen mode. If however the App is snapped, we swap out controls for a more streamlined look. I chose to bind my results to 2 different ListBoxes in the UI that I toggle based on layout .. if you can have one Listbox & adjust through DataTemplates, that is totally desirable. So, here are my UI elements:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <StackPanel Background=<span style="color: #006080;">"Transparent"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span> x:Name=<span style="color: #006080;">"fullMode"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> <ListBox Name=<span style="color: #006080;">"fullTeamList"</span> Margin=<span style="color: #006080;">"40"</span> ItemsSource=<span style="color: #006080;">"{Binding WCFTeam}"</span> Foreground=<span style="color: #006080;">"Blue"</span> Background=<span style="color: #006080;">"Transparent"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <ListBox.ItemTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> <DataTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <StackPanel Margin=<span style="color: #006080;">"400,0,0,40"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span> Orientation=<span style="color: #006080;">"Horizontal"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> <Image Source=<span style="color: #006080;">"ninja.png"</span> Height=<span style="color: #006080;">"75"</span> Width=<span style="color: #006080;">"75"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <TextBlock Text=<span style="color: #006080;">"{Binding Name}"</span> Margin=<span style="color: #006080;">"10,0,0,0"</span> FontSize=<span style="color: #006080;">"26"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <TextBlock Text=<span style="color: #006080;">" -- aka "</span> FontSize=<span style="color: #006080;">"22"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <TextBlock Text=<span style="color: #006080;">"{Binding TwitterHandle}"</span> Margin=<span style="color: #006080;">"10,0,0,0"</span> FontSize=<span style="color: #006080;">"22"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> </DataTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> </ListBox.ItemTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> </ListBox></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <StackPanel Background=<span style="color: #006080;">"Transparent"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span> Width=<span style="color: #006080;">"320"</span> x:Name=<span style="color: #006080;">"snappedMode"</span> Visibility=<span style="color: #006080;">"Collapsed"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <ListBox Name=<span style="color: #006080;">"snappedTeamList"</span> Margin=<span style="color: #006080;">"5"</span> ItemsSource=<span style="color: #006080;">"{Binding WCFTeam}"</span> Foreground=<span style="color: #006080;">"Blue"</span> Background=<span style="color: #006080;">"Chocolate"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <ListBox.ItemTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <DataTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <StackPanel Margin=<span style="color: #006080;">"10,0,0,40"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span> Orientation=<span style="color: #006080;">"Horizontal"</span>> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> <TextBlock Text=<span style="color: #006080;">"{Binding Name}"</span> Margin=<span style="color: #006080;">"10,0,0,0"</span> FontSize=<span style="color: #006080;">"26"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> </DataTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> </ListBox.ItemTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> </ListBox></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> </StackPanel></pre> <!--CRLF--></div> </div> So, I chose to only display Team member names in Snapped mode and adjust the Application Bars accordingly. It is totally up to you & your application to decide on what information you want to display in Snapped mode .. I would guess people would go for either minimalistic views for social media type applications or dense views conveying a lot of information for sustained Snapped view usage. The point is this is totally customizable through the XAML UI .. so let’s make the most of it. <h2> </h2> <h2>Contracts</h2> <p>Windows 8 introduces this concept of <strong>Contracts</strong>, which can be thought of as System Interfaces. You may also think of them as Let-Us-Not-Reinvent-The-Wheel mechanisms. If your App needs to let the user share something through Social media, why would you write interface code to post to Twitter/Facebook when another application in the system already knows how to do that? This also results in a consistent UX and less clutter in Apps. This concept of Contracts, when expanded to most common tasks, and the powerful WinRT APIs does give the developer a lot of flexibility. While there are lots of Contracts (details found on doing MSDN searches), let’s look at a couple of contracts which should highly recommended for most Metro Apps.</p> <h4>Sharing</h4> <p>The Share contracts enforces a requester-listener pattern .. one application says “I need to share this”, while another says “I know how to do that”. The application which actually implements the Share contract need to know how to receive data from other applications through the OS and share it through whatever medium the application is built to use.</p> <p>For our demo application, we will not be actually implementing the Share contract; but do the much easier, frequently needed utilization of the Share pattern. What if we need to share some information about our Team members on social media .. can we get away with simply providing the data to share? Yes .. let’s see how.</p> <p>First, if you need your application to share some information, please please please (3 times’ the charm <img style="border-style: none;" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/__wlEmoticon-smile_2.png" />) do not add anything inside your App or the Application Bar to enable this. The key is consistency. You see, there are these shortcuts called <strong>Charms</strong> accessible to Windows 8 users. Set of quick access tasks accessible when touch-enabled user swipes from the right edge of screen or the mouse user hovers at the left lower corner. Here’s what the user sees:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Charms_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Charms" alt="Charms" src="http://www.silverlightshow.net/Storage/Users/samidip/Charms_thumb.png" width="644" height="364" /></a></p> <p>So, what happens when we have a selected Team member selected & which we wish to share, and then we hit the Share Charm. Well, something like this:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Share_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Share" alt="Share" src="http://www.silverlightshow.net/Storage/Users/samidip/Share_thumb.png" width="644" height="364" /></a></p> <p>What you see is the list of applications that have implemented the Share contracts .. in other words, declared to the OS that they can handle sharing of information from other Apps. Exactly, what we need! Now, let’s try <strong>TwitterRama</strong> which is a simple Twitter client for Windows 8 built by some very smart MSFT interns. This App clearly knows how to talk/post to Twitter .. so we may not need to integrate with Twitter API directly. Here’s what we get when we try to share through TwitterRama:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Sharing_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Sharing" alt="Sharing" src="http://www.silverlightshow.net/Storage/Users/samidip/Sharing_thumb.png" width="644" height="364" /></a></p> <p>Did you notice that our App passed data to TwitterRama? Let’s see how we do that .. first, let us sign up for sharing by allowing the OS interfaces to request data from our application:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">using</span> Windows.ApplicationModel.DataTransfer;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #cc6633;">#region</span> <span style="color: #006080;">"Constructor"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;">public</span> MainPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #008000;">// Sign up to Share.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.GetForCurrentView();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> dataTransferManager.DataRequested += <span style="color: #0000ff;">new</span> TypedEventHandler<DataTransferManager,DataRequestedEventArgs>(dataTransferManager_DataRequested);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> } </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> endregion</pre> <!--CRLF--></div> </div> <p>Next, when data is actually requested (this happens when the user hits the Share Charm), we get to respond to the event in our application and make up what data element to share. Here’s how:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">this</span>.fullTeamList.SelectedItem != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #008000;">// Set what to share.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> Team selectedMember = (Team)<span style="color: #0000ff;">this</span>.fullTeamList.SelectedItem;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">string</span> textToShare = <span style="color: #006080;">"Selected Team Member: "</span> + selectedMember.TwitterHandle;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> args.Request.Data.Properties.Title = <span style="color: #006080;">"Team Member Selection"</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> args.Request.Data.SetText(textToShare);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> }</pre> <!--CRLF--></div> </div> <p>That’s it .. easy to share, right? You may learn more about the Share contract from this BUILD sessions <a href="http://channel9.msdn.com/events/BUILD/BUILD2011/APP-405T" target="_blank">HERE</a>.</p> <h4>Implementing Contracts</h4> <p>Now, how would we go about actually implementing a Contract? Simple, most common ones are available in the “Add New Item” project wizard, as shown here:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Contracts_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Contracts" alt="Contracts" src="http://www.silverlightshow.net/Storage/Users/samidip/Contracts_thumb.png" width="644" height="444" /></a></p> <p>Now, let us say our application has some interesting data/files to search on. So, if we implement the <strong>Search</strong> contract, the end user may search for our application’s data directly from Windows Search, even if our application is not running. The user gets to see our App in the list for Search & search query parameters get passed directly into our application. Here’s how:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Search_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Search" alt="Search" src="http://www.silverlightshow.net/Storage/Users/samidip/Search_thumb.png" width="644" height="364" /></a></p> <p>If our application does implement the Search contract, the App Manifest file gets updated with <strong>Declarations</strong> .. others can be added from the same screen below along with implementation:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Declarations_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Declarations" alt="Declarations" src="http://www.silverlightshow.net/Storage/Users/samidip/Declarations_thumb.png" width="644" height="364" /></a></p> <p>So, now when the user searches contextually within your application from Windows Search, your application gets to respond showing a custom Search results view. The basics of this are added as a <em>SearchResultsPage.xaml </em>when we add the Search contract, as displayed below:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/App%20Context%20Search_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="App Context Search" alt="App Context Search" src="http://www.silverlightshow.net/Storage/Users/samidip/App%20Context%20Search_thumb.png" width="644" height="364" /></a></p> <p>And we get to respond to Search queries from the user within our view as follows:</p> <div style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;" id="codeSnippetWrapper"> <div style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;" id="codeSnippet"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">sealed</span> <span style="color: #0000ff;">partial</span> <span style="color: #0000ff;">class</span> SearchResultsPage</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">public</span> SearchResultsPage()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> InitializeComponent();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> Activate(SearchActivatedEventArgs args)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> var queryText = args.QueryText;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #008000;">// Application-specific searching logic.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #008000;">// Bind Search results to UI.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #008000;">// Display the results</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;">this</span>.PreviousContent = Window.Current.Content;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> Window.Current.Content = <span style="color: #0000ff;">this</span>;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> Window.Current.Activate();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> }</pre> <!--CRLF--></div> </div> <p>Much more details about the Search contract can be found in this BUILD session recording <a href="http://channel9.msdn.com/events/BUILD/BUILD2011/APP-406T" target="_blank">HERE</a>.</p> <h2>Artwork</h2> <p>Last but possibly the most important – let’s make nice looking Apps, shall we? Let’s take care of the user’s UX and they in turn, would take care of us developers, right? So, just like in Windows Phone, we developers need to put our Designer caps on, since graphics & artwork is of paramount importance.  Let us follow Metro design guidelines to make our application feel right at home in Windows 8. Here’s our demo application on start screen:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Start_2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;border-style: solid;" title="Start" alt="Start" src="http://www.silverlightshow.net/Storage/Users/samidip/Start_thumb.png" width="644" height="364" /></a></p> <p>Here are some things not to miss:</p> <ul> <li>Inviting App logo on Start screen </li> <li>Inviting & Contextual App logo in App Store, along with great screenshots & description </li> <li>Branded Splash screen if using one as your App launches </li> <li>Rich but minimal graphics & backgrounds in App </li> <li>Maintain consistency </li> <li>Enable Live Tiles with Push Notifications (topic for another post someday) </li> <li>Contract implementations through consistent UI to keep inviting your users back into the App </li> <li>Metro, Metro, Metro <img style="border-style: none;" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/__wlEmoticon-smile_2.png" /> </li> </ul> <p>Still waiting .. c’mon let’s get started! Let’s play a part in Windows re-imagined.</p> <h2>Summary</h2> <p>In this 2 part article, we talked about how to get started with Windows 8 Metro Apps with XAML/C# and we went on to consumption/updates of OData from a Windows 8 Metro application. In Part 1, we looked at a few techniques on how to do asynchronous programming in Windows 8 using the new C# 5.0 constructs of Async-Await. In Part 2, we talked about taking the first steps towards making your Metro Apps feel at home in the Windows 8 Operating System.</p> <p>I would appreciate any comments or concerns or how things could be done better. Thanks for reading & happy coding.</p> <p>Cheers <em>SilverlightShow</em>!</p> <h2></h2> <h2></h2> <h2>About the Author</h2> <p><img style="background-image: none; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; float: left; border-width: 0px;border-style: solid;" title="ActualPic_thumb1" alt="ActualPic_thumb1" src="http://www.silverlightshow.net/Storage/Users/samidip/ActualPic_thumb1_3.jpg" width="104" height="126" />Samidip Basu (<a href="http://twitter.com/#!/samidip">@samidip</a>) is a technologist & gadget-lover working as a Manager & Solutions Lead for Sogeti out of the Columbus Unit. Having worked on WP7 since CTP days, he now spends much of his time in spreading the word to discover the full potential of the Windows Phone platform & cloud-based mobile solutions in general. He passionately runs the Central Ohio Windows Phone User Group (<a href="http://cowpug.org/">http://cowpug.org/</a>), labors in M3 Conf (<a href="http://m3conf.com/">http://m3conf.com/</a>/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at <a href="http://samidipbasu.com/">http://samidipbasu.com/</a><a href="http://samidipbasu.com/">.</a></p> http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx editorial@silverlightshow.net (Samidip Basu ) http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx#comments http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx Thu, 08 Dec 2011 10:57:00 GMT Windows 8 XAML Metro Apps with OData - Part 1 <table width="20"> <tbody> <tr> <td> <div class="fb-like" data-show-faces="true" data-send="false" data-href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData.aspx" data-font="segoe ui" data-layout="button_count"></div> </td> <td><a href="https://twitter.com/share" class="twitter-share-button" data-via="silverlightshow" data-counturl="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData.aspx" data-count="horizontal" data-text="Reading the article 'Win8 XAML Metro Apps with OData - Part 1' by @samidip" data-url="http://slshow.net/tJIMTd">Tweet</a></td> <td><g:plusone size="medium" href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData.aspx"></g:plusone> </td> <td> </td> </tr> </tbody> </table> <p>So, you have heard the buzz about the brave new world of <em>Windows 8</em> from MSFT’s <em>BUILD</em> Conference! May be you even attended the wonderful SilverlightShow webinar about “<a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx" target="_blank">Getting Started with XAML Development in Windows 8</a>” by <a href="https://twitter.com/#!/gillcleeren" target="_blank">Gill Cleeren</a>. </p> <div style="border:1px solid #dddddd;padding-bottom: 5px; background-color: #f3f3f3; margin-top: 5px; padding-left: 10px; width: 200px; float: right; margin-left: 10px; margin-right: 5px; padding-top: 5px;"> <h3>Don't miss...</h3> <ul style="list-style-type: circle; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 20px; font-size: 12px;"> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/video/Recording-of-Webinar-Introduction-to-XAML-Development-on-Windows-8-by-Gill-Cleeren.aspx">Webinar recording: Introduction to XAML Development on Windows 8</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/items/Producing-and-Consuming-OData-in-a-Silverlight-and-Windows-Phone-7-application.aspx">Article series: Producing and Consuming OData in a Silverlight and WP7 application</a> </li> <li style="padding-bottom: 5px;"><a href="http://www.silverlightshow.net/ebooks/odata_cloud.aspx">Samisip's Ebook 'OData & Cloud Augmentation of Windows Phone Apps':</a> </li> </ul> <p style="padding-bottom: 5px; text-align: center;"><a href="http://www.silverlightshow.net/ebooks/odata_cloud.aspx"><img style="width: 107px; height: 150px;" alt="Producing and Consuming OData in a Silverlight and WP7 App Ebook" src="http://www.silverlightshow.net/Storage/Ebooks/odata_cloud.png" /></a></p> <p style="font-size: 12px;">     <a href="http://www.silverlightshow.net/ebooks.aspx">All SilverlightShow Ebooks</a> <img alt="" src="http://www.silverlightshow.net/Storage/arrow-content.jpg" /></p> </div> Ready to get your hands muddy? In this short 2-part article series, we talk about how to get started towards writing data-driven (specifically OData) Windows 8 Metro apps with XAML & C#. Here’s what we’ll cover: <p> </p> <ul> <li><strong>Part 1 – Handling of OData from our XAML Metro App [Consumption & Updates to OData source]</strong></li> <li><strong></strong><a href="http://www.silverlightshow.net/items/Windows-8-XAML-Metro-Apps-with-OData-Part-2.aspx" target="_self"><strong>Part 2</strong> – How to make your XAML App a well-behaved Windows 8 citizen [Artwork, Snapped Views, Contracts, Application Bar etc]</a></li> </ul> <p>As always, the demo solution, along with all code samples is available for download through the link below:</p> <a href="http://www.silverlightshow.net/Storage/Sources/TeamMetro.zip"> <h4>Download Source Code</h4> </a> <p> </p> <h2>Introduction</h2> <p>At the BUILD Conference in August 2011, Microsoft launched Windows 8 .. the next iteration of Windows. It isn’t a forked world between desktop & mobile/tablet Operating Systems; rather “One OS to rule them all..” which runs on variety of form factors with touch-based interaction being a first-class citizen. </p> We could obviously talk a lot about Windows 8; but for the sake of the length of this blog post, let me refer you to 2 valuable resources: <p> </p> <ol> <li><em>BUILD</em> Website @ <a href="http://www.buildwindows.com/" title="http://www.buildwindows.com/">http://www.buildwindows.com/</a>. Great place to start would be the 5 Keynotes, followed by tons of recorded Session content. </li> <li><em>Windows 8 Developer Home</em> @ <a href="http://msdn.microsoft.com/en-us/windows/home" title="http://msdn.microsoft.com/en-us/windows/home">http://msdn.microsoft.com/en-us/windows/home</a>. On this site is a link to download the Windows 8 Developer Preview – the latest Windows 8 bits along with Development tools. Also, as you get into serious Windows 8 Metro development, the <a href="http://code.msdn.microsoft.com/windowsapps/" target="_blank">samples</a> from Microsoft & contributions from our fabulous community should be very valuable. </li> </ol> <p>Also, check out the overall technology stack in Windows 8 below: [Source: Doug Seven’s <a href="http://dougseven.com/2011/09/15/a-bad-picture-is-worth-a-thousand-long-discussions/" target="_blank">Post</a>]</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Windows%208%20Stack_2.png"><img width="644" height="364" title="Windows 8 Stack" style="border:0px solid; background-image: none; display: inline;" alt="Windows 8 Stack" src="http://www.silverlightshow.net/Storage/Users/samidip/Windows%208%20Stack_thumb.png" /></a></p> <p>A lot has been written in the past few months about Win RT & the development stack in Windows 8 .. simple web searches should get us lots of resources. For this article & the demo app, we will stick to the managed world of XAML UI & C# code running on .NET 4.5 on top of Win RT. There might be some rough edges .. but we are all trying to learn, right? <img class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/_wlEmoticon-smile_2.png" /></p> <ol></ol> <h2>Prerequisites</h2> <p>To follow along or to try the Demo or build something similar yourself, you need the following:</p> <ol> <li>Windows 8 Developer Preview running “on the metal” on some laptop/tablet. </li> <li>Alternatively, you could also run Windows 8 in a VM (VirtualBox being the best fit at this time) or off a VHD. </li> <li>Visual Studio 11 included as a part of Windows 8 Developer Preview. At this point, the templates to build Metro Apps aren’t available outside the Windows 8 bits. </li> <li>Curiosity </li> </ol> <p> </p> <h2>The Data</h2> <p>Let’s try building a data-driven Metro App, shall we? For Demo purposes, I’m going to use a simple relational DB called “<em>Demo</em>” hosted in SQL Azure with just one table called “<em>Team</em>”, as shown below with schema/data:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/DataTable_2.png"><img width="644" height="351" title="DataTable" style="border:0px solid; background-image: none; display: inline;" alt="DataTable" src="http://www.silverlightshow.net/Storage/Users/samidip/DataTable_thumb.png" /></a></p> <p>So essentially, we want to keep track of Team Members with Names & TwitterHandles. How can we get this data easily into a Windows 8 Metro App? Why off course, <em><strong>OData</strong></em> !!</p> <p>You may learn more about OData from <a href="http://www.odata.org/" title="http://www.odata.org/">http://www.odata.org/</a>. I already have an OData Service built on top of our DB to expose the Team table data as an OData feed for consumption. Need to expose your data as OData? – Check out Michael Crump’s great series on <a href="http://www.silverlightshow.net/items/Producing-and-Consuming-OData-in-a-Silverlight-and-Windows-Phone-7-application.aspx" target="_blank">Producing & Consuming OData in Silverlight & Windows Phone Applications</a>. </p> <p>Also, remember my article on <a href="http://www.silverlightshow.net/items/Connecting-Azure-Windows-Phone-through-OData.aspx" target="_blank">Connecting Azure & Windows Phone through OData</a> ? In that article, we talked about consuming OData from the same SQL Azure DB Table & also easily performing CRUD operations against data source through OData from a Windows Phone application. So essentially, we want to take the Windows Phone Demo application handling OData & port it over to being a Windows 8 Metro App in XAML & C#. You’ll soon realize that while we have to accommodate the UI having a lot more real estate in Windows 8, a lot of the coding artifacts are very similar or can be reused in the Windows 8 world with minor changes. If you have done Windows Phone Development, you should feel right at home in doing XAML Metro Apps!</p> <p>So, here’s the OData service endpoint which provides access to our Table data in AtomPub (default) or JSon format: </p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/OData%20Service_2.png"><img width="644" height="351" title="OData Service" style="border:0px solid; background-image: none; display: inline;" alt="OData Service" src="http://www.silverlightshow.net/Storage/Users/samidip/OData%20Service_thumb.png" /></a></p> <h2>The Metro App</h2> <p>So, now that we have a data source & an OData service on top of it exposing the data, let’s see how we may consume it in a Windows 8 Metro App. Let’s fire up Visual Studio 11 & make our appropriate selections as below:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Project%20Template_2.png"><img width="644" height="447" title="Project Template" style="border:0px solid; background-image: none; display: inline;" alt="Project Template" src="http://www.silverlightshow.net/Storage/Users/samidip/Project%20Template_thumb.png" /></a></p> <p>The above selection gets us into a mode for building Metro Apps with XAML UI & C# code in a managed runtime. Just like in Windows Phone, the templates provided are your friends, as they get us a long way towards achieving Metro UI look & feel in our applications. For our demo, we shall choose to start with an empty application canvas & focus on fetching data into our app.</p> <p>Now, since we have an OData service, it’ll be nice to Add a Service Reference to the service in our project so that we know the backend entities & can refer to them in code. Ouch – too soon <img class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/_wlEmoticon-smile_2.png" /> The automatic proxy building against an OData service by adding a Service Reference isn’t quite ready in the Windows 8 tooling yet! So, we revert to the old-school way of adding our service reference into the project:</p> <pre><em><code>DataSvcUtil.exe /uri:Your_OData_Endpoint/out:TeamModel.cs /Version:2.0 /DataServiceCollection</code></em></pre> <p> </p> <p>As you could see, we used the DataSvcUtil tool (tucked away in your .NET Framework folder) to generate a proxy class which has all the entity bindings .. now we could simply drop the generated file into our project. Our project structure looks something like this .. the “Package.appxmanifest” file quite simply houses all your App configuration:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Project%20Stucture.png"><img width="304" height="389" title="Project Stucture" style="border:0px solid; background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" alt="Project Stucture" src="http://www.silverlightshow.net/Storage/Users/samidip/Project%20Stucture_thumb.png" /></a></p> <h2>The UI</h2> <p>Don’t you wish you were working with a Team where every member is a Ninja? Well, let’s say that’s the case & we shall shoot for our Metro App UI to be something simple, like this:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/Team%20List_2.png"><img width="644" height="364" title="Team List" style="border:0px solid; background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" alt="Team List" src="http://www.silverlightshow.net/Storage/Users/samidip/Team%20List_thumb.png" /></a></p> <p>The above screenshot is our Demo app running in the normal full-screen immersive UI mode. Notice how it is completely Chrome-free & puts content first.  Just because we can clutter the UI with all kinds of controls, doesn’t mean that we should, right?</p> <p>So, in our app, there is one & only XAML page that does the above rendering, that being <em>MainPage.xaml</em>. Here’s the XAML that drives the UI:</p> <div id="codeSnippetWrapper" style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;"> <div id="codeSnippet" style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <UserControl x:Class=<span style="color: #006080;">"TeamMetro.MainPage"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> xmlns=<span style="color: #006080;">"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> xmlns:x=<span style="color: #006080;">"http://schemas.microsoft.com/winfx/2006/xaml"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> xmlns:d=<span style="color: #006080;">"http://schemas.microsoft.com/expression/blend/2008"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> xmlns:mc=<span style="color: #006080;">"http://schemas.openxmlformats.org/markup-compatibility/2006"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> mc:Ignorable=<span style="color: #006080;">"d"</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> d:DesignHeight=<span style="color: #006080;">"768"</span> d:DesignWidth=<span style="color: #006080;">"1366"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> <!--Content--></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <Grid x:Name=<span style="color: #006080;">"LayoutRoot"</span> Background=<span style="color: #006080;">"Chocolate"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <StackPanel Background=<span style="color: #006080;">"Transparent"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span> x:Name=<span style="color: #006080;">"fullMode"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <ListBox Name=<span style="color: #006080;">"fullTeamList"</span> Margin=<span style="color: #006080;">"40"</span> ItemsSource=<span style="color: #006080;">"{Binding WCFTeam}"</span> Foreground=<span style="color: #006080;">"Blue"</span> Background=<span style="color: #006080;">"Transparent"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <ListBox.ItemTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <DataTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> <StackPanel Margin=<span style="color: #006080;">"400,0,0,40"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span> Orientation=<span style="color: #006080;">"Horizontal"</span>></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> <Image Source=<span style="color: #006080;">"ninja.png"</span> Height=<span style="color: #006080;">"75"</span> Width=<span style="color: #006080;">"75"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <TextBlock Text=<span style="color: #006080;">"{Binding Name}"</span> Margin=<span style="color: #006080;">"10,0,0,0"</span> FontSize=<span style="color: #006080;">"26"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> <TextBlock Text=<span style="color: #006080;">" -- aka "</span> FontSize=<span style="color: #006080;">"22"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <TextBlock Text=<span style="color: #006080;">"{Binding TwitterHandle}"</span> Margin=<span style="color: #006080;">"10,0,0,0"</span> FontSize=<span style="color: #006080;">"22"</span> VerticalAlignment=<span style="color: #006080;">"Center"</span>/></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span> </DataTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> </ListBox.ItemTemplate></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> </ListBox></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> </StackPanel></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> </Grid> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> </UserControl></pre> <!--CRLF--></div> </div> <p>So, we essentially defined a ListBox & we are expecting it to be bound to some collection of Team members with appropriate property values. Did you notice that except for a few namespaces, the XAML markup is very similar to what we are used to seeing in Windows Phone & Silverlight applications? This is what should make you feel right at home .. there are off course, some Windows 8 specific UI controls, which can cover in a subsequent blog post. </p> <p>Another point to note is that the XAML markup for Windows 8 Metro apps can be borrowed to a large extent if you have existing Windows Phone or Silverlight applications. In fact, if you have a a Windows Phone app in the Marketplace and simply want to port to over to the Windows 8 App Store, there are a fixed set of guidelines to do so, as explained <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465136(v=VS.85).aspx" target="_blank">here</a>. However, we might need to be wary of a plain port-over & the UX of our Metro apps, since the Windows 8 tablet form factor will have substantially more real estate, which should absolutely be utilized. In our demo app, you see a simple list of data items consuming OData; while ok for a demo (see I excuse myself <img class="wlEmoticon wlEmoticon-smile" style="border-style: none;" alt="Smile" src="http://www.silverlightshow.net/Storage/Users/samidip/_wlEmoticon-smile_2.png" />), you ideally want to provide your users with a richer experience.</p> <h2>Fetching the Data</h2> <p>Now, this will be very interesting. One of the buzz terms with Windows Phone/Silverlight and now heavily so with Windows 8 is “<em>fast & fluid</em>” – which essentially means that your App may be doing some expensive operation; but to the end user interacting through Touch, it should always seem responsive. Asynchronous Programming is certainly not new & Windows Phone development very much enforces that; however, it may be a little painful at times, specially if you are marshaling data between threads or writing callback after callback.</p> <p>Win RT enforces that any operation that might take more than 50 ms be done asynchronously, and this off course, extends to every web request our app might make. So, we are looking to fetch the OData feed asynchronously without blocking the UI thread.</p> <p>Now, C# 5.0 running on .NET 4.5 framework tries to make it easy for us developers to do asynchronous programming through <em><strong>Async-Await</strong></em> patterns, so that we can get around not writing callback after callback  or have to deal with thread marshaling. This however is a wider topic than this post – so please allow me to point you to some resources that should help understand this better:</p> <ul> <li><a href="http://msdn.microsoft.com/en-us/library/hh191443(v=VS.110).aspx">http://msdn.microsoft.com/en-us/library/hh191443(v=VS.110).aspx</a> </li> <li><a href="http://msdn.microsoft.com/en-us/vstudio/async.aspx">http://msdn.microsoft.com/en-us/vstudio/async.aspx</a> </li> <li><a href="http://msdn.microsoft.com/en-us/magazine/hh456402.aspx">http://msdn.microsoft.com/en-us/magazine/hh456402.aspx</a> </li> </ul> <p>I was intrigued about Asynchrony and wrote a lengthy post; if interested, you’ll find it <a href="http://samidipbasu.com/2011/10/10/asynchrony-for-the-wpsilverlight-developer/" target="_blank">HERE</a>. So, let’s look at a few ways we can fetch data:</p> <h5>The Pure HTTP Way</h5> <p>In this approach, we make a basic HTTP Get call to our OData service endpoint & fetch data as Atom. This is simple, but we would have to manually parse the response to pluck out the data contents for binding to UI. Here’s some sample code .. watch the use of async-await to achieve asynchrony:</p> <div id="codeSnippetWrapper" style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;"> <div id="codeSnippet" style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> LoadTeamThruXML()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #008000;">// Get Atom over HTTP.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> var client = <span style="color: #0000ff;">new</span> HttpClient();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> Uri teamDataURI = <span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"Your_OData_Endpoint"</span>);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">try</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> HttpResponseMessage response = await client.GetAsync(teamDataURI);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;">string</span> xmlResponse = response.Content.ReadAsString();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> XDocument xDoc = XDocument.Parse(xmlResponse);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #008000;">// Do appropriate parsing.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #008000;">// LINQ to XML.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> IEnumerable<Team> teamCollection = from teamMember <span style="color: #0000ff;">in</span> xDoc.Descendants(<span style="color: #006080;">"Entry"</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> select <span style="color: #0000ff;">new</span> Team</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> Name = teamMember.Element(<span style="color: #006080;">"Name"</span>).ToString(),</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> TwitterHandle = teamMember.Element(<span style="color: #006080;">"TwitterHandle"</span>).ToString()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> };</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum22" style="color: #606060;"> 22:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum23" style="color: #606060;"> 23:</span> <span style="color: #008000;">// Bind to UI.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum24" style="color: #606060;"> 24:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum25" style="color: #606060;"> 25:</span> <span style="color: #0000ff;">catch</span> (Exception ex)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum26" style="color: #606060;"> 26:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum27" style="color: #606060;"> 27:</span> <span style="color: #008000;">// Oopsie</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum28" style="color: #606060;"> 28:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum29" style="color: #606060;"> 29:</span> }</pre> <!--CRLF--></div> </div> <h5>The Threaded Way</h5> <p>One important aspect about Asynchrony is that it does not always mean multi-threading, as in parallelism. All the goodness of the <em>Task Parallel Library</em> is now built in and as we await on a <em>Task</em>, the underlying implementation may or may not spin up a new thread based on computing cycles needed. The point is, you should not have to care as a developer. However, if using <em>Task.Factory</em>, you are essentially carrying out synchronous operations on a worker thread without blocking the UI. So, here’s another way to fetch data .. notice how we can return a strongly-typed collection of <em>Team</em> members:</p> <div id="codeSnippetWrapper" style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;"> <div id="codeSnippet" style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> LoadTeamThruOData()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> var client = <span style="color: #0000ff;">new</span> Demo(<span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"Your_OData_Endpoint"</span>));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> var results = await Task<IEnumerable<Team>>.Factory.StartNew(() => FetchOData());</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #008000;">// This fires only after we have a response back. </span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;">this</span>.ParseAndBindData(results);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;">private</span> IEnumerable<Team> FetchOData()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> Demo client = <span style="color: #0000ff;">new</span> Demo(<span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"Your_OData_Endpoint"</span>));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;">return</span> client.Teams.Execute();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> }</pre> <!--CRLF--></div> </div> <h5>Wrapped APM Way</h5> <p>Asynchronous Programming Model (<em>APM</em>) is the traditional way of doing asynchrony through <em>BeginXX/EndXX</em> patterns; but this lead us to write a lot of callbacks. In the new world, APM calls can be wrapped inside an Async-Await pattern to make asynchronous requests. Let’s look at some code:</p> <div id="codeSnippetWrapper" style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;"> <div id="codeSnippet" style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> async <span style="color: #0000ff;">void</span> LoadTeamThruOData()</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> var client = <span style="color: #0000ff;">new</span> Demo(<span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"Your_OData_Endpoint"</span>));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> var results = await Task<IEnumerable<Team>>.Factory.FromAsync(client.Teams.BeginExecute(AnotherEndContinuation, client), ContinuationDelegate);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #008000;">// This fires only after we have a response back. </span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;">this</span>.ParseAndBindData(results);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> Func<IAsyncResult, IEnumerable<Team>> ContinuationDelegate = EndContinuation;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">static</span> IEnumerable<Team> EndContinuation(IAsyncResult result)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> Demo client = (Demo)result.AsyncState; </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #0000ff;">return</span> client.Teams.EndExecute(result);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">static</span> <span style="color: #0000ff;">void</span> AnotherEndContinuation(IAsyncResult result)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum19" style="color: #606060;"> 19:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum20" style="color: #606060;"> 20:</span> <span style="color: #008000;">// Do nothing here.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum21" style="color: #606060;"> 21:</span> }</pre> <!--CRLF--></div> </div> <p>Now, the above code might look a little clunky, but the wrapping of the APM methods can be done through an Extension method to make reuse easier. Eventually with future updates, if we have a method <em>Foo</em> in our custom WCF Service, proxy integration should generate three method endpoints – <em>BeginFoo</em>, <em>EndFoo</em> & <em>FooAsync</em>. It is the last that we shall use comfortably with Async-Await patterns. </p> <h2></h2> <h2></h2> <h2>Data Updates?</h2> <p>So, by now we know how to fetch OData into a Windows 8 Metro app using XAML/C# and bind the results to a simple list. But what if we wanted to perform updates against the data source? That is absolutely possible since we are dealing with an OData service here. Unless blocked at the service side, OData will support full CRUD operations through the <em>DataServiceContext</em> & <em>DataServiceCollection</em> classes.</p> <p>Now, let’s think about the UI for second. Just because we can put buttons & controls for data updates all over, doesn’t mean that we should. Common tasks should be presented in a minimalist fashion & accessible when needed. Accordingly, we revert to using the Windows 8 Metro Application Bar to add some metro buttons for allowing data manipulation. Let’s shoot for a UI like below .. we shall talk more about the Application Bar in the next article:</p> <p><a href="http://www.silverlightshow.net/Storage/Users/samidip/TeamList%20%20with%20App%20Bar_2.png"><img width="644" height="364" title="TeamList with App Bar" style="border:0px solid; background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" alt="TeamList with App Bar" src="http://www.silverlightshow.net/Storage/Users/samidip/TeamList%20%20with%20App%20Bar_thumb.png" /></a></p> <p>So, what happens when the user hits the Application Bar buttons? Simple – just like in Windows Phone, you can have event handlers assigned to each. Let’s see how we may delete a record & have it reflected in the OData data source, that is our Table data in SQL Azure. Here’s some code:</p> <div id="codeSnippetWrapper" style="border:1px solid silver;padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'courier new', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; padding-top: 4px; text-align: left;"> <div id="codeSnippet" style="padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px; text-align: left;border-style: none;"> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> DeleteButton_Click(<span style="color: #0000ff;">object</span> sender, RoutedEventArgs e)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum2" style="color: #606060;"> 2:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">this</span>.fullTeamList.SelectedItem != <span style="color: #0000ff;">null</span>)</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum4" style="color: #606060;"> 4:</span> {</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum5" style="color: #606060;"> 5:</span> Team selectedTeamMember = (Team)<span style="color: #0000ff;">this</span>.fullTeamList.SelectedItem;</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum6" style="color: #606060;"> 6:</span> </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #008000;">// LINQ to Context.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum8" style="color: #606060;"> 8:</span> var client = <span style="color: #0000ff;">new</span> Demo(<span style="color: #0000ff;">new</span> Uri(<span style="color: #006080;">"Your_OData_Endpoint"</span>));</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum9" style="color: #606060;"> 9:</span> var teamMemberToDelete = (from TeamMember <span style="color: #0000ff;">in</span> client.Teams</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #0000ff;">where</span> TeamMember.Name == selectedTeamMember.Name</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum11" style="color: #606060;"> 11:</span> select TeamMember).First();</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum12" style="color: #606060;"> 12:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #008000;">// Delete backend entity.</span></pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum14" style="color: #606060;"> 14:</span> client.DeleteObject(teamMemberToDelete);</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum15" style="color: #606060;"> 15:</span> client.BeginSaveChanges(<span style="color: #0000ff;">new</span> AsyncCallback(SaveDoneCB), client); </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum16" style="color: #606060;"> 16:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum17" style="color: #606060;"> 17:</span> }</pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;border-style: none;"><span id="lnum18" style="color: #606060;"> 18:</span>  </pre> <!--CRLF--> <pre style="text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: white; margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'courier new', courier, monospace; direction: ltr; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; padding-top: 0px;borde