Tim Heuer

FeedReader is a web part for Microsoft SharePoint server products (MOSS and WSS).  It’s purpose is to aggregate more than one feed in a single web part.  The built-in XML and RSS web parts for SharePoint only allow one feed by default.  feedreader can support Atom or RSS feeds.  Please report any issues as a Work Item on the project.  Source code is also available on the project site under a very permissive license.

Thanks for using feedreader!

This work is licensed under a Creative Commons Attribution By license.

Sharing Knowledge.  That was the theme of the Øredev conference held this past week in Malmö, Sweden.  I was invited this year to participate in this conference in the Scandanavian area to speak on Silverlight technologies.  I am very humbled to have been invited.  This was truly a great conference and let me tell you my impressions.

I’ve attended Microsoft’s PDC, TechEd, VSLive, DevConnections, etc.  I’ve got most of them all under my belt (as an attendee).  They are all good in their own regard.  The ones that are most interesting, however, are those that have an intensity about them and a collaboration among the other attendees who may or may not know each other.  That is what I felt at Øredev this past week.  This was the ultimate “code camp” which brought together a ton of different technology conversations in the setting of a large conference.  There was representation from both technology and practices: .NET, Java, project management, user experience, Agile/Scrum methodologies, mobile development, etc., etc.  You name it, it was there.

Along with Beatriz Stollnitz (Costa), I spoke on Silverlight, specifically accessing data and writing custom controls.  After each session we were invited to dig deeper with any attendees who wanted in a “chalk talk” setting, which I did and was able to get some good feedback to take back to a few teams at Microsoft.  After each time I presented, I was presented with a “thank you” certificate on behalf of the conference, which represented a donation to UNICEF.  The conference decided to ensure that the technical community in that area give back to a cause that needed assistance.  At the end of the conference, representatives of UNICEF were presented with a donation of around 200,000 SEK from the Øredev conference.  Very nice.

At the beginning of the conference, the city hosting us, Malmö, invited the speakers to attend a nice dinner at the city hall with the deputy mayor.  I personally thought it was very cool of the city to be involved and a classy act on their behalf (and the conference organizers).

What made Øredev special to me was the sincerity of learning and diversity in attendees.  Generally, even at the local code camps I’ve attended, there always seems to be this animosity between technology experts.  Not here.  In fact I spent an hour talking with an engineer from the JavaFX team about what they are doing, seeing some of their thoughts and learning about what essentially amounts to a competitive platform for the area I work in.  There was no “ours is better” moments in that conversation.  In fact he also mentioned that he’d not really paid attention to Silverlight until this week and is impressed with some of what he saw.  People from Google were there showing Android and getting people excited about that (and they brought it on a few different devices other than what I think is the ugly G1 form factor).  It was a perfect environment for learning together about different things and having open conversations about the technology, and as well as what we as software engineers can do to help create better software and innovate more in what we are already doing.

One cool logistic thing I liked about the conference was removing the long form evaluation concept for speakers.  Instead of relying on people to go to a web site after the fact and enter in an evaluation (which is very hard to collect and usually yields an incredibly low ratio of those who attend sessions actually filling out feedback), each attendee of every session was asked to “vote” on their way out of the room.  There were 3 stacks of cards: Red, Yellow, Green.  You pick the one that fit your impression of the session and put it in the bucket.  This removes the negative marks from the speaker for things like “couldn’t hear, chairs squeeky (which they were), too cold” and so on.  Those type of feedback are needed and still collected by the various delegates that are mingling with the crowd throughout the week.  I wish every conference I went to simplified down to this!

Of the other cool things, I was able to get a demonstration of Strangeloop Network’s AS1000 appliance for ASP.NET applications.  I spent time talking with Richard Campbell and understanding what it does and then proceeded to actually see the effective results in action.  Holy crap it was cool.  If you want better overall performance of your site to our users, you owe it to yourself to check it out.  I’m trying to convince my manager now that we need one!

It was also very fun to meet Linus, Chris, George, Magnus and Michael who all had a part in organizing the conference either as a speaker, track lead, and Michael as one of the main organizers with Emily.  Magnus had invited some people to his flat at the beginning of the conference, but jetlag was evil on me and I didn’t make it…I heard it was a blast as well.  Having dinner with Ted “The Dude” Neward watching him trying to survive a 600gr steak was also a great night in Sweden.  I was able to stay through the weekend and hang out with Richard and Carl and Glenn Block in Copenhagen touring the city and having some great conversations (or at least I think they were).

