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

<channel>
	<title>Elegant Code &#187; .Net 4.0</title>
	<atom:link href="http://elegantcode.com/category/net-4-0/feed/" rel="self" type="application/rss+xml" />
	<link>http://elegantcode.com</link>
	<description></description>
	<lastBuildDate>Sat, 11 Feb 2012 04:39:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.5</generator>
		<item>
		<title>Free Pluralsight Prism Training</title>
		<link>http://elegantcode.com/2011/11/04/free-prism-training/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=free-prism-training</link>
		<comments>http://elegantcode.com/2011/11/04/free-prism-training/#comments</comments>
		<pubDate>Sat, 05 Nov 2011 04:23:40 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[Prism]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[p&p]]></category>
		<category><![CDATA[prism]]></category>
		<category><![CDATA[training]]></category>
		<category><![CDATA[windows phone 7]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/11/04/free-prism-training/</guid>
		<description><![CDATA[I am excited to announce that Pluralsight and Microsoft’s Patterns &#38; Practices team have joined forces to provide you with free access to over 4 hours of online Prism training.&#160; That’s right, you heard me correctly. FREE online Prism training sponsored by the one and only Patterns &#38; Practices team.&#160; I know you have some [...]]]></description>
			<content:encoded><![CDATA[<p>I am excited to announce that <a href="http://www.pluralsight-training.net/microsoft/" target="_blank">Pluralsight</a> and <a href="http://msdn.microsoft.com/en-us/practices/bb190332" target="_blank">Microsoft’s Patterns &amp; Practices</a> team have joined forces to provide you with free access to over 4 hours of online Prism training.&#160; That’s right, you heard me correctly. FREE online Prism training sponsored by the one and only Patterns &amp; Practices team.&#160; I know you have some question so let me answer the most common:</p>
<h4>Q &amp; A</h4>
<p><strong>Q1. When is this free training available?</strong>     <br />A1. The entire weekend of Nov 12th 2011 through Nov 14th 2011.</p>
<p><strong>Q2. Do I have to be a Pluralsight subscriber to get this awesome training?</strong>     <br />A2. This training will be freely available to everyone. You do not have to be a subscriber.</p>
<p><strong>Q3. What does the course cover?</strong>     <br />A3. Well let’s take a look:</p>
<ul>
<li>Getting started with Prism </li>
<li>Bootstrapper and Shell </li>
<li>Regions </li>
<li>Modules </li>
<li>Views </li>
<li>Communication </li>
<li>State-Based Navigation </li>
<li>View-Based Navigation </li>
</ul>
<p><a href="http://www.pluralsight-training.net/microsoft/Courses/TableOfContents?courseName=prism-introduction" target="_blank"><em>More course information.</em></a></p>
<p><strong>Q4. Who is the author of this kick ass Prism course?</strong>     <br />Q4. That would be me.</p>
<p><strong>Q5. Is it really free?</strong>     <br />Q5. You’re kidding right? Didn’t I already cover this part? Yes, it is free.</p>
<h4>New and Improved</h4>
<p>If you are a subscriber and have already watched the course, I would like to bring to your attention that there have been two new modules added.&#160; These modules will cover everything you need to know in order to start using the navigation services provided by Prism.&#160; This includes state-based navigation and view-based navigation.</p>
<p>Mark your calendar for Nov 12th and be sure to cram as much Prism knowledge into your brain as you can before the weekend ends.&#160; Don’t worry, if you run out of time you can always ask me questions directly.&#160; You can contact me either through Twitter (@<a href="http://twitter.com/brianlagunas" target="_blank">brianlagunas</a>) or through the <a href="http://wpftoolkit.codeplex.com/" target="_blank">Extended WPF Toolkit</a> project site.&#160; I hope you enjoy the training.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/11/04/free-prism-training/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Extended WPF Toolkit&#8211;the updated PropertyGrid</title>
		<link>http://elegantcode.com/2011/10/21/extended-wpf-toolkitthe-updated-propertygrid/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=extended-wpf-toolkitthe-updated-propertygrid</link>
		<comments>http://elegantcode.com/2011/10/21/extended-wpf-toolkitthe-updated-propertygrid/#comments</comments>
		<pubDate>Fri, 21 Oct 2011 18:26:07 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 3.5]]></category>
		<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[extended wpf toolkit]]></category>
		<category><![CDATA[propertygrid]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/10/21/extended-wpf-toolkitthe-updated-propertygrid/</guid>
		<description><![CDATA[The PropertyGrid control in the Extended WPF Toolkit was released in version 1.4.0 as beta. Since then I have had another release of version 1.5.0 in which the PropertyGrid was still in beta. Well it is beta no more! I have given the PropertyGrid a lot of love an affection over the past few weeks [...]]]></description>
			<content:encoded><![CDATA[<div>The PropertyGrid control in the <a href="http://wpftoolkit.codeplex.com/" target="_blank">Extended WPF Toolkit</a> was released in version 1.4.0 as beta.  Since then I have had another release of version 1.5.0 in which the PropertyGrid was still in beta.  Well it is beta no more! I have given the PropertyGrid a lot of love an affection over the past few weeks and it is finally ready for prime time.  Unfortunately, you will have to wait until the release of version 1.6.0 to get an official version.  Luckily for you, the source code is available for you to download and compile to get the latest and greatest PropertyGrid features.  So what can you do with the PropertyGrid?  Let’s look at some of the notable new and improved features.</div>
<div><a href="http://elegantcode.com/wp-content/uploads/2011/10/propertygrid.jpg"><img title="propertygrid" style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" src="http://elegantcode.com/wp-content/uploads/2011/10/propertygrid_thumb.jpg" border="0" alt="propertygrid" width="406" height="743" /></a></div>
<div>Of course the PropertyGrid has the expected behavior of binding to an object instance and showing all the properties for your editing desires.  It allows you sort display properties by category or alphabetically.  It also provides a nice little search textbox so you can find exactly what you are looking for.</div>
<h4>Specifying Properties</h4>
<div>By default the PropertyGrid will autogenerate all the properties for a given object. Never fear, you can override this behavior by setting the AutoGenerateProperties property to False, and then provide a collection of PropertyDefinitions of the properties you would like to show.</div>
<div><a href="http://elegantcode.com/wp-content/uploads/2011/10/specifyingproperties.jpg"><img title="specifyingproperties" style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" src="http://elegantcode.com/wp-content/uploads/2011/10/specifyingproperties_thumb.jpg" border="0" alt="specifyingproperties" width="473" height="235" /></a></div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:cff8cdfc-2e9a-49b5-941a-ae3cf5e51557" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">:</span><span style="color: #ff0000;">Name</span><span style="color: #0000ff;">=&#8221;_propertyGrid&#8221;</span><span style="color: #ff0000;"> Width</span><span style="color: #0000ff;">=&#8221;450&#8243;</span><span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">=&#8221;10&#8243;</span><br />
<span style="color: #ff0000;"> AutoGenerateProperties</span><span style="color: #0000ff;">=&#8221;False&#8221;&gt;</span><br />
<span style="color: #008000;">&lt;!&#8211; Only the following properties will be displayed in the PropertyGrid &#8211;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid.PropertyDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;FirstName&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;FavoriteColor&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;PetNames&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid.PropertyDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid</span><span style="color: #0000ff;">&gt;</span></div>
</div>
</div>
<div></div>
<h4>Custom Editors</h4>
<div>By default the PropertyGrid comes with 14 built-in editors:</div>
<ul>
<li>CheckBoxEditor</li>
<li>CollectionEditor</li>
<li>ColorEditor</li>
<li>DateTimeUpDownEditor</li>
<li>DecimalUpDownEditor</li>
<li>DoubleUpDownEditor</li>
<li>EnumComboBoxEditor</li>
<li>FontComboBoxEditor</li>
<li>IntegerUpDownEditor</li>
<li>ItemsSourceEditor</li>
<li>PrimitiveTypeCollectionEditor</li>
<li>TextBlockEditor</li>
<li>TextBoxEditor</li>
<li>TimeSpanEditor</li>
</ul>
<div>These editors don’t meet your needs? No problem!  You can override the default editors with your own custom editors with a DataTemplate. Simply define an EditorDefinition that either targets a Type, property name, or both and set the EditorDefinition.EditorTemplate to an instance of a DataTemplate. Be sure to bind your custom editor to the bound property item&#8217;s Value property.</div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:340c1fd1-6067-4bf0-8add-ca2af36e45b1" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 500px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">:</span><span style="color: #ff0000;">Name</span><span style="color: #0000ff;">=&#8221;_propertyGrid1&#8243;</span><span style="color: #ff0000;"> Width</span><span style="color: #0000ff;">=&#8221;450&#8243;</span> <span style="color: #ff0000;"> Margin</span><span style="color: #0000ff;">=&#8221;10&#8243;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid.EditorDefinitions</span><span style="color: #0000ff;">&gt;</span></p>
<p><span style="color: #008000;">&lt;!&#8211; This EditorDefinition will provide a TextBox to any property that is of type HorizontalAlignment, replacing the default ComboBox editor. &#8211;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">=&#8221;{</span><span style="color: #a31515;">x</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">Type</span><span style="color: #ff0000;"> HorizontalAlignment}</span><span style="color: #0000ff;">&#8220;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.EditorTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">TextBox</span><span style="color: #ff0000;"> Background</span><span style="color: #0000ff;">=&#8221;Green&#8221;</span> <span style="color: #ff0000;"> Text</span><span style="color: #0000ff;">=&#8221;{</span><span style="color: #a31515;">Binding</span><span style="color: #ff0000;"> Value}</span><span style="color: #0000ff;">&#8221; /&gt;</span><span style="color: #a31515;"> </span><span style="color: #008000;">&lt;!&#8211; Always bind your editor&#8217;s value to the bound property&#8217;s Value &#8211;&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.EditorTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition</span><span style="color: #0000ff;">&gt;</span></p>
<p><span style="color: #008000;">&lt;!&#8211; This EditorDefinition will provide a TextBlock to any property that has any of the defined property names, replacing the default editor. &#8211;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.PropertiesDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;Age&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;WritingFont&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;Spouse&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.PropertiesDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.EditorTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">TextBlock</span><span style="color: #ff0000;"> Background</span><span style="color: #0000ff;">=&#8221;Yellow&#8221;</span> <span style="color: #ff0000;"> Text</span><span style="color: #0000ff;">=&#8221;{</span><span style="color: #a31515;">Binding</span><span style="color: #ff0000;"> Value}</span><span style="color: #0000ff;">&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.EditorTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition</span><span style="color: #0000ff;">&gt;</span></p>
<p><span style="color: #008000;">&lt;!&#8211; This EditorDefinition will provide a TextBox to any property that is of type Boolean and that has any of the defined property names, replacing the default editor. &#8211;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition</span><span style="color: #ff0000;"> TargetType</span><span style="color: #0000ff;">=&#8221;{</span><span style="color: #a31515;">x</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">Type</span><span style="color: #ff0000;"> sys</span><span style="color: #0000ff;">:</span><span style="color: #ff0000;">Boolean}</span><span style="color: #0000ff;">&#8220;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.PropertiesDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;DateOfBirth&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyDefinition</span><span style="color: #ff0000;"> Name</span><span style="color: #0000ff;">=&#8221;LastName&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.PropertiesDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.EditorTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">TextBox</span><span style="color: #ff0000;"> Background</span><span style="color: #0000ff;">=&#8221;Red&#8221;</span> <span style="color: #ff0000;"> Text</span><span style="color: #0000ff;">=&#8221;{</span><span style="color: #a31515;">Binding</span><span style="color: #ff0000;"> Value}</span><span style="color: #0000ff;">&#8221; /&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition.EditorTemplate</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">EditorDefinition</span><span style="color: #0000ff;">&gt;</span></p>
<p><span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid.EditorDefinitions</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">extToolkit</span><span style="color: #0000ff;">:</span><span style="color: #a31515;">PropertyGrid</span><span style="color: #0000ff;">&gt;</span></div>
</div>
</div>
<div>Don’t like DataTemplates? No problem!  You can supply editors for a property by using the System.ComponentModel.EditorAttribute. In order to provide an editor with an attribute, the editor MUST implement the ITypeEditor interface. Your editor can be a simple class or a complex UserControl.</div>
<div><a href="http://elegantcode.com/wp-content/uploads/2011/10/customeditor_attributes.jpg"><img title="customeditor_attributes" style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" src="http://elegantcode.com/wp-content/uploads/2011/10/customeditor_attributes_thumb.jpg" border="0" alt="customeditor_attributes" width="477" height="240" /></a></div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c7572a68-6bf0-43ba-b987-a87ed9136b14" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> <span style="color: #2b91af;">Person</span><br />
{<br />
[<span style="color: #2b91af;">Category</span>(<span style="color: #a31515;">"Information"</span>)]<br />
[<span style="color: #2b91af;">DisplayName</span>(<span style="color: #a31515;">"First Name"</span>)]<br />
[<span style="color: #2b91af;">Description</span>(<span style="color: #a31515;">"This property uses a TextBox as the default editor."</span>)]<br />
<span style="color: #008000;">//This custom editor is a Class that implements the ITypeEditor interface</span><br />
[<span style="color: #2b91af;">Editor</span>(<span style="color: #0000ff;">typeof</span>(<span style="color: #2b91af;">FirstNameEditor</span>), <span style="color: #0000ff;">typeof</span>(<span style="color: #2b91af;">FirstNameEditor</span>))]<br />
<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">string</span> FirstName { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }</div>
<div>[<span style="color: #2b91af;">Category</span>(<span style="color: #a31515;">"Information"</span>)]<br />
[<span style="color: #2b91af;">DisplayName</span>(<span style="color: #a31515;">"Last Name"</span>)]<br />
[<span style="color: #2b91af;">Description</span>(<span style="color: #a31515;">"This property uses a TextBox as the default editor."</span>)]<br />
<span style="color: #008000;">//This custom editor is a UserControl that implements the ITypeEditor interface</span><br />
[<span style="color: #2b91af;">Editor</span>(<span style="color: #0000ff;">typeof</span>(<span style="color: #2b91af;">LastNameUserControlEditor</span>), <span style="color: #0000ff;">typeof</span>(<span style="color: #2b91af;">LastNameUserControlEditor</span>))]<br />
<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">string</span> LastName { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }<br />
}</div>
</div>
</div>
<div>Your editors can be created as a class:</div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:d2a30fc6-c092-478a-a85c-4ab12fd32646" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #008000;">//Custom editors that are used as attributes MUST implement the ITypeEditor interface.</span><br />
<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> <span style="color: #2b91af;">FirstNameEditor</span> : Microsoft.Windows.Controls.PropertyGrid.Editors.<span style="color: #2b91af;">ITypeEditor</span><br />
{<br />
<span style="color: #0000ff;">public</span> <span style="color: #2b91af;">FrameworkElement</span> ResolveEditor(Microsoft.Windows.Controls.PropertyGrid.<span style="color: #2b91af;">PropertyItem</span> propertyItem)<br />
{<br />
<span style="color: #2b91af;">TextBox</span> textBox = <span style="color: #0000ff;">new</span> <span style="color: #2b91af;">TextBox</span>();<br />
textBox.Background = <span style="color: #0000ff;">new</span> <span style="color: #2b91af;">SolidColorBrush</span>(<span style="color: #2b91af;">Colors</span>.Red);</div>
<div><span style="color: #008000;">//create the binding from the bound property item to the editor</span><br />
<span style="color: #0000ff;">var</span> _binding = <span style="color: #0000ff;">new</span> <span style="color: #2b91af;">Binding</span>(<span style="color: #a31515;">&#8220;Value&#8221;</span>); <span style="color: #008000;">//bind to the Value property of the PropertyItem</span><br />
_binding.Source = propertyItem;<br />
_binding.ValidatesOnExceptions = <span style="color: #0000ff;">true</span>;<br />
_binding.ValidatesOnDataErrors = <span style="color: #0000ff;">true</span>;<br />
_binding.Mode = propertyItem.IsReadOnly ? <span style="color: #2b91af;">BindingMode</span>.OneWay : <span style="color: #2b91af;">BindingMode</span>.TwoWay;<br />
<span style="color: #2b91af;">BindingOperations</span>.SetBinding(textBox, <span style="color: #2b91af;">TextBox</span>.TextProperty, _binding);<br />
<span style="color: #0000ff;">return</span> textBox;<br />
}<br />
}</div>
</div>
</div>
<div>Or as a complex UserControl:</div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:66e4302b-e2a0-4137-a11f-9f7c7992f92d" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">UserControl</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">:</span><span style="color: #ff0000;">Class</span><span style="color: #0000ff;">=&#8221;Samples.Modules.PropertyGrid.LastNameUserControlEditor&#8221;</span><br />
<span style="color: #ff0000;"> xmlns</span><span style="color: #0000ff;">=&#8221;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;</span><br />
<span style="color: #ff0000;"> xmlns</span><span style="color: #0000ff;">:</span><span style="color: #ff0000;">x</span><span style="color: #0000ff;">=&#8221;http://schemas.microsoft.com/winfx/2006/xaml&#8221;</span><br />
<span style="color: #ff0000;"> x</span><span style="color: #0000ff;">:</span><span style="color: #ff0000;">Name</span><span style="color: #0000ff;">=&#8221;_uc&#8221;&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">StackPanel</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">TextBox</span><span style="color: #ff0000;"> Text</span><span style="color: #0000ff;">=&#8221;{</span><span style="color: #a31515;">Binding</span><span style="color: #ff0000;"> Value</span><span style="color: #0000ff;">,</span><span style="color: #ff0000;"> ElementName</span><span style="color: #0000ff;">=</span>_<span style="color: #0000ff;">uc}&#8221;</span><span style="color: #ff0000;"> Background</span><span style="color: #0000ff;">=&#8221;YellowGreen&#8221;</span> <span style="color: #0000ff;"> /&gt;</span><br />
<span style="color: #0000ff;">&lt;</span><span style="color: #a31515;">Button</span><span style="color: #ff0000;"> Click</span><span style="color: #0000ff;">=&#8221;Button_Click&#8221;&gt;</span><span style="color: #a31515;">Clear</span><span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">Button</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">StackPanel</span><span style="color: #0000ff;">&gt;</span><br />
<span style="color: #0000ff;">&lt;/</span><span style="color: #a31515;">UserControl</span><span style="color: #0000ff;">&gt;</span></div>
</div>
</div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c44d7199-8bac-4ad2-8a36-8ae2698395d6" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">partial</span> <span style="color: #0000ff;">class</span> <span style="color: #2b91af;">LastNameUserControlEditor</span> : <span style="color: #2b91af;">UserControl</span>, <span style="color: #2b91af;">ITypeEditor</span><br />
{<br />
<span style="color: #0000ff;">public</span> LastNameUserControlEditor()<br />
{<br />
InitializeComponent();<br />
}</div>
<div><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">static</span> <span style="color: #0000ff;">readonly</span> <span style="color: #2b91af;">DependencyProperty</span> ValueProperty = <span style="color: #2b91af;">DependencyProperty</span>.Register(<span style="color: #a31515;">&#8220;Value&#8221;</span>, <span style="color: #0000ff;">typeof</span>(<span style="color: #0000ff;">string</span>), <span style="color: #0000ff;">typeof</span>(<span style="color: #2b91af;">LastNameUserControlEditor</span>), <span style="color: #0000ff;">new</span> <span style="color: #2b91af;">FrameworkPropertyMetadata</span>(<span style="color: #0000ff;">null</span>, <span style="color: #2b91af;">FrameworkPropertyMetadataOptions</span>.BindsTwoWayByDefault));<br />
<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">string</span> Value<br />
{<br />
<span style="color: #0000ff;">get</span> { <span style="color: #0000ff;">return</span> (<span style="color: #0000ff;">string</span>)GetValue(ValueProperty); }<br />
<span style="color: #0000ff;">set</span> { SetValue(ValueProperty, <span style="color: #0000ff;">value</span>); }<br />
}</div>
<div><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span> Button_Click(<span style="color: #0000ff;">object</span> sender, <span style="color: #2b91af;">RoutedEventArgs</span> e)<br />
{<br />
Value = <span style="color: #0000ff;">string</span>.Empty;<br />
}</div>
<div><span style="color: #0000ff;">public</span> <span style="color: #2b91af;">FrameworkElement</span> ResolveEditor(Microsoft.Windows.Controls.PropertyGrid.<span style="color: #2b91af;">PropertyItem</span> propertyItem)<br />
{<br />
<span style="color: #2b91af;">Binding</span> binding = <span style="color: #0000ff;">new</span> <span style="color: #2b91af;">Binding</span>(<span style="color: #a31515;">&#8220;Value&#8221;</span>);<br />
binding.Source = propertyItem;<br />
binding.Mode = propertyItem.IsReadOnly ? <span style="color: #2b91af;">BindingMode</span>.OneWay : <span style="color: #2b91af;">BindingMode</span>.TwoWay;<br />
<span style="color: #2b91af;">BindingOperations</span>.SetBinding(<span style="color: #0000ff;">this</span>, <span style="color: #2b91af;">LastNameUserControlEditor</span>.ValueProperty, binding);<br />
<span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>;<br />
}<br />
}</div>
</div>
</div>
<h4>Custom ItemsSource</h4>
<div>Sometimes it is desirable to want to provide a collection of values represented by a ComboBox for a given property. The PropertyGrid supports this scenario by creating a class that implements the IItemsSource interface and decorating your property with the ItemsSourceAttribute.</div>
<div><a href="http://elegantcode.com/wp-content/uploads/2011/10/custom_itemssource.jpg"><img title="custom_itemssource" style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" src="http://elegantcode.com/wp-content/uploads/2011/10/custom_itemssource_thumb.jpg" border="0" alt="custom_itemssource" width="473" height="484" /></a></div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:fbac7ce0-9aa0-4d3c-aafc-2e5e0cef1807" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 400px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> <span style="color: #2b91af;">Person</span><br />
{<br />
[<span style="color: #2b91af;">Category</span>(<span style="color: #a31515;">"Writing"</span>)]<br />
[<span style="color: #2b91af;">DisplayName</span>(<span style="color: #a31515;">"Writing Font Size"</span>)]<br />
[<span style="color: #2b91af;">Description</span>(<span style="color: #a31515;">"This property uses the DoubleUpDown as the default editor."</span>)]<br />
[<span style="color: #2b91af;">ItemsSource</span>(<span style="color: #0000ff;">typeof</span>(<span style="color: #2b91af;">FontSizeItemsSource</span>))]<br />
<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">double</span> WritingFontSize { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }<br />
}</div>
</div>
</div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e1b0d1f8-7fbf-4976-a1ff-8f5476b08197" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> <span style="color: #2b91af;">FontSizeItemsSource</span> : <span style="color: #2b91af;">IItemsSource</span><br />
{<br />
<span style="color: #0000ff;">public</span> <span style="color: #2b91af;">IList</span>&lt;<span style="color: #0000ff;">object</span>&gt; GetValues()<br />
{<br />
<span style="color: #2b91af;">List</span>&lt;<span style="color: #0000ff;">object</span>&gt; sizes = <span style="color: #0000ff;">new</span> <span style="color: #2b91af;">List</span>&lt;<span style="color: #0000ff;">object</span>&gt;()<br />
{<br />
5.0,5.5,6.0,6.5,7.0,7.5,8.0,8.5,9.0,9.5,10.0,12.0,14.0,16.0,18.0,20.0<br />
};<br />
<span style="color: #0000ff;">return</span> sizes;<br />
}<br />
}</div>
</div>
</div>
<h4>Expandable Properties</h4>
<div>Wait a minute… I’m not done yet.  Do you have a property of a complex object that you want to expand in the PropertyGrid?  You do?  Well then you want to pay attention to this.  The PropertyGrid supports this scenario and allows you to drill down into a property&#8217;s heirarchy. To enable this behavior you must decorate your property with the ExpandableObject attribute.</div>
<div><a href="http://elegantcode.com/wp-content/uploads/2011/10/expandableobject.jpg"><img title="expandableobject" style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" src="http://elegantcode.com/wp-content/uploads/2011/10/expandableobject_thumb.jpg" border="0" alt="expandableobject" width="469" height="408" /></a></div>
<div style="margin: 0px; display: inline; float: none; padding: 0px;" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c46852fa-1754-49c2-9715-3126bdd93d38" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap;"><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> <span style="color: #2b91af;">Person</span><br />
{<br />
[<span style="color: #2b91af;">Category</span>(<span style="color: #a31515;">"Information"</span>)]<br />
[<span style="color: #2b91af;">DisplayName</span>(<span style="color: #a31515;">"First Name"</span>)]<br />
[<span style="color: #2b91af;">Description</span>(<span style="color: #a31515;">"This property uses a TextBox as the default editor."</span>)]<br />
<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">string</span> FirstName { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }</div>
<div>[<span style="color: #2b91af;">Category</span>(<span style="color: #a31515;">"Conections"</span>)]<br />
[<span style="color: #2b91af;">Description</span>(<span style="color: #a31515;">"This property is a complex property and has no default editor."</span>)]<br />
[<span style="color: #2b91af;">ExpandableObject</span>]<br />
<span style="color: #0000ff;">public</span> <span style="color: #2b91af;">Person</span> Spouse { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }<br />
}</div>
</div>
</div>
<h4>Conclusion</h4>
<div>As you can see, I have put a lot of time and effort into this control to make it as feature rich and flexible as possible.  This WPF PropertyGrid is freely available in the Extended WPF Toolkit.  All I ask, is that if you use the <a href="http://wpftoolkit.codeplex.com/" target="_blank">Extended WPF Toolkit</a>, can you please rate the project and leave feedback with your impressions.  It is always nice to receive feedback to know if my efforts are paying off. Enjoy!</div>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/10/21/extended-wpf-toolkitthe-updated-propertygrid/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Extended WPF Toolkit&#8211;using the BusyIndicator</title>
		<link>http://elegantcode.com/2011/10/07/extended-wpf-toolkitusing-the-busyindicator/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=extended-wpf-toolkitusing-the-busyindicator</link>
		<comments>http://elegantcode.com/2011/10/07/extended-wpf-toolkitusing-the-busyindicator/#comments</comments>
		<pubDate>Fri, 07 Oct 2011 21:40:03 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 3.5]]></category>
		<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[busy indicator]]></category>
		<category><![CDATA[extended wpf toolkit]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/10/07/extended-wpf-toolkitusing-the-busyindicator/</guid>
		<description><![CDATA[As you may know, I am the author of a WPF control suite call the Extended WPF Toolkit.&#160; I also spend tons of time on various forums helping people solve problems with their WPF applications.&#160; Lately there have been a number of questions regarding the BusyIndicator control.&#160; The majority of questions deal with using it [...]]]></description>
			<content:encoded><![CDATA[<p>As you may know, I am the author of a WPF control suite call the <a href="http://wpftoolkit.codeplex.com/" target="_blank">Extended WPF Toolkit</a>.&#160; I also spend tons of time on various forums helping people solve problems with their WPF applications.&#160; Lately there have been a number of questions regarding the <a href="http://wpftoolkit.codeplex.com/wikipage?title=BusyIndicator&amp;referringTitle=Home" target="_blank">BusyIndicator</a> control.&#160; The majority of questions deal with using it in a multi-threaded environment.&#160; So I thought the best way to address the masses is to write up a post demonstrating the proper use of the BusyIndicator control.</p>
<p>Let’s begin by defining what the BusyIndicator is used for.&#160; The BusyIndicator is used to give an application user a visual indicator that a long running process is occurring.&#160; So from this definition we can make two assumptions. One; There must be a mechanism for notifying the BusyIndicator when the long running process begins and when it ends.&#160; Two; the long running process will have to occur on a separate thread as to not block the UI.</p>
<h4>Anatomy of the BusyIndicator</h4>
<p>The first thing you need to do when using any control inside the Extended WPF Toolkit is add a namespace declaration to the consuming view.</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:5924be3e-3c95-4be6-92ff-c462f833cac5" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Window</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Class</span><span style="color:#0000ff">=&quot;BusyIndicatorDemo.MainWindow&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">extToolkit</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended&quot;</span><br />        <span style="color:#0000ff"> &#8230;</span></div>
</p></div>
</p></div>
<p>The BusyIndicator is a ContentControl.&#160; What this means is that the BusyIndicator can contain a single child element within it’s open and closing tags.&#160; For example:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:596ca3ad-889f-4541-8855-2e7c1ffb4d33" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#0000ff">&gt;</span><span style="color:#a31515">Start Process</span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Button</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>Looking at this code snippet you can see that the Grid is the BusyIndicator’s Content.&#160; If you were to place anything outside of this Grid element you would receive an exception.</p>
<p>The BusyIndicator has two visual states:</p>
<p><strong>Not Busy</strong>:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/10/image1.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://elegantcode.com/wp-content/uploads/2011/10/image_thumb1.png" width="244" height="228" /></a></p>
<p><strong>Busy</strong>:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/10/image2.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://elegantcode.com/wp-content/uploads/2011/10/image_thumb2.png" width="305" height="240" /></a></p>
<p>Toggling between these states is as simply as setting a single property called IsBusy.</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a1b93d14-e297-411d-b217-3bd67de154a6" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#ff0000"> IsBusy</span><span style="color:#0000ff">=&quot;True&quot; &gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#0000ff">&gt;</span><span style="color:#a31515">Start Process</span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Button</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>When the BusyIndicator.IsBusy property is set to True, the BusyIndicator becomes visible and prevents any user interaction with the BusyIndicator’s Content.&#160; So any elements that you have defined within the Content of the BusyIndicator will be disabled.&#160; When the IsBusy property is set to False, the Content re-enables and user interaction can continue.</p>
<h4>The Common Problem</h4>
<p>The most common problem I see when people are having trouble using the BusyIndicator is that they are doing everything on the UI thread.&#160; Let’s look at an example:</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:050d7667-af12-43ac-bd08-8e7e1fcb6685" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;_busyIndicator&quot; &gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#ff0000"> Click</span><span style="color:#0000ff">=&quot;StartProcess&quot;&gt;</span><span style="color:#a31515">Start Process</span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Button</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
</p>
<p>The event handler for the button looks like this:</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:507b5dfc-48bb-436e-9fe7-003d2f63d756" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> StartProcess(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">RoutedEventArgs</span> e)<br /> {<br />     <span style="color:#008000">//show BusyIndicator</span><br />     _busyIndicator.IsBusy = <span style="color:#0000ff">true</span>;<br />     <br />     <span style="color:#008000">//long running process</span><br />     <span style="color:#0000ff">for</span> (<span style="color:#0000ff">int</span> i = 0; i &lt; 100; i++)<br />     {<br />         System.Threading.<span style="color:#2b91af">Thread</span>.Sleep(50);<br />     }</p>
<p>     <span style="color:#008000">//hide BusyIndicator</span><br />     _busyIndicator.IsBusy = <span style="color:#0000ff">false</span>;<br /> }</div>
</p></div>
</p></div>
</p>
<p>Now the assumption is that first the BusyIndicator will be shown, then the long running process will occur, and lastly the BusyIndicator will be hidden.&#160; To most people’s surprise it doesn’t work.&#160; The BusyIndicator never shows and the UI is not responsive.&#160; Do you see the problem?&#160; The problem is that everything is running on the UI thread.</p>
<h4>Solution</h4>
<p>As we have already stated, the long running process must occur on a separate thread.&#160; The UI thread needs to stay responsive while the process is running.&#160; The most common method to place a long running process on a separate thread is to use the <a href="http://elegantcode.com/2009/07/03/wpf-multithreading-using-the-backgroundworker-and-reporting-the-progress-to-the-ui/" target="_blank">BackgroundWorker</a>.</p>
<p>Let’s modify the event handler to utilize a BackgroundWorker.</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:2d9f44bc-5752-45ae-9978-3790efb12e11" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> StartProcess(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">RoutedEventArgs</span> e)<br /> {<br />     <span style="color:#2b91af">BackgroundWorker</span> worker = <span style="color:#0000ff">new</span> <span style="color:#2b91af">BackgroundWorker</span>();<br />     <span style="color:#008000">//this is where the long running process should go</span><br />     worker.DoWork += (o, ea) =&gt;<br />         {<br />             <span style="color:#008000">//no direct interaction with the UI is allowed from this method</span><br />             <span style="color:#0000ff">for</span> (<span style="color:#0000ff">int</span> i = 0; i &lt; 100; i++)<br />             {<br />                 System.Threading.<span style="color:#2b91af">Thread</span>.Sleep(50);<br />             }<br />         };<br />     worker.RunWorkerCompleted += (o, ea) =&gt;<br />         {<br />             <span style="color:#008000">//work has completed. you can now interact with the UI</span><br />             _busyIndicator.IsBusy = <span style="color:#0000ff">false</span>;<br />         };<br />     <span style="color:#008000">//set the IsBusy before you start the thread</span><br />     _busyIndicator.IsBusy = <span style="color:#0000ff">true</span>;<br />     worker.RunWorkerAsync();<br /> }</div>
</p></div>
</p></div>
</p>
<p>Examine the code.&#160; First we create an instance of a BackgroundWorker and add delegates for the DoWork and RunWorkerCompleted events.&#160; The DoWork hander is where the long running process should go.&#160; NO DIRECT INTERACTION WITH THE UI IS ALLOWED.&#160; The RunWorkerCompleted handler is code that will run when the long running process has completed.&#160; This is where you can interact with the UI again, meaning that this would be a perfect place to set the IsBusy property to False.&#160; After the long running process has finished.&#160; Now pay special attention to where we are calling RunWorkerAsync.&#160; Just before that call, we are setting the IsBusy property to true.&#160; Then the call to RunWorkerAsync is made.&#160; This will show the BusyIndicator and then start the long running process.&#160; When the process is complete the BusyIndicator is hidden again.&#160; Perfect!</p>
<h4>Common Problem 2</h4>
<p>The next common problem is dealing with using data that is generated on the background thread in the UI.&#160; Well if you read my post on <a href="http://elegantcode.com/2009/07/03/wpf-multithreading-using-the-backgroundworker-and-reporting-the-progress-to-the-ui/" target="_blank">multi-threading</a> then you should already know how to solve this one.&#160; If you haven’t, I will show you again.&#160; This scenario requires that our UI have a ListBox control that is populated with items on a background thread.&#160; While the items are being populated, the BusyIndicator should show the user something is happening and that they need to be patient.&#160; Let’s modify our UI and our code behind to support his new scenario:</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:58af4917-346e-44f6-a7ff-44ebb8496123" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;_busyIndicator&quot; &gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid.RowDefinitions</span><span style="color:#0000ff">&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">RowDefinition</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;*&quot; /&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">RowDefinition</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;Auto&quot; /&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid.RowDefinitions</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">ListBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;_listBox&quot; /&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#ff0000"> Grid.Row</span><span style="color:#0000ff">=&quot;1&quot;</span><span style="color:#ff0000"> Click</span><span style="color:#0000ff">=&quot;StartProcess&quot;&gt;</span><span style="color:#a31515">Start Process</span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Button</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">extToolkit</span><span style="color:#0000ff">:</span><span style="color:#a31515">BusyIndicator</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:72133875-3c6a-4c6e-8851-28028ffb1e1b" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> StartProcess(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">RoutedEventArgs</span> e)<br /> {<br />     <span style="color:#2b91af">BackgroundWorker</span> worker = <span style="color:#0000ff">new</span> <span style="color:#2b91af">BackgroundWorker</span>();<br />     worker.DoWork += (o, ea) =&gt;<br />         {<br />             _busyIndicator.IsBusy = <span style="color:#0000ff">true</span>;</p>
<p>             <span style="color:#2b91af">List</span>&lt;<span style="color:#2b91af">String</span>&gt; listOfString = <span style="color:#0000ff">new</span> <span style="color:#2b91af">List</span>&lt;<span style="color:#0000ff">string</span>&gt;();<br />             <span style="color:#0000ff">for</span> (<span style="color:#0000ff">int</span> i = 0; i &lt; 100; i++)<br />             {<br />                 listOfString.Add(<span style="color:#2b91af">String</span>.Format(<span style="color:#a31515">&quot;Item: {0}&quot;</span>, i));<br />             }</p>
<p>             <span style="color:#008000">//BAD MOJO</span><br />             _listBox.ItemsSource = listOfString;<br />             _busyIndicator.IsBusy = <span style="color:#0000ff">false</span>;<br />         };            <br />     worker.RunWorkerAsync();<br /> }</div>
</p></div>
</p></div>
</p>
<p>This is similar to what the problem cases look like.&#160; This code will most definitely fail.&#160; Remember, you cannot access any UI elements on a separate thread.&#160; Now let’s modify this code to make it run correctly.</p>
<h4>Solution</h4>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:503b197c-1e59-4aa3-b765-406528412ef6" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 500px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> StartProcess(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">RoutedEventArgs</span> e)<br /> {<br />     <span style="color:#2b91af">BackgroundWorker</span> worker = <span style="color:#0000ff">new</span> <span style="color:#2b91af">BackgroundWorker</span>();<br />     worker.DoWork += (o, ea) =&gt;<br />         {<br />             <span style="color:#2b91af">List</span>&lt;<span style="color:#2b91af">String</span>&gt; listOfString = <span style="color:#0000ff">new</span> <span style="color:#2b91af">List</span>&lt;<span style="color:#0000ff">string</span>&gt;();<br />             <span style="color:#0000ff">for</span> (<span style="color:#0000ff">int</span> i = 0; i &lt; 10000000; i++)<br />             {<br />                 listOfString.Add(<span style="color:#2b91af">String</span>.Format(<span style="color:#a31515">&quot;Item: {0}&quot;</span>, i));<br />             }</p>
<p>             <span style="color:#008000">//use the Dispatcher to delegate the listOfStrings collection back to the UI</span><br />             Dispatcher.Invoke((<span style="color:#2b91af">Action</span>)(() =&gt; _listBox.ItemsSource = listOfString));<br />         };<br />     worker.RunWorkerCompleted += (o, ea) =&gt;<br />     {<br />         _busyIndicator.IsBusy = <span style="color:#0000ff">false</span>;<br />     };<br />     _busyIndicator.IsBusy = <span style="color:#0000ff">true</span>;<br />     worker.RunWorkerAsync();<br /> }</div>
</p></div>
</p></div>
</p>
<p>First we had to remove any reference to a UI element from the DoWork handler.&#160; Now in order to propagate the generate list of strings back to the ListBox we enlist the help of the <a href="http://msdn.microsoft.com/en-us/library/system.windows.threading.dispatcher.aspx" target="_blank">Dispatcher</a>.&#160; The Dispatcher will take the collection of strings, and in a thread safe way, give them to the ListBox for consumption.&#160; Our BusyIndicator will be shown while the collection is being generated, and then be hidden when the process has been completed.</p>
<p>That about wraps it up.&#160; These are the most common troubles developers have had using the BusyIndicator control.&#160; If you have different problems that you haven’t been able to solve, feel free to post your question in the <a href="http://wpftoolkit.codeplex.com/" target="_blank">Discussions</a> page of the project site.&#160; You never know, it may be worth blogging about.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/10/07/extended-wpf-toolkitusing-the-busyindicator/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Mapping a Route with Directions using the Bing Maps WPF Control (Beta)</title>
		<link>http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta</link>
		<comments>http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/#comments</comments>
		<pubDate>Fri, 09 Sep 2011 16:51:29 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[bing maps]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/</guid>
		<description><![CDATA[So far we have built an earthquake application, mapped an address using geocoding, and even Prism-fied the Bing Maps WPF control.&#160; Now let’s see how to map a route with turn-by-turn directions.&#160; By now it should be no surprise that you will need to complete the following steps before you can create this application. Get [...]]]></description>
			<content:encoded><![CDATA[<p>So far we have built an <a href="http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/" target="_blank">earthquake application</a>, <a href="http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/" target="_blank">mapped an address</a> using geocoding, and even <a href="http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/" target="_blank">Prism-fied the Bing Maps WPF control</a>.&#160; Now let’s see how to map a route with turn-by-turn directions.&#160; By now it should be no surprise that you will need to complete the following steps before you can create this application.</p>
<ol>
<li><a href="http://www.microsoft.com/download/en/details.aspx?id=27165">Get the Bing Maps WPF control.</a> </li>
<li><a href="https://www.bingmapsportal.com/">Get a Bing Maps API key.</a> </li>
</ol>
<p>You <strong><u>MUST</u></strong> have a Bing Maps API key in order to use any of the SOAP services. </p>
<p>For this application we will be using the Geocode Service and the Route Service.&#160; The Geocode service is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate.&#160; The Route service is used to generate routes and driving directions based on locations or waypoints.</p>
<p>Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the <strong>Microsoft.Maps.MapControl.WPF.dll</strong>. This will most likely be located in Program Files or Program Files (x86) –&gt; Bing Maps WPF Control –&gt; Beta –&gt; Libraries. </p>
<p>Open up your App.xaml. You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ca628505-dd3b-4d33-ae53-ad0ea17f81a9" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Application</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Class</span><span style="color:#0000ff">=&quot;BingMapsCalculateRouteDemo.App&quot;</span><br />             <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span><br />             <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">x</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span><br />             <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">bing</span><span style="color:#0000ff">=&quot;clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF&quot;</span><br />             <span style="color:#ff0000"> StartupUri</span><span style="color:#0000ff">=&quot;MainWindow.xaml&quot;&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Application.Resources</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">ApplicationIdCredentialsProvider</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Key</span><span style="color:#0000ff">=&quot;MyCredentials&quot;</span><span style="color:#ff0000"> ApplicationId</span><span style="color:#0000ff">=&quot;Your API Key&quot; /&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Application.Resources</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Application</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>We need to add the Geocode and Route service to our application.&#160; First, let’s start by adding the Geocode service.&#160; Right click the project and select “Add Service Reference”.&#160; Use the following address:</p>
<p><a href="http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc">http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc</a></p>
<p>Give your service a name. I called mine BingServices.&#160; Now we need to add the Route service, but we don’t want to add a separate service reference.&#160; Ideally we would have a single service that contained both the Geocode and Route services.&#160; Luckily there is a trick we can use to do just that.&#160; Select the Project and click the “Show All Files” button at the top of the Solution Explorer.&#160; Expand the Service Reference folder and then expand the BingServices service.&#160; Look for a file called <strong>Reference.svcmap</strong>. Open the References.svcmap and locate the MetadataSource node.&#160; It will loko something like this:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:1e1e98d3-82a4-419a-a32f-707e0559123c" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">MetadataSources</span><span style="color:#0000ff">&gt;</span><br />   <span style="color:#0000ff">&lt;</span><span style="color:#a31515">MetadataSource</span><span style="color:#0000ff"> </span><span style="color:#ff0000">Address</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex</span>&quot;<span style="color:#0000ff"> </span><span style="color:#ff0000">Protocol</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">mex</span>&quot;<span style="color:#0000ff"> </span><span style="color:#ff0000">SourceId</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">1</span>&quot;<span style="color:#0000ff"> /&gt;</span><br /> <span style="color:#0000ff">&lt;/</span><span style="color:#a31515">MetadataSources</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>Simply add a new MetatdataSource as follows:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:7291104c-336c-4f44-9a3e-5843babcba3d" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">MetadataSources</span><span style="color:#0000ff">&gt;</span><br />   <span style="color:#0000ff">&lt;</span><span style="color:#a31515">MetadataSource</span><span style="color:#0000ff"> </span><span style="color:#ff0000">Address</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex</span>&quot;<span style="color:#0000ff"> </span><span style="color:#ff0000">Protocol</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">mex</span>&quot;<span style="color:#0000ff"> </span><span style="color:#ff0000">SourceId</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">1</span>&quot;<span style="color:#0000ff"> /&gt;</span><br />   <span style="color:#0000ff">&lt;</span><span style="color:#a31515">MetadataSource</span><span style="color:#0000ff"> </span><span style="color:#ff0000">Address</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc/mex</span>&quot;<span style="color:#0000ff"> </span><span style="color:#ff0000">Protocol</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">mex</span>&quot;<span style="color:#0000ff"> </span><span style="color:#ff0000">SourceId</span><span style="color:#0000ff">=</span>&quot;<span style="color:#0000ff">2</span>&quot;<span style="color:#0000ff"> /&gt;</span><br /> <span style="color:#0000ff">&lt;/</span><span style="color:#a31515">MetadataSources</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>As you can see we added a new MetadataSource that points to the Route service and we gave it a SourceId of 2.&#160; Now right click the service and select “Update Service Reference”.&#160; This will generate a single service proxy for both the Geocode and Route services.&#160; Pretty slick huh?</p>
<p>The next step will be to create a ViewModel that will contain an ICommand that will execute the route calculation, properties that will represent a “To” address and a “From” address.&#160; We will also need a property for the RouteResult and for the directions we generate.&#160; Lets first create our Direction object:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:0230a924-5d25-4bed-880a-8b8cca1043e9" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">Direction</span><br /> {<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">string</span> Description { <span style="color:#0000ff">get</span>; <span style="color:#0000ff">set</span>; }<br />     <span style="color:#0000ff">public</span> <span style="color:#2b91af">Location</span> Location { <span style="color:#0000ff">get</span>; <span style="color:#0000ff">set</span>; }<br /> }</div>
</p></div>
</p></div>
<p>Now we will need a make-shift delegate command (do not use in production code):</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:424be6fd-5bed-4501-ac25-33db908058c2" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">DelegateCommand</span> : <span style="color:#2b91af">ICommand</span><br /> {<br />     <span style="color:#0000ff">private</span> <span style="color:#2b91af">Action</span> _execute;<br />     <span style="color:#0000ff">public</span> DelegateCommand(<span style="color:#2b91af">Action</span> execute)<br />     {<br />         _execute = execute;<br />     }<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">bool</span> CanExecute(<span style="color:#0000ff">object</span> parameter)<br />     {<br />         <span style="color:#0000ff">return</span> <span style="color:#0000ff">true</span>;<br />     }<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">event</span> <span style="color:#2b91af">EventHandler</span> CanExecuteChanged;<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> Execute(<span style="color:#0000ff">object</span> parameter)<br />     {<br />         _execute.Invoke();<br />     }<br /> }</div>
</p></div>
</p></div>
<p>Now on to the ViewModel itself:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:d9737cbe-bea9-4b93-af31-534d3ad53cb1" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">RouteViewModel</span>: <span style="color:#2b91af">INotifyPropertyChanged</span><br /> {<br />     <span style="color:#0000ff">public</span> <span style="color:#2b91af">ICommand</span> CalculateRouteCommand { <span style="color:#0000ff">get</span>; <span style="color:#0000ff">private</span> <span style="color:#0000ff">set</span>; }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">string</span> _from = <span style="color:#a31515">&quot;Meridian, ID&quot;</span>;<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">string</span> From<br />     {<br />         <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> _from; }<br />         <span style="color:#0000ff">set</span><br />         {<br />             _from = <span style="color:#0000ff">value</span>;<br />             OnPropertyChanged(<span style="color:#a31515">&quot;From&quot;</span>);<br />         }<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">string</span> _to = <span style="color:#a31515">&quot;Boise, ID&quot;</span>;<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">string</span> To<br />     {<br />         <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> _to; }<br />         <span style="color:#0000ff">set</span><br />         {<br />             _to = <span style="color:#0000ff">value</span>;<br />             OnPropertyChanged(<span style="color:#a31515">&quot;To&quot;</span>);<br />         }<br />     }</p>
<p>     <span style="color:#0000ff">private</span> BingServices.<span style="color:#2b91af">RouteResult</span> _routeResult;<br />     <span style="color:#0000ff">public</span> BingServices.<span style="color:#2b91af">RouteResult</span> RouteResult<br />     {<br />         <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> _routeResult; }<br />         <span style="color:#0000ff">set</span><br />         {<br />             _routeResult = <span style="color:#0000ff">value</span>;<br />             OnPropertyChanged(<span style="color:#a31515">&quot;RouteResult&quot;</span>);<br />         }<br />     }<br />     </p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#2b91af">ObservableCollection</span>&lt;<span style="color:#2b91af">Direction</span>&gt; _directions;<br />     <span style="color:#0000ff">public</span> <span style="color:#2b91af">ObservableCollection</span>&lt;<span style="color:#2b91af">Direction</span>&gt; Directions<br />     {<br />         <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> _directions; }<br />         <span style="color:#0000ff">set</span><br />         {<br />             _directions = <span style="color:#0000ff">value</span>;<br />             OnPropertyChanged(<span style="color:#a31515">&quot;Directions&quot;</span>);<br />         }<br />     }</p>
<p>     <span style="color:#0000ff">public</span> RouteViewModel()<br />     {<br />         CalculateRouteCommand = <span style="color:#0000ff">new</span> <span style="color:#2b91af">DelegateCommand</span>(CalculateRoute);<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> CalculateRoute()<br />     {<br />         <span style="color:#0000ff">var</span> from = GeocodeAddress(From);<br />         <span style="color:#0000ff">var</span> to = GeocodeAddress(To);</p>
<p>         CalculateRoute(from, to);<br />     }</p>
<p>     <span style="color:#0000ff">private</span> BingServices.<span style="color:#2b91af">GeocodeResult</span> GeocodeAddress(<span style="color:#0000ff">string</span> address)<br />     {<br />         BingServices.<span style="color:#2b91af">GeocodeResult</span> result = <span style="color:#0000ff">null</span>;</p>
<p>         <span style="color:#0000ff">using</span> (BingServices.<span style="color:#2b91af">GeocodeServiceClient</span> client = <span style="color:#0000ff">new</span> BingServices.<span style="color:#2b91af">GeocodeServiceClient</span>(<span style="color:#a31515">&quot;CustomBinding_IGeocodeService&quot;</span>))<br />         {<br />             BingServices.<span style="color:#2b91af">GeocodeRequest</span> request = <span style="color:#0000ff">new</span> BingServices.<span style="color:#2b91af">GeocodeRequest</span>();<br />             request.Credentials = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Credentials</span>() { ApplicationId = (<span style="color:#2b91af">App</span>.Current.Resources[<span style="color:#a31515">&quot;MyCredentials&quot;</span>] <span style="color:#0000ff">as</span> <span style="color:#2b91af">ApplicationIdCredentialsProvider</span>).ApplicationId };<br />             request.Query = address;<br />             result = client.Geocode(request).Results[0];<br />         }</p>
<p>         <span style="color:#0000ff">return</span> result;<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> CalculateRoute(BingServices.<span style="color:#2b91af">GeocodeResult</span> from, BingServices.<span style="color:#2b91af">GeocodeResult</span> to)<br />     {<br />         <span style="color:#0000ff">using</span> (BingServices.<span style="color:#2b91af">RouteServiceClient</span> client = <span style="color:#0000ff">new</span> BingServices.<span style="color:#2b91af">RouteServiceClient</span>(<span style="color:#a31515">&quot;CustomBinding_IRouteService&quot;</span>))<br />         {<br />             BingServices.<span style="color:#2b91af">RouteRequest</span> request = <span style="color:#0000ff">new</span> BingServices.<span style="color:#2b91af">RouteRequest</span>();<br />             request.Credentials = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Credentials</span>() { ApplicationId = (<span style="color:#2b91af">App</span>.Current.Resources[<span style="color:#a31515">&quot;MyCredentials&quot;</span>] <span style="color:#0000ff">as</span> <span style="color:#2b91af">ApplicationIdCredentialsProvider</span>).ApplicationId };<br />             request.Waypoints = <span style="color:#0000ff">new</span> <span style="color:#2b91af">ObservableCollection</span>&lt;BingServices.<span style="color:#2b91af">Waypoint</span>&gt;();<br />             request.Waypoints.Add(ConvertResultToWayPoint(from));<br />             request.Waypoints.Add(ConvertResultToWayPoint(to));</p>
<p>             request.Options = <span style="color:#0000ff">new</span> BingServices.<span style="color:#2b91af">RouteOptions</span>();<br />             request.Options.RoutePathType = BingServices.<span style="color:#2b91af">RoutePathType</span>.Points;</p>
<p>             RouteResult = client.CalculateRoute(request).Result;<br />         }</p>
<p>         GetDirections();<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> GetDirections()<br />     {<br />         Directions = <span style="color:#0000ff">new</span> <span style="color:#2b91af">ObservableCollection</span>&lt;<span style="color:#2b91af">Direction</span>&gt;();</p>
<p>         <span style="color:#0000ff">foreach</span> (BingServices.<span style="color:#2b91af">ItineraryItem</span> item <span style="color:#0000ff">in</span> RouteResult.Legs[0].Itinerary)<br />         {<br />             <span style="color:#0000ff">var</span> direction = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Direction</span>();<br />             direction.Description = GetDirectionText(item);<br />             direction.Location = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Location</span>(item.Location.Latitude, item.Location.Longitude);<br />             Directions.Add(direction);<br />         }<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">string</span> GetDirectionText(BingServices.<span style="color:#2b91af">ItineraryItem</span> item)<br />     {<br />         <span style="color:#0000ff">string</span> contentString = item.Text;<br />         <span style="color:#008000">//Remove tags from the string</span><br />         <span style="color:#2b91af">Regex</span> regex = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Regex</span>(<span style="color:#a31515">&quot;&lt;(.|&#92;n)*?&gt;&quot;</span>);<br />         contentString = regex.Replace(contentString, <span style="color:#0000ff">string</span>.Empty);<br />         <span style="color:#0000ff">return</span> contentString;<br />     }</p>
<p>     <span style="color:#0000ff">private</span> BingServices.<span style="color:#2b91af">Waypoint</span> ConvertResultToWayPoint(BingServices.<span style="color:#2b91af">GeocodeResult</span> result)<br />     {<br />         BingServices.<span style="color:#2b91af">Waypoint</span> waypoint = <span style="color:#0000ff">new</span> BingServices.<span style="color:#2b91af">Waypoint</span>();<br />         waypoint.Description = result.DisplayName;<br />         waypoint.Location = result.Locations[0];<br />         <span style="color:#0000ff">return</span> waypoint;<br />     }</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">event</span> <span style="color:#2b91af">PropertyChangedEventHandler</span> PropertyChanged;<br />     <span style="color:#0000ff">protected</span> <span style="color:#0000ff">virtual</span> <span style="color:#0000ff">void</span> OnPropertyChanged(<span style="color:#0000ff">string</span> propertyName)<br />     {<br />         <span style="color:#0000ff">if</span> (PropertyChanged != <span style="color:#0000ff">null</span>)<br />             PropertyChanged(<span style="color:#0000ff">this</span>, <span style="color:#0000ff">new</span> <span style="color:#2b91af">PropertyChangedEventArgs</span>(propertyName));<br />     }<br /> }</div>
</p></div>
</p></div>
<p>Let’s walk though the CalculateRoute Method.&#160; First we geocode the “From” and “To” properties the same way we did in the <a href="http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/" target="_blank">geocoding post</a>.&#160; Once we have our From and To locations we use those results to generate a RouteRequest and send that request to the Route service.&#160; The service will generate a result and we set our RouteResult property accordingly.&#160; This property will be used in data binding shortly.&#160; Next we generate an ObservableCollection&lt;Direction&gt; by looping through all the ItineraryItems in the result.&#160; </p>
<p>Now that we have generate all of our data, we need to create a View that supports and displays this data, but before we do that we need to create some attached properties.&#160; Why do you ask?&#160; Well because as it stands, the Bing Maps WPF control is not data binding friendly.&#160; So we need to enable data binding with the use of attached properties.&#160; We will need an attached property for the Route result which will be responsible for drawing the route line on the map.&#160; We will also need one for the MapLayer that will be used to contain the route line.&#160; Here is the code:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:55925f26-554d-4793-8b07-532984d855c6" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">MapInteractivity</span><br /> {<br />     <span style="color:#0000ff">#region</span> RouteResult</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">DependencyProperty</span> RouteResultProperty = <span style="color:#2b91af">DependencyProperty</span>.RegisterAttached(<span style="color:#a31515">&quot;RouteResult&quot;</span>, <span style="color:#0000ff">typeof</span>(BingServices.<span style="color:#2b91af">RouteResult</span>), <span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">MapInteractivity</span>), <span style="color:#0000ff">new</span> <span style="color:#2b91af">UIPropertyMetadata</span>(<span style="color:#0000ff">null</span>, OnRouteResultChanged));<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> BingServices.<span style="color:#2b91af">RouteResult</span> GetRouteResult(<span style="color:#2b91af">DependencyObject</span> target)<br />     {<br />         <span style="color:#0000ff">return</span> (BingServices.<span style="color:#2b91af">RouteResult</span>)target.GetValue(RouteResultProperty);<br />     }<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> SetRouteResult(<span style="color:#2b91af">DependencyObject</span> target, BingServices.<span style="color:#2b91af">RouteResult</span> value)<br />     {<br />         target.SetValue(RouteResultProperty, value);<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnRouteResultChanged(<span style="color:#2b91af">DependencyObject</span> o, <span style="color:#2b91af">DependencyPropertyChangedEventArgs</span> e)<br />     {<br />         OnRouteResultChanged((<span style="color:#2b91af">Map</span>)o, (BingServices.<span style="color:#2b91af">RouteResult</span>)e.OldValue, (BingServices.<span style="color:#2b91af">RouteResult</span>)e.NewValue);<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnRouteResultChanged(<span style="color:#2b91af">Map</span> map, BingServices.<span style="color:#2b91af">RouteResult</span> oldValue, BingServices.<span style="color:#2b91af">RouteResult</span> newValue)<br />     {<br />         <span style="color:#2b91af">MapPolyline</span> routeLine = <span style="color:#0000ff">new</span> <span style="color:#2b91af">MapPolyline</span>();<br />         routeLine.Locations = <span style="color:#0000ff">new</span> <span style="color:#2b91af">LocationCollection</span>();<br />         routeLine.Opacity = 0.65;<br />         routeLine.Stroke = <span style="color:#0000ff">new</span> <span style="color:#2b91af">SolidColorBrush</span>(<span style="color:#2b91af">Colors</span>.Blue);<br />         routeLine.StrokeThickness = 5.0;</p>
<p>         <span style="color:#0000ff">foreach</span> (BingServices.<span style="color:#2b91af">Location</span> loc <span style="color:#0000ff">in</span> newValue.RoutePath.Points)<br />         {<br />             routeLine.Locations.Add(<span style="color:#0000ff">new</span> <span style="color:#2b91af">Location</span>(loc.Latitude, loc.Longitude));<br />         }</p>
<p>         <span style="color:#0000ff">var</span> routeLineLayer = GetRouteLineLayer(map);<br />         <span style="color:#0000ff">if</span> (routeLineLayer == <span style="color:#0000ff">null</span>)<br />         {<br />             routeLineLayer = <span style="color:#0000ff">new</span> <span style="color:#2b91af">MapLayer</span>();<br />             SetRouteLineLayer(map, routeLineLayer);<br />         }</p>
<p>         routeLineLayer.Children.Clear();<br />         routeLineLayer.Children.Add(routeLine);</p>
<p>         <span style="color:#008000">//Set the map view</span><br />         <span style="color:#2b91af">LocationRect</span> rect = <span style="color:#0000ff">new</span> <span style="color:#2b91af">LocationRect</span>(routeLine.Locations[0], routeLine.Locations[routeLine.Locations.Count - 1]);<br />         map.SetView(rect);<br />     }</p>
<p>     <span style="color:#0000ff">#endregion</span> <span style="color:#008000">//RouteResult</span></p>
<p>     <span style="color:#0000ff">#region</span> RouteLineLayer</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">DependencyProperty</span> RouteLineLayerProperty = <span style="color:#2b91af">DependencyProperty</span>.RegisterAttached(<span style="color:#a31515">&quot;RouteLineLayer&quot;</span>, <span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">MapLayer</span>), <span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">MapInteractivity</span>), <span style="color:#0000ff">new</span> <span style="color:#2b91af">UIPropertyMetadata</span>(<span style="color:#0000ff">null</span>, OnRouteLineLayerChanged));<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#2b91af">MapLayer</span> GetRouteLineLayer(<span style="color:#2b91af">DependencyObject</span> target)<br />     {<br />         <span style="color:#0000ff">return</span> (<span style="color:#2b91af">MapLayer</span>)target.GetValue(RouteLineLayerProperty);<br />     }<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> SetRouteLineLayer(<span style="color:#2b91af">DependencyObject</span> target, <span style="color:#2b91af">MapLayer</span> value)<br />     {<br />         target.SetValue(RouteLineLayerProperty, value);<br />     }<br />     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnRouteLineLayerChanged(<span style="color:#2b91af">DependencyObject</span> o, <span style="color:#2b91af">DependencyPropertyChangedEventArgs</span> e)<br />     {<br />         OnRouteLineLayerChanged((<span style="color:#2b91af">Map</span>)o, (<span style="color:#2b91af">MapLayer</span>)e.OldValue, (<span style="color:#2b91af">MapLayer</span>)e.NewValue);<br />     }<br />     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnRouteLineLayerChanged(<span style="color:#2b91af">Map</span> map, <span style="color:#2b91af">MapLayer</span> oldValue, <span style="color:#2b91af">MapLayer</span> newValue)<br />     {<br />         <span style="color:#0000ff">if</span> (!map.Children.Contains(newValue))<br />             map.Children.Add(newValue);<br />     }</p>
<p>     <span style="color:#0000ff">#endregion</span> <span style="color:#008000">//RouteLineLayer</span><br /> }</div>
</p></div>
</p></div>
<p>The RouteResult property simply creates a MapPolyline, loops through all the points in the result and adds the locations to the route line.&#160; It then gets the RouteLineLayer and adds it to the map.&#160; Lastly, it sets the map’s view to best fit the route line.</p>
<p>Now we are ready for the View:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:393d6882-6c78-48e8-9046-d517df235427" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Window</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Class</span><span style="color:#0000ff">=&quot;BingMapsCalculateRouteDemo.MainWindow&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">x</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">bing</span><span style="color:#0000ff">=&quot;clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">core</span><span style="color:#0000ff">=&quot;clr-namespace:BingMapsCalculateRouteDemo.Core&quot;</span><br />        <span style="color:#ff0000"> Title</span><span style="color:#0000ff">=&quot;MainWindow&quot;</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;600&quot;</span><span style="color:#ff0000"> Width</span><span style="color:#0000ff">=&quot;800&quot;&gt;</span></p>
<p>     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Window.Resources</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">DataTemplate</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Key</span><span style="color:#0000ff">=&quot;RouteTemplate&quot;&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Ellipse</span><span style="color:#ff0000"> Width</span><span style="color:#0000ff">=&quot;12&quot;</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;12&quot;</span><span style="color:#ff0000"> Fill</span><span style="color:#0000ff">=&quot;Red&quot;</span><span style="color:#ff0000"> Opacity</span><span style="color:#0000ff">=&quot;0.8&quot;</span> <br />                     <span style="color:#ff0000"> bing</span><span style="color:#0000ff">:</span><span style="color:#ff0000">MapLayer.Position</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Location}</span><span style="color:#0000ff">&quot;</span> <br />                     <span style="color:#ff0000"> bing</span><span style="color:#0000ff">:</span><span style="color:#ff0000">MapLayer.PositionOrigin</span><span style="color:#0000ff">=&quot;Center&quot;</span><br />                     <span style="color:#ff0000"> Tag</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding}</span><span style="color:#0000ff">&quot;</span><br />                     <span style="color:#ff0000"> MouseEnter</span><span style="color:#0000ff">=&quot;Route_MouseEnter&quot;</span> <br />                     <span style="color:#ff0000"> MouseLeave</span><span style="color:#0000ff">=&quot;Route_MouseLeave&quot;/&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">DataTemplate</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Window.Resources</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid.ColumnDefinitions</span><span style="color:#0000ff">&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">ColumnDefinition</span><span style="color:#ff0000"> Width</span><span style="color:#0000ff">=&quot;Auto&quot; /&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">ColumnDefinition</span><span style="color:#ff0000"> Width</span><span style="color:#0000ff">=&quot;*&quot; /&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid.ColumnDefinitions</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> MinWidth</span><span style="color:#0000ff">=&quot;150&quot;</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">=&quot;10&quot;&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">TextBox</span><span style="color:#ff0000"> Text</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> From}</span><span style="color:#0000ff">&quot; /&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">TextBox</span><span style="color:#ff0000"> Text</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> To}</span><span style="color:#0000ff">&quot;/&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#ff0000"> Content</span><span style="color:#0000ff">=&quot;Get Route&quot;</span><span style="color:#ff0000"> Command</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> CalculateRouteCommand}</span><span style="color:#0000ff">&quot;/&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">&gt;</span></p>
<p>         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#ff0000"> Grid.Column</span><span style="color:#0000ff">=&quot;1&quot;</span><span style="color:#ff0000"> Mode</span><span style="color:#0000ff">=&quot;AerialWithLabels&quot;</span><span style="color:#ff0000"> HorizontalAlignment</span><span style="color:#0000ff">=&quot;Stretch&quot;</span><span style="color:#ff0000"> VerticalAlignment</span><span style="color:#0000ff">=&quot;Stretch&quot;</span><span style="color:#ff0000"> AnimationLevel</span><span style="color:#0000ff">=&quot;Full&quot;</span><br />                  <span style="color:#ff0000"> core</span><span style="color:#0000ff">:</span><span style="color:#ff0000">MapInteractivity.RouteResult</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> RouteResult}</span><span style="color:#0000ff">&quot;</span><br />                  <span style="color:#ff0000"> core</span><span style="color:#0000ff">:</span><span style="color:#ff0000">MapInteractivity.RouteLineLayer</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> ElementName</span><span style="color:#0000ff">=RouteLineLayer}&quot;</span><br />                  <span style="color:#ff0000"> CredentialsProvider</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> MyCredentials}</span><span style="color:#0000ff">&quot; &gt;</span><br />             <span style="color:#a31515"></span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">MapLayer</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;RouteLineLayer&quot; /&gt;</span><br />             <span style="color:#a31515"></span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">MapLayer</span><span style="color:#0000ff">&gt;</span><br />                 <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">MapItemsControl</span><span style="color:#ff0000"> ItemsSource</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Directions}</span><span style="color:#0000ff">&quot;</span><br />                                      <span style="color:#ff0000"> ItemTemplate</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> RouteTemplate}</span><span style="color:#0000ff">&quot;/&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">MapLayer</span><span style="color:#0000ff">&gt;</span></p>
<p>             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">MapLayer</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;ContentPopupLayer&quot;&gt;</span><br />                 <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;ContentPopup&quot;</span><span style="color:#ff0000"> Visibility</span><span style="color:#0000ff">=&quot;Collapsed&quot;</span><span style="color:#ff0000"> Background</span><span style="color:#0000ff">=&quot;White&quot;&gt;</span><br />                     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">=&quot;15&quot;&gt;</span><br />                         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;ContentPopupText&quot;</span><span style="color:#ff0000"> FontSize</span><span style="color:#0000ff">=&quot;12&quot;</span><span style="color:#ff0000"> FontWeight</span><span style="color:#0000ff">=&quot;Bold&quot;</span><span style="color:#ff0000"> TextWrapping</span><span style="color:#0000ff">=&quot;Wrap&quot; /&gt;</span><br />                     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">&gt;</span><br />                 <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">MapLayer</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Window</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>Oh and don’t forget the code behind:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:14f2277a-a347-48e8-afd6-41465898d7fe" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">partial</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">MainWindow</span> : <span style="color:#2b91af">Window</span><br /> {<br />     <span style="color:#0000ff">public</span> MainWindow()<br />     {<br />         InitializeComponent();<br />         DataContext = <span style="color:#0000ff">new</span> <span style="color:#2b91af">RouteViewModel</span>();<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> Route_MouseEnter(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">MouseEventArgs</span> e)<br />     {<br />         <span style="color:#2b91af">FrameworkElement</span> pin = sender <span style="color:#0000ff">as</span> <span style="color:#2b91af">FrameworkElement</span>;<br />         <span style="color:#2b91af">MapLayer</span>.SetPosition(ContentPopup, <span style="color:#2b91af">MapLayer</span>.GetPosition(pin));<br />         <span style="color:#2b91af">MapLayer</span>.SetPositionOffset(ContentPopup, <span style="color:#0000ff">new</span> <span style="color:#2b91af">Point</span>(20, -15));</p>
<p>         <span style="color:#0000ff">var</span> location = (<span style="color:#2b91af">Direction</span>)pin.Tag;</p>
<p>         ContentPopupText.Text = location.Description;<br />         ContentPopup.Visibility = <span style="color:#2b91af">Visibility</span>.Visible;<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> Route_MouseLeave(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">MouseEventArgs</span> e)<br />     {<br />         ContentPopup.Visibility = <span style="color:#2b91af">Visibility</span>.Collapsed;<br />     }<br /> }</div>
</p></div>
</p></div>
<p>Now let’s view the fruits of our labor at runtime.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/09/image.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://elegantcode.com/wp-content/uploads/2011/09/image_thumb.png" width="644" height="453" /></a></p>
<p>As you can see, given a “From” and “To” address, we can draw a route line and provide turn-by-turn directions as the user hovers over the direction pins.&#160; Pretty neat huh?&#160; And it wasn’t too difficult to pull off.&#160; As always you can <a href="http://www.brianlagunas.com/downloads/source/BingMapsCalculateRouteDemo.zip">Download the Source</a> and start playing.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Prism-fy the Bing Maps WPF Control (Beta)</title>
		<link>http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=prism-fy-the-bing-maps-wpf-control-beta</link>
		<comments>http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/#comments</comments>
		<pubDate>Wed, 31 Aug 2011 16:13:02 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[Prism]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[bing maps]]></category>
		<category><![CDATA[prism]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/</guid>
		<description><![CDATA[If you know me or know of me you are aware that I am a big Prism advocate/evangelist.&#160; You may have also noticed that I have been playing around with the new Bing Maps WPF control.&#160; So it shouldn’t surprise you that I would find a way to compose a Bing Map of loosely coupled [...]]]></description>
			<content:encoded><![CDATA[<p>If you know me or know of me you are aware that I am a big Prism advocate/evangelist.&#160; You may have also noticed that I have been <a href="http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/" target="_blank">playing</a> <a href="http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/" target="_blank">around</a> with the new Bing Maps WPF control.&#160; So it shouldn’t surprise you that I would find a way to compose a Bing Map of loosely coupled MapLayers at runtime using Prism.</p>
<p>The concept is simple.&#160; We want a Bing Maps application that can be extended at runtime.&#160; By extended, I mean that I want the ability to add new elements/modules to the Map at runtime.&#160; The important thing about these elements/modules is that they can come from anywhere and they should be loosely coupled from the Map as well as other elements/modules that may exist on the Map.</p>
<p>Luckily for us this is extremely simple to accomplish.&#160; All we have to do is create a custom RegionAdapter, register it with our Prism application, and then apply it to our Bing Map control.&#160; So let’s start with the RegionAdapter.</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e8809704-1b89-4479-9f50-32a29a8ce6e3" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">MapRegionAdapter</span> : <span style="color:#2b91af">RegionAdapterBase</span>&lt;<span style="color:#2b91af">Map</span>&gt;<br /> {<br />     <span style="color:#0000ff">public</span> MapRegionAdapter(<span style="color:#2b91af">IRegionBehaviorFactory</span> regionBehaviorFactory)<br />         : <span style="color:#0000ff">base</span>(regionBehaviorFactory)<br />     {</p>
<p>     }</p>
<p>     <span style="color:#0000ff">protected</span> <span style="color:#0000ff">override</span> <span style="color:#0000ff">void</span> Adapt(<span style="color:#2b91af">IRegion</span> region, <span style="color:#2b91af">Map</span> regionTarget)<br />     {<br />         region.Views.CollectionChanged += (s, e) =&gt;<br />         {<br />             <span style="color:#0000ff">if</span> (e.Action == System.Collections.Specialized.<span style="color:#2b91af">NotifyCollectionChangedAction</span>.Add)<br />             {<br />                 <span style="color:#0000ff">foreach</span> (<span style="color:#2b91af">FrameworkElement</span> element <span style="color:#0000ff">in</span> e.NewItems)<br />                     regionTarget.Children.Add(element);<br />             }<br />             <span style="color:#0000ff">else</span> <span style="color:#0000ff">if</span> (e.Action == System.Collections.Specialized.<span style="color:#2b91af">NotifyCollectionChangedAction</span>.Remove)<br />             {<br />                 <span style="color:#0000ff">foreach</span> (<span style="color:#2b91af">FrameworkElement</span> element <span style="color:#0000ff">in</span> e.OldItems)<br />                     <span style="color:#0000ff">if</span> (regionTarget.Children.Contains(element))<br />                         regionTarget.Children.Remove(element);<br />             }<br />         };<br />     }</p>
<p>     <span style="color:#0000ff">protected</span> <span style="color:#0000ff">override</span> <span style="color:#2b91af">IRegion</span> CreateRegion()<br />     {<br />         <span style="color:#0000ff">return</span> <span style="color:#0000ff">new</span> <span style="color:#2b91af">AllActiveRegion</span>();<br />     }<br /> }</div>
</p></div>
</p></div>
</p>
<p>Now in the Bootstrapper we need to register our mapping.</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:fce11974-ec82-4641-ac5c-a37a9ff443df" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">protected</span> <span style="color:#0000ff">override</span> <span style="color:#2b91af">RegionAdapterMappings</span> ConfigureRegionAdapterMappings()<br /> {<br />     <span style="color:#2b91af">RegionAdapterMappings</span> mappings = <span style="color:#0000ff">base</span>.ConfigureRegionAdapterMappings();<br />     mappings.RegisterMapping(<span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">Map</span>), Container.Resolve&lt;<span style="color:#2b91af">MapRegionAdapter</span>&gt;());<br />     <span style="color:#0000ff">return</span> mappings;<br /> }</div>
</p></div>
</p></div>
</p>
<p>Now we simply give the Map a region name. (this is actually all the shell has in it)</p>
<p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a72303d9-120c-4bba-a39e-18ae1979a63a" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#ff0000"> prism</span><span style="color:#0000ff">:</span><span style="color:#ff0000">RegionManager.RegionName</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">x</span><span style="color:#0000ff">:</span><span style="color:#a31515">Static</span><span style="color:#ff0000"> inf</span><span style="color:#0000ff">:</span><span style="color:#ff0000">RegionNames</span><span style="color:#0000ff">.MapRegion}&quot;</span><span style="color:#ff0000"> Center</span><span style="color:#0000ff">=&quot;40,-95&quot;</span><span style="color:#ff0000"> ZoomLevel</span><span style="color:#0000ff">=&quot;4&quot; /&gt;</span><br /> <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
</p>
<p>That is all there is to it.&#160; You can now start injecting modules onto the Map at runtime.&#160; Lets look at my two modules I am using as an example.&#160; Here is the structure of my application:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/08/image12.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb13.png" width="305" height="190" /></a></p>
<ul>
<li>ModuleA will inject a MapPolygon in the Shape of Texas.</li>
<li>ModuleB is the Earthquake application we built in an <a href="http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/" target="_blank">earlier post</a>.</li>
<li>Infrastructure is the project where shared code goes, in this case our MapRegionAdapter</li>
<li>BingMapsPrismfiedDemo is of course our shell project.</li>
</ul>
<p>This is what the application looks like at runtime when both modules have been injected into it.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/08/image13.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb14.png" width="644" height="334" /></a></p>
<p>Now I can easily add more layers to this map as I see fit.&#160; As always, <a href="http://www.brianlagunas.com/downloads/source/BingMapsPrismfiedDemo.zip">Download the Source</a> and start playing.&#160; You may want to add MEF support as well.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Mapping an Address with the Bing Maps WPF Control (Beta)</title>
		<link>http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=mapping-an-address-with-the-bing-maps-wpf-control-beta</link>
		<comments>http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/#comments</comments>
		<pubDate>Tue, 30 Aug 2011 22:21:00 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[bing maps]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/</guid>
		<description><![CDATA[In my last post I showed you how to get started using the Bing Maps WPF control by creating an earthquake application.&#160; Now I want to introduce you to the Bing Maps SOAP Services.&#160; The Bing Maps SOAP Services is a set of programmable SOAP services that allow you to integrate maps and imagery, driving [...]]]></description>
			<content:encoded><![CDATA[<p>In my last <a href="http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/" target="_blank">post</a> I showed you how to get started using the Bing Maps WPF control by creating an earthquake application.&#160; Now I want to introduce you to the Bing Maps SOAP Services.&#160; The Bing Maps SOAP Services is a set of programmable SOAP services that allow you to integrate maps and imagery, driving directions, distance calculations, and other location intelligence into your applications, business processes, and Web sites. </p>
<p>Let’s start with the Geocode Service which is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate.&#160; We will create a simple application that allows you to enter an address and place a pushpin at that location.&#160; First thing is first:</p>
<ol>
<li><a href="http://www.microsoft.com/download/en/details.aspx?id=27165" target="_blank">Get the Bing Maps WPF control.</a> </li>
<li><a href="https://www.bingmapsportal.com/" target="_blank">Get a Bing Maps API key.</a> </li>
</ol>
<p>You <strong><u>MUST</u></strong> have a Bing Maps API key in order to use any of the SOAP services.&#160; Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the <strong>Microsoft.Maps.MapControl.WPF.dll</strong>. This will most likely be located in Program Files or Program Files (x86) –&gt; Bing Maps WPF Control –&gt; Beta –&gt; Libraries. </p>
<p>Open up your App.xaml.&#160; You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:1c7fbbfb-a6ac-496d-a298-bddbd655ac65" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Application</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Class</span><span style="color:#0000ff">=&quot;BingMapsGeocodeDemo.App&quot;</span><br />             <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span><br />             <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">x</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span><br />             <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">bing</span><span style="color:#0000ff">=&quot;clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF&quot;</span><br />             <span style="color:#ff0000"> StartupUri</span><span style="color:#0000ff">=&quot;MainWindow.xaml&quot;&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Application.Resources</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">ApplicationIdCredentialsProvider</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Key</span><span style="color:#0000ff">=&quot;MyCredentials&quot;</span><span style="color:#ff0000"> ApplicationId</span><span style="color:#0000ff">=&quot;Your API Key&quot; /&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Application.Resources</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Application</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>Now create a very simple UI that will accept an address and a button to perform the geocoding:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:fc9a874e-765b-4bc2-b82b-88a96f1ef84c" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Window</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Class</span><span style="color:#0000ff">=&quot;BingMapsGeocodeDemo.MainWindow&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">x</span><span style="color:#0000ff">=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span><br />        <span style="color:#ff0000"> xmlns</span><span style="color:#0000ff">:</span><span style="color:#ff0000">bing</span><span style="color:#0000ff">=&quot;clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF&quot;</span><br />        <span style="color:#ff0000"> Title</span><span style="color:#0000ff">=&quot;MainWindow&quot;</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;600&quot;</span><span style="color:#ff0000"> Width</span><span style="color:#0000ff">=&quot;800&quot;&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Grid.RowDefinitions</span><span style="color:#0000ff">&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">RowDefinition</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;Auto&quot; /&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">RowDefinition</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">=&quot;*&quot; /&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid.RowDefinitions</span><span style="color:#0000ff">&gt;</span></p>
<p>         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> Orientation</span><span style="color:#0000ff">=&quot;Horizontal&quot;</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">=&quot;10&quot; &gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">TextBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;_txtAddress&quot;</span><span style="color:#ff0000"> MinWidth</span><span style="color:#0000ff">=&quot;250&quot; /&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#ff0000"> Content</span><span style="color:#0000ff">=&quot;Map It&quot;</span><span style="color:#ff0000"> IsDefault</span><span style="color:#0000ff">=&quot;True&quot;/&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">&gt;</span></p>
<p>         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#ff0000"> Grid.Row</span><span style="color:#0000ff">=&quot;1&quot;</span><span style="color:#ff0000"> CredentialsProvider</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> MyCredentials}</span><span style="color:#0000ff">&quot;</span><span style="color:#ff0000"> Center</span><span style="color:#0000ff">=&quot;40,-95&quot;</span><br />                  <span style="color:#ff0000"> ZoomLevel</span><span style="color:#0000ff">=&quot;4&quot;</span><span style="color:#ff0000"> AnimationLevel</span><span style="color:#0000ff">=&quot;Full&quot; &gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#0000ff">&gt;</span><br />     <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">&gt;</span><br /> <span style="color:#0000ff">&lt;/</span><span style="color:#a31515">Window</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>The next thing we need to do is add a new Service Reference to the project and point to the following service:</p>
<p><a title="http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc" href="http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc">http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc</a></p>
<p>Give your service a name (I called mine BingMapsService) and just for fun, in the “Add Service Reference” dialog, click the “Advanced” button and click “Generate asynchronous operations”.</p>
<p>Next we need to create a ViewModel to support our View.&#160; This is a WPF application after all.&#160; This ViewModel will need a command for the button that will perform the geocoding, and a property that will represent the result of the service that the UI will use to map the address.&#160; It should resemble something like this:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:7b09cd91-31d1-426f-a539-9fe004a3702a" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">GeocodeViewModel</span> : <span style="color:#2b91af">INotifyPropertyChanged</span><br /> {<br />     <span style="color:#0000ff">public</span> <span style="color:#2b91af">ICommand</span> GeocodeAddressCommand { <span style="color:#0000ff">get</span>; <span style="color:#0000ff">private</span> <span style="color:#0000ff">set</span>; }</p>
<p>     <span style="color:#0000ff">private</span> BingMapsService.<span style="color:#2b91af">GeocodeResult</span> _geocodeResult;<br />     <span style="color:#0000ff">public</span> BingMapsService.<span style="color:#2b91af">GeocodeResult</span> GeocodeResult<br />     {<br />         <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> _geocodeResult; }<br />         <span style="color:#0000ff">set</span><br />         {<br />             _geocodeResult = <span style="color:#0000ff">value</span>;<br />             OnPropertyChanged(<span style="color:#a31515">&quot;GeocodeResult&quot;</span>);<br />         }<br />     }</p>
<p>     <span style="color:#0000ff">public</span> GeocodeViewModel()<br />     {<br />         GeocodeAddressCommand = <span style="color:#0000ff">new</span> <span style="color:#2b91af">DelegateCommand</span>&lt;<span style="color:#2b91af">String</span>&gt;(GeocodeAddress);<br />     }</p>
<p>     <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> GeocodeAddress(<span style="color:#0000ff">string</span> address)<br />     {</p>
<p>     }</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">event</span> <span style="color:#2b91af">PropertyChangedEventHandler</span> PropertyChanged;<br />     <span style="color:#0000ff">protected</span> <span style="color:#0000ff">virtual</span> <span style="color:#0000ff">void</span> OnPropertyChanged(<span style="color:#0000ff">string</span> propertyName)<br />     {<br />         <span style="color:#0000ff">if</span> (PropertyChanged != <span style="color:#0000ff">null</span>)<br />             PropertyChanged(<span style="color:#0000ff">this</span>, <span style="color:#0000ff">new</span> <span style="color:#2b91af">PropertyChangedEventArgs</span>(propertyName));<br />     }<br /> }</div>
</p></div>
</p></div>
<p>I want to point out that the DelegateCommand&lt;T&gt; is a very simple ICommand implementation and should NOT be used in production applications.&#160; Here is the code:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:5cac2fd6-5f40-4d30-b70e-39cf0eb39d77" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">DelegateCommand</span>&lt;T&gt; : <span style="color:#2b91af">ICommand</span><br /> {<br />     <span style="color:#0000ff">private</span> <span style="color:#2b91af">Action</span>&lt;T&gt; _execute;</p>
<p>     <span style="color:#0000ff">public</span> DelegateCommand(<span style="color:#2b91af">Action</span>&lt;T&gt; execute)<br />     {<br />         _execute = execute;<br />     }</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">bool</span> CanExecute(<span style="color:#0000ff">object</span> parameter)<br />     {<br />         <span style="color:#0000ff">return</span> <span style="color:#0000ff">true</span>;<br />     }</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">event</span> <span style="color:#2b91af">EventHandler</span> CanExecuteChanged;</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> Execute(<span style="color:#0000ff">object</span> parameter)<br />     {<br />         _execute.Invoke((T)parameter);<br />     }<br /> }</div>
</p></div>
</p></div>
<p>Let’s hook our UI up to our command.&#160; it should look something like this:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:7f154da3-e1a9-48e1-8dcd-53063e2268ec" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">&lt;</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> Orientation</span><span style="color:#0000ff">=&quot;Horizontal&quot;</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">=&quot;10&quot; &gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">TextBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">=&quot;_txtAddress&quot;</span><span style="color:#ff0000"> MinWidth</span><span style="color:#0000ff">=&quot;250&quot; /&gt;</span><br />             <span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">Button</span><span style="color:#ff0000"> Content</span><span style="color:#0000ff">=&quot;Map It&quot;</span><span style="color:#ff0000"> IsDefault</span><span style="color:#0000ff">=&quot;True&quot;</span> <br />                    <span style="color:#ff0000"> Command</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> GeocodeAddressCommand}</span><span style="color:#0000ff">&quot;</span><br />                    <span style="color:#ff0000"> CommandParameter</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Text</span><span style="color:#0000ff">,</span><span style="color:#ff0000">ElementName</span><span style="color:#0000ff">=</span>_<span style="color:#0000ff">txtAddress}&quot;/&gt;</span><br />         <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>Notice that we are using the text of the TextBox as the CommandParameter.&#160; Next, we need to implement the command:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:0d2006e3-d7cf-483a-b57b-284d06ecffff" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> GeocodeAddress(<span style="color:#0000ff">string</span> address)<br /> {<br />     <span style="color:#0000ff">using</span> (BingMapsService.<span style="color:#2b91af">GeocodeServiceClient</span> client = <span style="color:#0000ff">new</span> BingMapsService.<span style="color:#2b91af">GeocodeServiceClient</span>(<span style="color:#a31515">&quot;CustomBinding_IGeocodeService&quot;</span>))<br />     {<br />         client.GeocodeCompleted += (o, e) =&gt;<br />         {<br />             <span style="color:#0000ff">if</span> (e.Error == <span style="color:#0000ff">null</span>)<br />             {<br />                 GeocodeResult = e.Result.Results[0];<br />             }<br />         };</p>
<p>         BingMapsService.<span style="color:#2b91af">GeocodeRequest</span> request = <span style="color:#0000ff">new</span> BingMapsService.<span style="color:#2b91af">GeocodeRequest</span>();<br />         request.Credentials = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Credentials</span>() { ApplicationId = (<span style="color:#2b91af">App</span>.Current.Resources[<span style="color:#a31515">&quot;MyCredentials&quot;</span>] <span style="color:#0000ff">as</span> <span style="color:#2b91af">ApplicationIdCredentialsProvider</span>).ApplicationId };<br />         request.Query = address;<br />         client.GeocodeAsync(request);<br />     }<br /> }</div>
</p></div>
</p></div>
<p>In this command we are simply creating an instance of the service client, creating a GeocodeRequest, setting the credentials using the ApplicationId we have stored in the App.xaml, and then using the address as the Query for the request.&#160; When the call to the service is completed we are setting the GeocodeResult property to the first element in the results.</p>
<p>Now the tricky part.&#160; We want to place a Pushpin on the address that was entered and then move the map to that location.&#160; We also need to make sure that when another address is entered, we clear any previous Pushpins that may exist on the map.&#160; We also have to be aware that other elements my be on the map and we don’t want to accidentally alter those elements.&#160; Oh and did I mention this was an MVVM application and this has to be done with just data binding? </p>
<p>The approach that I decided to go with is to use <a href="http://msdn.microsoft.com/en-us/library/ms749011.aspx" target="_blank">Attached Properties</a>.&#160; So I created two attached properties; one for the GeocodeResult and another for a MapLayer that will be dedicated to the GeocodeResult.&#160; This will allow us to create a MapLayer that is specific to our GeocodeResut and not alter any other elements that may be on the map.&#160; Let’s check out the code.</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:3cc3f4e4-cbae-4ffe-93bf-4a10f2e36d08" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">MapInteractivity</span><br /> {<br />     <span style="color:#0000ff">#region</span> GeocodeResult</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">DependencyProperty</span> GeocodeResultProperty = <span style="color:#2b91af">DependencyProperty</span>.RegisterAttached(<span style="color:#a31515">&quot;GeocodeResult&quot;</span>, <span style="color:#0000ff">typeof</span>(BingMapsService.<span style="color:#2b91af">GeocodeResult</span>), <span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">MapInteractivity</span>), <span style="color:#0000ff">new</span> <span style="color:#2b91af">UIPropertyMetadata</span>(<span style="color:#0000ff">null</span>, OnGeocodeResultChanged));<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> BingMapsService.<span style="color:#2b91af">GeocodeResult</span> GetGeocodeResult(<span style="color:#2b91af">Map</span> target)<br />     {<br />         <span style="color:#0000ff">return</span> (BingMapsService.<span style="color:#2b91af">GeocodeResult</span>)target.GetValue(GeocodeResultProperty);<br />     }<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> SetGeocodeResult(<span style="color:#2b91af">Map</span> target, BingMapsService.<span style="color:#2b91af">GeocodeResult</span> value)<br />     {<br />         target.SetValue(GeocodeResultProperty, value);<br />     }<br />     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnGeocodeResultChanged(<span style="color:#2b91af">DependencyObject</span> o, <span style="color:#2b91af">DependencyPropertyChangedEventArgs</span> e)<br />     {<br />         OnGeocodeResultChanged((<span style="color:#2b91af">Map</span>)o, (BingMapsService.<span style="color:#2b91af">GeocodeResult</span>)e.OldValue, (BingMapsService.<span style="color:#2b91af">GeocodeResult</span>)e.NewValue);<br />     }<br />     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnGeocodeResultChanged(<span style="color:#2b91af">Map</span> map, BingMapsService.<span style="color:#2b91af">GeocodeResult</span> oldValue, BingMapsService.<span style="color:#2b91af">GeocodeResult</span> newValue)<br />     {<br />         <span style="color:#2b91af">Location</span> location = newValue.Locations.Select(x =&gt; <span style="color:#0000ff">new</span> <span style="color:#2b91af">Location</span>(x.Latitude, x.Longitude)).First();</p>
<p>         <span style="color:#2b91af">Pushpin</span> pin = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Pushpin</span>();<br />         pin.Location = location;<br />         pin.ToolTip = newValue.Address.FormattedAddress;</p>
<p>         <span style="color:#0000ff">var</span> locationLayer = GetGeocodeResultLayer(map);<br />         <span style="color:#0000ff">if</span> (locationLayer == <span style="color:#0000ff">null</span>)<br />         {<br />             locationLayer = <span style="color:#0000ff">new</span> <span style="color:#2b91af">MapLayer</span>();<br />             SetGeocodeResultLayer(map, locationLayer);<br />         }</p>
<p>         locationLayer.Children.Clear();<br />         locationLayer.Children.Add(pin);</p>
<p>         map.SetView(location, map.ZoomLevel);<br />     }</p>
<p>     <span style="color:#0000ff">#endregion</span> <span style="color:#008000">//GeocodeResult</span></p>
<p>     <span style="color:#0000ff">#region</span> GeocodeResultLayer</p>
<p>     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">DependencyProperty</span> GeocodeResultLayerProperty = <span style="color:#2b91af">DependencyProperty</span>.RegisterAttached(<span style="color:#a31515">&quot;GeocodeResultLayer&quot;</span>, <span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">MapLayer</span>), <span style="color:#0000ff">typeof</span>(<span style="color:#2b91af">MapInteractivity</span>), <span style="color:#0000ff">new</span> <span style="color:#2b91af">UIPropertyMetadata</span>(<span style="color:#0000ff">null</span>, OnGeocodeResultLayerChanged));<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#2b91af">MapLayer</span> GetGeocodeResultLayer(<span style="color:#2b91af">DependencyObject</span> target)<br />     {<br />         <span style="color:#0000ff">return</span> (<span style="color:#2b91af">MapLayer</span>)target.GetValue(GeocodeResultLayerProperty);<br />     }<br />     <span style="color:#0000ff">public</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> SetGeocodeResultLayer(<span style="color:#2b91af">DependencyObject</span> target, <span style="color:#2b91af">MapLayer</span> value)<br />     {<br />         target.SetValue(GeocodeResultLayerProperty, value);<br />     }<br />     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnGeocodeResultLayerChanged(<span style="color:#2b91af">DependencyObject</span> o, <span style="color:#2b91af">DependencyPropertyChangedEventArgs</span> e)<br />     {<br />         OnGeocodeResultLayerChanged((<span style="color:#2b91af">Map</span>)o, (<span style="color:#2b91af">MapLayer</span>)e.OldValue, (<span style="color:#2b91af">MapLayer</span>)e.NewValue);<br />     }<br />     <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#0000ff">void</span> OnGeocodeResultLayerChanged(<span style="color:#2b91af">Map</span> map, <span style="color:#2b91af">MapLayer</span> oldValue, <span style="color:#2b91af">MapLayer</span> newValue)<br />     {<br />         map.Children.Add(newValue);<br />     }</p>
<p>     <span style="color:#0000ff">#endregion</span> <span style="color:#008000">//GeocodeResultLayer</span><br /> }</div>
</p></div>
</p></div>
<p>Notice that when the GeocodeResult changes we get the Location and create a pushpin for that location.&#160; We also set the tooltip to the FormattedAddress of the GeocodeResult.&#160; So when we hover over the pushpin we will see a nice little tooltip of the address.&#160; Next we try to get the GeocodeResultLayer from the map, if it is null this means it doesn’t exist on the map yet so we create one and assign it accordingly.&#160; We clear the layer child elemnts and then add out pushpin.&#160; The last thing we do is call the SetView method of the Map control passing in the location and the current ZoomLevel.</p>
<p>The final step is to use our AttachedProperty on the map.&#160; Be sure to create a namespace for the MapInteractivity class and define it as follows:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:72d6307a-aef3-4f70-8d47-8d4529fc74e0" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#a31515"></span><span style="color:#0000ff">&lt;</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#ff0000"> Grid.Row</span><span style="color:#0000ff">=&quot;1&quot;</span><span style="color:#ff0000"> CredentialsProvider</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> MyCredentials}</span><span style="color:#0000ff">&quot;</span><span style="color:#ff0000"> Center</span><span style="color:#0000ff">=&quot;40,-95&quot;</span><br />          <span style="color:#ff0000"> core</span><span style="color:#0000ff">:</span><span style="color:#ff0000">MapInteractivity.GeocodeResult</span><span style="color:#0000ff">=&quot;{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> GeocodeResult}</span><span style="color:#0000ff">&quot;</span><br />          <span style="color:#ff0000"> ZoomLevel</span><span style="color:#0000ff">=&quot;4&quot;</span><span style="color:#ff0000"> AnimationLevel</span><span style="color:#0000ff">=&quot;Full&quot; &gt;</span><br /> <span style="color:#a31515"></span><span style="color:#0000ff">&lt;/</span><span style="color:#a31515">bing</span><span style="color:#0000ff">:</span><span style="color:#a31515">Map</span><span style="color:#0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>One last thing.&#160; Be sure to remember to set your DataContext of your View to the ViewModel we have created:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:2f7d0b4f-e096-487d-8343-fb42c94c3360" class="wlWriterEditableSmartContent">
<div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
<div style="background-color: #ffffff; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"><span style="color:#0000ff">public</span> MainWindow()<br /> {<br />     InitializeComponent();<br />     DataContext = <span style="color:#0000ff">new</span> <span style="color:#2b91af">GeocodeViewModel</span>(); <br /> }</div>
</p></div>
</p></div>
<p>That’s it.&#160; You now have an application the can map (geocode) an address using the Bing Maps WPF Control and the Geocoding SOAP Service.&#160; Oh and we are doing this all with MVVM and data binding which is my favorite part.&#160; Be sure to <a href="http://www.brianlagunas.com/downloads/source/bingmapsgeocodedemo.zip">Download the Source</a> and start playing around.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Build an Earthquake Application with Bing Maps WPF Control (Beta)</title>
		<link>http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=build-an-earthquake-application-with-bing-maps-wpf-control-beta</link>
		<comments>http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/#comments</comments>
		<pubDate>Fri, 26 Aug 2011 21:45:33 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[bing maps]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/</guid>
		<description><![CDATA[Recently you may have noticed that the Bing Maps team released a WPF Map control which is currently in Beta.&#160; In light of the recent earth quake on the east coast of the United States, I thought an earthquake application would be a great way to become familiar with the Map control.&#160; There are a [...]]]></description>
			<content:encoded><![CDATA[<p>Recently you may have noticed that the Bing Maps team released a WPF Map control which is currently in Beta.&#160; In light of the recent earth quake on the east coast of the United States, I thought an earthquake application would be a great way to become familiar with the Map control.&#160; There are a few things you must do before we can get started.</p>
<ol>
<li><a href="http://www.microsoft.com/download/en/details.aspx?id=27165" target="_blank">Get the Bing Maps WPF control.</a> </li>
<li><a href="https://www.bingmapsportal.com/" target="_blank">Get a Bing Maps API key.</a> (not needed for development) </li>
</ol>
<p>Now that you have that out of the way let’s write an application.&#160; Create a new WPF application targeting the .NET 4.0 framework.&#160; Add a reference to the <strong>Microsoft.Maps.MapControl.WPF.dll</strong>.&#160; This will most likely be located in Program Files or Program Files (x86) –&gt; Bing Maps WPF Control –&gt; Beta –&gt; Libraries.&#160; Next you need to declare a namespace in XAML:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:b0e45db1-178c-47ee-a43c-f96c4ebed32f" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">:</span><span style="color: #ff0000">map</span><span style="color: #0000ff">=&quot;clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF&quot;</span></div>
</p></div>
</p></div>
<style type="text/css">
<p>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<div id="codeSnippetWrapper">
<div>Now just add the control to your view:</div>
<div>&#160;</div>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:cf458cf2-300f-473d-9f65-36ba8e09d15d" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">&gt;</span>          <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff"> /&gt;</span>          <br /><span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">&gt;</span></div>
</p></div>
</p></div>
<div>&#160;</div>
<p> And this is the control at run time:</p></div>
<div>&#160;</div>
<div><a href="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb11.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb1" border="0" alt="image_thumb1" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb1_thumb.png" width="657" height="460" /></a></div>
<p>Not much to look at, but it’s definitely a map. Notice that because we are not using an API key we get a nice little message that tells us where to get one.&#160; Well this is great and all, but we want to see earth quakes!&#160; So let’s start doing the real coding now. We know we will need an object to hold information about the earthquakes.</p>
<div id="codeSnippetWrapper">
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9d6f095e-dee9-4a74-a0ac-ecf48191c766" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">Earthquake</span>          <br />{          <br />&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Title { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }          <br />&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Description { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }          <br />&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #2b91af">Location</span> Location { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }          <br />}</div>
</p></div>
</p></div>
<div></div>
</p></div>
<p>That should take care of that.&#160; Next we need data about earthquakes and their locations.&#160; Luckily for us there is a free resource available to grab this information from <a href="http://earthquake.usgs.gov/" target="_blank">USGS</a>.&#160; So let’s write a simple service to get this information:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ca70e904-51dc-4915-b503-39a7448e3c55" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">EarthquakeService</span>        <br />{        <br />&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> <span style="color: #0000ff">void</span> GetRecentEarthquakes(<span style="color: #2b91af">EventHandler</span>&lt;<span style="color: #2b91af">EarthquakeEventArgs</span>&gt; callback)        <br />&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">WebClient</span> client = <span style="color: #0000ff">new</span> <span style="color: #2b91af">WebClient</span>();        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; client.OpenReadCompleted += (o, e) =&gt;        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">XDocument</span> doc = <span style="color: #2b91af">XDocument</span>.Load(e.Result);        </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> data = (<span style="color: #0000ff">from</span> eq <span style="color: #0000ff">in</span> doc.Element(<span style="color: #a31515">&quot;rss&quot;</span>).Element(<span style="color: #a31515">&quot;channel&quot;</span>).Elements(<span style="color: #a31515">&quot;item&quot;</span>)        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">select</span> <span style="color: #0000ff">new</span> <span style="color: #2b91af">Earthquake</span>()        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Title = eq.Element(<span style="color: #a31515">&quot;title&quot;</span>).Value,        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Description = eq.Element(<span style="color: #a31515">&quot;description&quot;</span>).Value,        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Location = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Location</span>(<span style="color: #2b91af">Convert</span>.ToDouble(eq.Element(<span style="color: #2b91af">XName</span>.Get(<span style="color: #a31515">&quot;lat&quot;</span>, <span style="color: #a31515">&quot;http://www.w3.org/2003/01/geo/wgs84_pos#&quot;</span>)).Value), <span style="color: #2b91af">Convert</span>.ToDouble(eq.Element(<span style="color: #2b91af">XName</span>.Get(<span style="color: #a31515">&quot;long&quot;</span>, <span style="color: #a31515">&quot;http://www.w3.org/2003/01/geo/wgs84_pos#&quot;</span>)).Value))        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }).ToList();        </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; callback(<span style="color: #0000ff">null</span>, <span style="color: #0000ff">new</span> <span style="color: #2b91af">EarthquakeEventArgs</span>(data));        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; };        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; client.OpenReadAsync(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Uri</span>(<span style="color: #a31515">&quot;http://earthquake.usgs.gov/eqcenter/recenteqsww/catalogs/eqs7day-M2.5.xml&quot;</span>));        <br />&#160;&#160;&#160; }        <br />}        </p>
<p><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">EarthquakeEventArgs</span> : <span style="color: #2b91af">EventArgs</span>        <br />{        <br />&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #2b91af">List</span>&lt;<span style="color: #2b91af">Earthquake</span>&gt; Locations { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }        </p>
<p>&#160;&#160;&#160; <span style="color: #0000ff">public</span> EarthquakeEventArgs(<span style="color: #2b91af">List</span>&lt;<span style="color: #2b91af">Earthquake</span>&gt; locations)        <br />&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Locations = locations;        <br />&#160;&#160;&#160; }        <br />}</div>
</p></div>
</p></div>
<p>The last thing we need is a ViewModel that will expose our earthquakes from consumption by our view:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:3f07ad34-5279-4fcc-8938-70c637a61e25" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">EarthquakeViewModel</span> : <span style="color: #2b91af">INotifyPropertyChanged</span>        <br />{        <br />&#160;&#160;&#160; <span style="color: #0000ff">private</span> <span style="color: #2b91af">ObservableCollection</span>&lt;<span style="color: #2b91af">Earthquake</span>&gt; _earthquakes;        <br />&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #2b91af">ObservableCollection</span>&lt;<span style="color: #2b91af">Earthquake</span>&gt; Earthquakes        <br />&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">get</span> { <span style="color: #0000ff">return</span> _earthquakes; }        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">set</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; _earthquakes = <span style="color: #0000ff">value</span>;        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; OnPropertyChanged(<span style="color: #a31515">&quot;Earthquakes&quot;</span>);        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; }        <br />&#160;&#160;&#160; }&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; </p>
<p>&#160;&#160;&#160; <span style="color: #0000ff">public</span> EarthquakeViewModel()        <br />&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">EarthquakeService</span>.GetRecentEarthquakes((o, ea) =&gt;        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Earthquakes = <span style="color: #0000ff">new</span> <span style="color: #2b91af">ObservableCollection</span>&lt;<span style="color: #2b91af">Earthquake</span>&gt;(ea.Locations);        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; });        <br />&#160;&#160;&#160; }        </p>
<p>&#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #0000ff">event</span> <span style="color: #2b91af">PropertyChangedEventHandler</span> PropertyChanged;        <br />&#160;&#160;&#160; <span style="color: #0000ff">protected</span> <span style="color: #0000ff">virtual</span> <span style="color: #0000ff">void</span> OnPropertyChanged(<span style="color: #0000ff">string</span> propertyName)        <br />&#160;&#160;&#160; {        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (PropertyChanged != <span style="color: #0000ff">null</span>)        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; PropertyChanged(<span style="color: #0000ff">this</span>, <span style="color: #0000ff">new</span> <span style="color: #2b91af">PropertyChangedEventArgs</span>(propertyName));        <br />&#160;&#160;&#160; }        <br />}</div>
</p></div>
</p></div>
<p>Don’t forget to set the DataContext of the view to our ViewModel:</p>
<div>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:1e71ff2c-77af-4fda-9a2b-14408c9a9421" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #0000ff">public</span> MainWindow()          <br />{          <br />&#160;&#160;&#160; InitializeComponent();          <br />&#160;&#160;&#160; DataContext = <span style="color: #0000ff">new</span> <span style="color: #2b91af">EarthquakeViewModel</span>();          <br />}</div>
</p></div>
</p></div>
</p></div>
<div>&#160;</div>
<div>Now we need to data bind our Earthquakes property to the Map control and to do that we need to use a MapItemsControl:</div>
<div>&#160;</div>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:b1d00ae8-d763-48d6-97d7-d6ceeeafb18b" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">MapItemsControl</span><span style="color: #ff0000"> ItemsSource</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">Binding</span><span style="color: #ff0000"> Earthquakes}</span><span style="color: #0000ff">&quot; /&gt;</span>        <br /><span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff">&gt;</span></div>
</p></div>
</p></div>
<div id="codeSnippetWrapper">&#160;</div>
<p>Here is what you will see when you run the application:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb31.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb3" border="0" alt="image_thumb3" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb3_thumb.png" width="533" height="358" /></a></p>
<p>HEY! Where the hell are my earthquakes?&#160; This thing sucks!&#160; Piece of sh….. Oh wait, I need to tell the map how to render the earthquakes.&#160; So we need to create a DataTemplate:</p>
<div id="codeSnippetWrapper">
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e456abe8-55c6-4683-bf3d-d604829d7b23" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">Window.Resources</span><span style="color: #0000ff">&gt;</span>          <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">DataTemplate</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Key</span><span style="color: #0000ff">=&quot;EarthquakeTemplate&quot;&gt;</span>          <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Pushpin</span><span style="color: #ff0000"> map</span><span style="color: #0000ff">:</span><span style="color: #ff0000">MapLayer.Position</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">Binding</span><span style="color: #ff0000"> Location}</span><span style="color: #0000ff">&quot; /&gt;</span>          <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">DataTemplate</span><span style="color: #0000ff">&gt;</span>          <br /><span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">Window.Resources</span><span style="color: #0000ff">&gt;</span></div>
</p></div>
</p></div>
<div></div>
</p></div>
<p>And don’t forget to specify the ItemTemplate:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a1d85e9f-15f5-4e4e-aa90-005a5b100a3d" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">MapItemsControl</span><span style="color: #ff0000"> ItemsSource</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">Binding</span><span style="color: #ff0000"> Earthquakes}</span><span style="color: #0000ff">&quot;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000"> ItemTemplate</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">StaticResource</span><span style="color: #ff0000"> EarthquakeTemplate}</span><span style="color: #0000ff">&quot;/&gt;</span>        <br /><span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff">&gt;</span></div>
</p></div>
</p></div>
<div>&#160;</div>
<p>Now let’s see what we get when we run the application:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb51.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb5" border="0" alt="image_thumb5" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb5_thumb.png" width="533" height="358" /></a></p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb71.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb7" border="0" alt="image_thumb7" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb7_thumb.png" width="533" height="358" /></a></p>
<p>Hey look! Earthquakes.&#160; That is so cool. But wait, I want to see information about the earth quake.&#160; Preferably in a popup when I hover over a Pushpin.&#160; Well Lets wire that up real quick.&#160; First we need to add a MapLayer to the map that will act as our popup:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:f7532b8a-4e19-4a95-b8f5-ac8ed3e25f96" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">MapItemsControl</span><span style="color: #ff0000"> ItemsSource</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">Binding</span><span style="color: #ff0000"> Earthquakes}</span><span style="color: #0000ff">&quot;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000"> ItemTemplate</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">StaticResource</span><span style="color: #ff0000"> EarthquakeTemplate}</span><span style="color: #0000ff">&quot;/&gt;</span>        </p>
<p>&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">MapLayer</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">=&quot;ContentPopupLayer&quot;&gt;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">Grid</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">=&quot;ContentPopup&quot;</span><span style="color: #ff0000"> Visibility</span><span style="color: #0000ff">=&quot;Collapsed&quot;</span><span style="color: #ff0000"> Background</span><span style="color: #0000ff">=&quot;White&quot;</span><span style="color: #ff0000"> Opacity</span><span style="color: #0000ff">=&quot;0.85&quot;&gt;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">StackPanel</span><span style="color: #ff0000"> Margin</span><span style="color: #0000ff">=&quot;15&quot;&gt;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">=&quot;ContentPopupText&quot;</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">=&quot;12&quot;</span><span style="color: #ff0000"> FontWeight</span><span style="color: #0000ff">=&quot;Bold&quot; &gt;&lt;/</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">=&quot;ContentPopupDescription&quot;</span> <span style="color: #ff0000">FontSize</span><span style="color: #0000ff">=&quot;12&quot;&gt;&lt;/</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">&gt;</span>        <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">MapLayer</span><span style="color: #0000ff">&gt;</span>        <br /><span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Map</span><span style="color: #0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>Now we need to add some event handler to the ItemTemplate.</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a09d4b21-e4aa-4e56-ae8c-7109e3c1f3e8" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">DataTemplate</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Key</span><span style="color: #0000ff">=&quot;EarthquakeTemplate&quot;&gt;</span>        <br />&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff">&lt;</span><span style="color: #a31515">map</span><span style="color: #0000ff">:</span><span style="color: #a31515">Pushpin</span><span style="color: #ff0000"> map</span><span style="color: #0000ff">:</span><span style="color: #ff0000">MapLayer.Position</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">Binding</span><span style="color: #ff0000"> Location}</span><span style="color: #0000ff">&quot;</span><span style="color: #ff0000"> Tag</span><span style="color: #0000ff">=&quot;{</span><span style="color: #a31515">Binding}</span><span style="color: #0000ff">&quot;</span><span style="color: #ff0000"> MouseEnter</span><span style="color: #0000ff">=&quot;Pushpin_MouseEnter&quot;</span><span style="color: #ff0000"> MouseLeave</span><span style="color: #0000ff">=&quot;Pushpin_MouseLeave&quot; /&gt;</span>        <br /><span style="color: #a31515"></span><span style="color: #0000ff">&lt;/</span><span style="color: #a31515">DataTemplate</span><span style="color: #0000ff">&gt;</span></div>
</p></div>
</p></div>
<p>We have added two event handlers; one for when we mouse over and the other for when the mouse is no longer over the pushpin.&#160; Notice that I am storing the bound item in the Tag of the Pushpin object.&#160; We will need that to change the location of popup.</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e7ae0e84-6550-4e87-a3cd-690848e1281c" class="wlWriterSmartContent">
<div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
<div style="padding-bottom: 2px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; white-space: nowrap; max-height: 300px; overflow: auto; padding-top: 2px"><span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> Pushpin_MouseEnter(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">MouseEventArgs</span> e)        <br />{        <br />&#160;&#160;&#160; <span style="color: #2b91af">FrameworkElement</span> pin = sender <span style="color: #0000ff">as</span> <span style="color: #2b91af">FrameworkElement</span>;        <br />&#160;&#160;&#160; <span style="color: #2b91af">MapLayer</span>.SetPosition(ContentPopup, <span style="color: #2b91af">MapLayer</span>.GetPosition(pin));        <br />&#160;&#160;&#160; <span style="color: #2b91af">MapLayer</span>.SetPositionOffset(ContentPopup, <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(20, -15));        </p>
<p>&#160;&#160;&#160; <span style="color: #0000ff">var</span> location = (<span style="color: #2b91af">Earthquake</span>)pin.Tag;        </p>
<p>&#160;&#160;&#160; ContentPopupText.Text = location.Title;        <br />&#160;&#160;&#160; ContentPopupDescription.Text = location.Description;        <br />&#160;&#160;&#160; ContentPopup.Visibility = <span style="color: #2b91af">Visibility</span>.Visible;        <br />}        </p>
<p><span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> Pushpin_MouseLeave(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">MouseEventArgs</span> e)        <br />{        <br />&#160;&#160;&#160; ContentPopup.Visibility = <span style="color: #2b91af">Visibility</span>.Collapsed;        <br />}</div>
</p></div>
</p></div>
<div id="codeSnippetWrapper">&#160;</div>
<p>Now when we hover over the Pushpin we get some useful information about the earthquake:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb91.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb9" border="0" alt="image_thumb9" src="http://elegantcode.com/wp-content/uploads/2011/08/image_thumb9_thumb.png" width="533" height="358" /></a></p>
<p>That’s it for this application.&#160; The Bing Maps WPF Control has been a long awaited control and I am glad it finally made it to WPF.&#160; As you can see it is pretty easy to use as well.&#160; Now you can <a href="http://brianlagunas.com/downloads/source/BingMapsWPFDemo.zip">Download the source</a> and start playing.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Extended WPF Toolkit Release 1.4.0</title>
		<link>http://elegantcode.com/2011/04/08/extended-wpf-toolkit-release-1-4-0/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=extended-wpf-toolkit-release-1-4-0</link>
		<comments>http://elegantcode.com/2011/04/08/extended-wpf-toolkit-release-1-4-0/#comments</comments>
		<pubDate>Fri, 08 Apr 2011 13:40:15 +0000</pubDate>
		<dc:creator>Brian Lagunas</dc:creator>
				<category><![CDATA[.Net 3.5]]></category>
		<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[extended wpf toolkit]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/04/08/extended-wpf-toolkit-release-1-4-0/</guid>
		<description><![CDATA[It’s that time again.&#160; Time for another release of the Extended WPF Toolkit.&#160; I know it’s only been three short months since the last release, but this release is packed with 11 new controls as well as many bug fixes and updated controls.&#160; I have been working hard to provide the WPF community with a [...]]]></description>
			<content:encoded><![CDATA[<p>It’s that time again.&#160; Time for another release of the <a href="http://wpftoolkit.codeplex.com/" target="_blank">Extended WPF Toolkit</a>.&#160; I know it’s only been three short months since the last release, but this release is packed with 11 new controls as well as many bug fixes and updated controls.&#160; I have been working hard to provide the WPF community with a full set of controls to meet the most common control needs.&#160; So let’s look at the newest members of the Extended WPF Toolkit family.</p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=Calculator&amp;referringTitle=Home" target="_blank">Calculator</a></h3>
<p>The Calculator is a control used for performing mathematical calculations.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/calculator.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="calculator" border="0" alt="calculator" src="http://elegantcode.com/wp-content/uploads/2011/04/calculator_thumb.jpg" width="245" height="270" /></a></p>
<p>It provides basic math functions, memory functions, as well as mouse and keyboard support.</p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=CalculatorUpDown&amp;referringTitle=Documentation" target="_blank">CalculatorUpDown</a></h3>
<p>The CalculatorUpDown provides a TextBox with button spinners that allow incrementing and decrementing numeric values by using the spinner buttons, keyboard up/down arrows, or mouse wheel. It also provides a Calculator dropdown which allows you to perform mathematical calculations.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/calculatorupdown.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="calculatorupdown" border="0" alt="calculatorupdown" src="http://elegantcode.com/wp-content/uploads/2011/04/calculatorupdown_thumb.jpg" width="198" height="244" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=ColorCanvas&amp;referringTitle=Documentation" target="_blank">ColorCanvas</a></h3>
<p>The ColorCanvas allows you to select a color either using an advanced color canvas, by setting the HexadecimalString, or by setting the ARGB values.&#160; This control has also been merged with the <a href="http://wpftoolkit.codeplex.com/wikipage?title=ColorPicker&amp;referringTitle=Documentation" target="_blank">ColorPicker</a> to provide advanced color editing abilities.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/color_canvas.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="color_canvas" border="0" alt="color_canvas" src="http://elegantcode.com/wp-content/uploads/2011/04/color_canvas_thumb.jpg" width="257" height="275" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=DateTimePicker&amp;referringTitle=Documentation" target="_blank">DateTimePicker</a></h3>
<p>Get the best of both worlds. The DateTimePicker provides a DateTimeUpDown control as well as a dropdown with a calendar and a TimePicker.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/datetimepicker.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="datetimepicker" border="0" alt="datetimepicker" src="http://elegantcode.com/wp-content/uploads/2011/04/datetimepicker_thumb.jpg" width="308" height="263" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=DecimalUpDown&amp;referringTitle=Documentation" target="_blank">DecimalUpDown</a></h3>
<p>The DecimalUpDown control provides a TextBox with button spinners that allow incrementing and decrementing Nullable&lt;Decimal&gt; values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/decimalupdown.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="decimalupdown" border="0" alt="decimalupdown" src="http://elegantcode.com/wp-content/uploads/2011/04/decimalupdown_thumb.jpg" width="524" height="226" /></a></p>
<p>When using the DecimalUpDown in data binding scenarios, bind your object&#8217;s value to the <b>Value</b> property. You can specify how much to increment the value by setting the <b>Increment</b> property. You can control the minimum and maximum allowed values by setting the <b>Minimum</b> and the <b>Maximum</b> properties. You can also specify if the user can directly edit the values in the text box by setting the <b>IsEditable</b> property. If you would like to get the actual fromatted string representation of the value, you can use the <b>Text</b> property.</p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=DoubleUpDown&amp;referringTitle=Documentation" target="_blank">DoubleUpDown</a></h3>
<p>The DoubleUpDown control provides a TextBox with button spinners that allow incrementing and decrementing Nullable&lt;Double&gt; values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/decimalupdown1.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="decimalupdown" border="0" alt="decimalupdown" src="http://elegantcode.com/wp-content/uploads/2011/04/decimalupdown_thumb1.jpg" width="524" height="226" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=IntegerUpDown&amp;referringTitle=Documentation" target="_blank">IntegerUpDown</a></h3>
<p>The IntegerUpDown control provides a TextBox with button spinners that allow incrementing and decrementing Nullable&lt;int&gt; values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/integerupdown.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="integerupdown" border="0" alt="integerupdown" src="http://elegantcode.com/wp-content/uploads/2011/04/integerupdown_thumb.jpg" width="448" height="236" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=PropertyGrid&amp;referringTitle=Documentation" target="_blank">PropertyGrid</a></h3>
<p>The PropertyGrid is a pure WPF replacement for the WinForm PropertyGrid control.&#160; Currently the PropertyGrid is in beta and still has a lot of work to be done on it.&#160; But it is ready from simple use and testing.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/propertygrid.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="propertygrid" border="0" alt="propertygrid" src="http://elegantcode.com/wp-content/uploads/2011/04/propertygrid_thumb.jpg" width="413" height="762" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=SplitButton&amp;referringTitle=Documentation" target="_blank">SplitButton</a></h3>
<p>The SplitButton control is a button that can be clicked and also provides a drop down in which you can place any custom content within. </p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/splitbutton.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="splitbutton" border="0" alt="splitbutton" src="http://elegantcode.com/wp-content/uploads/2011/04/splitbutton_thumb.jpg" width="496" height="470" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=TimePicker&amp;referringTitle=Documentation" target="_blank">TimePicker</a></h3>
<p>The TimePicker is a control that is specifically for the Time portion of a DateTime property.&#160; It provides a ButtonSpinner as well as a list of times to choose from.&#160; You can also manually type in the time as long as it matches the specified format.</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/time_picker.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="time_picker" border="0" alt="time_picker" src="http://elegantcode.com/wp-content/uploads/2011/04/time_picker_thumb.jpg" width="176" height="178" /></a></p>
<h3><a href="http://wpftoolkit.codeplex.com/wikipage?title=WatermarkTextBox&amp;referringTitle=Documentation" target="_blank">WatermarkTextBox</a></h3>
<p>The WatermarkTextBox is simply a TextBox that allows you to sepcify an object, usually a String, to represent null or missing text.&#160; Don’t think you are limited to just text!&#160; With this control you may use any object as a watermark.&#160; Here is an example using an image with text:</p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/watermarktextbox_image.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="watermarktextbox_image" border="0" alt="watermarktextbox_image" src="http://elegantcode.com/wp-content/uploads/2011/04/watermarktextbox_image_thumb.jpg" width="230" height="38" /></a></p>
<p><a href="http://elegantcode.com/wp-content/uploads/2011/04/watermarktextbox_imagename.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="watermarktextbox_imagename" border="0" alt="watermarktextbox_imagename" src="http://elegantcode.com/wp-content/uploads/2011/04/watermarktextbox_imagename_thumb.jpg" width="229" height="43" /></a></p>
<p>Also, all input controls in the Extended WPF Toolkit now provide a Watermark option.</p>
<p>That’s it for the new controls.&#160; I hope you enjoy version 1.4.0 and be sure to report any bugs or request new features in the <a href="http://wpftoolkit.codeplex.com/workitem/list/basic" target="_blank">Issue Tracker</a>.&#160; As always if you have any questions be sure to ask them in the <a href="http://wpftoolkit.codeplex.com/discussions" target="_blank">Discussions</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/04/08/extended-wpf-toolkit-release-1-4-0/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Mimicking the AppHarbor Deployment Experience</title>
		<link>http://elegantcode.com/2011/03/20/mimicking-the-appharbor-deployment-experience/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=mimicking-the-appharbor-deployment-experience</link>
		<comments>http://elegantcode.com/2011/03/20/mimicking-the-appharbor-deployment-experience/#comments</comments>
		<pubDate>Sun, 20 Mar 2011 20:59:16 +0000</pubDate>
		<dc:creator>Richard Cirerol</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[Git]]></category>
		<category><![CDATA[Rake]]></category>
		<category><![CDATA[TeamCity]]></category>
		<category><![CDATA[AppHarbor]]></category>

		<guid isPermaLink="false">http://elegantcode.com/?p=4205</guid>
		<description><![CDATA[On Thursday night at NETDUG (the Boise .NET Developer User Group), I demonstrated how to get started with AppHarbor.  I also showed how to mimic the AppHarbor deployment experience. And thanks to the generosity of the AppHarbor team, we were able to raffle off a Reflector license to one of our attendees! Getting Started with [...]]]></description>
			<content:encoded><![CDATA[<p>On Thursday night at NETDUG (the Boise .NET Developer User Group), I demonstrated how to get started with AppHarbor.  I also showed how to mimic the AppHarbor deployment experience.</p>
<p>And thanks to the generosity of the AppHarbor team, we were able to raffle off a Reflector license to one of our attendees!</p>
<h4>Getting Started with AppHarbor</h4>
<p>You can find <a href="http://www.aaronstannard.com/post/2011/01/14/Getting-Started-with-AppHarbor-e28093-Heroku-for-NET.aspx" target="_blank">many</a> <a href="http://devlicio.us/blogs/rob_reynolds/archive/2011/02/16/appharbor-azure-done-right-aka-heroku-for-net.aspx" target="_blank">blog</a> <a href="http://ajondeck.net/post/2011/03/01/Configure-and-Deploy-ASPNET-MVC-3-Web-Application-Using-Git-to-AppHarbor-from-Scratch!.aspx" target="_blank">posts</a> (and videos) detailing the process of getting started with AppHarbor (see below).  But the basic scenario comes down to <a href="http://support.appharbor.com/kb/getting-started/deploying-your-first-application" target="_blank">these steps</a>*:</p>
<ol>
<li>Installing and configuring Git. (I use msysgit and Git Extensions.)</li>
<li>Initialize a repository for your application.</li>
<li>Deploy your application to AppHarbor. (If you do not have an AppHarbor account yet, feel free to use this <a href="https://appharbor.com/account/new?referrerUsername=codeprogression" target="_blank">referral link</a>.)</li>
</ol>
<p><em>* If you prefer to use Mercurial, follow </em><a href="http://support.appharbor.com/kb/getting-started/using-mercurial-on-appharbor" target="_blank"><em>these steps</em></a><em> instead.</em></p>
<p>If you develop .NET web applications and haven’t tried out AppHarbor yet, do so…Now! I did mention the service is free, right?!?</p>
<h4>Mimicking AppHarbor Deployment</h4>
<p><strong>Disclaimer: <em>The process I am about to describe is informational and not prescriptive. </em></strong><em>AppHarbor provides much more value than just deployment, and I do not want to detract from that in any way.</em></p>
<p>If you have read my previous posts, you know that I use TeamCity and Rake for my build server environment. So I thought I would try to mimic the AppHarbor experience using those tools.</p>
<p>In order to follow along you will need to:</p>
<ol>
<li>Install Git on your development workstation and build server</li>
<li>Install Ruby on your build server</li>
<li>Install TeamCity on your build server<br />
* <em>If you need to learn how to install and use TeamCity, I </em><a href="http://elegantcode.com/2009/05/04/implementing-teamcity-for-net-projects-evolving-your-build-automation-solution/" target="_blank"><em>posted a series on TeamCity 4.5</em></a><em>.</em></li>
<li>Install Web Deployment Tool 2.0 on your build server and IIS web server</li>
<li>Start the web deployment service on your IIS web server <em><br />
</em></li>
<p><em>* For the purposes of the user group presentation and this post, my development workstation, build server, and web server are all on the same machine.</em></ol>
<p>We need to manually provision much of the infrastructure that would be provided for us automatically by AppHarbor, including:</p>
<ul>
<li>Configure the web application in IIS</li>
<li>Set up a bare Git repository</li>
<li>Configure TeamCity to watch the bare repository (VCS Settings)</li>
<li>Use customize build scripts in TeamCity (Build runner/task)</li>
<li>Push your application to the TeamCity repository</li>
</ul>
<p>Other tasks I will not be considering for this sample include database provisioning and custom configuration variables.</p>
<p>Remember, with AppHarbor, the initial provisioning takes a matter of seconds. With that, let’s get our environment ready.</p>
<h5>Configure the web application in IIS</h5>
<ol>
<li>Create a folder on your web server to store the website. (e.g., <strong>c:\sites\sample</strong>)</li>
<li>In IIS, create a new virtual directory under the default site and set the path to the folder you just created. My virtual path is <strong>sample</strong>.</li>
<li>Note the IIS application path. Mine is <strong>Default Web Site\sample</strong>. My url will be http://localhost/sample.</li>
</ol>
<h5>Set up the bare Git repository</h5>
<ol>
<li>Create a folder to store your bare repository. This is the repository TeamCity will watch and use to get code to build. You can create the repository on the build server or on a remote server.  (e.g., <strong>c:\repos\sample.git\</strong>)</li>
<li>Right-click the folder and run the Git Bash from the context menu</li>
<li>In Git Bash, type <strong>git init &#8211;bare</strong></li>
</ol>
<h5>Configure the TeamCity build configuration</h5>
<ol>
<li>Create a new project (e.g., <strong>Sample</strong>)</li>
<li>Create a new build configuration (e.g., <strong>Deploy</strong>) and name it</li>
<li>Leave all other settings on the first page of the wizard at their default</li>
<li>Attach a new VCS and name it</li>
<li>Select Git as the VCS type</li>
<li>Set the Fetch URL to the bare repository you just created (e.g., <strong>c:\repos\sample.git)</strong></li>
<li>Leave all other settings at their default</li>
<li>Add a new build task</li>
<li>Select Rake as the build runner</li>
<li>Select Rakefile content and copy the following into the textbox (Update the site path and project names as appropriate)<br />
<div id="gist-878660" class="gist">

        <div class="gist-file">
          <div class="gist-data gist-syntax">
              <div class="highlight"><pre><div class='line' id='LC1'><span class="nb">require</span> <span class="s1">&#39;rubygems&#39;</span></div><div class='line' id='LC2'><span class="nb">require</span> <span class="s1">&#39;erb&#39;</span></div><div class='line' id='LC3'><span class="nb">require</span> <span class="s1">&#39;fileutils&#39;</span></div><div class='line' id='LC4'><span class="nb">require</span> <span class="s1">&#39;find&#39;</span></div><div class='line' id='LC5'><span class="nb">require</span> <span class="s1">&#39;rake&#39;</span></div><div class='line' id='LC6'><span class="nb">require</span> <span class="s1">&#39;rake/tasklib&#39;</span></div><div class='line' id='LC7'><br/></div><div class='line' id='LC8'><span class="n">task</span> <span class="ss">:default</span> <span class="k">do</span></div><div class='line' id='LC9'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">package_location</span><span class="o">=</span><span class="s2">&quot;sample/&quot;</span>  <span class="c1"># website folder location relative to checkout root</span></div><div class='line' id='LC10'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">project_file</span> <span class="o">=</span>  <span class="s2">&quot;sample/sample.csproj&quot;</span> <span class="c1"># website project location relative to checkout root</span></div><div class='line' id='LC11'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">package_name</span> <span class="o">=</span> <span class="s2">&quot;website&quot;</span></div><div class='line' id='LC12'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">package</span> <span class="o">=</span> <span class="s2">&quot;website.deploy.cmd&quot;</span></div><div class='line' id='LC13'>&nbsp;</div><div class='line' id='LC14'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">destination_site</span> <span class="o">=</span> <span class="s1">&#39;Default Web Site/sample&#39;</span> <span class="c1"># Change to match IIS path</span></div><div class='line' id='LC15'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">clr_version</span> <span class="o">=</span> <span class="s1">&#39;v4.0.30319&#39;</span> </div><div class='line' id='LC16'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">framework_dir</span> <span class="o">=</span> <span class="no">File</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="no">ENV</span><span class="o">[</span><span class="s1">&#39;windir&#39;</span><span class="o">].</span><span class="n">dup</span><span class="p">,</span> <span class="s1">&#39;Microsoft.NET&#39;</span><span class="p">,</span> <span class="s1">&#39;Framework&#39;</span><span class="p">,</span> <span class="n">clr_version</span><span class="p">)</span></div><div class='line' id='LC17'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">msbuild_file</span> <span class="o">=</span> <span class="no">File</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">framework_dir</span><span class="p">,</span> <span class="s1">&#39;msbuild.exe&#39;</span><span class="p">)</span></div><div class='line' id='LC18'><br/></div><div class='line' id='LC19'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="no">FileUtils</span><span class="o">.</span><span class="n">remove_file</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">#{</span><span class="n">package_location</span><span class="si">}#{</span><span class="n">package</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">,</span> <span class="kp">true</span><span class="p">)</span></div><div class='line' id='LC20'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="no">FileUtils</span><span class="o">.</span><span class="n">remove_file</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">#{</span><span class="n">package_location</span><span class="si">}#{</span><span class="n">package_name</span><span class="si">}</span><span class="s2">.zip&quot;</span><span class="p">,</span> <span class="kp">true</span><span class="p">)</span></div><div class='line' id='LC21'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="no">FileUtils</span><span class="o">.</span><span class="n">remove_file</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">#{</span><span class="n">package_location</span><span class="si">}#{</span><span class="n">package_name</span><span class="si">}</span><span class="s2">.deploy-readme.txt&quot;</span><span class="p">,</span> <span class="kp">true</span><span class="p">)</span></div><div class='line' id='LC22'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="no">FileUtils</span><span class="o">.</span><span class="n">remove_file</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">#{</span><span class="n">package_location</span><span class="si">}#{</span><span class="n">package_name</span><span class="si">}</span><span class="s2">.SetParameters.xml&quot;</span><span class="p">,</span> <span class="kp">true</span><span class="p">)</span></div><div class='line' id='LC23'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="no">FileUtils</span><span class="o">.</span><span class="n">remove_file</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">#{</span><span class="n">package_location</span><span class="si">}#{</span><span class="n">package_name</span><span class="si">}</span><span class="s2">.SourceManifest.xml&quot;</span><span class="p">,</span> <span class="kp">true</span><span class="p">)</span></div><div class='line' id='LC24'><br/></div><div class='line' id='LC25'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="c1"># Package website (requires VS2010 version of msbuild)</span></div><div class='line' id='LC26'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">sh</span> <span class="s2">&quot;</span><span class="si">#{</span><span class="n">msbuild_file</span><span class="si">}</span><span class="s2"> </span><span class="se">\&quot;</span><span class="si">#{</span><span class="n">project_file</span><span class="si">}</span><span class="se">\&quot;</span><span class="s2"> /maxcpucount /nr:true /v:m /T:Clean,Package /P:BuildInParallel=true;WarningLevel=0;Configuration=debug;DeployIisAppPath=</span><span class="se">\&quot;</span><span class="si">#{</span><span class="n">destination_site</span><span class="si">}</span><span class="se">\&quot;</span><span class="s2">;PackageLocation=</span><span class="si">#{</span><span class="n">package_name</span><span class="si">}</span><span class="s2">.zip&quot;</span></div><div class='line' id='LC27'><br/></div><div class='line' id='LC28'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="c1"># Deploy website (requires Web Deployment service running on web server)</span></div><div class='line' id='LC29'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="n">sh</span> <span class="s2">&quot;</span><span class="si">#{</span><span class="n">package_location</span><span class="si">}#{</span><span class="n">package</span><span class="si">}</span><span class="s2"> /M:localhost /Y </span><span class="se">\&quot;</span><span class="s2">-skip:objectName=dirPath,skipAction=Delete,absolutePath=logs</span><span class="se">\&quot;</span><span class="s2">&quot;</span></div><div class='line' id='LC30'><br/></div><div class='line' id='LC31'><span class="k">end</span></div></pre></div>
          </div>

          <div class="gist-meta">
            <a href="https://gist.github.com/raw/878660/9b8fae6665452ae704aed9df7cfb006b1b111a9b/rakefile.rb" style="float:right;">view raw</a>
            <a href="https://gist.github.com/878660#file_rakefile.rb" style="float:right;margin-right:10px;color:#666">rakefile.rb</a>
            <a href="https://gist.github.com/878660">This Gist</a> brought to you by <a href="http://github.com">GitHub</a>.
          </div>
        </div>
</div>
</li>
<li>Leave all other settings at their default</li>
<li>On the Build Triggering page, add a new VCS trigger to build on a VCS change.</li>
</ol>
<ol>Whew! Now that all the infrastructure is in place, let’s do this!</ol>
<h5>Push your application to your TeamCity repository</h5>
<ol>
<li>Assuming your local Git repository is set up and you’re application is ready to deploy…from Git Bash in your local repo, add your remote repository.  Given the settings described above, I would use the following command: <strong>git remote add teamcity /c/repos/sample.git</strong></li>
<li>Then type: <strong>git push teamcity master</strong></li>
<li>In less than a minute, TeamCity should start to package and deploy the website.</li>
</ol>
<p>Using TeamCity for deployment takes markedly longer than AppHarbor. TeamCity uses a polling interval to determine if there are changes; whereas, I assume AppHarbor is using a git post-commit-hook. As an aside, if you haven’t already, start looking into the Web Deployment Tool.</p>
<p>Auto-provisioning and super-fast deployment on an elastic infrastructure…wish I had implemented it first. <img class="wlEmoticon wlEmoticon-winkingsmile" style="border-style: none;" src="http://elegantcode.com/wp-content/uploads/2011/03/wlEmoticon-winkingsmile.png" alt="Winking smile" /></p>
<blockquote><p><strong>Update:</strong></p>
<p>A <a href="http://support.microsoft.com/kb/2537134">bug</a> was introduced in Visual Studio 2010 SP1 which causes an error when deploying with parameters. You may need to update your Microsoft.Web.Publishing.targets file referenced in the KB article (although I cannot confirm that this fixes the problem, yet).</p></blockquote>
<p><script type="text/javascript">// <![CDATA[
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]&gt;</script> <script type="text/javascript">// <![CDATA[
 var pageTracker = _gat._getTracker("UA-3956921-1"); pageTracker._initData(); pageTracker._trackPageview();
// ]]&gt;</script></p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/03/20/mimicking-the-appharbor-deployment-experience/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Nancy, the little community-powered framework that could</title>
		<link>http://elegantcode.com/2011/01/28/nancy-the-little-community-powered-framework-that-could/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=nancy-the-little-community-powered-framework-that-could</link>
		<comments>http://elegantcode.com/2011/01/28/nancy-the-little-community-powered-framework-that-could/#comments</comments>
		<pubDate>Fri, 28 Jan 2011 22:50:50 +0000</pubDate>
		<dc:creator>Andreas Håkansson</dc:creator>
				<category><![CDATA[.Net 4.0]]></category>
		<category><![CDATA[Nancy]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2011/01/28/nancy-the-little-community-powered-framework-that-could/</guid>
		<description><![CDATA[Two months ago, on the day, I first announced Nancy here on Elegant Code as my new open-source project. I could never have anticipated the chain of events that would take place during the following two months. My tweet about the blog post got re-tweeted more times than I can remember and the post filled [...]]]></description>
			<content:encoded><![CDATA[<p>Two months ago, on the day, I first <a title="Read the Nancy announcement post" href="http://elegantcode.com/2010/11/28/introducing-nancy-a-lightweight-web-framework-inspired-by-sinatra/" target="_blank">announced Nancy</a> here on Elegant Code as my new open-source project. I could never have anticipated the chain of events that would take place during the following two months. My tweet about the blog post got re-tweeted more times than I can remember and the post filled up with, mostly, awesome feedback.</p>
<p>It took about and week and then Nancy got the first pull request on <a title="Visit Nancy on Github" href="https://github.com/thecodejunkie/Nancy" target="_blank">her github account</a> and from there it started to build up momentum quite fast. At the time of this writing there’s been 53 pull requests, by about 20 different people, for all kinds of features, bug fixes, custom hosts… you name it. Not bad, eh?</p>
<p>Not only that, but Nancy has managed to pull together a nice little community, <a title="Visit the Google Group for Nancy" href="https://groups.google.com/forum/#!forum/nancy-web-framework" target="_blank">over at Google Groups</a>, where the future of Nancy is being discussed every day. She’s also getting some attention on Twitter and we’re trying to gather it all under the <a title="Checkout what&#39;s being said on Twitter with the #NancyFx hashtag" href="http://twitter.com/#search?q=%23NancyFx" target="_blank">#NancyFx</a> hashtag and seems like every day there is a new face popping up.</p>
<p>In the initial commit there were a couple of abstractions and light extension points in place for things like custom hosts, view engines and response formatters. These turned out to be a very smart move, because the community really embraced and ran with them. Let me recap some of the things that has happened since day zero</p>
<ul>
<li><strong>View engines;</strong> there are currently support for Spark, Razor, NDjango and Static templates. We did have support for NHaml for a while, but that community seems to have gone into hibernation, so the decision was made to pull it and not waste dev cycles on it until there was a demand </li>
<li><strong>Inversion of Control integration;</strong> this has been one of the big one. Right from the very first beginning I wanted Nancy to be a self composing framework, that is have a small internal container that glued the framework together at runtime. I also wanted the possibility to register module level dependencies. It took a while and a couple of iterations, but we finally settled on a design and made <a title="Checkout the TinyIoC repository on Github" href="https://github.com/grumpydev/TinyIoC" target="_blank">TinyIoC</a> the internal container. It was very important that it was a transparent experience to the end user and unless you have a need for it, you never know it’s there. Not only that, but thanks to community contributions we’ve managed to create hooks (known as bootstrappers in Nancy) for all of the major players such as StructureMap, Autofac, Unity, Ninject and Windsor. Using one of these container with Nancy is a very easy thing to do and only adds one more file to your project </li>
<li><strong>Response formatters;</strong> one of the powerful features in Nancy is the response model and how it lets you return different kinds of things and leverages implicit cast operators to hide the complexity behind it. Thanks to the awesome Nancy community we now have the capability to return JSON, XML, images and perform redirect responses. It’s super easy to write a response extension and hook it into Nancy, so if you have any ideas…. </li>
<li><strong>Bug fixes;</strong> yeah I know, it’s shocking, but it’s still true. Every now and then someone finds a bug but, more importantly, most of the time the same person is part of contributing a patch to resolve it! </li>
<li><strong>Hosts;</strong> Nancy has been designed with the idea of being able to run in multiple environments and shipped with a host to run on top of ASP.NET. Right now we have additional hosts for running Nancy on a WCF host and on a stand alone host. There are more of them on the way </li>
<li><strong>HEAD</strong> <strong>requests; </strong>the first release of Nancy supported GET, POST, PUT and DELETE requests, but thanks to a clever little contributions she now also serves up HEAD requests </li>
<li><strong>Cookies;</strong> not he ones you can eat…. </li>
<li><strong>Cookie based sessions; </strong>I think this is also self describing.. oh… yeah they are encrypted in case you were wondering! </li>
<li><strong>Mono;</strong> we’ve started to seriously look at getting Nancy to run on top of the up coming mono 2.10 release (we need the improvements they’ve made to the dynamic keyword) and have already managed to run the sample application on both Linux and Mac OSX. Moving forward mono is going to be a supported and equally priorities platform to support </li>
<li><strong>Visual Studio templates</strong>; these are still work in progress but right now I have the ability to new up a new Nancy project, based on the html5boilerplate … and we have a bare bone template in the making </li>
<li><strong>Buildscript;</strong> a couple of days a go we added what every self respecting open-source project needs; a build script. We choose to use Rake (that’s a ruby powered format, for those of you that’s never seen it before) and make use of the excellent <a title="Read more about Albacore on the project website" href="http://albacorebuild.net/" target="_blank">Albacore</a> gem, but the awesome <a title="Visit Derick Bailey on Twitter" href="http://twitter.com/derickbailey" target="_blank">Derick Bailey</a> </li>
</ul>
<p>I’ve probably forgotten a bunch of things, there’s been so much going on that I can’t remember it all without looking at the commit history! That said, there are still things we want to put in place and there are already extensive discussions on the user group about them</p>
<ul>
<li>Security </li>
<li>Content negotiation </li>
<li>OWIN hosting (we’re keeping track of the <a title="Read more about OWIN on the .NET Abstractions User Group" href="https://groups.google.com/forum/#!forum/net-http-abstractions" target="_blank">OWIN 1.0</a> specification) </li>
<li>Self-hosting (<a title="Visit Benjamin van der Veen&#39;s website" href="http://bvanderveen.com/" target="_blank">Benjamin van der Veen</a>, if you are reading this – maybe Kayak can be a candidate!) </li>
</ul>
<h2>The one thing that we can’t seem to pull of</h2>
<p>Is to find a designer to design a proper logo for the framework! We are in desperate need to get an awesome logo that we can put everywhere and start creating a website. So if you know any good designers that wouldn’t mind putting in some time in designing an awesome logo for an open-source project (read <em>pro bono</em>) and please tell them about us and about Nancy! A while back I created <a href="https://groups.google.com/d/msg/nancy-web-framework/DlTrYKdBCQI/qCjLvhCdL9MJ" target="_blank">a post about the Nancy logo</a> on our user group. It contains some information on the philosophy and goals for a logo for Nancy. I can’t stress enough how much I would appreciate if you took this and shared it with your designer friends!</p>
<p>As always, if you want to ping me either drop me a comment right here on the blog or find me on on Twitter account <a title="Find me on Twitter on my @TheCodeJunkie account" href="http://twitter.com/thecodejunkie" target="_blank">@TheCodeJunkie</a></p>
<p>… I can’t help to wonder what Nancy will be like in another two months! </p>
]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2011/01/28/nancy-the-little-community-powered-framework-that-could/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

