<?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>Software and UX &#187; behavior</title>
	<atom:link href="http://sweux.com/blogs/pombeiro/index.php/tag/behavior/feed/" rel="self" type="application/rss+xml" />
	<link>http://sweux.com/blogs/pombeiro</link>
	<description>Thoughts and links on User Experience, Software Architecture</description>
	<lastBuildDate>Sat, 21 Aug 2010 21:36:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>A Busy State Indicator attached behavior</title>
		<link>http://blog.pedropombeiro.com/2009/12/a-busy-state-indicator-attached-behavior/</link>
		<comments>http://blog.pedropombeiro.com/2009/12/a-busy-state-indicator-attached-behavior/#comments</comments>
		<pubDate>Tue, 01 Dec 2009 00:10:15 +0000</pubDate>
		<dc:creator>Pedro Pombeiro</dc:creator>
				<category><![CDATA[Scrum Sprint Monitor]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[behavior]]></category>
		<category><![CDATA[LinkedIn]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[WPF]]></category>

		<guid isPermaLink="false">http://sweux.com/blogs/pombeiro/index.php/2009/12/01/a-busy-state-indicator-attached-behavior/</guid>
		<description><![CDATA[Today I decided to encapsulate the circular progress indicator I use in Scrum Sprint Monitor in a reusable behavior. This served as a learning experience as well, since I had not yet had the chance to play with attached behaviors. My requirements were the following: Have a behavior that displays an animation during long running [...]]]></description>
			<content:encoded><![CDATA[<p>Today I decided to encapsulate the circular progress indicator I use in Scrum Sprint Monitor in a reusable behavior. This served as a learning experience as well, since I had not yet had the chance to play with attached behaviors. My requirements were the following:</p>
<ul>
<li>Have a behavior that displays an animation during long running operations. It should dim out a defined region in the UI, optionally preventing input into that region. All state transitions must be animated. </li>
<li>Have minimal impact on the logical tree. </li>
<li>Allow configuration of parameters, such as dim brush, transition duration, etc. </li>
</ul>
<p>This problem turned out to be a perfect candidate to writing a behavior, and I needed only a few hours to crank it out. Here is a short video demoing it:</p>
<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:81f4b264-212a-4d74-8e8f-0af542851f8b" class="wlWriterSmartContent">
<div><object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/1yhk2HZV8cc&amp;hl=en"></param><embed src="http://www.youtube.com/v/1yhk2HZV8cc&amp;hl=en" type="application/x-shockwave-flash" width="425" height="355"></embed></object></div>
</div>
<p>This behavior makes use of the simple and great Circular Progress Bar control by Sasha Barber, up on <a href="http://www.codeproject.com/Articles/35288/WPF-Circular-Progress-Bar.aspx" target="_blank">CodeProject</a>. You can easily replace the control used for the animation though, should you require a different one.</p>
<h3>Usage</h3>
<p>The behavior has a simple requirement, that it can only be attached to a Grid element (I believe that is a requirement that can easily be satisfied, in most projects). The only required property is the BusyState property, which tells the behavior when to do its work:</p>
<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">Grid </span><span style="color: red">DataContext</span><span style="color: blue">=&quot;{</span><span style="color: #a31515">Binding </span><span style="color: red">Path</span><span style="color: blue">=ConfigurationViewModel, </span><span style="color: red">Source</span><span style="color: blue">={</span><span style="color: #a31515">StaticResource </span><span style="color: red">serviceLocator</span><span style="color: blue">}}&quot;
      </span><span style="color: red">Behaviors</span><span style="color: blue">:</span><span style="color: red">BusyIndicatorBehavior.BusyState</span><span style="color: blue">=&quot;{</span><span style="color: #a31515">Binding </span><span style="color: red">IsBusy</span><span style="color: blue">}&quot;
      </span><span style="color: red">Behaviors</span><span style="color: blue">:</span><span style="color: red">BusyIndicatorBehavior.TargetVisual</span><span style="color: blue">=&quot;{</span><span style="color: #a31515">Binding </span><span style="color: red">RelativeSource</span><span style="color: blue">={</span><span style="color: #a31515">RelativeSource </span><span style="color: red">FindAncestor</span><span style="color: blue">, </span><span style="color: red">AncestorType</span><span style="color: blue">={</span><span style="color: #a31515">x</span><span style="color: blue">:</span><span style="color: #a31515">Type </span><span style="color: red">Grid</span><span style="color: blue">}}}&quot;&gt;</span></pre>
<p><a href="http://11011.net/software/vspaste"></a></p>
<p>The behavior works by adding a Visual Tree at runtime under the attached DependencyObject (the Grid). You connect your Busy state flag by providing a Binding to the BusyState attached property. There are a few other optional properties you can use, to customize things such as the dimming brush, the transition duration, margins, etc.</p>
<p>The source code is available for download from the <a href="http://gallery.expression.microsoft.com/BusyIndicator" target="_blank">Microsoft Expression Community Gallery</a>. Do leave some feedback if you have any suggestions, or if you just find it useful.</p>
<p>If you want to take a look at source code that uses this behavior, head to the <a href="http://scrumsprintmonitor.codeplex.com/SourceControl/ListDownloadableCommits.aspx" target="_blank">Scrum Sprint Monitor project at CodePlex</a>, and search for Behaviors:BusyIndicatorBehavior.</p>
<div class="wlWriterHeaderFooter" style="margin:0px; padding:0px 0px 0px 0px;">
<div class="shoutIt"><a rev="vote-for" href="http://dotnetshoutout.com/Submit?url=http%3a%2f%2fsweux.com%2fblogs%2fpombeiro%2findex.php%2f2009%2f12%2f01%2fa-busy-state-indicator-attached-behavior%2f&amp;title=A+Busy+State+Indicator+attached+behavior"><img alt="Shout it" src="http://dotnetshoutout.com/image.axd?url=http://sweux.com/blogs/pombeiro/index.php/2009/12/01/a-busy-state-indicator-attached-behavior/" style="border:0px" /></a></div>
</div>

<div class="sociable">
<div class="sociable_tagline">
<strong>Share and Enjoy:</strong>
</div>
<ul>
	<li class="sociablefirst"><a rel="nofollow"  href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior&amp;bodytext=Today%20I%20decided%20to%20encapsulate%20the%20circular%20progress%20indicator%20I%20use%20in%20Scrum%20Sprint%20Monitor%20in%20a%20reusable%20behavior.%20This%20served%20as%20a%20learning%20experience%20as%20well%2C%20since%20I%20had%20not%20yet%20had%20the%20chance%20to%20play%20with%20attached%20behaviors.%20My%20requirements%20wer" title="Digg"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://delicious.com/post?url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior&amp;notes=Today%20I%20decided%20to%20encapsulate%20the%20circular%20progress%20indicator%20I%20use%20in%20Scrum%20Sprint%20Monitor%20in%20a%20reusable%20behavior.%20This%20served%20as%20a%20learning%20experience%20as%20well%2C%20since%20I%20had%20not%20yet%20had%20the%20chance%20to%20play%20with%20attached%20behaviors.%20My%20requirements%20wer" title="del.icio.us"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://www.dotnetkicks.com/kick/?url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior" title="DotNetKicks"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/dotnetkicks.png" title="DotNetKicks" alt="DotNetKicks" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior" title="DZone"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/dzone.png" title="DZone" alt="DZone" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://technorati.com/faves?add=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F" title="Technorati"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior&amp;source=Software+and+UX+Thoughts+and+links+on+User+Experience%2C+Software+Architecture&amp;summary=Today%20I%20decided%20to%20encapsulate%20the%20circular%20progress%20indicator%20I%20use%20in%20Scrum%20Sprint%20Monitor%20in%20a%20reusable%20behavior.%20This%20served%20as%20a%20learning%20experience%20as%20well%2C%20since%20I%20had%20not%20yet%20had%20the%20chance%20to%20play%20with%20attached%20behaviors.%20My%20requirements%20wer" title="LinkedIn"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior&amp;annotation=Today%20I%20decided%20to%20encapsulate%20the%20circular%20progress%20indicator%20I%20use%20in%20Scrum%20Sprint%20Monitor%20in%20a%20reusable%20behavior.%20This%20served%20as%20a%20learning%20experience%20as%20well%2C%20since%20I%20had%20not%20yet%20had%20the%20chance%20to%20play%20with%20attached%20behaviors.%20My%20requirements%20wer" title="Google Bookmarks"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/googlebookmark.png" title="Google Bookmarks" alt="Google Bookmarks" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;title=A%20Busy%20State%20Indicator%20attached%20behavior" title="StumbleUpon"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  href="mailto:?subject=A%20Busy%20State%20Indicator%20attached%20behavior&amp;body=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F" title="email"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a></li>
	<li class="sociablelast"><a rel="nofollow"  href="http://www.printfriendly.com/print?url=http%3A%2F%2Fblog.pedropombeiro.com%2F2009%2F12%2Fa-busy-state-indicator-attached-behavior%2F&amp;partner=sociable" title="Print"><img src="http://sweux.com/blogs/pombeiro/wp-content/plugins/sociable/images/printfriendly.png" title="Print" alt="Print" class="sociable-hovers" /></a></li>
</ul>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.pedropombeiro.com/2009/12/a-busy-state-indicator-attached-behavior/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
