<?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>Veracity Solutions Blog &#187; Pete Blois</title>
	<atom:link href="http://blogs.veracitysolutions.com/tag/pete-blois/feed/" rel="self" type="application/rss+xml" />
	<link>http://blogs.veracitysolutions.com</link>
	<description>Software Consulting That Rocks</description>
	<lastBuildDate>Thu, 22 Apr 2010 17:21:20 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Silverlight Buttons with Rounded Corners (The Super Easy Way)</title>
		<link>http://blogs.veracitysolutions.com/silverlight-buttons-with-rounded-corners-the-super-easy-way/</link>
		<comments>http://blogs.veracitysolutions.com/silverlight-buttons-with-rounded-corners-the-super-easy-way/#comments</comments>
		<pubDate>Fri, 21 Aug 2009 00:49:25 +0000</pubDate>
		<dc:creator>Matthias Shapiro</dc:creator>
				<category><![CDATA[Blend]]></category>
		<category><![CDATA[How To...]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Behaviors]]></category>
		<category><![CDATA[buttons]]></category>
		<category><![CDATA[cornerradius]]></category>
		<category><![CDATA[Pete Blois]]></category>

		<guid isPermaLink="false">http://blogs.veracitysolutions.com/?p=626</guid>
		<description><![CDATA[Download the “Silverlight Buttons With Rounded Corners” project files
This is a really silly but effective way of giving a button rounded corners without having to create a custom control template for that Button. 
First, install Pete Blois’ Expression Blend Samples. It’s a set of Behaviors and Triggers for Blend. For reasons I don’t really understand, [...]]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.designersilverlight.com/wp-content/uploads/2009/08/RoundedButtonEasyTutorial.zip'>Download the “Silverlight Buttons With Rounded Corners” project files</a></p>
<p>This is a really silly but effective way of giving a button rounded corners without having to create a custom control template for that Button. </p>
<p>First, install <a href="http://expressionblend.codeplex.com/">Pete Blois’ Expression Blend Samples</a>. It’s a set of Behaviors and Triggers for Blend. For reasons I don’t really understand, these don’t automatically show up in my Blend Behaviors list, so if you have the same problem (or if you don’t want to install all the behaviors) follow these steps:</p>
<ol>
<li>create a new class in your project and name it ClippingBehavior.cs</li>
<li>copy <a href='http://www.designersilverlight.com/wp-content/uploads/2009/08/ClippingBehaviorText.txt'>all the code in this text file</a> into your class, replacing the ClippingBehavior class that was auto-generated</li>
<li>drag a behavior onto your canvas and delete it. This is by far the quickest and easiest way of getting the appropriate references added to your project. Sad but true.</li>
<li>Add “<span style="color: blue">using </span>System.Windows.Interactivity;” to your ClippingBehavior.cs references.</li>
<li>Hit F5</li>
</ol>
<p>OK… with the behaviors added into Blend Assets menu, create a Border with the rounded corners you want your button to have. In order to show that this is pretty flexible, I gave my border a CornerRadius of “20,2,20,2”</p>
<p>Now, put a Grid inside of that border and a button inside of the grid. Give your Button has a negative margin at least equal to the largest CornerRadius margin. It should look something like this:</p>
<p><a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0013.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image001_thumb2.png" width="130" height="73" /></a>&#160;<a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0014.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001[4]" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0014_thumb.png" width="213" height="162" /></a></p>
<p>Now, go to the Behaviors section in Blend and choose ClippingBehavior and drag it onto the Grid. </p>
<p><a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0016.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001[6]" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0016_thumb.png" width="142" height="72" /></a></p>
<p>Give it a Margin equal to your BorderThickness and give it the same CornerRadius as your Border. </p>
<p><a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0018.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001[8]" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image0018_thumb.png" width="246" height="74" /></a></p>
<p>One last thing, make sure that your Border has the same BorderBrush as your Button. You can do that by clicking on the box next to the BorderBrush property and going to “DataBinding”.</p>
<p><a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image00110.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001[10]" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image00110_thumb.png" width="209" height="253" /></a></p>
<p>Select the “Element Property” tab, find the button you’re giving rounded corners and select the “BorderBrush” property from the Button.</p>
<p><a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image00112.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001[12]" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image00112_thumb.png" width="598" height="164" /></a></p>
<p>And you’re good to go. Now this doesn’t really give the actual Button rounded corners, but it sure does look that way. </p>
<p><a href="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image00114.png"><img style="border-bottom: 0px;border-left: 0px;border-top: 0px;border-right: 0px" border="0" alt="clip_image001[14]" src="http://www.designersilverlight.com/wp-content/uploads/2009/08/clip_image00114_thumb.png" width="177" height="121" /></a></p>
<p>And you’ve saved yourself a good deal of heartache (and a whole ton of generated code) because you don’t have to create a whole new Button template just to change some corners on one or two buttons. </p>
]]></content:encoded>
			<wfw:commentRss>http://blogs.veracitysolutions.com/silverlight-buttons-with-rounded-corners-the-super-easy-way/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
