<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="http://blogs.msdn.com/utility/FeedStylesheets/rss.xsl" media="screen"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:wfw="http://wellformedweb.org/CommentAPI/"><channel><title>Dave's Design Blog</title><link>http://blogs.msdn.com/dave/default.aspx</link><description /><dc:language>en-US</dc:language><generator>CommunityServer 2.1 SP1 (Build: 61025.2)</generator><item><title>Dave's Glossy Controls for Silverlight 2 released</title><link>http://blogs.msdn.com/dave/archive/2008/10/06/dave-s-glossy-controls-for-silverlight-2-released.aspx</link><pubDate>Mon, 06 Oct 2008 13:25:00 GMT</pubDate><guid isPermaLink="false">91d46819-8472-40ad-a661-2c78acb4018c:8977620</guid><dc:creator>davecraw</dc:creator><slash:comments>11</slash:comments><comments>http://blogs.msdn.com/dave/comments/8977620.aspx</comments><wfw:commentRss>http://blogs.msdn.com/dave/commentrss.aspx?PostID=8977620</wfw:commentRss><description>&lt;p&gt;[Updated] - You can now preview the controls &lt;a href="http://moelelio.members.winisp.net/glossycontrols"&gt;here&lt;/a&gt;.&lt;/p&gt;  &lt;p&gt;I'm pleased to announce the availability of my first Silverlight 2 controls set: 'Dave's Glossy Controls for Silverlight 2'.&lt;/p&gt;  &lt;p&gt;&lt;img height="629" alt="splash_v1.2" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/splash_v1.2_3.png" width="356" border="0" mce_src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/splash_v1.2_3.png" /&gt;&lt;/p&gt;  &lt;p&gt;[download link at end of post]&lt;/p&gt;  &lt;p&gt;This is a set of easily customisable control templates for the following controls:&lt;/p&gt;  &lt;ul&gt;   &lt;li&gt;Button &lt;/li&gt;    &lt;li&gt;CheckBox &lt;/li&gt;    &lt;li&gt;RadioButton &lt;/li&gt;    &lt;li&gt;ScrollBar &lt;/li&gt;    &lt;li&gt;ScrollViewer &lt;/li&gt;    &lt;li&gt;ListBox &lt;/li&gt;    &lt;li&gt;ListBoxItem &lt;/li&gt;    &lt;li&gt;TextBox &lt;/li&gt;    &lt;li&gt;Slider &lt;/li&gt;    &lt;li&gt;ProgressBar &lt;/li&gt;    &lt;li&gt;ComboBox&lt;/li&gt; &lt;/ul&gt;  &lt;p&gt;They were all created in Blend SP1 preview (&lt;a href="http://silverlight.net/GetStarted/sl2rc0.aspx" target="_blank" mce_href="http://silverlight.net/GetStarted/sl2rc0.aspx"&gt;available here&lt;/a&gt;) for Silverlight 2 RC0 (&lt;a href="http://silverlight.net/GetStarted/sl2rc0.aspx" target="_blank" mce_href="http://silverlight.net/GetStarted/sl2rc0.aspx"&gt;available here&lt;/a&gt;).&amp;#160; Please note that these templates &lt;strong&gt;will not work&lt;/strong&gt; with Silverlight Beta 2.&lt;/p&gt;  &lt;h4&gt;&lt;strong&gt;Importing the controls&lt;/strong&gt;&lt;/h4&gt;  &lt;p&gt;To import these controls, open the file DavesGlossyControls_v1.2.xaml, copy the contents between &amp;lt;Application.Resources&amp;gt; and &amp;lt;/Application.Resources&amp;gt;, and paste into your app.xaml between th two corresponding tags.&lt;/p&gt;  &lt;p&gt;You may also need to copy across some of the namespace references in the very top of the file (they begin with xmlns).&lt;/p&gt;  &lt;h4&gt;Using the controls&lt;/h4&gt;  &lt;p&gt;Using the controls couldn't be easier.&amp;#160; It's so easy, there are three ways to do it!&lt;/p&gt;  &lt;p&gt;The most important part is the Resources panel on the right of the screen.&amp;#160; It's to the right of the Project and Properties panels.&amp;#160; You should see a list of all of the controls and gradients underneath app.xaml.&amp;#160; If you can't, it's probably because you're viewing app.xaml in the Designer or XAML view, so flip back to Page.xaml.&lt;/p&gt;  &lt;p&gt;From the resources panel you can click a control and drag it to the artboard to drop a control.&lt;/p&gt;  &lt;p&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="399" alt="resources_panel" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/resources_panel_3.png" width="563" border="0" mce_src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/resources_panel_3.png" /&gt; &lt;/p&gt;  &lt;p&gt;OR&lt;/p&gt;  &lt;p&gt;You can draw the control you want to style (in this case a Button), then drag and drop the relevant style from the Resources panel onto the button.&amp;#160; A context menu will appear asking what you want to do to the control.&amp;#160; You should click 'Style' to apply the style.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/drag_drop_2.png" mce_href="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/drag_drop_2.png"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="399" alt="drag_drop" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/drag_drop_thumb.png" width="563" border="0" mce_src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/drag_drop_thumb.png" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;OR (my favourite)&lt;/p&gt;  &lt;p&gt;Create a control (in this case a button).&amp;#160; Right click on it and choose 'Edit Control Parts (Template) from the context menu, then 'Apply Resource', then the control template name.&amp;#160; This method is great as it only shows you control templates that are compatible with the currently selected control.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/apply_resource_2.png" mce_href="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/apply_resource_2.png"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="399" alt="apply_resource" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/apply_resource_thumb.png" width="563" border="0" mce_src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/apply_resource_thumb.png" /&gt;&lt;/a&gt;&amp;#160; &lt;/p&gt;  &lt;h4&gt;Customising the colour of the controls&lt;/h4&gt;  &lt;p&gt;Again, customising the colour of the controls is tres easy, and doesn't require you to have any knowledge of control templates.&amp;#160; &lt;/p&gt;  &lt;p&gt;Each control template is made up of a selection of colours and gradients.&amp;#160; These gradients are shown in the Resources panel.&amp;#160; To edit a gradient or colour, click on it and change the colours using the panel.&amp;#160; As you change them, you'll notice that all of the controls update too.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/change_colours_2.png" mce_href="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/change_colours_2.png"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="399" alt="change_colours" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/change_colours_thumb.png" width="563" border="0" mce_src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/change_colours_thumb.png" /&gt;&lt;/a&gt; &lt;/p&gt;  &lt;h4&gt;License&lt;/h4&gt;  &lt;p&gt;These controls templates are licensed under the &lt;a href="http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx" target="_blank" mce_href="http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx"&gt;Microsoft Public License&lt;/a&gt;.&lt;/p&gt;  &lt;h4&gt;Finally&lt;/h4&gt;  &lt;p&gt;I hope you enjoy using these control templates in your projects.&amp;#160; I'd love to see/hear how you use/modify them, so please &lt;a href="mailto:dave.crawford@microsoft.com" target="_blank" mce_href="mailto:dave.crawford@microsoft.com"&gt;email me&lt;/a&gt;!&lt;/p&gt;  &lt;p&gt;I'm trying to figure out how to do datagrids and date pickers at the moment; editing of these controls for Silverlight 2 isn't supported by Blend yet (that I'm aware of), so I'm going to have to learn some more XAML!&lt;/p&gt;  &lt;p&gt;&amp;#160;&lt;a href="http://blogs.msdn.com/dave/attachment/8977620.ashx"&gt;&lt;img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="58" alt="download" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/download_3.png" width="158" border="0" /&gt;&lt;/a&gt; &lt;a href="http://moelelio.members.winisp.net/glossycontrols"&gt;&lt;img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="58" alt="preview" src="http://blogs.msdn.com/blogfiles/dave/WindowsLiveWriter/DavesGlossyControlsforSilverlight2releas_8870/preview_3.png" width="158" border="0" /&gt;&lt;/a&gt; &lt;/p&gt;  &lt;p&gt;&lt;a class="" href="http://blogs.msdn.com/dave/attachment/8977620.ashx" target="_blank" mce_href="http://blogs.msdn.com/dave/attachment/8977620.ashx"&gt;Dave's Glossy Controls for Silverlight 2 - version 1.2 (06-Oct-2008)&lt;/a&gt;&lt;/p&gt;&lt;img src="http://blogs.msdn.com/aggbug.aspx?PostID=8977620" width="1" height="1"&gt;</description><enclosure url="http://blogs.msdn.com/dave/attachment/8977620.ashx" length="53193" type="application/x-zip-compressed" /></item></channel></rss>