Overall, hanging out with smart and fun people and participating in this conference was a really exciting time.  If you are close to the area, it is a not-miss conference in my opinion, so mark your calendars for next year.  I hope that I might be invited back in the future.

So thank you to Linus, Magnus, Emily and Michael for inviting me to participate and making it special.  I think the show was a success and your region should be very proud of this conference!  Great job to all!

At PDC the WPF Tookit was made available which provides several new controls to WPF to help bring even more compatibility to the WPF and Silverlight story.  The new controls were the DatePicker, Calendar, DataGrid and the VisualStateManager concept to WPF.  Ribbon controls were also provided to the WPF Toolkit, but are not covered here.

With the introduction of this toolkit, developers now have a way to get some even more common XAML code-base between projects.

Let’s take a look at a very simple example of both UI and code sharing with WPF and Silverlight.  Here’s the simple scenario.  I’m going to use a common “Customer” class that I want to use in both a WPF and Silverlight implementation.  Since there is no binary compatibility for Silverlight and WPF, I’m going to maintain source-level compatibility.  In order to do this, I’m going to create a Silverlight Class Library project and implement my Customer class in that…here’s my simple customer class:

   1: namespace SilverlightClassLibrary1
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span> {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> Customer</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>         <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> FirstName { get; set; }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>         <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> LastName { get; set; }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">public</span> <span style="color: #0000ff">int</span> CustomerId { get; set; }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>         <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> CustomerLevel { get; set; }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>         <span style="color: #0000ff">public</span> DateTime Birthdate { get; set; }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>         <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> ObservableCollection&lt;Customer&gt; GetCustomerData()</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>         {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>             ObservableCollection&lt;Customer&gt; ppl = <span style="color: #0000ff">new</span> ObservableCollection&lt;Customer&gt;();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  15:</span>             ppl.Add(<span style="color: #0000ff">new</span> Customer() { FirstName = <span style="color: #006080">"Tim"</span>, LastName = <span style="color: #006080">"Heuer"</span>, CustomerId = 1, CustomerLevel = <span style="color: #006080">"Platinum"</span>, Birthdate = Convert.ToDateTime(<span style="color: #006080">"9/18/1965"</span>) });</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  16:</span>             ppl.Add(<span style="color: #0000ff">new</span> Customer() { FirstName = <span style="color: #006080">"Ray"</span>, LastName = <span style="color: #006080">"Ozzie"</span>, CustomerId = 1, CustomerLevel = <span style="color: #006080">"Gold"</span>, Birthdate = Convert.ToDateTime(<span style="color: #006080">"1/12/1960"</span>) });</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  17:</span>             ppl.Add(<span style="color: #0000ff">new</span> Customer() { FirstName = <span style="color: #006080">"Bill"</span>, LastName = <span style="color: #006080">"Gates"</span>, CustomerId = 1, CustomerLevel = <span style="color: #006080">"Silver"</span>, Birthdate = Convert.ToDateTime(<span style="color: #006080">"12/1/1976"</span>) });</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  18:</span>             ppl.Add(<span style="color: #0000ff">new</span> Customer() { FirstName = <span style="color: #006080">"Bart"</span>, LastName = <span style="color: #006080">"Simpson"</span>, CustomerId = 1, CustomerLevel = <span style="color: #006080">"Tin"</span>, Birthdate = Convert.ToDateTime(<span style="color: #006080">"7/4/1985"</span>) });</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  19:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  20:</span>             <span style="color: #0000ff">return</span> ppl;</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  21:</span>         }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  22:</span>     }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  23:</span> }</pre>

Now in my Silverlight project and my WPF application I add a linked file to that class library for customer.  While not binary compat, each time I compile I’m using a common source compat for both projects.  Here’s what my project structure looks like and you can see the linked source code:

Now in my WPF project I want to add some XAML, so I’ll add this to my Window1.xaml:

   1: <Window x:Class="WpfSampler.Window1"
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #ff0000">xmlns:x</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml"</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     <span style="color: #ff0000">xmlns:controls</span><span style="color: #0000ff">="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     <span style="color: #ff0000">Title</span><span style="color: #0000ff">="Window1"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="600"</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="600"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">Orientation</span><span style="color: #0000ff">="Vertical"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="15"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="Your Birthdate"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">controls:DatePicker</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="MyBirthdate"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="9/18/1965"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">controls:DataGrid</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="400"</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="CustomerList"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Window</span><span style="color: #0000ff">&gt;</span></pre>

Here’s the backing source code logic for the simple windows app:

   1: namespace WpfSampler
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span> {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #008000">/// &lt;summary&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     <span style="color: #008000">/// Interaction logic for Window1.xaml</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     <span style="color: #008000">/// &lt;/summary&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">partial</span> <span style="color: #0000ff">class</span> Window1 : Window</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>     {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>         <span style="color: #0000ff">public</span> Window1()</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>         {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>             InitializeComponent();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>             Loaded += <span style="color: #0000ff">new</span> RoutedEventHandler(Window1_Loaded);</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>         }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span>         <span style="color: #0000ff">void</span> Window1_Loaded(<span style="color: #0000ff">object</span> sender, RoutedEventArgs e)</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  15:</span>         {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  16:</span>             CustomerList.ItemsSource = SilverlightClassLibrary1.Customer.GetCustomerData();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  17:</span>         }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  18:</span>     }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  19:</span> }</pre>

Now in my Silverlight project I’m going to paste the same XAML:

   1: <UserControl x:Class="SilverlightWpfReuse.Page"
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #ff0000">xmlns:x</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml"</span> </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     <span style="color: #ff0000">xmlns:controls</span><span style="color: #0000ff">="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     <span style="color: #ff0000">xmlns:data</span><span style="color: #0000ff">="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>     <span style="color: #ff0000">Width</span><span style="color: #0000ff">="600"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="600"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>     <span style="color: #0000ff">&lt;</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">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">Orientation</span><span style="color: #0000ff">="Vertical"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="15"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="Your Birthdate"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">controls:DatePicker</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="MyBirthdate"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="9/18/1965"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">data:DataGrid</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="400"</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="CustomerList"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">UserControl</span><span style="color: #0000ff">&gt;</span></pre>

and here’s the Silverlight source code logic as well:

   1: namespace SilverlightWpfReuse
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span> {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">partial</span> <span style="color: #0000ff">class</span> Page : UserControl</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>         <span style="color: #0000ff">public</span> Page()</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>         {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>             InitializeComponent();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>             Loaded += <span style="color: #0000ff">new</span> RoutedEventHandler(Page_Loaded);</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>         }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>  </pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>         <span style="color: #0000ff">void</span> Page_Loaded(<span style="color: #0000ff">object</span> sender, RoutedEventArgs e)</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>         {</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>             CustomerList.ItemsSource = SilverlightClassLibrary1.Customer.GetCustomerData();</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span>         }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  15:</span>     }</pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  16:</span> }</pre>

So if you have a keen eye you’ll see it’s not full cut/paste as you note the xmlns declarations in the root control.  Since the implementations are in two different assemblies (System.Windows.Controls.dll for Silverlight and Microsoft.Windows.Controls.dll for WPF Toolkit) we have to make sure they are referenced accordingly.  We can still use the same prefix though of “controls” so that we have greater re-use across our XAML.  For DataGrid, we need to do an additional step since for Silverlight it is on its own assembly.

If we run these applications here is what we get:

WPF Application:

Silverlight application:

Sure we had to do some maneuvering (xmlns stuff) but if you have some great XAML/code you can still get some good re-use out of those implementations with little effort and share code!

So what about VisualStateManager?  How do you use that in WPF if you already have something in Silverlight?  Let’s simplify it to the most common/basic control – Button.  Using Blend we’ve styled a simple Button control and Blend has generated the appropriate VSM resources for us (note that I am not a designer and just used Blend to quickly make 2 changes that probably look horrible :-):

   1: <Style x:Key="StyledButton" TargetType="Button">
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Background"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#FF1F3B53"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Foreground"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#FF000000"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Padding"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="3"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="BorderThickness"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="1"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="BorderBrush"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter.Value</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">LinearGradientBrush</span> <span style="color: #ff0000">EndPoint</span><span style="color: #0000ff">="0.5,1"</span> <span style="color: #ff0000">StartPoint</span><span style="color: #0000ff">="0.5,0"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#FFA3AEB9"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#FF8399A9"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="0.375"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#FF718597"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="0.375"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#FF617584"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="1"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">LinearGradientBrush</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span>                 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Setter.Value</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  15:</span>             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Setter</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  16:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Template"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  17:</span>                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">Setter.Value</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  18:</span>                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">ControlTemplate</span> <span style="color: #ff0000">TargetType</span><span style="color: #0000ff">="Button"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  19:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  20:</span>                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualStateManager.VisualStateGroups</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  21:</span>                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualStateGroup</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="CommonStates"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  22:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Normal"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  23:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="MouseOver"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  24:</span>                                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  25:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundAnimation"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  26:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineDoubleKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="1"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  27:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  28:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  29:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#F2FFFFFF"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  30:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  31:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  32:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#CCFFFFFF"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  33:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  34:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  35:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#7FE61212"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  36:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  37:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">BeginTime</span><span style="color: #0000ff">="00:00:00"</span> <span style="color: #ff0000">Duration</span><span style="color: #0000ff">="00:00:00.0010000"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="Background"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Border.Background).(SolidColorBrush.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  38:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="00:00:00"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#FFEE4B4B"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  39:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  40:</span>                                         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  41:</span>                                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualState</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  42:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Pressed"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  43:</span>                                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  44:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="Background"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Border.Background).(SolidColorBrush.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  45:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#FFF40B0B"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  46:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  47:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundAnimation"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  48:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineDoubleKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="1"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  49:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  50:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  51:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#D8FFFFFF"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  52:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  53:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  54:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#C6FFFFFF"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  55:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  56:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  57:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#8CFFFFFF"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  58:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  59:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="BackgroundGradient"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  60:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineColorKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="#3FFFFFFF"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  61:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ColorAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  62:</span>                                         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  63:</span>                                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualState</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  64:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Disabled"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  65:</span>                                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  66:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="DisabledVisualElement"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  67:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineDoubleKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">=".55"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  68:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  69:</span>                                         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  70:</span>                                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualState</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  71:</span>                                 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualStateGroup</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  72:</span>                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualStateGroup</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="FocusStates"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  73:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Focused"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  74:</span>                                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  75:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetName</span><span style="color: #0000ff">="FocusVisualElement"</span> <span style="color: #ff0000">Storyboard</span>.<span style="color: #ff0000">TargetProperty</span><span style="color: #0000ff">="Opacity"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  76:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">SplineDoubleKeyFrame</span> <span style="color: #ff0000">KeyTime</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Value</span><span style="color: #0000ff">="1"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  77:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">DoubleAnimationUsingKeyFrames</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  78:</span>                                         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Storyboard</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  79:</span>                                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualState</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  80:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">vsm:VisualState</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Unfocused"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  81:</span>                                 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualStateGroup</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  82:</span>                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">vsm:VisualStateManager.VisualStateGroups</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  83:</span>                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Border</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Background"</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">="White"</span> <span style="color: #ff0000">BorderBrush</span><span style="color: #0000ff">="{TemplateBinding BorderBrush}"</span> <span style="color: #ff0000">BorderThickness</span><span style="color: #0000ff">="{TemplateBinding BorderThickness}"</span> <span style="color: #ff0000">CornerRadius</span><span style="color: #0000ff">="3"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  84:</span>                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="1"</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">="{TemplateBinding Background}"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  85:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">Border</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="BackgroundAnimation"</span> <span style="color: #ff0000">Opacity</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">="#FF448DCA"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  86:</span>                                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">Rectangle</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="BackgroundGradient"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  87:</span>                                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">Rectangle.Fill</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  88:</span>                                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">LinearGradientBrush</span> <span style="color: #ff0000">EndPoint</span><span style="color: #0000ff">=".7,1"</span> <span style="color: #ff0000">StartPoint</span><span style="color: #0000ff">=".7,0"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  89:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#FFFFFFFF"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  90:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#F9FFFFFF"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="0.375"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  91:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#E5FFFFFF"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="0.625"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  92:</span>                                                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">GradientStop</span> <span style="color: #ff0000">Color</span><span style="color: #0000ff">="#C6FFFFFF"</span> <span style="color: #ff0000">Offset</span><span style="color: #0000ff">="1"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  93:</span>                                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">LinearGradientBrush</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  94:</span>                                         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Rectangle.Fill</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  95:</span>                                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Rectangle</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  96:</span>                                 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  97:</span>                             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Border</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  98:</span>                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ContentPresenter</span> <span style="color: #ff0000">HorizontalAlignment</span><span style="color: #0000ff">="{TemplateBinding HorizontalContentAlignment}"</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="{TemplateBinding Padding}"</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="contentPresenter"</span> <span style="color: #ff0000">VerticalAlignment</span><span style="color: #0000ff">="{TemplateBinding VerticalContentAlignment}"</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">="{TemplateBinding Content}"</span> <span style="color: #ff0000">ContentTemplate</span><span style="color: #0000ff">="{TemplateBinding ContentTemplate}"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  99:</span>                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Rectangle</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="DisabledVisualElement"</span> <span style="color: #ff0000">IsHitTestVisible</span><span style="color: #0000ff">="false"</span> <span style="color: #ff0000">Opacity</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Fill</span><span style="color: #0000ff">="#FFFFFFFF"</span> <span style="color: #ff0000">RadiusX</span><span style="color: #0000ff">="3"</span> <span style="color: #ff0000">RadiusY</span><span style="color: #0000ff">="3"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 100:</span>                             <span style="color: #0000ff">&lt;</span><span style="color: #800000">Rectangle</span> <span style="color: #ff0000">Margin</span><span style="color: #0000ff">="1"</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="FocusVisualElement"</span> <span style="color: #ff0000">IsHitTestVisible</span><span style="color: #0000ff">="false"</span> <span style="color: #ff0000">Opacity</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">Stroke</span><span style="color: #0000ff">="#FF6DBDD1"</span> <span style="color: #ff0000">StrokeThickness</span><span style="color: #0000ff">="1"</span> <span style="color: #ff0000">RadiusX</span><span style="color: #0000ff">="2"</span> <span style="color: #ff0000">RadiusY</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">/&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 101:</span>                         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 102:</span>                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ControlTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 103:</span>                 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Setter.Value</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 104:</span>             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Setter</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 105:</span>         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Style</span><span style="color: #0000ff">&gt;</span></pre>

There is nothing more we have to do in Silverlight since VSM is a part of the core.  We just annotate our Button with the style:

   1: <Button Content="Styled Button" Style="{StaticResource StyledButton}" />

Now in WPF we can use those same resources by adding them to our Grid.Resources node in our Window1.xaml file.  The thing is that we don’t need the vsm: prefix.  A simple find/replace removes them and we have our style button.  The resulting full XAML for the style looks the exact same (minus any vsm: prefix) and the XAML for the button also looks the same.

I think there has to be a better way to use linked files here as well, so I’ll think about that and report back if I find one.  I know this is a very simple demonstration of only a bit beyond Hello World, but I hope at least it gets you thinking of how you can get source-level compatibility and some XAML re-use out of your Silverlight and WPF applications. 

What are your thoughts?  Have you found better ways?  What are the stumbling blocks you are facing in code sharing?

This is a public service announcement for my Flickr4Writer project.  It was recently brought to my attention that Flickr has some privacy settings that users can opt-in for in their account to protect their images.  Some users felt that my plug-in for Writer was not honoring these settings.  Truly, I didn’t know about them.  You can read the thread on the discussion lists here if you are so inclined.  For me it came down to a couple of items:

    • Flickr enables users to set a flag to prevent “blogging” of their images
    • Flickr enables users to be hidden from 3rd Party/API searches

First, a note on the “blogging” flag.  This is a setting under your Flickr account privacy tab labeled Who can blog your photos or videos?.  To me, this setting is a little misleading because the description of it actually reads:

This means that anyone who does not match at least the contact level you select will not be able to see the "Blog This" button. (Source: http://www.flickr.com/account/prefs/blogging/?from=privacy 07 NOV 2008)

This setting is clearly for the “Blog This” functionality that shows up if you are logged into Flickr as a non-anonymous user and browse photos.  There is some functionality for them to integrate directly with your blog engine to do some one-click blogging of photos and videos.  Because of the way the setting is named however, some users interpret “blogging” in the broader sense.  flickr4writer was challenged as one violating the principal of this setting.  Since the setting ONLY enables authenticated users to even blog (the setting options go from any Flickr user (non-anonymous) to your specific friends/family settings.  flickr4writer does not use any authentication, so browsing any photos has the appearance to violate this term if the plugin enables an anonymous user to browse and select photos in a tool that is build for “blogging.”  While I draw the correlation that flickr4writer is basically a shell to the web site and does not do anything different than an anonymous user being able to browse and grab an image URL, it is the essence of the rule that I was alleged to violate.  One challenge here is also that the API is poorly designed in this regard because the “canblog” setting is returned only at the photo level even though it is an uber setting for the user’s account.  I think it should be a filter param of the photos.search API call.

The second setting about 3rd Party/API blocking from searches gets even more interesting.  First, this totally makes sense.  Again, it was a setting I wasn’t aware of.  You can change your setting under a section titled Hide your photostream from searches on 3rd party sites that use the API?  Great.  You’d think that once a user selected this setting that any search would filter out their photos/vidoes at the API level right?  Wrong.  flickr4writer uses photos.search calls to query data (actually technically the library that Flickr4Writer uses does).  Again, by definition of this API, only public searchable photos will be returned.  UNLESS you specify a user name.  What?!?!  Yes, that’s right…if you specifc a user name, their results will come back in the API call.  Read that again.  If you specify a user name in flickr.photos.search it will not honor the user’s privacy setting.  So this sucks for me as an API developer/consumer who wants to honor those settings.

So on to the resolutions.  First, I added authentication.  flickr4writer now requires you to have a valid Flickr account to even use it (their accounts are free).  This helps with the first part about blogging.  If a user has specified they do not want their content to be blogged, I honor that and will alert the flickr4writer user with a message that the user they searched prevents blogging and no search results will display.  I feel that this complies with that setting within my application.  If a user wants to bypass my app and copy/paste the URL to the photo/video still…that’s Flickr’s problem now, not mine.  Adding authentication also enabled me to comply with the blogging settings of users because it identifies who the user is and whether or not they can blog the content.

The second thing I modified was to only return content that had Creative Commons or No known license attributes.  This actually makes sense and I needed to do it for a while.  The licenses I filter for are identified in the flickr.photos.licenses.getInfo API.  So if a user has content that is “All rights reserved” then it will no longer show up in the search…even if you are the owner of that content.  I’m interested in feedback on this one if you think I should do a check to see if you are the owner and allow you to see licensed content…leave a comment on how you feel about this one.

For the setting of hiding from 3rd parties…I cannot resolve this.  There is no setting for me to look at.  I’m quite disappointed that Flickr isn’t doing this at the API level as I think that they are violating the user preferences by enabling a loophole.  Should they enable a setting for this (I think they just need to fix the API), I will enable my application to comply even more.  Please if you are a Flickr user who has set this privacy setting, let Flickr know that you want it to be honored.

The authentication adds some initial screens to the use of flickr4writer.  When you launch the plug-in from within Writer, you’ll now see some prompts to authorize the application with Flickr.  There will be a button that will take you to Flickr to authorize the action.  This is only required one time and you won’t see it anymore unless you de-authorize the application on your account (which you have the complete control to perform).

Please upgrade to the latest version.  You will have to uninstall any previous version before installing, but will not lose any settings.  Thanks for your assistance in helping keeping flickr4writer compliant.

Flickr4Writer is a plug-in for Windows Live Writer, a blog authoring tool available free to anyone.  The plug-in enables a Flickr user (Flickr account is required) to browse their own photos as well as others and insert the content into a blog post using Writer.

The plug-in enables you to search all your content, photosets, or search by tags.  It is available for free and can be downloaded from Codeplex.  For developers, the code is also made available if you want to contribute fixes and features (that comply with Flickr API terms of use). 

UPDATE: Plugin has been updated to follow new Flickr API terms of use.  Get the latest version here.

I hope that you enjoy the plug-in!