<?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>Corey Schuman &#187; togglebutton</title>
	<atom:link href="http://www.85turns.com/tag/togglebutton/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.85turns.com</link>
	<description>Silverlight Consultant</description>
	<lastBuildDate>Tue, 26 Apr 2011 20:57:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>ToggleButton Command for Prism</title>
		<link>http://www.85turns.com/2009/06/24/togglebutton-command-for-prism/</link>
		<comments>http://www.85turns.com/2009/06/24/togglebutton-command-for-prism/#comments</comments>
		<pubDate>Wed, 24 Jun 2009 23:29:33 +0000</pubDate>
		<dc:creator>Corey</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[commands]]></category>
		<category><![CDATA[composite framework]]></category>
		<category><![CDATA[prism]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[togglebutton]]></category>

		<guid isPermaLink="false">http://www.85turns.com/2009/06/24/togglebutton-command-for-prism/</guid>
		<description><![CDATA[&#160;Prism Commands enables you to handle user interactions in Xaml.&#160; Even though the plumbing is there, Prism lacks commanding support for everything but Buttons.&#160; Fortunately, it’s relatively easy to create new Commands for a range of controls.&#160; This post details how to create a Checked and UnChecked Command for the ToggleButton (which can be applied [...]]]></description>
			<content:encoded><![CDATA[<p>&#160;<a href="http://msdn.microsoft.com/en-us/library/dd458928.aspx" target="_blank">Prism Commands</a> enables you to handle user interactions in Xaml.&#160; Even though the plumbing is there, Prism lacks commanding support for everything but Buttons.&#160; Fortunately, it’s relatively easy to create new Commands for a range of controls.&#160; This post details how to create a <strong>Checked</strong> and <strong>UnChecked</strong> Command for the <strong>ToggleButton</strong> (which can be applied to a <strong>RadioButton</strong> and a <strong>CheckBox</strong>).</p>
<p>Recently I had a need to create a <strong>Checked</strong> Command for a <strong>ToggleButton</strong>.&#160; There are many sources on how to create a Command, the best one probably being <a href="http://development-guides.silverbaylabs.org/Video/Prism-Commands" target="_blank">Erik Mork’s video</a>, but there wasn’t a place to <em>grab</em> the a Command from.&#160; The intention of this post is to share the <strong>Checked</strong> and <strong>UnChecked</strong> Prism Commands for you to use it in your project.&#160; (Moving forward, it might make sense to create a repository of these Commands.)</p>
<p>Finally, before diving in, if you just want the code and to see an example, follow these links:</p>
<ul>
<li><font size="5"><a href="http://85turns.com/silverlight/zips/CustomCommands.zip" target="_blank">Code</a></font></li>
<li><font size="5"><a href="http://85turns.com/silverlight/CustomCommands.html" target="_blank">Example</a></font></li>
</ul>
<h3>Commands</h3>
<p>Creating the Commands is straight forward.&#160; Derive from <strong>CommandBehaviorBase</strong> and specify the type.&#160; Then, in the constructor, register the event.&#160; Below are both the <strong>Checked</strong> and <strong>UnChecked</strong> commands. </p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image-thumb3.png" width="600" height="510" /></p>
<h3>Extensions for Xaml</h3>
<p>After creating the Commands you need to create Static methods to reference in Xaml.&#160; The Static methods are named <strong>Checked</strong> and <strong>UnChecked</strong>.&#160; They include a definition for:</p>
<ul>
<li>SelectedCommandBehaviorProperty</li>
<li>CommandProperty</li>
<li>SetCommand</li>
<li>GetCommand</li>
<li>OnSetCommandCallback</li>
<li>GetOrCreateBehavior</li>
</ul>
<p>In an effort to be brief I have chosen to truncate the two static methods.&#160; To take a closer look at the code, click on the image or download the code. </p>
<p>Checked.cs   <br /><a href="http://www.85turns.com/blog/wp-content/uploads/2009/06/image3.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image-thumb4.png" width="240" height="143" /></a></p>
<p align="center">UnChecked.cs   <br />&#160;<a href="http://www.85turns.com/blog/wp-content/uploads/2009/06/image4.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image-thumb5.png" width="240" height="143" /></a> </p>
<h3>Hooking everything up</h3>
<p>After the Commands are created, bind them to the <strong>ToggleButton</strong> in Xaml.&#160; In this sample application there are three main files:</p>
<ul>
<li><strong>MainPage.xaml</strong> – the presentation. This contains the binding to the Commands.</li>
<li><strong>MainPage.xaml.cs</strong> – the primary function of the code-behind is to new up the <strong>MainPageModel</strong> and set the <strong>DataContext</strong>.</li>
<li><strong>MainPageModel.cs</strong> – this is the model for the <strong>MainPage</strong>. It defines the commands the Xaml binds to as well as a property for the <strong>TextBox</strong> to bind to.</li>
</ul>
<p>Below are images of the classes mentioned above:</p>
<h4>MainPage.xaml</h4>
<p>Note in this Xaml, line 20 binds to the <strong>CheckedState</strong> property in the <strong>MainPageModel</strong>.&#160; The commands are bound on line 22 and 23.&#160; Take notice of the namespace command.&#160; Instead of referencing <strong>Microsoft.Practices.Composite.Presentation.Commands</strong> it references<strong> ProjectName.CustomCommands</strong>.</p>
<p><a href="http://www.85turns.com/blog/wp-content/uploads/2009/06/image5.png"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image-thumb6.png" width="600" height="477" /></a> </p>
<h4>MainPage.xaml.cs</h4>
<p>This is the code-behind for the above <strong>UserControl</strong>.&#160; On the <strong>Loaded</strong>, a new instance of <strong>MainPageModel</strong> is initialized and then set as the <strong>DataContext</strong> to the <strong>UserControl</strong>.&#160; The heavy lifting is done in the <strong>MainPageModel</strong>.</p>
<p><a href="http://www.85turns.com/blog/wp-content/uploads/2009/06/image6.png"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image-thumb7.png" width="592" height="601" /></a> </p>
<h4>MainPageModel.cs</h4>
<p>As noted above, the <strong>MainPageModel</strong> does the heavy lifting.&#160; The following describe what happens in this file:</p>
<ul>
<li>Two <strong>DelegateCommands</strong> are defined for <strong>Checked</strong> and <strong>UnChecked</strong>. (line 36 and 41)</li>
<li>A Property called <strong>CheckedState</strong> is defined and fires the <strong>PropertyChanged</strong> event when updated. (lines 13 – 22)</li>
<li>Two methods are defined to handle the actions on the Commands. (lines 47 – 59)</li>
</ul>
<p><a href="http://www.85turns.com/blog/wp-content/uploads/2009/06/image7.png"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image-thumb8.png" width="600" height="1043" /></a> </p>
<h3>The final product</h3>
<p><font size="5"><a href="http://85turns.com/silverlight/zips/CustomCommands.zip" target="_blank">Code</a> | </font><font size="5"><a href="http://85turns.com/silverlight/CustomCommands.html" target="_blank">Example</a></font></p>
<p><a href="http://85turns.com/silverlight/CustomCommands.html"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/06/image8.png" width="570" height="423" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.85turns.com/2009/06/24/togglebutton-command-for-prism/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

