tag:blogger.com,1999:blog-27643438956816803922024-03-05T09:53:47.955+02:00Svetoslav Savov's BlogSvetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-2764343895681680392.post-60286122671489819932010-05-22T15:12:00.001+03:002010-05-22T15:12:45.154+03:00Memory Leaks in WPF applications<p>In order to avoid creating memory leaks in WPF applications you need to know how to cause them. Here’s a list of the most common situations that cause memory leaks.</p> <ul> <li>Event handlers to objects in parent windows </li> <li>Registering to events from static objects </li> <li>Using timers </li> <li>Data binding </li> <li>Changing the Text property of a text box </li> </ul> <h3></h3> <h3>The Sample Application</h3> <p>I made a very simple application that demonstrates different cases of memory leaks. </p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBuktG046vgTgxW51Oj1NdjyS2fzNu97NWlHa7hYwvuGPvEraBBbhhZeYQyko8ATrsFK6EmCifB1E42-Arcx4UFzGQhhl2dCQ1mvKdO1W76CS_CpkdQIMTtoF-vofoks0ijd2x7wRlYbw/s1600-h/app_overview%5B2%5D.png"><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="app_overview" border="0" alt="app_overview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcSeffbFk6PoE9_ywB5dHPefHBrw3JlT1ASwkX50C-NgMnlrHot6IcvrBBK1LexPO1vfhsy1jLwqXUvqzKwcg54q6iM4dR0VfZEfhpVfMgFuKCc-FndmtmrvHaKbfrgCcd4wGz-DLaDXX0/?imgmax=800" width="243" height="244" /></a></p> <p>It has several buttons each launching a specific memory leak case. On the top there’s a “Collect Garbage” button that forces a garbage collection, so that you can see if the memory gets cleaned or not. Each case has a checkbox that represents the solution / fix to the memory leak.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXQzep5kSBaB_szOBLIMa9jfI7FyLywdW0m6rW1hUaMCK02zqXbms6AFuhQU9tqaMaUcFCgPtg-nU0eCZNwGW85akEF0BRnXUhl4WHA_mLqUPgQq6xU93aqAsFYh6QFRyr9Il67zh5kg0/s1600-h/eventhandlers%5B2%5D.png"><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="eventhandlers" border="0" alt="eventhandlers" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicQfrN5noaOKIDJwcW65krdpPAilsziwGIwg6fbwMKrRoZayDPerxMSRU-3-DZz40_dY5UjmI5ny9CiCUUOlXhyphenhyphenjVDJFbWrPCsHjaULotmUwv2Y5hYho9oqkVfKBSUVKHWQdkt6Gx21Rpi/?imgmax=800" width="244" height="243" /></a> </p> <p>To help us see the memory leaks, I added a 100 MB array in each of the child windows, so it’s very easy to notice if the memory gets cleaned or not in Task Manager.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVCzzxCyBWcZqwBLek5gAZ_k8tym204zZ9Arbo4jiF60C56TfE9QQ7TBT_pHYdZQM6L1V2qU2IrloJ48UaeuBxnHzNnDbzSxBrVw_pIolwILSWWIpIBFbrey5gN4WiAkxRce1wQo6VWWN/s1600-h/memusage%5B11%5D.png"><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="memusage" border="0" alt="memusage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgEJSPFliywMHEJwItqAUUcsc6IprZ6IE90JMJwX3ndqig_HsfWxqzTtDxejv1cnwbHH4oGMIhYx6VctP6x1OiDuTFNUsTLT7FtwExuizmXyyduhn9W5qTmrw36pnw3jrxCxyTVdcy-_j/?imgmax=800" width="355" height="484" /></a>  </p> <h3>Event Handlers</h3> <p>Imagine you have the following situation: You have 2 windows. The first one has a text box inside. The second window (a child window) registers to the <em>TextChanged</em> event of the textbox in the first window. Now, since this textbox remains alive (because it’s in the main app window), the child window will remain alive in memory even if it’s closed. </p> <pre class="code"><span style="color: blue">public void </span>RegisterEvent(<span style="color: #2b91af">TextBox </span>textBoxFromParentWindow)<br />{<br /> <span style="color: blue">this</span>.textBoxFromParentWindow = textBoxFromParentWindow;<br /> textBoxFromParentWindow.TextChanged += <span style="color: blue">new </span><span style="color: #2b91af">TextChangedEventHandler</span>(textBoxFromParentWindow_TextChanged);<br />}</pre><br /><br /><h5>Fix</h5><br /><br /><p>The fix for this is simple  - just unregister the event when the child window closes.</p><br /><br /><pre class="code"><span style="color: blue">protected override void </span>OnClosed(<span style="color: #2b91af">EventArgs </span>e)<br />{<br /> <span style="color: blue">base</span>.OnClosed(e);<br /><br /> <span style="color: blue">if </span>(chkUnregister.IsChecked == <span style="color: blue">true</span>)<br /> {<br /> <span style="color: blue">this</span>.textBoxFromParentWindow.TextChanged -= textBoxFromParentWindow_TextChanged;<br /> <span style="color: blue">this</span>.textBoxFromParentWindow = <span style="color: blue">null</span>;<br /> }<br />}</pre><br /><br /><h3></h3><br /><a href="http://11011.net/software/vspaste"></a><br /><br /><p></p><br /><br /><p></p><br /><br /><p> </p><br /><br /><h3>Events from static objects</h3><br /><br /><p>If you register for an event that is declared in a static object, the memory will never be freed because the static objects always stays alive in memory.</p><br /><br /><pre class="code"><span style="color: #2b91af">MemoryHelper</span>.StaticInstance.LeakingEvent += <span style="color: blue">new </span><span style="color: #2b91af">EventHandler</span>(StaticInstance_LeakingEvent);</pre><br /><br /><p> </p><br /><br /><h5>Fix</h5><br /><br /><p>Again, you can fix the memory leak by simply unregistering from the event:</p><br /><br /><pre class="code"><span style="color: blue">protected override void </span>OnClosed(<span style="color: #2b91af">EventArgs </span>e)<br />{<br /> <span style="color: blue">base</span>.OnClosed(e);<br /><br /> <span style="color: blue">if </span>(chkCleanup.IsChecked == <span style="color: blue">true</span>)<br /> {<br /> <span style="color: #2b91af">MemoryHelper</span>.StaticInstance.LeakingEvent -= StaticInstance_LeakingEvent;<br /> }<br />}</pre><br /><br /><p><a href="http://11011.net/software/vspaste"></a></p><br /><br /><h3>Timers</h3><br /><br /><p>The use of timers in a window is very dangerous because when the window closes, the timer continues to be alive and ticking, thus keeping the window it’s in alive. Simple demonstration for this is the following piece of code:</p><br /><br /><pre class="code">timer = <span style="color: blue">new </span><span style="color: #2b91af">DispatcherTimer</span>();<br />timer.Tick += <span style="color: blue">new </span><span style="color: #2b91af">EventHandler</span>(timer_Tick);<br />timer.Interval = <span style="color: #2b91af">TimeSpan</span>.FromSeconds(1);<br />timer.Start();</pre><br /><br /><p>Try the sample application, to see that if you don’t explicitly stop the timer, it’ll continue ticking even when the window is closed.</p><br /><br /><h5>Fix</h5><br /><br /><p>To fix this memory leak you’ll have to explicitly stop the timer when you don’t need it anymore:</p><br /><br /><pre class="code"><span style="color: blue">protected override void </span>OnClosed(<span style="color: #2b91af">EventArgs </span>e)<br /> {<br /> <span style="color: blue">base</span>.OnClosed(e);<br /><br /> <span style="color: blue">if </span>(chkCleanup.IsChecked == <span style="color: blue">true</span>)<br /> {<br /> timer.Tick -= timer_Tick;<br /> timer.Stop();<br /> }<br /> }</pre><br /><br /><p><a href="http://11011.net/software/vspaste"></a>Now the memory is released when the windows is closed.</p><br /><br /><h3>Data binding</h3><br /><br /><p>Sometimes when using data binding, you can cause a memory leak. An example situation: You have a container (for example a stack panel) and inside it you have a text block that binds to a property of the container. Memory leaks occur when the property of the source object is not a DependencyProperty. For example – stackPanel.Children.Count. If you bind to a dependency property, the memory is properly cleaned up.</p><br /><br /><p>Leaky data binding:</p><br /><br /><pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">TextBlock </span><span style="color: red">Text</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">ElementName</span><span style="color: blue">=layoutRoot, </span><span style="color: red">Path</span><span style="color: blue">=Children.Count}" </span><span style="color: red">Margin</span><span style="color: blue">="5 0" </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="leak"/><br /></span></pre><br /><br /><p>Safe data binding:</p><br /><br /><pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">TextBlock </span><span style="color: red">Text</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">ElementName</span><span style="color: blue">=layoutRoot, </span><span style="color: red">Path</span><span style="color: blue">=ActualWidth}" </span><span style="color: red">Margin</span><span style="color: blue">="5 0" /><br /></span></pre><br /><br /><p><a href="http://11011.net/software/vspaste"></a>The <em>ActualWidth</em> property is a Dependency Property, so it does not cause a memory leak.</p><br /><br /><h5>Fix</h5><br /><br /><p>You’ll have to clear the data bindings for non-dependency properties when you don’t need them anymore:</p><br /><br /><pre class="code"><span style="color: blue">protected override void </span>OnClosed(<span style="color: #2b91af">EventArgs </span>e)<br /> {<br /> <span style="color: blue">base</span>.OnClosed(e);<br /><br /> <span style="color: blue">if </span>(chkCleanup.IsChecked == <span style="color: blue">true</span>)<br /> {<br /> <span style="color: #2b91af">BindingOperations</span>.ClearBinding(leak, <span style="color: #2b91af">TextBlock</span>.TextProperty);<br /> }<br /> }</pre><br /><br /><h3><a href="http://11011.net/software/vspaste"></a></h3><br /><br /><h3>Changing the Text property of a text box</h3><br /><br /><p>The TextBox control in WPF keeps a undo stack in memory which can cause problems when the text is changed lots of times. In the sample application there’s a button which starts changing the <em>Text</em> property 10 000 times. If you look at Task Manager you’ll notice that memory usage increases exponentially, and when you close the window, the memory is not released.</p><br /><br /><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8hSbXF-AWH4jONytTcaWDBONCmlteNp9smmkLur7dxl4MH0e-6aStNTCzsYof9gSHafEsQx5LLBEDGtItVf3IuZzC3BzrpvcWP1oDfgrsyZgoUWIjljImS6k1f6eNcLO_6iq0NCMkcYx/s1600-h/textbox%5B2%5D.png"><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="textbox" border="0" alt="textbox" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDZ3i2aYC7G1rbsMaoV9r9Gx-XXJxuGujJlip82-hoB2d6Y5xBu4x9Br_3VydtspfvG-s-3SWOjyki_xe-fxjLwK8rXFtLwJhoIxwt_R4hAc8JsYs3Pnv7X9kkda78yz6Ci_OBbCUwo65/?imgmax=800" width="243" height="244" /></a> </p><br /><br /><h5>Fix</h5><br /><br /><p>You can avoid this problem by limiting the number of undo operations that are kept in the stack.</p><br /><br /><pre class="code">textbox.UndoLimit = chkLimit.IsChecked == <span style="color: blue">true </span>? 0 : <span style="color: blue">int</span>.MaxValue;</pre><br /><br /><p>In the sample app you can see that when you check the “Limit” checkbox that changes the <em>UndoLimit</em> to 0, which essentially fixes the large memory usage, but of course disables the undo operations on the text box. </p><br /><br /><h3>Download Sample</h3><br /><br /><p>You can download the <a href="http://www.filefactory.com/file/b1cfch7/n/LeakyApplication_src.zip" target="_blank">sample application</a> and test the cases yourself.</p> Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com12tag:blogger.com,1999:blog-2764343895681680392.post-50726100726903290182010-02-21T01:28:00.001+02:002010-02-21T01:28:38.058+02:00WPF 4.0 New Features: Windows 7 Taskbar Integration<p>In WPF 4 there are some features which help us to easily integrate our software with Windows 7 Taskbar. Some of these features are showing thumb buttons in the thumbnail preview, showing progress in the taskbar item, accessing jump and task lists in items’ context menu. All of these features are nicely wrapped in classes and added as dependency properties to Window and Application classes.</p> <h2><a href="http://lh6.ggpht.com/_zTXmVbtNVz0/S4Bv_QiMPUI/AAAAAAAAAJw/zNBGyNTMWF4/s1600-h/overview%5B2%5D.png"><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="overview" border="0" alt="overview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xWzNlTCiruWpGqM7BgG-6sRPhiqc1ufLajNvFIvxRm7nRQNgetwHKxqIyNq2Ao8LcTKyNlkfJ9V0R8PJdGNWKKsYOKfqODiA8JdeoeXkTwZ8jmudpIMMUNRpRzcwZxRtWzMF7AkhKvqy/?imgmax=800" width="244" height="237" /></a> Windows 7 Taskbar components overview</h2> <p>Let’s start with describing what’s what in Windows 7 Taskbar.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05vgHZUsr7edAdwoshzhE4lDhtHXB63er-AyAnhCKW_Qi1wFTgBJSZ_7csVNrpJPioy1Pg1O08Pgpzb8X-g_Thcgtaew3-QkGZvxCSjILd3Lv3lNboDtKqb8GNFBlwkXdfwUb4ridIICe/s1600-h/whats_what%5B2%5D.png"><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="whats_what" border="0" alt="whats_what" src="http://lh5.ggpht.com/_zTXmVbtNVz0/S4BwA3H9vAI/AAAAAAAAAJ8/JHNlU0we2k8/whats_what_thumb.png?imgmax=800" width="244" height="200" /></a> </p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9L9dDZx9K1StIu729AK4mX9XRUrnC15T_Y24cc6l_DKdHg6H-LNJlkv7Xh9V7MZxiOPJtLf-gQF6elPT5Q_Fwe26elNp0gIUyxnCcBlUMGQ-cdUqJ8JO_BJ_SBwbnBXlOWMT7zMZLftlV/s1600-h/whats_what2%5B2%5D.png"><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="whats_what2" border="0" alt="whats_what2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ3QO1Wjpoi3xT3UjSHLrH5Nghuh36GQ5xXghtKPw5mOJt5IIpDTpxgGJEMLpQ1Fap0PB667jtL7tTDWOafGbxd5sznijAa67lBpzXixT4KZN0Da_wLcgtUVaSqSDIrApbQZ6qWxv3Ir2E/?imgmax=800" width="244" height="200" /></a> </p> <h2>WPF Classes for integration</h2> <p>Now, let’s take a look at the classes that WPF 4 provides for interaction with these components. All classes are defined in System.Windows.Shell namespace.</p> <ul> <li>TaskbarItemInfo – provides settings of how the taskbar thumbnail is displayed </li> <li>ThumbButtonInfo – represents a Thumb Button </li> <li>JumpTask – represents a shortcut to an application that can be started from the context menu </li> <li>JumpPath – represents a link to a file in the context menu </li> </ul> <h2>The Countdown Timer example</h2> <p>Now, for better understanding of the concept of using taskbar components, I have designed a simple application which just counts down one minute. I’ll explain it by breaking it down to its basic functionalities. Let’s take a look.</p> <h3>The Thumb Buttons</h3> <p>Thumb buttons are buttons which are displayed in the thumbnail preview (see overview picture above). They can be used as quick access to main functions of the application. They are defined using the ThumbButtonInfo class.</p> <pre class="code"><span style="color: blue"><</span><span style="color: #a31515">Window.TaskbarItemInfo</span><span style="color: blue">><br /> <</span><span style="color: #a31515">TaskbarItemInfo </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="taskBarItemInfo" <br /> </span><span style="color: red">ThumbnailClipMargin</span><span style="color: blue">="40,40,40,100"<br /> </span><span style="color: red">Description</span><span style="color: blue">="Countdown Timer"><br /> <</span><span style="color: #a31515">TaskbarItemInfo.ThumbButtonInfos</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ThumbButtonInfoCollection</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ThumbButtonInfo<br /> </span><span style="color: red">DismissWhenClicked</span><span style="color: blue">="False"<br /> </span><span style="color: red">Command</span><span style="color: blue">="{</span><span style="color: #a31515">x</span><span style="color: blue">:</span><span style="color: #a31515">Static </span><span style="color: red">local</span><span style="color: blue">:</span><span style="color: red">MainWindow</span><span style="color: blue">.CmdStart}"<br /> </span><span style="color: red">CommandTarget</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">ElementName</span><span style="color: blue">=mainWindow}"<br /> </span><span style="color: red">Description</span><span style="color: blue">="Start"<br /> </span><span style="color: red">ImageSource</span><span style="color: blue">="Resources/play.png"/><br /> <</span><span style="color: #a31515">ThumbButtonInfo<br /> </span><span style="color: red">DismissWhenClicked</span><span style="color: blue">="False"<br /> </span><span style="color: red">Command</span><span style="color: blue">="{</span><span style="color: #a31515">x</span><span style="color: blue">:</span><span style="color: #a31515">Static </span><span style="color: red">local</span><span style="color: blue">:</span><span style="color: red">MainWindow</span><span style="color: blue">.CmdPause}"<br /> </span><span style="color: red">CommandTarget</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">ElementName</span><span style="color: blue">=mainWindow}"<br /> </span><span style="color: red">Description</span><span style="color: blue">="Pause"<br /> </span><span style="color: red">ImageSource</span><span style="color: blue">="Resources/pause.png"/><br /> <</span><span style="color: #a31515">ThumbButtonInfo<br /> </span><span style="color: red">DismissWhenClicked</span><span style="color: blue">="False"<br /> </span><span style="color: red">Command</span><span style="color: blue">="{</span><span style="color: #a31515">x</span><span style="color: blue">:</span><span style="color: #a31515">Static </span><span style="color: red">local</span><span style="color: blue">:</span><span style="color: red">MainWindow</span><span style="color: blue">.CmdStop}" <br /> </span><span style="color: red">CommandTarget</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">ElementName</span><span style="color: blue">=mainWindow}"<br /> </span><span style="color: red">Description</span><span style="color: blue">="Stop"<br /> </span><span style="color: red">ImageSource</span><span style="color: blue">="Resources/stop.png"/><br /> <</span><span style="color: #a31515">ThumbButtonInfo<br /> </span><span style="color: red">DismissWhenClicked</span><span style="color: blue">="False"<br /> </span><span style="color: red">Command</span><span style="color: blue">="{</span><span style="color: #a31515">x</span><span style="color: blue">:</span><span style="color: #a31515">Static </span><span style="color: red">local</span><span style="color: blue">:</span><span style="color: red">MainWindow</span><span style="color: blue">.CmdReset}"<br /> </span><span style="color: red">CommandTarget</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">ElementName</span><span style="color: blue">=mainWindow}"<br /> </span><span style="color: red">Description</span><span style="color: blue">="Reset"<br /> </span><span style="color: red">ImageSource</span><span style="color: blue">="Resources/reset.png"/><br /> </</span><span style="color: #a31515">ThumbButtonInfoCollection</span><span style="color: blue">><br /> </</span><span style="color: #a31515">TaskbarItemInfo.ThumbButtonInfos</span><span style="color: blue">><br /> </</span><span style="color: #a31515">TaskbarItemInfo</span><span style="color: blue">><br /></</span><span style="color: #a31515">Window.TaskbarItemInfo</span><span style="color: blue">><br /></span></pre><br /><br /><p>Now, we can see that TaskbarItemInfo has sereval important properties:</p><br /><br /><ul><br /> <li>ThumbnailClipMargin – this is the area that will be shown on the application thumbnail </li><br /><br /> <li>Description – this is a description that will be shown in a tooltip above the thumbnail </li><br /></ul><br /><br /><p>Then we define the thumb buttons. For each button we can provide a description, a source of the image to be displayed, and a command to be executed (there are other properties, try to investigate them if you’re interested).</p><br /><br /><h3>The Progress Indicator</h3><br /><br /><p>Windows 7 can show a progress indication in the taskbar which is quite useful for some applications (for example Internet Explorer showing download progress, or in our countdown timer – the timer progress). TaskbarItemInfo has two properties for showing a progress indication in the taskbar.</p><br /><br /><ul><br /> <li>ProgressValue – a percentage value, ranged from 0 to 1 controlling the current progress </li><br /><br /> <li>ProgressState – an enumerable which controls the current state of the progress indicator. </li><br /></ul><br /><br /><p>ProgressState can take the following values:</p><br /><br /><ul><br /> <li>None – the progress indicator is not active </li><br /><br /> <li>Indeterminate – the progress is indeterminate </li><br /><br /> <li>Normal – a normal state, showing the current progress </li><br /><br /> <li>Error – the progress indicator shows the current progress, but highlights the bar indicating that there’s an error </li><br /><br /> <li>Paused - the progress indicator shows the current progress, but highlights the bar indicating that the progress is paused. </li><br /></ul><br /><br /><table border="0" cellspacing="0" cellpadding="2" width="400"><tbody><br /> <tr><br /> <td valign="top" width="80">None</td><br /><br /> <td valign="top" width="80">Indeterm..</td><br /><br /> <td valign="top" width="80">Normal</td><br /><br /> <td valign="top" width="80">Error</td><br /><br /> <td valign="top" width="80">Paused</td><br /> </tr><br /><br /> <tr><br /> <td valign="top" width="80"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpWn-x0hDhY_nNLHQ2M00RaaVv46m7KbDn8WMtsB57bwuhlnzOVCNyo1oFJlwbEuonSSXsh45_eaUtkLBEjG2kjuFDVJdKXwTPN8u4W5e5VOhmDUafSSi42x5caiNFCegyZdZVr8YkP5Mo/s1600-h/progress_none%5B2%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="progress_none" border="0" alt="progress_none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFhFRBZGd4-PFa_6hy-7pwwrBWRzEIHSgSm6CIan0W-2fLuUYqdyzmaafWj1kTXk-B1ize-Si8gS8WeUwOXuaJHO_SyPlR9w4Xv6GcwaBJW_bFJzjyAStpclk1eQINWYITv_qOq96Qn5i/?imgmax=800" width="66" height="44" /></a> </td><br /><br /> <td valign="top" width="80"><a href="http://lh4.ggpht.com/_zTXmVbtNVz0/S4BwC-wILRI/AAAAAAAAAKQ/8nxw4Uwerd0/s1600-h/progress_indeterminate%5B2%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="progress_indeterminate" border="0" alt="progress_indeterminate" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXd7h_1drKtd9C91vJNS0RaqrPVgivSv4XDtFAp6OmBlWyFJ64hgYu4FPQemBvzo5evmio8WenEopWs3G1aEJJAhdc_Le8kJGQ0gpd_4_zx8k3zmzA_Y41yvfJ3du5iCHTB0estxDPXec/?imgmax=800" width="69" height="44" /></a> </td><br /><br /> <td valign="top" width="80"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJnlQuRNfR3K-30Ulh9mEfpszqjY5stqinxWzLk1Zhg0Cti8zJYn071XTCIHT4bLBspvW2DtRZ1GDs4OIHJcUHntSLPX0vPojBUS8pNkis03yvGu-gxR_GHORgadurioYIBCD-k1Wl-Vv/s1600-h/progress_normal%5B2%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="progress_normal" border="0" alt="progress_normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6t4DPhTDMGZeXTmHbwLlks-LLBK00rpWN9MPq2bRC0ThFVVq6OAmwkBLg-nqJd2h6zMC_U63F6ko3sOCThAqGH3y-K4fOIjXpxmlszRO6G2ssSFxmDsyuF6jF-4Jz7hK4GrTpKgTBo9Q/?imgmax=800" width="66" height="44" /></a> </td><br /><br /> <td valign="top" width="80"><a href="http://lh3.ggpht.com/_zTXmVbtNVz0/S4BwF5KTYtI/AAAAAAAAAKg/aG_8Wpv3AoI/s1600-h/progress_error%5B5%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="progress_error" border="0" alt="progress_error" src="http://lh5.ggpht.com/_zTXmVbtNVz0/S4BwGJvs9gI/AAAAAAAAAKk/IIEJ7aVos6s/progress_error_thumb%5B1%5D.png?imgmax=800" width="68" height="46" /></a> </td><br /><br /> <td valign="top" width="80"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgka1twRleSq6vefMmpxrlWyakDMnV0F8F5-NJqdpMxV53jh2mQd8U4-l-fH7gXy1isxFO8JYZI4CuK541Zh_NkrMREANvPP4I-pHN9S82ZtgrNbtPdxrdUse8rLjWoXCBoh7dnm6A8yG2Z/s1600-h/progress_paused%5B2%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="progress_paused" border="0" alt="progress_paused" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vAo7M4Sw8FuKk5IyJOoGZmHjBPvkJiPMq32D9bsq_MtKVVVZcAhSENCbAejv1UMlI_oRNzS6XzvBCVhJomP3laPWsvIgAz6aevAtebfKK7UNI06wdBiMwddlWml5-6aJIRNWhWrfmg0j/?imgmax=800" width="66" height="44" /></a> </td><br /> </tr><br /> </tbody></table><br /><br /><p>Here’s how we can set the progress indicator in code:</p><br /><br /><pre class="code">taskBarItemInfo.ProgressState = <span style="color: #2b91af">TaskbarItemProgressState</span>.Normal;<br />taskBarItemInfo.ProgressValue = 1.0 - currentTime.TotalMinutes;</pre><br /><br /><h3>The Jump List</h3><br /><br /><p>We can allow our application to include it’s own shortcuts and file links in the context menu of the taskbar item. This is done by setting a property in the Application object, called JumpList:</p><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">Application </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Class</span><span style="color: blue">="Win7Shell.App"<br /> </span><span style="color: red">xmlns</span><span style="color: blue">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br /> </span><span style="color: red">xmlns</span><span style="color: blue">:</span><span style="color: red">x</span><span style="color: blue">="http://schemas.microsoft.com/winfx/2006/xaml"<br /> </span><span style="color: red">StartupUri</span><span style="color: blue">="MainWindow.xaml"><br /> <br /> <</span><span style="color: #a31515">JumpList.JumpList</span><span style="color: blue">><br /> <</span><span style="color: #a31515">JumpList </span><span style="color: blue">><br /> <</span><span style="color: #a31515">JumpTask </span><span style="color: red">Title</span><span style="color: blue">="Notepad" <br /> </span><span style="color: red">Description</span><span style="color: blue">="Open Notepad." <br /> </span><span style="color: red">ApplicationPath</span><span style="color: blue">="C:\Windows\notepad.exe"<br /> </span><span style="color: red">IconResourcePath</span><span style="color: blue">="C:\Windows\notepad.exe"/> </</span><span style="color: #a31515">JumpList</span><span style="color: blue">><br /></</span><span style="color: #a31515">JumpList.JumpList</span><span style="color: blue">><br /></span><span style="color: blue"></</span><span style="color: #a31515">Application</span><span style="color: blue">><br /><br /></span></pre><br /><br /><p>So now Windows will display a shortcut to notepad in the context menu of the taskbar item of our application.</p><br /><br /><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVSY-a1GT9xuk9ar38oxtvuMYoodGbuh9-aXWF04Q-coHQ8krnVLXKhCfsTUC98QB_FgbWbZD_vhw-BpCTF1eG6Zar041UMglZssVkBYJ8PtsGXiP1DgdOvr7NUQqoRyGSY2gmKtuN5K8y/s1600-h/whats_what2%5B5%5D.png"><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="whats_what2" border="0" alt="whats_what2" src="http://lh5.ggpht.com/_zTXmVbtNVz0/S4BwJBLcHrI/AAAAAAAAAK0/xzBbpIdx8yo/whats_what2_thumb%5B1%5D.png?imgmax=800" width="244" height="200" /></a> </p><br /><br /><h2>Be safe</h2><br /><br /><p>Just a reminder when you use the taskbar integration of Windows 7 and WPF: The taskbar shortcuts, thumb buttons, progresses, are just to help the user see and do things more quickly. You should not use these components as your application’s main way of interaction with the user. Why? Because first of all, these components are not available in earlier versions of Windows. Also, even if the user runs Windows 7, there are some other concerns: for example the thumbnail preview is not available when Windows Aero is disabled. Of course, don’t worry, your application will still be able to run, just it’s taskbar functions will not be available.</p><br /><br /><h2>Download Sample</h2><br /><br /><p>You can download my <a href="http://www.filefactory.com/file/b03956e/n/Win7Shell_Countdown_src.zip">Countdown Timer</a> application to better understand the use of there components.</p> Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com4tag:blogger.com,1999:blog-2764343895681680392.post-40288747880151969052010-02-20T19:33:00.001+02:002010-02-20T19:33:39.143+02:00WPF 4.0 New Features: Text<p></p> <p></p> <p align="left">In the next series of posts I will write a little bit about the new features in the new WPF, part of Microsoft .NET Framework 4.0. So let’s begin with the improvements in text.</p> <h2 align="left">Text Rendering Stack </h2> <p align="left">Microsoft has significantly improved the way texts are rendered on the screen. They introduced several new options to allow us define the parameters of text rendering. These options are encapsulated in the properties <strong>TextOptions. TextFormattingMode</strong> and <strong>TextOptions. TextRenderingMode</strong> of the TextBlock and TextBox controls.</p> <p align="left">TextFormattingMode can accept the following values:</p> <ul> <li> <div align="left">Ideal (the default formatting mode)</div> </li> <li> <div align="left">Display</div> </li> </ul> <p align="left">As for TextRenderingMode, there are four available options:</p> <ul> <li> <div align="left">Auto (the default mode)</div> </li> <li> <div align="left">ClearType</div> </li> <li> <div align="left">Grayscale</div> </li> <li> <div align="left">Aliased</div> </li> </ul> <p align="left">The differences in rendering and format modes are difficult to see. The resulting rendered text depends on other properties and use cases – for example: font size, transformations, etc. We can see a simple example using the Display Formatting with normal text and scaled text here:</p> <div align="center"> <table border="0" cellspacing="0" cellpadding="2" width="400" align="center"><tbody> <tr> <td valign="top" width="200"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpl4ftSkzbgbCiDGjMAQnQADvuYCAjcadFuEJXcPfrPtyqLQdJVxG7DPQkev6JsiiW1OaewGlaIXEdYOqtbGYBVoVo4zqqlhsqx9xRkZ4_4yvtOi18Ahes5OPvZX2ECQzEmtVX27BNQMu/s1600-h/smalltext%5B2%5D.png"><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="smalltext" border="0" alt="smalltext" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8RCc52wV8GVYUpCxqtIxSi4Js2gikouK-sos2DQWQVGeVsrFOyZaErxR4cSpINiUVi4CRw2eXM54oyTlBlTRwvEwnT1gYuCE6S3QxNhWMUvGC4H03IaM3_h3qvssK_pCwnDZ1uTAFvpZ/?imgmax=800" width="106" height="79" /></a> </td> <td valign="top" width="200"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmz-40jxl6p6LwhsU9QW1vqgvyKQvGr0S8tzjaIXHAOR0BX1mNTEdyJL1kt4e2rxU9NduoB0IFKGFUzfjeyzapuk4ZD8srePo9kwpgUI14kfQxJVE8BJpzv2P5A_9gJjGg1IPMOls_-Av/s1600-h/zoomed_text%5B2%5D.png"><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="zoomed_text" border="0" alt="zoomed_text" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL40QFOMz0oESy4jvm1c9hxgW_7h_GeeMgq3bN5NYI3Xpl3okb0ylRKJjBIOhE5QXpjdtS-PD65YpuRFw1hmMqZnnqBB4pkxew96TjEqrY77o043TbGuGmDMQ-R9m6m3K0Z6PdhTpksco2/?imgmax=800" width="169" height="113" /></a> </td> </tr> </tbody></table> </div> <p></p> <p>You can see that although display formatting may look better in some cases, it looks ridiculously ugly in other cases, as in when it’s scaled.</p> <p>Now let’s see a comparison between all of the options in different use cases.</p> <div align="center"> <table border="0" cellspacing="0" cellpadding="2" width="400" align="center"><tbody> <tr> <td valign="top" width="136"> <ul> <li> <div align="left">Small Text </div> </li> </ul> </td> <td valign="top" width="264"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaECExy98Ur7qmERYHBfMyyBO90FpLYLlpi0siRlg6Tl2lmpmSv_jIvuih0YSpRA8u1-qNZx_n6B3szDmuQFHUa5mYw-y7HRBYEUn6vaPlXBKw0py_yHNTU4OU-twSriZpQUEllRJSil4q/s1600-h/compare_smalltext%5B2%5D.png"><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="compare_smalltext" border="0" alt="compare_smalltext" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgreB5I73GmONSyfWjAgRwRBFe9DIcVgcQkZTUjhbwM6XtkZtBvyYQBAYkhXJ7K3bChc7ojevGGCIwGrTByINy_QbQOCwWeRn30SY3MaNMlDdsQoaaspnZDVx-hEFa-fIQiBIV72Ly4HfVP/?imgmax=800" width="232" height="172" /></a> </td> </tr> <tr> <td valign="top" width="136"> <ul> <li> <div align="left">Large Text </div> </li> </ul> </td> <td valign="top" width="264"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpfBbICyGUT_CpZMAHLHV462B9ikxBeDTiThcR8J0jd7LzSTlawlyWY6PNUcJwQuQmzYSKTjwxd6nim7EwPzBRm1To7rEn3MK7AP75mxUyHq2j36a-UtRuqlGOJWHIICAcMB6qDUB91-t2/s1600-h/compare_largetext%5B2%5D.png"><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="compare_largetext" border="0" alt="compare_largetext" src="http://lh6.ggpht.com/_zTXmVbtNVz0/S4Ac311CizI/AAAAAAAAAJE/Cyqrfe3IgFo/compare_largetext_thumb.png?imgmax=800" width="224" height="191" /></a> </td> </tr> <tr> <td valign="top" width="136"> <ul> <li> <div align="left">Rotated Text </div> </li> </ul> </td> <td valign="top" width="264"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKXuElGB-YUCf-prsSpgzDE7YQrmSijMEOZDz5MOpA6p-4jFSansSUqiHc1EbB2-EDLq1Nf3AzdUSFjr_XZQQSJ-y5vCd1rlQYQ1w-gs_fMDdmV9wfDO_WZsM06fTNCHw0g_QYohMB40V/s1600-h/compare_rotated%5B2%5D.png"><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="compare_rotated" border="0" alt="compare_rotated" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wZ7znN6suiy-Z4JTj7iuRLfeea0x09J-pFX_ITO4j0qAFuQYgg0rVVm_HF3NCp09QH6JB97PMTTdL60oP1hdx5I3VrXJKIsqg46nviwuufFu56sMc4LPTu5MrjweupeVyT08n7zT-dNX/?imgmax=800" width="243" height="147" /></a> </td> </tr> <tr> <td valign="top" width="136"> <ul> <li> <div align="left">Scaled Text </div> </li> </ul> </td> <td valign="top" width="264"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtD1Tz3ss60ki6q15qa6CoPwh9TdzCzcNozPHdQaqzLa27mBtHIizwnDNhRKYAxmtY6MRxgJGJTWlBYbtRLKrY3Pypr7tN1bNj86KV4P_5TM1pOR5LhXiOpzd28ENfKQj58_Tq2nXTDgZ/s1600-h/compare_scaled%5B2%5D.png"><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="compare_scaled" border="0" alt="compare_scaled" src="http://lh3.ggpht.com/_zTXmVbtNVz0/S4Ac5r68oDI/AAAAAAAAAJU/uEB4LNjCF_Q/compare_scaled_thumb.png?imgmax=800" width="241" height="182" /></a> </td> </tr> </tbody></table> </div> <p>Here’s an example of how these properties are used. It’s quite simple:</p> <pre class="code"><span style="color: blue"><</span><span style="color: #a31515">TextBlock </span><span style="color: red">FontSize</span><span style="color: blue">="8" </span><span style="color: red">Text</span><span style="color: blue">="Display formatting" </span><span style="color: red">TextWrapping</span><span style="color: blue">="Wrap" </span><span style="color: red">Margin</span><span style="color: blue">="5" </span><span style="color: red">TextOptions.TextFormattingMode</span><span style="color: blue">="Display" </span><span style="color: red">TextOptions.TextRenderingMode</span><span style="color: blue">="Auto" /><br /><br /></span></pre><br /><a href="http://11011.net/software/vspaste"></a><br /><br /><h2>TextBox’s Caret and Selection Brush</h2><br /><br /><p>Great new thingy in WPF 4 is the introduction of two additional Brush properties of the TextBox control. </p><br /><br /><ul><br /> <li>CaretBrush – specifies the brush of the blinking caret in a TextBox </li><br /><br /> <li>SelectionBrush – specifies the brush of the selection background in a TextBox </li><br /></ul><br /><br /><p>Let’s see how these properties are used:</p><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">TextBox </span><span style="color: red">Text</span><span style="color: blue">="CaretBrush" </span><span style="color: red">Margin</span><span style="color: blue">="5"><br /> <</span><span style="color: #a31515">TextBox.CaretBrush</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5 0" </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5 1"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="LightBlue" </span><span style="color: red">Offset</span><span style="color: blue">="0"/><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Blue" </span><span style="color: red">Offset</span><span style="color: blue">="0.4"/><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Pink" </span><span style="color: red">Offset</span><span style="color: blue">="0.7" /><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="DarkRed" </span><span style="color: red">Offset</span><span style="color: blue">="1" /><br /> </</span><span style="color: #a31515">LinearGradientBrush</span><span style="color: blue">><br /> </</span><span style="color: #a31515">TextBox.CaretBrush</span><span style="color: blue">><br /></</span><span style="color: #a31515">TextBox</span><span style="color: blue">><br /></span></pre><br /><br /><p> </p><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">TextBox </span><span style="color: red">Text</span><span style="color: blue">="SelectionBrush" </span><span style="color: red">Margin</span><span style="color: blue">="5" ><br /> <</span><span style="color: #a31515">TextBox.SelectionBrush</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5 0" </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5 1"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="LightSteelBlue" </span><span style="color: red">Offset</span><span style="color: blue">="0"/><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="SteelBlue" </span><span style="color: red">Offset</span><span style="color: blue">="0.5" /><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="DarkRed" </span><span style="color: red">Offset</span><span style="color: blue">="1" /><br /> </</span><span style="color: #a31515">LinearGradientBrush</span><span style="color: blue">><br /> </</span><span style="color: #a31515">TextBox.SelectionBrush</span><span style="color: blue">><br /></</span><span style="color: #a31515">TextBox</span><span style="color: blue">><br /></span></pre><br /><a href="http://11011.net/software/vspaste"></a><br /><br /><p><span style="color: blue"><br /> <br /></span></p><br /><br /><p><font color="#000000">And the two text-boxes look like this now:</font></p><br /><br /><p><a href="http://lh5.ggpht.com/_zTXmVbtNVz0/S4Ac6Iv0PxI/AAAAAAAAAJY/LgFegmmEwGs/s1600-h/textbox_brushes%5B9%5D.png"><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="textbox_brushes" border="0" alt="textbox_brushes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga4O7Qm5OhuC-sKOGZIelhqo7IKrbo5SJmPlMq9A5QgOF-s38XPOem3s0q7iS7lw6O413O6yyQkANwluoMwF-_ZvJmfWkcnGwmwHacTkRvjkAShI37CNMDuiKeALDgoHKDwcq-ZK-pGmbB/?imgmax=800" width="458" height="134" /></a></p><br /><br /><p></p><br /><br /><h2>Bindable Runs</h2><br /><br /><p>In WPF 3.5 the Runs (objects within a TextBlock or a Document) had their Text properties as standart CLR properties. Now in WPF 4 they are created as dependency properties, and therefore support the power of data binding.</p><br /><br /><pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">TextBlock</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Run </span><span style="color: red">Text</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">FirstName</span><span style="color: blue">}" /><br /> <</span><span style="color: #a31515">Run </span><span style="color: red">Text</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">LastName</span><span style="color: blue">}" /><br /> </</span><span style="color: #a31515">TextBlock</span><span style="color: blue">><br /></span></pre><br /><br /><h2>Custom Spellchecking Dictionaries</h2><br /><br /><p>Microsoft has added the support for using custom spellcheckers, which can be loaded from a file or from app resources. A property has been added to the SpellChecker class – CustomDictionaries, which is essentially a list of URIs to the dictionary files (which, by the way are simple text files with one word on each line). </p><br /><br /><p>Let’s try one. We create a new text file, and call it for example MyCustomDictionary.lex. Note the extension is <strong><em>.lex</em></strong>. </p><br /><br /><p><a href="http://lh4.ggpht.com/_zTXmVbtNVz0/S4Ac7NEztVI/AAAAAAAAAJg/ClK1nGkL6l4/s1600-h/spell_dictionary%5B2%5D.png"><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="spell_dictionary" border="0" alt="spell_dictionary" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPw3lREg43OswF4vWD28IXs3mP6r0JpPO1AN-Xgsb_EIp4p6ZgvPbu4qeBOCsuLM-25XHS8fieh9SmwAcsErggdg2UkUA7gb2Ueb73unQEYxhwv8snGuviTKr_elXhVRosDPXEmO30XuQS/?imgmax=800" width="244" height="112" /></a></p><br /><br /><p>Now, we will add a simple TextBox and tell it to include that dictionary in the spellchecker.</p><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">TextBox </span><span style="color: red">Grid.Column</span><span style="color: blue">="2"<br /> </span><span style="color: red">Margin</span><span style="color: blue">="5"<br /> </span><span style="color: red">SpellCheck.IsEnabled</span><span style="color: blue">="True"><br /> <</span><span style="color: #a31515">SpellCheck.CustomDictionaries</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sys1</span><span style="color: blue">:</span><span style="color: #a31515">Uri</span><span style="color: blue">></span><span style="color: #a31515">MyCustomDictionary.lex</span><span style="color: blue"></</span><span style="color: #a31515">sys1</span><span style="color: blue">:</span><span style="color: #a31515">Uri</span><span style="color: blue">><br /> </</span><span style="color: #a31515">SpellCheck.CustomDictionaries</span><span style="color: blue">><br /></</span><span style="color: #a31515">TextBox</span><span style="color: blue">><br /></span></pre><br /><a href="http://11011.net/software/vspaste"></a><a href="http://11011.net/software/vspaste"></a><a href="http://11011.net/software/vspaste"></a><br /><br /><p>So now the spellchecker will recognize the words in this dictionary, and include them in the suggestions.</p><br /><br /><p><a href="http://lh4.ggpht.com/_zTXmVbtNVz0/S4Ac8Lwz-ZI/AAAAAAAAAJo/X46nd_wRXzc/s1600-h/spellcheck%5B2%5D.png"><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="spellcheck" border="0" alt="spellcheck" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYrkAfd_mwGnwvij8s2x-9w6DZUIJn9sf6gVvDGNBILVNjCWLkA1qXLOitNkHlQ-sP31LQKoiatIGe5lX5Jrii7NZlfhk0A4hE2NaJY_Ngv1dRdrUerZN4G8JYtiIYadITDgz2zBxsO2G9/?imgmax=800" width="244" height="199" /></a> </p><br /><br /><p> </p><br /><br /><p> </p><br /><br /><p>That’s all for texts in WPF 4 for now. As always, you can download the sample application to better understand how things work.</p><br /><br /><h2>Download Sample</h2><br /><br /><p>You can download the sample project by following this <a href="http://www.filefactory.com/file/b03813g/n/Wpf4Text_src.zip ">link</a>. Note: This is a VS2010 Project. Executables are also included.</p> Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com0tag:blogger.com,1999:blog-2764343895681680392.post-91605758992908976312009-10-18T20:31:00.002+03:002009-10-18T21:26:52.508+03:00Behaviors Library for WPF<p>In my previous post, <a href="http://svetoslavsavov.blogspot.com/2009/10/behaviors-in-wpf-with-expression-blend.html">Behaviors in WPF with Expression Blend 3</a>, I explained some basics about behaviors with Expression Blend 3. So now, I decided to start working on a library that will combine (hopefully) lots of behaviors for everyday use. I started with several behaviors for <em>Window</em> objects.</p> <p>Here is what the library contains for now:</p> <ul> <li>WindowDragMoveBehavior – When attached to a window, this behavior allows the window to be moved with the mouse, but not just by dragging the title bar of the window, as is the default behavior, but by clicking on any point of the window, and then moving the mouse. This is useful when you have skinned apps and you don’t actually have the title bar. </li> <li>AnimatedShowHideElementBehavior – Animates the showing or hiding of a framework element (works best for window elements now). Supports several types of animations: <ul> <ul> <li>Fade In </li> <li>Fade Out </li> <li>Zoom In </li> <li>Zoom Out </li> <li>Skew </li> </ul> </ul> </li> </ul> <p>Using the library is simple, just add a reference to the .dll file in your project and Expression Blend will start showing the new behaviors in the assets:</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi006IhJD50drfQDziqDoCgZ8Kj0Qn85gLRIJRJ9yPQ1Fqw_9a11SfVmgz3oVt8h0YBy9PaX9ybF9RCO32AcsSCdhv1bZllRYGOk9FBeH81rkUB7xBjCXnxJJn8S-8r44TDjKQt3Y-fhkAt/s1600-h/assets%5B15%5D.png"><img style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="assets" alt="assets" src="http://lh5.ggpht.com/_zTXmVbtNVz0/SttQ6Z10ySI/AAAAAAAAAH4/k7drZXqC-0g/assets_thumb%5B13%5D.png?imgmax=800" border="0" height="244" width="375" /></a></p> <p>Then, just drag and drop the behavior to an element to start using it:</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpLcP9BD07KIwSJD_a2lVyYOOfgU80THdu83aYlOGTvcZe9o4EmVNZk8WQ6JJRmHjR0KailgQIxPvm6aFXoQCdobzNc3UWMLrUvIO7Xj-u763JS1qgOL2KCSUDmzLL6G6OWdpkah75g3a/s1600-h/attached%5B2%5D.png"><img style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="attached" alt="attached" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-LaF5WdZwJZ8DGDVQ5GPO8QwhFRAFIPaepz7yhyaUHI9ZjA06XFfPB1zBdiXO0JCIE62UOlHl2br2eqUyABClghHeiPkyJOrwBezCYehyk1vRzfWSgpPgHDDrZYresTYd80sv1hpX_4d/?imgmax=800" border="0" height="76" width="244" /></a></p> <p>And you’ll see the settings of the behavior in Blend:</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUk5uE8Ac4PdMcjBnd8X63a9s5FvphpIctT_leEfguIbkK34St3D5tyHzQaQc5E8ErjRJhtSnTSUt62xi3s1awtO2HzyNo-dg-5IEj3syhKYLgiGsdlIfHDjTwr8D-eF4_gCZQtRYiGjBP/s1600-h/properties%5B2%5D.png"><img style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="properties" alt="properties" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHin82E7IqjC_pyVYYfBXFJnGdAI9yFMJiIBW4PERIxENERwc_gJLduvlJuF4uP73dwX2-4Uy8ag30MplWWcV9L_qz07_8xN4JfDtckqxQu9PUueZQDnvFyPUNNIhUhAQltP4bmkKSo07/?imgmax=800" border="0" height="135" width="244" /></a> </p> <p>Of course, this library is very small now, and i promise that I will add more and more behaviors when I have the time. Any suggestions will be appreciated.</p> <p><span style="font-size:130%;color:#0080c0;">Download the behaviors library</span></p> <p>You can download the behaviors library and a small demo project from <a href="http://www.filefactory.com/file/a1844ge/n/WpfFunLib_src_zip">this</a> link.</p>Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com0tag:blogger.com,1999:blog-2764343895681680392.post-45748025190125005512009-10-18T14:37:00.020+03:002009-10-18T15:40:00.356+03:00Behaviors in WPF with Expression Blend 3In Expression Blend 3, there is this new cool thing, called behaviors. In very simple words, these are special forms of objects which are attached to another object (usually an element in the UI) and perform some actions thus defining the <span style="font-style: italic;">behavior </span>of the element. The cool thing is that behaviors are reusable, and can be created in libraries and used in many projects. They're not tied to a specific application logic. Another nice thing is that once created, behaviors are extremely easy to attach to an element in XAML.<br /><br />To demonstrate the power of behaviors, I decided to create a very simple pong-like game ( a game with a ball that is moving around the screen and you have to keep it from escaping) and I used 2 custom behaviors. So let's go through the process.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9z6kOG007hZX0LPqCynP_0d-TFtLqzbEIF7IlrIePR3HjkQV0vfXAkv5T7QA9W6v3dvm2nsj2P5srhivWJvF3lOyKtrz_UiFi_JGIP679irLOFuZErUeLXgTn5dF_YQ5wCnRTbuLqKOLp/s1600-h/pong_screenshot.PNG"><img style="cursor: pointer; width: 395px; height: 366px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9z6kOG007hZX0LPqCynP_0d-TFtLqzbEIF7IlrIePR3HjkQV0vfXAkv5T7QA9W6v3dvm2nsj2P5srhivWJvF3lOyKtrz_UiFi_JGIP679irLOFuZErUeLXgTn5dF_YQ5wCnRTbuLqKOLp/s400/pong_screenshot.PNG" alt="" id="BLOGGER_PHOTO_ID_5393908804917792546" border="0" /></a><br /></div><br /><span style="color: rgb(51, 102, 255);font-size:180%;" >Getting Started </span><br /><br />Creating a custom behaviors is pretty simple. In Expression Blend, go to File -> New Item, and select Behavior.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvne4ioXEcVBfPwnm0UhUl94MJecz79B3lfbd08pGMooE4n7wsJIH4kBAs_En33aKhl7o2qWT08F99qMY602G_ITwo0RfMQ8sr-FVpF92OHc4M7Px9Fb6-7hOKijhuUi9tEQRHsYPLmUVi/s1600-h/new_behavior.PNG"><img style="cursor: pointer; width: 370px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvne4ioXEcVBfPwnm0UhUl94MJecz79B3lfbd08pGMooE4n7wsJIH4kBAs_En33aKhl7o2qWT08F99qMY602G_ITwo0RfMQ8sr-FVpF92OHc4M7Px9Fb6-7hOKijhuUi9tEQRHsYPLmUVi/s400/new_behavior.PNG" alt="" id="BLOGGER_PHOTO_ID_5393906988175246722" border="0" /></a><br /><div style="text-align: left;"><br />Then, the code-file of the behavior will be opened. You can edit in Blend of course, but when it comes to writing code, I prefer Visual Studio.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >The structure of a behavior</span><br />Blend will define a skeleton for your behavior. The most important methods inside are the OnAttached() and the OnDetaching() overrides. As suggested by the name, the OnAttached() method executes when the behavior is being attached to the element, so you should do some initializations there. In the OnDetaching() method, you can provide cleanup. Also in the behavior class you can define properties that control some settings. These properties will be displayed in the Properties section in Expression Blend when the behavior is selected.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >The behaviors for my game</span><br />In my demo game, I need two types of objects. First type is the player controlled bars (four of them) that move on each side of the screen following the movement of the mouse. The second type is the ball that moves constantly and bounces off the player controlled bars. So as you can guess, I need two behaviors.<br /></div></div><br />So let's see the first behavior I defined. I named it <span style="font-style: italic;">FollowMouseBehavior</span>. Here is the C# code.<br /><br /><br /><pre name="code" class="c-sharp"><br /><br />using System;<br />using System.Collections.Generic;<br />using System.Text;<br />using System.Windows;<br />using System.Windows.Controls;<br />using System.Windows.Data;<br />using System.Windows.Documents;<br />using System.Windows.Input;<br />using System.Windows.Media;<br />using System.Windows.Media.Imaging;<br />using System.Windows.Shapes;<br />using System.Windows.Interactivity;<br />using System.ComponentModel;<br />using Microsoft.Expression.Interactivity.Core;<br /><br /><br />namespace WpfBehaviorsSample<br />{<br />public class FollowMouseBehavior : Behavior<DependencyObject><br />{<br /> // add some private fields<br /> private Panel parentPanel = null;<br /> private Window parentWindow = null;<br /><br /> // add some properties for the behavior<br /> public bool LockXAxis { get; set; }<br /> public bool LockYAxis { get; set; }<br /> public bool IsLimitedToParentPanel { get; set; }<br /> public bool IsEnabled { get; set; }<br /><br /> public FollowMouseBehavior()<br /> {<br /> this.IsEnabled = true;<br /> IsLimitedToParentPanel = true;<br /> }<br /><br /> protected override void OnAttached()<br /> {<br /> base.OnAttached();<br /><br /> if (!DesignerProperties.GetIsInDesignMode(this) && this.AssociatedObject is UIElement)<br /> {<br /> // find the window and the panel in wich the current object is placed<br /> parentWindow = Common.GetAncestorOfType(this.AssociatedObject, typeof(Window)) as Window;<br /> parentPanel = Common.GetAncestorOfType(this.AssociatedObject, typeof(Panel)) as Panel;<br /> if (parentPanel == null || parentWindow == null) return;<br /><br /> // add a handler for the mouse move event<br /> parentWindow.PreviewMouseMove += new MouseEventHandler(parentPanel_PreviewMouseMove);<br /> }<br /> }<br /><br /> protected override void OnDetaching()<br /> {<br /> base.OnDetaching();<br /><br /> // Cleanup<br /> if (!DesignerProperties.GetIsInDesignMode(this) && this.AssociatedObject is UIElement && parentPanel != null)<br /> {<br /> parentPanel.PreviewMouseMove -= parentPanel_PreviewMouseMove;<br /> }<br /> }<br /><br /><br /><br /> void parentPanel_PreviewMouseMove(object sender, MouseEventArgs e)<br /> {<br /> if (!IsEnabled) return;<br /><br /> // When the mouse is moved, make the attatched element to follow it<br /><br /> Point position = e.GetPosition(parentPanel);<br /> <br /> if (parentPanel is Canvas)<br /> {<br /> double posX = LockXAxis ? Canvas.GetLeft(this.AssociatedObject as UIElement) : position.X;<br /> double posY = LockYAxis ? Canvas.GetTop(this.AssociatedObject as UIElement) : position.Y;<br /> if (IsLimitedToParentPanel && this.AssociatedObject is FrameworkElement)<br /> {<br /> double pW = parentPanel.ActualWidth;<br /> double pH = parentPanel.ActualHeight;<br /> double cW = (this.AssociatedObject as FrameworkElement).ActualWidth;<br /> double cH = (this.AssociatedObject as FrameworkElement).ActualHeight;<br /><br /> if (posX > pW - cW) posX = pW - cW;<br /> if (posY > pH - cH) posY = pH - cH;<br /> }<br /><br /> Canvas.SetLeft(this.AssociatedObject as UIElement, posX);<br /> Canvas.SetTop(this.AssociatedObject as UIElement, posY);<br /> }<br /> }<br /><br />}<br />}<br /><br /></pre><br />The code is pretty simple, so I don't think I need to explain it in depth. First of all we find in what window the element is placed, and we add an event handler to this window's mouse move event. Then on mouse move, we just get the mouse coordinates, and change the objects coordinates to follow, according to the settings we defined (for example lock X or Y axis. that causes the element to move only horizontally or vertically, of course it can be moved both horizontally and vertically).<br /><br />OK, let's look at the second behavior. This will cause an element (in our case, the pong ball) to move around the screen and when it hits another object, to change it's velocity. So this is the MovingBouncingBehavior.<br /><br /><pre name="code" class="c-sharp"><br />using System;<br />using System.Collections.Generic;<br />using System.Text;<br />using System.Windows;<br />using System.Windows.Controls;<br />using System.Windows.Data;<br />using System.Windows.Documents;<br />using System.Windows.Input;<br />using System.Windows.Media;<br />using System.Windows.Media.Imaging;<br />using System.Windows.Shapes;<br />using System.Windows.Interactivity;<br />using System.ComponentModel;<br />using System.Windows.Threading;<br />using Microsoft.Expression.Interactivity.Core;<br /><br />namespace WpfBehaviorsSample<br />{<br /> public class MovingBouncingBehavior : Behavior<DependencyObject><br /> {<br /> private static Random random = new Random();<br /> private Panel parentPanel = null;<br /> private Window parentWindow = null;<br /> private DispatcherTimer timerAnimation = null;<br /> private Vector velocity = new Vector(0, 0);<br /><br /> public double MinVelocityX { get; set; }<br /> public double MinVelocityY { get; set; }<br /> public double MaxVelocityX { get; set; }<br /> public double MaxVelocityY { get; set; }<br /> public event EventHandler LeftParentBounds;<br /><br /> public bool IsEnabled { get; set; }<br /><br /> private TimeSpan animationInterval = TimeSpan.FromMilliseconds(10);<br /> public TimeSpan AnimationInterval<br /> {<br /> get { return animationInterval; }<br /> set { animationInterval = value; CreateTimer(); }<br /> }<br /><br /> public MovingBouncingBehavior()<br /> {<br /> AnimationInterval = TimeSpan.FromMilliseconds(10);<br /> MinVelocityX = 1.0;<br /> MinVelocityY = 1.0;<br /> MaxVelocityX = 10.0;<br /> MaxVelocityY = 10.0;<br /> }<br /><br /> protected override void OnAttached()<br /> {<br /> base.OnAttached();<br /> if (!DesignerProperties.GetIsInDesignMode(this) && this.AssociatedObject is UIElement)<br /> {<br /> parentWindow = Common.GetAncestorOfType(this.AssociatedObject, typeof(Window)) as Window;<br /> parentPanel = Common.GetAncestorOfType(this.AssociatedObject, typeof(Panel)) as Panel;<br /> if (parentPanel == null || parentWindow == null) return;<br /><br /> velocity = new Vector(GetRandomVelocity(true), GetRandomVelocity(false));<br /> if (timerAnimation != null) timerAnimation.Start();<br /> }<br /> }<br /><br /> protected override void OnDetaching()<br /> {<br /> base.OnDetaching();<br /> if (!DesignerProperties.GetIsInDesignMode(this) && this.AssociatedObject is UIElement && parentPanel != null)<br /> {<br /> if (timerAnimation != null) timerAnimation.Stop();<br /> }<br /> }<br /><br /> private double GetRandomVelocity(bool x)<br /> {<br /> if (x)<br /> {<br /> return MinVelocityX + random.NextDouble() * (MaxVelocityX - MinVelocityX);<br /> }<br /> else<br /> {<br /> return MinVelocityY + random.NextDouble() * (MaxVelocityY - MinVelocityY);<br /> }<br /> }<br /><br /> private void CreateTimer()<br /> {<br /> if (timerAnimation == null)<br /> {<br /> timerAnimation = new DispatcherTimer();<br /> this.timerAnimation.Tick += new EventHandler(timerAnimation_Tick);<br /> }<br /> timerAnimation.Interval = AnimationInterval;<br /> }<br /><br /> void timerAnimation_Tick(object sender, EventArgs e)<br /> {<br /> if (!IsEnabled) return;<br /> if (parentPanel is Canvas && this.AssociatedObject is FrameworkElement)<br /> {<br /> FrameworkElement ui = this.AssociatedObject as FrameworkElement;<br /> Point pointNow = new Point(Canvas.GetLeft(ui), Canvas.GetTop(ui));<br /> Point pointMoved = pointNow + velocity;<br /><br /> // check for collisions<br /><br /> bool collisionFound = false;<br /><br /> int cycleSafetyCounter = 50;<br /> do<br /> {<br /> cycleSafetyCounter--;<br /> pointMoved = pointNow + velocity;<br /> Rect rc = new Rect(pointMoved, new Size(ui.ActualWidth, ui.ActualHeight));<br /> collisionFound = false;<br /><br /> // scan all children of the canvas<br /> foreach (UIElement child in parentPanel.Children)<br /> {<br /> if (child is FrameworkElement && child != ui)<br /> {<br /> Rect rcChild = new Rect(Canvas.GetLeft(child), Canvas.GetTop(child),<br /> (child as FrameworkElement).ActualWidth, (child as FrameworkElement).ActualHeight);<br /> if (rcChild.IntersectsWith(rc))<br /> {<br /> rcChild.Intersect(rc);<br /> bool shouldReverseX = random.Next(0, 2) % 2 == 0;<br /> bool shouldReverseY = random.Next(0, 2) % 2 == 0;<br /> velocity = new Vector(<br /> GetRandomVelocity(true) * (shouldReverseX ? -1 : 1),<br /> GetRandomVelocity(false) * (shouldReverseY ? -1 : 1));<br /> collisionFound = true;<br /> break;<br /> }<br /> }<br /> }<br /> }<br /> while (collisionFound && cycleSafetyCounter > 0);<br /><br /> Canvas.SetLeft(ui, pointMoved.X);<br /> Canvas.SetTop(ui, pointMoved.Y);<br /><br /> if (pointMoved.X < 0 || pointMoved.Y < 0 || pointMoved.X > parentPanel.ActualWidth<br /> || pointMoved.Y > parentPanel.ActualHeight)<br /> {<br /> if (LeftParentBounds != null)<br /> {<br /> LeftParentBounds(this, EventArgs.Empty);<br /> }<br /> }<br /> }<br /> }<br /> }<br />}<br /></pre><br />This behavior also has some settings. The ting it does, it creates a timer and then on each tick it moves the element to which it's attached, and checks for collisions. When a collision is found, the velocity is changed. Again, let's not go through the logic, the post is about behaviors, not about making a pong game.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Attaching a behavior to an element</span><br />As I said before, attaching behaviors is pretty simple. Now you'll see how it's done.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmoZJaT2yffBhqv3D5_Nqh0lr5CfYgorObzG4mYv1ybmHwZtX7S75sA5NUmdflO_SEgZByKucWOFqrmJnOO_JXRj7GqRYYX8VSNpnbbIQIwP9FUfdC_sNMuKwAX_1pk-dW0QQkqLpXWge/s1600-h/behavior_in_XAML.PNG"><img style="cursor: pointer; width: 400px; height: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmoZJaT2yffBhqv3D5_Nqh0lr5CfYgorObzG4mYv1ybmHwZtX7S75sA5NUmdflO_SEgZByKucWOFqrmJnOO_JXRj7GqRYYX8VSNpnbbIQIwP9FUfdC_sNMuKwAX_1pk-dW0QQkqLpXWge/s400/behavior_in_XAML.PNG" alt="" id="BLOGGER_PHOTO_ID_5393914604613739906" border="0" /></a><br /><br />See? Easy. Just set which behavior to use and change some settings (or, leave the dafault values, of course). Now our element (rectangle in this case) has a behavior. When we run the application and move the mouse, we see that this rectangle moves with it. You can add this behavior to any number of objects, and they'll all behave alike. All that's left to do is attatch the MovingBouncingBehavior to the ball element, edit some brushes (because, the application has to look nice, of course), and run.<br />Few lines of code, and you have a working game. Pretty powerful things, behaviors.<br />Thanks for reading. If you want the full demo application, check out the link below.<br /><br /><span style="color: rgb(51, 102, 255);font-size:180%;" >Download Sample Application</span><br /><br />You can download the sample from <a href="http://www.filefactory.com/file/a0h88ch/n/WpfBehaviorsSample_src_zip">this</a> link.Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com0tag:blogger.com,1999:blog-2764343895681680392.post-8155599668234963132009-09-24T23:19:00.029+03:002009-09-24T23:59:18.148+03:00Sorting and filtering databound listview in WPFThis is actually quite a simple thing, but a lot of people don't know it, so I'll explain how it's done. As you know, the concept of databinding in WPF is that you provide the visual elements with their data source and they know what to do with it. For example, give a collection of items to a listview, and the listview will generate its items automatically, without forcing you to get involved with the items' visuals, like back at the days of Windows Forms you had to individually create all ListViewItem elements, and so on. On the other hand, that was more direct approach - you know you have some list view items, and when you want to sort them, you just apply sorting to the collection of visual elements. But in WPF you don't have a direct access to the visual elements (ListViewItem). One way to sort a list view would be to modify the source collection. But it's a bit messy, sometimes the collection is read-only, and sometimes we don't want to change the source data.<br />So WPF offers a way to deal with this with the so called "View" object. It provides functionality to sort, filter, and group items in listviews or other controls that display a collection of items.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Filtering a ListView</span><br /><br />Applying a filter to a listview is pretty simple. First, we need to get the view object from the listview, and then provide a predicate that should tell if an item will be included in the filtered view or not.<br /><br /><pre name="code" class="c-sharp"><br /><br />// Get the default view from the listview<br />ICollectionView view = CollectionViewSource.GetDefaultView(lstMovies.ItemsSource);<br /><br />view.Filter = null;<br />view.Filter = new Predicate<object>(FilterMovieItem);<br /></pre><br />And now we define the predicate:<br /><br /><br /><pre name="code" class="c-sharp"><br />private bool FilterMovieItem(object obj)<br />{<br /> MovieItem item = obj as MovieItem;<br /> if (item == null) return false;<br /><br /> string textFilter = txtFilter.Text;<br /><br /> if (textFilter.Trim().Length == 0) return true; // the filter is empty - pass all items<br /><br /> // apply the filter<br /> if (item.MovieName.ToLower().Contains(textFilter.ToLower())) return true;<br /> return false;<br />}<br /></pre><br />The result is: we now have a working filter for our listview:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0d1GthF8ikbMVczjgknRiCo-_HT-a2zsr8PUno2xOP_za6PfoP02IUahev9CTDvqcDB2mEN_G-EdAzGMaTXYTPhycVBVkQWnZKQApIkMxWH9tn7JuMFDwuGPMaZ42KHh8WK3SH1gcNmX/s1600-h/filter.PNG"><img style="cursor: pointer; width: 334px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0d1GthF8ikbMVczjgknRiCo-_HT-a2zsr8PUno2xOP_za6PfoP02IUahev9CTDvqcDB2mEN_G-EdAzGMaTXYTPhycVBVkQWnZKQApIkMxWH9tn7JuMFDwuGPMaZ42KHh8WK3SH1gcNmX/s400/filter.PNG" alt="" id="BLOGGER_PHOTO_ID_5385135936832012546" border="0" /></a><br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Sortinga ListView</span><br /><br />The sorting is done in almost the same way. Again we get the view object and then apply some sort descriptions. We don't have to come up with some complicated sorting algorithm, it's enough to provide the property name of the data item by which the listview will be sorted, and the sort direction.<br /><br /><br /><pre name="code" class="c-sharp"><br />// .....<br /><br />// Get the default view from the listview<br />ICollectionView view = CollectionViewSource.GetDefaultView(lstMovies.ItemsSource);<br /><br />// .....<br />// .....<br /> <br />view.SortDescriptions.Clear();<br />view.SortDescriptions.Add(new SortDescription(propertyName, direction));<br /></pre><br />And now we have a support for sorting the items in the listview:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCVScw8HUrvTiO-M69YoS3ZTKojzph2ZTx9B7Ku4wNhVh4F0cHaPDTpQQssQto25BveRjR6-ktPMRgO_t1GzCh1KjyTmiemcxS1fj5ujmEmue208C83hwz-esF0RuD7XBF-9zjl4lpsTx/s1600-h/sort1.PNG"><img style="cursor: pointer; width: 303px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCVScw8HUrvTiO-M69YoS3ZTKojzph2ZTx9B7Ku4wNhVh4F0cHaPDTpQQssQto25BveRjR6-ktPMRgO_t1GzCh1KjyTmiemcxS1fj5ujmEmue208C83hwz-esF0RuD7XBF-9zjl4lpsTx/s400/sort1.PNG" alt="" id="BLOGGER_PHOTO_ID_5385138173757748674" border="0" /></a><br /><br />Of course, sorting and filtering can be applied at the same time, like in this case we have filtered movies which have names containing "matrix" and sorted them by rating:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraaN3c2r8ZNSp8D9_y_yc9kS8CTWY_q9vTuFus9hqUBqy0u12dERKElALESkhrG3veoLKZJR8JSb7unZ7QwFr3yL1QbalUiSkMqA5B3_k0uIaYxykmXe1CwTi5b9aarJGL3FDcba1brtE/s1600-h/sort_filter.PNG"><img style="cursor: pointer; width: 383px; height: 229px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraaN3c2r8ZNSp8D9_y_yc9kS8CTWY_q9vTuFus9hqUBqy0u12dERKElALESkhrG3veoLKZJR8JSb7unZ7QwFr3yL1QbalUiSkMqA5B3_k0uIaYxykmXe1CwTi5b9aarJGL3FDcba1brtE/s400/sort_filter.PNG" alt="" id="BLOGGER_PHOTO_ID_5385138528871551058" border="0" /></a><br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Download sample application</span><br /><br />The sample can be downloaded here: <a href="http://www.filefactory.com/file/a0b35a7/n/SortingListview_src_zip">Download sample</a>Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com3tag:blogger.com,1999:blog-2764343895681680392.post-38653701711936200422009-09-13T20:50:00.010+03:002009-09-13T22:01:59.996+03:00WPF Circle Launcher User Control and ApplicationRecently I started developing an user control for WPF which could replace the standard menu systems. The user control is a set of icons, ordered in a circle (or several circles, if there are a lot of icons), and each icon launches some functionality. The user control is customizable, there are parameters for the size of the icons, the radius of the circle, events for clicking and moving, etc.<br /><br />Then I decided to create a simple application launcher using this control. It's something like a quick-launch menu - users can add shortcuts to applications they use frequently and then start them from there.<br /><br />Here are some screenshots of the Circle Launcher:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuOb3UPa0j-6UE72ruS_rN6xXNL5PiXX3cYNrMgFA1N0YhNqQMvMuQckXCvoRlZTDUf86x6wXIc6M-1t95P_HsNdxM3G_Dve0yAYWXxGYCItkyZK5pVIi0hdHI30Rq3eUw5kFGNTZUVn_q/s1600-h/screen0.PNG"><img style="cursor: pointer; width: 305px; height: 287px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuOb3UPa0j-6UE72ruS_rN6xXNL5PiXX3cYNrMgFA1N0YhNqQMvMuQckXCvoRlZTDUf86x6wXIc6M-1t95P_HsNdxM3G_Dve0yAYWXxGYCItkyZK5pVIi0hdHI30Rq3eUw5kFGNTZUVn_q/s400/screen0.PNG" alt="" id="BLOGGER_PHOTO_ID_5381014378381363762" border="0" /></a><br /><br />The user control creates animations when the user passes over an icon with the mouse:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHQClyb9rCg0N5IIH4RAdzMU_RN4ws5rqAeKl-L1svlxcJve8HRDGobgzFEJAeygphV5o_HYVNmftgOlhjgKlh5OySt2to4LI8HbQDcugnTa89EZ8uTWV8sNql5elI7nrzcJLTkMGLESI/s1600-h/screen1.PNG"><img style="cursor: pointer; width: 358px; height: 296px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHQClyb9rCg0N5IIH4RAdzMU_RN4ws5rqAeKl-L1svlxcJve8HRDGobgzFEJAeygphV5o_HYVNmftgOlhjgKlh5OySt2to4LI8HbQDcugnTa89EZ8uTWV8sNql5elI7nrzcJLTkMGLESI/s400/screen1.PNG" alt="" id="BLOGGER_PHOTO_ID_5381014675786142370" border="0" /></a><br /><br />It supports transparency and the windows is at the top-level, so it's convenient to use. Also, when the icons become too much for just one circle, the control automatically expands itself.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJVkX5g5AoriRKMxIT_EWW9mQIoae0i4NrLsi5IAGi4Tnn3TjVKCT1m3pSRj4Ub59uI5iLPMDg2bK93_EENhl6_9VESpYweo53NYNE3T-Q1C54xGpjLLdOrGvJfJu7oc8uSrhvTt_UqTy/s1600-h/screen3.PNG"><img style="cursor: pointer; width: 400px; height: 234px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJVkX5g5AoriRKMxIT_EWW9mQIoae0i4NrLsi5IAGi4Tnn3TjVKCT1m3pSRj4Ub59uI5iLPMDg2bK93_EENhl6_9VESpYweo53NYNE3T-Q1C54xGpjLLdOrGvJfJu7oc8uSrhvTt_UqTy/s400/screen3.PNG" alt="" id="BLOGGER_PHOTO_ID_5381014961510992626" border="0" /></a><br /><br />The application is under development, but still, I decided to post a preliminary version here.<br />The current features include:<br /><ul><li>Adding new icons with drag and drop</li><li>Automatic saving of the icons to XML and then loading back on startup</li><li>Hotkey for showing the launcher - F12</li><li>Moving the launcher across the screen (by dragging the center circle) and saving it's position</li><li>Auto-hide when a shortcut is launched</li><li>Manual hide by double-clicking the center or using the context menu of the system tray icon<br /></li></ul>The features of the user control include:<br /><ul><li>Adding and removing shortcuts (Launcher Items)</li><li>Explicitly setting the properties of a shortcut - Name, Icon, Launch path, etc.</li><li>Events for launching, moving, double-click, etc.</li><li>Settings for the circle radius, max number of items in each radius, icon sizes</li><li>Animations</li><li>Built-in drag-drop support for shortcuts</li><li>Support for databinding<br /></li></ul>If anyone is interested in helping me to extend this application or the user control, please contact me. Even only with ideas. Any kind of help will be appreciated.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Download Circle Launcher</span><br /><br />You can download the application from <a href="http://www.filefactory.com/file/ah8041h/n/mkCircleLauncher_010_zip">here</a>. You'll need .NET 3.5 to run it.Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com9tag:blogger.com,1999:blog-2764343895681680392.post-90770601773430201082009-09-12T12:39:00.012+03:002009-09-12T13:18:31.616+03:00User Control Inheritance in WPFUser control inheritance is very useful in a lot of cases. But it seems like WPF doesn't want us to do that. Have you tried to create a user control (defined with XAML and code-behind) , and then inherit it? The compiler gets very mad at us and says there is an error:<br /><br /><span style="color: rgb(255, 0, 0);">'SomeBaseControl' cannot be the root of a XAML file because it was defined using XAML</span><br /><br />Now, what can we do to avoid this unpleasant message?<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Variant 1</span>,<br /><span style="color: rgb(51, 102, 255);">Use a custom control for the base class</span> (defined only with code, not XAML)<br /><br />This is handy sometimes. What you do is create the base control as a <span style="font-style: italic;">custom control</span>, using just the code<br /><br /><pre name="code" class="c-sharp"><br /><br />public class TestBaseCtrl : Control<br />{<br />// Add some base logic here...<br />}<br /><br /></pre><br /><br />You can add your controls from the code and create the base logic. Then you can inherit that control even in XAML, like this.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZS0DLFWKAhUisRZIpcxR5WzYfBPwL6YlIw2x7lpYTlxn-PhzKdaarXcwk3F71y981nu9q_3_xnoVZMecPMZglCrCpN_2Oj4aPfiQBSD1NetncACyveRd79tT9eeoczfZiRjSBLH_nO_iq/s1600-h/child_ctrl_xaml.png"><img style="cursor: pointer; width: 400px; height: 81px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZS0DLFWKAhUisRZIpcxR5WzYfBPwL6YlIw2x7lpYTlxn-PhzKdaarXcwk3F71y981nu9q_3_xnoVZMecPMZglCrCpN_2Oj4aPfiQBSD1NetncACyveRd79tT9eeoczfZiRjSBLH_nO_iq/s400/child_ctrl_xaml.png" alt="" id="BLOGGER_PHOTO_ID_5380520658363763090" border="0" /></a><br /><br />This is a working solution, but it's not very convenient. You don't have the flexibility of XAML in the base control. So let's take a look at the other solution.<br /><br /><span style="font-size:130%;"><span style="color: rgb(51, 102, 255);">Variant 2</span>, </span><br /><span style="color: rgb(51, 102, 255);">Create the base control using XAML</span><br /><br />OK, but how on earth do we do that? We all saw the error message - we cannot define a base control in XAML and then inherit it again in XAML, according to the compiler. However, there is an easy way to trick the compiler to allow us to do that.<br />The main idea is to create a base control as a <span style="font-style: italic;">custom control</span> again, and then define a control template in XAML. It's basically the same as defining the base control with XAML. Here is what I mean. This is the code-behind for the control:<br /><br /><pre name="code" class="c-sharp"><br />public class TestBaseCtrl : UserControl<br />{<br /> public static RoutedCommand TestButton1 = new RoutedCommand();<br /> public static RoutedCommand TestButton2 = new RoutedCommand();<br /><br /> static TestBaseCtrl()<br /> {<br /> DefaultStyleKeyProperty.OverrideMetadata(typeof(TestBaseCtrl), new FrameworkPropertyMetadata(typeof(TestBaseCtrl)));<br /> }<br /><br /> public TestBaseCtrl()<br /> {<br /> this.CommandBindings.Add(new CommandBinding(TestButton1, TestButton1_Executed));<br /> this.CommandBindings.Add(new CommandBinding(TestButton2, TestButton2_Executed));<br /> }<br /><br /> private void TestButton1_Executed(object sender, ExecutedRoutedEventArgs e)<br /> {<br /> MessageBox.Show("This is button 1 from the base control");<br /> }<br /><br /> private void TestButton2_Executed(object sender, ExecutedRoutedEventArgs e)<br /> {<br /> MessageBox.Show("This is button 2 from the base control");<br /> }<br />}<br /></pre><br /><br />And this is the control template, defined in XAML:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikLTnn6SzUwvBYJjDh9J3UmE4T-NSc8M7UGHoZ4rZe5Gy43_mlsk4VjSebRRLcJvBkA23AKs3_9-cf9C91H0poB4YMMqnsKAIIldIedJBAgPvQvmyhKnW2KArySYN8vKc080j1XlkRt4lF/s1600-h/base_ctrl_xaml.png"><img style="cursor: pointer; width: 400px; height: 235px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikLTnn6SzUwvBYJjDh9J3UmE4T-NSc8M7UGHoZ4rZe5Gy43_mlsk4VjSebRRLcJvBkA23AKs3_9-cf9C91H0poB4YMMqnsKAIIldIedJBAgPvQvmyhKnW2KArySYN8vKc080j1XlkRt4lF/s400/base_ctrl_xaml.png" alt="" id="BLOGGER_PHOTO_ID_5380520399336165234" border="0" /></a><br /><br />You can see that we have specified an area of the base control, in which the content of the child controls would be displayed, using <span style="font-style: italic;">ContentPresenter</span>.<br />Now, let's inherit that control:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZS0DLFWKAhUisRZIpcxR5WzYfBPwL6YlIw2x7lpYTlxn-PhzKdaarXcwk3F71y981nu9q_3_xnoVZMecPMZglCrCpN_2Oj4aPfiQBSD1NetncACyveRd79tT9eeoczfZiRjSBLH_nO_iq/s1600-h/child_ctrl_xaml.png"><img style="cursor: pointer; width: 400px; height: 81px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZS0DLFWKAhUisRZIpcxR5WzYfBPwL6YlIw2x7lpYTlxn-PhzKdaarXcwk3F71y981nu9q_3_xnoVZMecPMZglCrCpN_2Oj4aPfiQBSD1NetncACyveRd79tT9eeoczfZiRjSBLH_nO_iq/s400/child_ctrl_xaml.png" alt="" id="BLOGGER_PHOTO_ID_5380520658363763090" border="0" /></a><br /><br />Now, the WPF compiler is totally OK with it, and even displays the inherited control in the designer:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMTjVWD4UcsEky-_leNI22XizWN3ikSQhN1Ys6ibg8fJhaboNuTrSdmD0h50xQn1Byxj-kx9C0_ZkmvaJw_iyah_KfCRUz8q7nmKb_JNSYbthUUdUA744RkFKAfmGCy-qgWH1iIOKnYL5/s1600-h/vs_designer_screen.png"><img style="cursor: pointer; width: 370px; height: 357px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMTjVWD4UcsEky-_leNI22XizWN3ikSQhN1Ys6ibg8fJhaboNuTrSdmD0h50xQn1Byxj-kx9C0_ZkmvaJw_iyah_KfCRUz8q7nmKb_JNSYbthUUdUA744RkFKAfmGCy-qgWH1iIOKnYL5/s400/vs_designer_screen.png" alt="" id="BLOGGER_PHOTO_ID_5380521003229577154" border="0" /></a><br />And there you go - now you have a base control and an inherited control which both use the power of XAML. Everything goes well in the compilation and the compiler is no longer mad at us:<br /><br /><span style="color: rgb(0, 153, 0);">========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========</span><br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Download sample application</span><br /><br />The sample can be downloaded here: <a href="http://www.filefactory.com/file/ah8b579/n/UserControlInheritance_src_zip">Download sample</a>Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com18tag:blogger.com,1999:blog-2764343895681680392.post-91380034340739756612009-07-26T13:30:00.008+03:002009-07-26T14:04:49.992+03:00Switching WPF interface themes at runtime, Part 2In my previous post, <a href="http://svetoslavsavov.blogspot.com/2009/07/switching-wpf-interface-themes-at.html">Switching WPF interface themes at runtime<br /></a>,I explained how we can easily switch between interface themes at runtime using a simple property and even databinding. That was OK for a single element, or a single window. But what about if we have an application with a lot of windows? Not that hard, just set the property on every window. Yes, that would work, but it has some disadvantages. For example, we change the theme on one window, then we must implement some logic to change it to all other windows that are open, otherwise you are left with windows on the same application with different themes, and that's just ugly. It also can introduce a lot of bugs. And, it is also very boring.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Using a global theme for the application</span><br /><br />The idea is that we want to have a theme that should be applied on all of the windows of the application and that can be switched easily at a central location. So I continued working on my ThemeSelector class. I introcuded a property called Global Dictionary, which would be used for all elemenst registered with the theme selector. I also added another attachable property, which is boolean and tells the theme selector whether the element should use the global theme or not.<br />Let's take a look at the new code:<br /><br /><pre name="code" class="c-sharp"><br />#region Global Theme<br /><br />private static List<frameworkelement> elementsWithGlobalTheme = new List<frameworkelement>();<br /><br />private static Uri globalThemeDictionary = null;<br /><br />public static Uri GlobalThemeDictionary<br />{<br /> get { return globalThemeDictionary; }<br /> set<br /> {<br /> globalThemeDictionary = value;<br /><br /> // apply to all elements registered to use the global theme<br /> foreach (FrameworkElement element in elementsWithGlobalTheme)<br /> {<br /> if (GetApplyGlobalTheme(element))<br /> ApplyTheme(element, globalThemeDictionary);<br /> }<br /> }<br />}<br /><br />public static readonly DependencyProperty ApplyGlobalThemeProperty =<br /> DependencyProperty.RegisterAttached("ApplyGlobalTheme", typeof(bool),<br /> typeof(MkThemeSelector),<br /> new UIPropertyMetadata(false, ApplyGlobalThemeChanged));<br /><br />public static bool GetApplyGlobalTheme(DependencyObject obj)<br />{<br /> return (bool)obj.GetValue(ApplyGlobalThemeProperty);<br />}<br /><br />public static void SetApplyGlobalTheme(DependencyObject obj, bool value)<br />{<br /> obj.SetValue(ApplyGlobalThemeProperty, value);<br />}<br /><br /><br />private static void ApplyGlobalThemeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)<br />{<br /> if (obj is FrameworkElement)<br /> {<br /> FrameworkElement element = obj as FrameworkElement;<br /> if ((bool)e.NewValue) // if property is changed to 'true', then add to the list of elements and apply theme<br /> {<br /> if (!elementsWithGlobalTheme.Contains(element))<br /> elementsWithGlobalTheme.Add(element);<br /><br /> // apply the theme<br /> ApplyTheme(element, GlobalThemeDictionary);<br /> }<br /> else<br /> {<br /> if (elementsWithGlobalTheme.Contains(element))<br /> elementsWithGlobalTheme.Remove(element);<br /><br /> // apply the local theme instead of the global<br /> ApplyTheme(element, GetCurrentThemeDictionary(element));<br /> }<br /> }<br />}<br /><br />#endregion<br /></frameworkelement></frameworkelement></pre>That's all we need. When the ApplyGlobalTheme is set to <span style="font-style: italic;">true</span> on an element, it starts using the global theme. If this is set to <span style="font-style: italic;">false</span>, the element is switched back to the local theme set with the ThemeSelector, or to no theme at all. When the global theme is changed, the code searches all elements that use it and apply the new one. That's not something very complicated but it makes our lives a lot easier. The <span style="font-style: italic;">ApplyTheme(..)</span> method is the same method I used on my previous post, you can look it up there to understand it better. But just in case, I will post it here:<br /><br /><pre name="code" class="c-sharp"><br />private static void ApplyTheme(FrameworkElement targetElement, Uri dictionaryUri)<br />{<br /> if (targetElement == null) return;<br /><br /> try<br /> {<br /> ThemeResourceDictionary themeDictionary = null;<br /> if (dictionaryUri != null)<br /> {<br /> themeDictionary = new ThemeResourceDictionary();<br /> themeDictionary.Source = dictionaryUri;<br /><br /> // add the new dictionary to the collection of merged dictionaries of the target object<br /> targetElement.Resources.MergedDictionaries.Insert(0, themeDictionary);<br /> }<br /><br /> // find if the target element already has a theme applied<br /> List<themeresourcedictionary> existingDictionaries =<br /> (from dictionary in targetElement.Resources.MergedDictionaries.OfType<themeresourcedictionary>()<br /> select dictionary).ToList();<br /><br /> // remove the existing dictionaries<br /> foreach (ThemeResourceDictionary thDictionary in existingDictionaries)<br /> {<br /> if (themeDictionary == thDictionary) continue; // don't remove the newly added dictionary<br /> targetElement.Resources.MergedDictionaries.Remove(thDictionary);<br /> }<br /> }<br /> finally { }<br />}<br /></themeresourcedictionary></themeresourcedictionary></pre><span style="color: rgb(51, 102, 255);font-size:130%;" ><br />Using the Theme Selector with the global theme</span><br /><br />Changing the global theme is easy. Just one line:<br /><br /><br /><pre name="code" class="c-sharp"><br /> MkThemeSelector.GlobalThemeDictionary = new Uri("/ThemeSelector;component/Themes/ShinyRed.xaml",<br /> UriKind.Relative);<br /></pre><br />And that's it. All of the elements that use the global theme will be switched. But how to tell the element that it uses the global theme? Just set the <span style="font-style: italic;">ApplyGlobalTheme</span> attached property to <span style="font-style: italic;">true</span>.<br /><br /><pre name="code" class="xml"><br /><grid name="rootGrid" background="{DynamicResource WindowBackgroundBrush}" applyglobaltheme="True"><br /></grid></pre><br />Let's see some screenshots.<br /><br />This is a two-windows application with the no theme applied.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAZNOcnv-HiESkd6bOrqNhBUmWWN-ls96TAkQQTGZ-vJNHj0a07ml5Dr0XzsUnqL-ilHo366AtKdAx-V8kVOAhOE8GDY2ZLoSrxAepi2Js01YmUmXthgs1gcxyw5jf632Ie8X2h9qE_4q/s1600-h/screen_2_1.PNG"><img style="cursor: pointer; width: 198px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAZNOcnv-HiESkd6bOrqNhBUmWWN-ls96TAkQQTGZ-vJNHj0a07ml5Dr0XzsUnqL-ilHo366AtKdAx-V8kVOAhOE8GDY2ZLoSrxAepi2Js01YmUmXthgs1gcxyw5jf632Ie8X2h9qE_4q/s400/screen_2_1.PNG" alt="" id="BLOGGER_PHOTO_ID_5362721740605631730" border="0" /></a><br /><br />Let's see what happens when we change the global application theme using the Theme Selector.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPytEMqcuVW046ho53_XyvPVTLMRj4UiBqlipamy-Zjh2WNNBdMICdP78Dxpv-nsRQ0-Gq4Vf2xgEYtQuukfGJ2wNlGUVAu8dAm0abMVFTdU1wPbh76qLFmmTqoP1MnzsVLU_r1b8QgF9/s1600-h/screen_2_2.png"><img style="cursor: pointer; width: 196px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPytEMqcuVW046ho53_XyvPVTLMRj4UiBqlipamy-Zjh2WNNBdMICdP78Dxpv-nsRQ0-Gq4Vf2xgEYtQuukfGJ2wNlGUVAu8dAm0abMVFTdU1wPbh76qLFmmTqoP1MnzsVLU_r1b8QgF9/s400/screen_2_2.png" alt="" id="BLOGGER_PHOTO_ID_5362722060589014834" border="0" /></a><br /><br />Great. Both windows switched their themes. With just only one line of code.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Download Sample</span><br /><br />The sample application can be downloaded <a href="http://www.filefactory.com/file/ahf6d70/n/ThemeSelector_Part2_src_rar">here</a>.Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com9tag:blogger.com,1999:blog-2764343895681680392.post-48577043646037466702009-07-25T21:14:00.032+03:002009-07-26T12:35:35.670+03:00Switching WPF interface themes at runtimeWPF introduced the use of dynamic resource references. They're very helpful in rich application development. The dynamic resources are loaded at runtime, and can be changed at any time. Dynamic resources could be styles, brushes, etc. WPF however does not provide a convenient way of changing the resource references. That's why I've created a simple class that allows the developers to switch different resources very easy.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Using dynamic resources</span><br /><br />Creating and applying a dynamic resource is easy in WPF. First, we need to define the resource:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJoVgJkY5P4poqsVvHcYDWdc4xZTGrf5IXq48TXx7a_PJpRFO7SdphMzMXsVYHhemoDr17a1MZltYvxkHbtRDnEDv30FE9iswXwWPVZohirUlNlwOdDexR0upKJrGPohzDW0x8I6NXOgh/s1600-h/screen1.png"><img style="cursor: pointer; width: 465px; height: 48px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJoVgJkY5P4poqsVvHcYDWdc4xZTGrf5IXq48TXx7a_PJpRFO7SdphMzMXsVYHhemoDr17a1MZltYvxkHbtRDnEDv30FE9iswXwWPVZohirUlNlwOdDexR0upKJrGPohzDW0x8I6NXOgh/s400/screen1.png" alt="" id="BLOGGER_PHOTO_ID_5362479790925059154" border="0" /></a><br /><br />Then, we have to reference the resource like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPRTPX0hwwPk_fsl3dieumsAz3nyIKP4qHwaofflEAqrKg1D_mveE75an-l_Xgs0-AeqyfNuEYxte2fdO7R5hlfpdivdfSS1JXPOIw2w6wYpNpLaNSFAV6MPrj1ss8GexKJUSqXaLZKyw/s1600-h/screen2.png"><img style="cursor: pointer; width: 409px; height: 25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPRTPX0hwwPk_fsl3dieumsAz3nyIKP4qHwaofflEAqrKg1D_mveE75an-l_Xgs0-AeqyfNuEYxte2fdO7R5hlfpdivdfSS1JXPOIw2w6wYpNpLaNSFAV6MPrj1ss8GexKJUSqXaLZKyw/s400/screen2.png" alt="" id="BLOGGER_PHOTO_ID_5362480166627424322" border="0" /></a><br /><br />And that's it. WPF searches for a resource with the given key and applies it when it's found.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" ><br />Changing the dynamic resources at runtime</span><br /><br />As I said, dynamic resources are applied at runtime, that means they can be changed. Let's assume that we have defined several resources like brushes and styles, and we want them to be in two variants - for example a red theme and a blue theme for user interfaces. We put all of the resources for each theme in a different resource dictionary file. For this example, I use the WPF Themes which can be found here: <a href="http://wpf.codeplex.com/Wiki/View.aspx?title=WPF%20Themes">http://wpf.codeplex.com/Wiki/View.aspx?title=WPF%20Themes</a>. So, assume that we have two resource dictionaries:<br /><span style="font-style: italic;"><br />ShinyBlue.xaml<br />ShinyRed.xaml<br /><span style="font-style: italic;"><br /></span></span><span><span>Without these themes, a WPF window should look something like this:<br /><br /></span></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL8eIJm5DPwWIdJe-nz8MWXVJpmJ2LUBQUs4xNboMkeKM3w6UvJ_jhWMsHNXAlO52lASjRJhWOX10bTNkHIpvQRjHRxkJ8g38RVDj2MpIaaz6a4ivq61gZNAbiN13CMbNEGBj8WX000gN/s1600-h/screen4.png"><img style="cursor: pointer; width: 300px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL8eIJm5DPwWIdJe-nz8MWXVJpmJ2LUBQUs4xNboMkeKM3w6UvJ_jhWMsHNXAlO52lASjRJhWOX10bTNkHIpvQRjHRxkJ8g38RVDj2MpIaaz6a4ivq61gZNAbiN13CMbNEGBj8WX000gN/s400/screen4.png" alt="" id="BLOGGER_PHOTO_ID_5362483648924267458" border="0" /></a><br /><img src="file:///C:/DOCUME%7E1/SVETOS%7E1.SAV/LOCALS%7E1/Temp/moz-screenshot.jpg" alt="" /><br /><span style="font-style: italic;"><span style="font-style: italic;"></span></span>Using<span style="font-style: italic;"><span style="font-style: italic;"><span style="font-style: italic;"> </span></span></span>the themes is pretty easy, all we need to do is merge one of the resource dictionary to the resources of root control or window:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuOt0HRuEWKZCVeoEzMOeJCt52KtWx1d8-X-h7LHYrhW5AqhxCd0b-bMquRKTVkA001yiO00LoM4j3Fo7g2anwwj3uWKjFLdGPJAg-CDECIHPhy6V9QkPKQ9MEYF9M4FaOrK7CM8fWMh-/s1600-h/screen3.png"><img style="cursor: pointer; width: 503px; height: 91px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuOt0HRuEWKZCVeoEzMOeJCt52KtWx1d8-X-h7LHYrhW5AqhxCd0b-bMquRKTVkA001yiO00LoM4j3Fo7g2anwwj3uWKjFLdGPJAg-CDECIHPhy6V9QkPKQ9MEYF9M4FaOrK7CM8fWMh-/s400/screen3.png" alt="" id="BLOGGER_PHOTO_ID_5362483081285013842" border="0" /></a><br /><br />And now, the window looks like that:<br /><br /><img src="file:///C:/DOCUME%7E1/SVETOS%7E1.SAV/LOCALS%7E1/Temp/moz-screenshot-1.jpg" alt="" /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc8iWb6b0dEZ8mtpgnlGZ-WOvIdLuGmo-_ja66-q3ag7PAl3AdpC2YgvhD2fAX5QK4ssIKEZa1I9kPVOHuv0udXQa7Qzdsz_bgCtQEqLTObgBItMiRrdkNMnCbwXc7yBKUpbui_F_OrRsz/s1600-h/screen5.png"><img style="cursor: pointer; width: 300px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc8iWb6b0dEZ8mtpgnlGZ-WOvIdLuGmo-_ja66-q3ag7PAl3AdpC2YgvhD2fAX5QK4ssIKEZa1I9kPVOHuv0udXQa7Qzdsz_bgCtQEqLTObgBItMiRrdkNMnCbwXc7yBKUpbui_F_OrRsz/s400/screen5.png" alt="" id="BLOGGER_PHOTO_ID_5362483992314615394" border="0" /></a><br /><br />Pretty neat, huh? OK, that's good, but what if we want to change the theme to the red one? We have to go in the XAML code, change the source of the merged resource dictionary and recompile. No way! We should be able to come up with something nicer.<br /><br />Well, there's a solution. See, everytime when the resources of a framework element are changed (added or removed resources), WPF goes through all elements with dynamic resource references and updates them accordingly. So the solution should be obvious - when we need to change the theme, we can simply remove the old merged dictionary, and add the new one. I searched a bit in the internet, and the most common solution is to clear all merged dictionaries from the collection and then add the desired one. Yes, allright, that would work. But what if the developer has added more than one resource dictionary, not only the one with the theme resources? Everything goes away, and bang, the software is not working. So there should be a proper way of detecting which resource dictionary contains the theme resources, and leave the other dictionaries alone.<br /><br />It sounds a bit complicated, right? First, search for the right resource dictionary, then remove it from the list of merged dictionaries, then load the new one, and apply it. Yes but what if it could be done jyst by setting one single value to one signle property, and all is OK?<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >The ThemeSelector class</span><br /><br />So there is it. The solution. I created a class which has an attachable property - the URI path to the desired theme dictionary. Now, let's think about finding the right dictionary to be removed when themes are being switched. Kinda obvious solution is a new class that inherits ResourceDictionary. Then, we search all merged dictionaries and remove those which are of this new type. Pretty simple, right? Here's the class:<br /><pre name="code" class="c-sharp"><br /><br />public class ThemeResourceDictionary : ResourceDictionary<br />{<br />}<br /><br /></pre>So it's time to see the real deal.<br /><pre name="code" class="c-sharp"><br />public class MkThemeSelector : DependencyObject<br />{<br /><br />public static readonly DependencyProperty CurrentThemeDictionaryProperty =<br /> DependencyProperty.RegisterAttached("CurrentThemeDictionary", typeof(Uri),<br /> typeof(MkThemeSelector),<br /> new UIPropertyMetadata(null, CurrentThemeDictionaryChanged));<br /><br />public static Uri GetCurrentThemeDictionary(DependencyObject obj)<br />{<br /> return (Uri)obj.GetValue(CurrentThemeDictionaryProperty);<br />}<br /><br />public static void SetCurrentThemeDictionary(DependencyObject obj, Uri value)<br />{<br /> obj.SetValue(CurrentThemeDictionaryProperty, value);<br />}<br /><br />private static void CurrentThemeDictionaryChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)<br />{<br /> if (obj is FrameworkElement) // works only on FrameworkElement objects<br /> {<br /> ApplyTheme(obj as FrameworkElement, GetCurrentThemeDictionary(obj));<br /> }<br />}<br /><br />private static void ApplyTheme(FrameworkElement targetElement, Uri dictionaryUri)<br />{<br /> if (targetElement == null) return;<br /><br /> try<br /> {<br /> ThemeResourceDictionary themeDictionary = null;<br /> if (dictionaryUri != null)<br /> {<br /> themeDictionary = new ThemeResourceDictionary();<br /> themeDictionary.Source = dictionaryUri;<br /><br /> // add the new dictionary to the collection of merged dictionaries of the target object<br /> targetElement.Resources.MergedDictionaries.Insert(0, themeDictionary);<br /> }<br /><br /> // find if the target element already has a theme applied<br /> List<themeresourcedictionary> existingDictionaries =<br /> (from dictionary in targetElement.Resources.MergedDictionaries.OfType<themeresourcedictionary>()<br /> select dictionary).ToList();<br /><br /> // remove the existing dictionaries<br /> foreach (ThemeResourceDictionary thDictionary in existingDictionaries)<br /> {<br /> if (themeDictionary == thDictionary) continue; // don't remove the newly added dictionary<br /> targetElement.Resources.MergedDictionaries.Remove(thDictionary);<br /> }<br /> }<br /> finally { }<br />}<br />}<br /></pre><br />As I said, the class as one dependency property and an callback method to handle the event of changing the value of this property. There everything is straight-forward. First, the new theme dictionary is loaded, and then the old one is removed. That's it.<br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Using the ThemeSelector class</span><br /><br />Here comes the nice part. The usage of the class is as simple as changing the value of one single property.<br /><pre name="code" class="c-sharp"> private void ChangeToRedTheme()<br />{<br /> MkThemeSelector.SetCurrentThemeDictionary(this, new Uri("/ThemeSelector;component/Themes/ShinyRed.xaml", UriKind.Relative));<br />}<br /></pre>When this method is called, the theme changes:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPk2EVu5R1r6gouhJKhrEPwvNGe6TGU7WCk2qmNccqwdFC7J4ciX1j7CB5yuVTZqYigipSy2yhSqBkXxF9X976T0fqVfviTgReMG5gjcV4Jxs0f160TE8kF71bbzA9IYRmW90xAbxMNY_R/s1600-h/screen8.png"><img style="cursor: pointer; width: 300px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPk2EVu5R1r6gouhJKhrEPwvNGe6TGU7WCk2qmNccqwdFC7J4ciX1j7CB5yuVTZqYigipSy2yhSqBkXxF9X976T0fqVfviTgReMG5gjcV4Jxs0f160TE8kF71bbzA9IYRmW90xAbxMNY_R/s400/screen8.png" alt="" id="BLOGGER_PHOTO_ID_5362490824475612674" border="0" /></a><br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >The ThemeSelector class and WPF data binding</span><br /><br />We can even use databinding to change the themes dynamically. Let's assume that we have a combo box which have two items - the red theme, and the blue theme:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_lHQHNp3jQqAe-itne18HDsrmBwEhPXxgZtu_pqNx4zKgP-GoBcilFYY1NZvzvAs7SrwBsM3tjNA9YRA_yWl6P9EIuciKtpC6wDsjkawx-pKuNa8hIFV90X0AMULpaIkWrBpcYZ30K1EY/s1600-h/screen6.png"><img style="cursor: pointer; width: 543px; height: 72px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_lHQHNp3jQqAe-itne18HDsrmBwEhPXxgZtu_pqNx4zKgP-GoBcilFYY1NZvzvAs7SrwBsM3tjNA9YRA_yWl6P9EIuciKtpC6wDsjkawx-pKuNa8hIFV90X0AMULpaIkWrBpcYZ30K1EY/s400/screen6.png" alt="" id="BLOGGER_PHOTO_ID_5362490151369949954" border="0" /></a><br /><br />Now, on the element to which we want to apply the theme, for example the root grid in the window, we set the following binding expression:<br />local:MkThemeSelector.CurrentThemeDictionary="{Binding ElementName=cmbThemes, Path=SelectedItem.Tag}"<br /><br />So it looks like this:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Rws5YGGvyb6jirnlznOTEZsitiTgyihoBTiO9hd__20C2GcIwcmmajrYx5iLvD2ZkttKp0e-xwG3SKnsxD4Qt0K4sosKitM4NtVswzk2OmcawBSa6U-7v6S2jGh6-FJBcVuOjLFNsiKj/s1600-h/screen7.png"><img style="cursor: pointer; width: 505px; height: 44px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Rws5YGGvyb6jirnlznOTEZsitiTgyihoBTiO9hd__20C2GcIwcmmajrYx5iLvD2ZkttKp0e-xwG3SKnsxD4Qt0K4sosKitM4NtVswzk2OmcawBSa6U-7v6S2jGh6-FJBcVuOjLFNsiKj/s400/screen7.png" alt="" id="BLOGGER_PHOTO_ID_5362490621293204834" border="0" /></a><br /><br />And that's all. When we run the application, we have this combo box, allowing us to select the theme in runtime.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZ9IV636dHWS4b1T3T5It2FJiW_Jlsi89XEA0MaqXQTpgdUa_FeXEDYpRomvbGe-0ugepwrDakcTKQuBKYwrxI84gIrCK56FfXQrBxBsQQ1duiGwcalljLS6VjH6SqqLf0gBpZ0qTfwsy/s1600-h/screen9.png"><img style="cursor: pointer; width: 300px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZ9IV636dHWS4b1T3T5It2FJiW_Jlsi89XEA0MaqXQTpgdUa_FeXEDYpRomvbGe-0ugepwrDakcTKQuBKYwrxI84gIrCK56FfXQrBxBsQQ1duiGwcalljLS6VjH6SqqLf0gBpZ0qTfwsy/s400/screen9.png" alt="" id="BLOGGER_PHOTO_ID_5362491688210210834" border="0" /></a><br /><br /><span style="color: rgb(51, 102, 255);font-size:130%;" >Download sample application</span><br /><br />The sample can be downloaded here: <a href="http://www.filefactory.com/file/ahf4b09/n/ThemeSelector_src_zip">Download sample</a><br /><br /><a href="http://www.codeproject.com/script/Articles/BlogFeedList.aspx?amid=2035363" rel="tag" >CodeProject</a>Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com9tag:blogger.com,1999:blog-2764343895681680392.post-86613679174075986842009-07-25T14:23:00.028+03:002009-07-25T16:24:21.957+03:00Using GPU-Accelerated shader effects in WPF<blockquote></blockquote><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves>false</w:TrackMoves> <w:trackformatting/> <w:hyphenationzone>21</w:HyphenationZone> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>BG</w:LidThemeOther> <w:lidthemeasian>X-NONE</w:LidThemeAsian> <w:lidthemecomplexscript>X-NONE</w:LidThemeComplexScript> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> <w:dontgrowautofit/> <w:splitpgbreakandparamark/> <w:dontvertaligncellwithsp/> <w:dontbreakconstrainedforcedtables/> <w:dontvertalignintxbx/> <w:word11kerningpairs/> <w:cachedcolbalance/> </w:Compatibility> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:latentstyles deflockedstate="false" defunhidewhenused="true" defsemihidden="true" defqformat="false" defpriority="99" latentstylecount="267"> <w:lsdexception locked="false" priority="0" semihidden="false" unhidewhenused="false" qformat="true" name="Normal"> <w:lsdexception locked="false" priority="9" semihidden="false" unhidewhenused="false" qformat="true" name="heading 1"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 2"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 3"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 4"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 5"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 6"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 7"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 8"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 9"> <w:lsdexception locked="false" priority="39" name="toc 1"> <w:lsdexception locked="false" priority="39" name="toc 2"> <w:lsdexception locked="false" priority="39" name="toc 3"> <w:lsdexception locked="false" priority="39" name="toc 4"> <w:lsdexception locked="false" priority="39" name="toc 5"> <w:lsdexception locked="false" priority="39" name="toc 6"> <w:lsdexception locked="false" priority="39" name="toc 7"> <w:lsdexception locked="false" priority="39" name="toc 8"> <w:lsdexception locked="false" priority="39" name="toc 9"> <w:lsdexception locked="false" priority="35" qformat="true" name="caption"> <w:lsdexception locked="false" priority="10" semihidden="false" unhidewhenused="false" qformat="true" name="Title"> <w:lsdexception locked="false" priority="1" name="Default Paragraph Font"> <w:lsdexception locked="false" priority="11" semihidden="false" unhidewhenused="false" qformat="true" name="Subtitle"> <w:lsdexception locked="false" priority="22" semihidden="false" unhidewhenused="false" qformat="true" name="Strong"> <w:lsdexception locked="false" priority="20" semihidden="false" unhidewhenused="false" qformat="true" name="Emphasis"> <w:lsdexception locked="false" priority="59" semihidden="false" unhidewhenused="false" name="Table Grid"> <w:lsdexception locked="false" unhidewhenused="false" name="Placeholder Text"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="No Spacing"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 1"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 1"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 1"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 1"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 1"> <w:lsdexception locked="false" unhidewhenused="false" name="Revision"> <w:lsdexception locked="false" priority="34" semihidden="false" unhidewhenused="false" qformat="true" name="List Paragraph"> <w:lsdexception locked="false" priority="29" semihidden="false" unhidewhenused="false" qformat="true" name="Quote"> <w:lsdexception locked="false" priority="30" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Quote"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 1"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 1"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 1"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 1"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 1"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 1"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 1"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 2"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 2"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 2"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 2"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 2"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 2"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 2"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 2"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 2"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 2"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 2"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 3"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 3"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 3"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 3"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 3"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 3"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 3"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 3"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 3"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 3"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 3"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 3"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 3"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 4"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 4"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 4"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 4"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 4"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 4"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 4"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 4"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 4"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 4"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 4"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 4"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 4"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 4"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 5"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 5"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 5"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 5"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 5"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 5"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 5"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 5"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 5"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 5"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 5"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 5"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 5"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 5"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 6"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 6"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 6"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 6"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 6"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 6"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 6"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 6"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 6"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 6"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 6"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 6"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 6"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 6"> <w:lsdexception locked="false" priority="19" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Emphasis"> <w:lsdexception locked="false" priority="21" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Emphasis"> <w:lsdexception locked="false" priority="31" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Reference"> <w:lsdexception locked="false" priority="32" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Reference"> <w:lsdexception locked="false" priority="33" semihidden="false" unhidewhenused="false" qformat="true" name="Book Title"> <w:lsdexception locked="false" priority="37" name="Bibliography"> <w:lsdexception locked="false" priority="39" qformat="true" name="TOC Heading"> </w:LatentStyles> </xml><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Cambria; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:204; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1073741899 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:204; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:Consolas; panose-1:2 11 6 9 2 2 4 3 2 4; mso-font-charset:204; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:-1610611985 1073750091 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} h1 {mso-style-priority:9; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Heading 1 Char"; mso-style-next:Normal; margin-top:24.0pt; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; margin-bottom:.0001pt; line-height:115%; mso-pagination:widow-orphan lines-together; page-break-after:avoid; mso-outline-level:1; font-size:14.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#365F91; mso-themecolor:accent1; mso-themeshade:191; mso-font-kerning:0pt; mso-fareast-language:EN-US;} h2 {mso-style-priority:9; mso-style-qformat:yes; mso-style-link:"Heading 2 Char"; mso-style-next:Normal; margin-top:10.0pt; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; margin-bottom:.0001pt; line-height:115%; mso-pagination:widow-orphan lines-together; page-break-after:avoid; mso-outline-level:2; font-size:13.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#4F81BD; mso-themecolor:accent1; mso-fareast-language:EN-US;} p.MsoTitle, li.MsoTitle, div.MsoTitle {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; margin-top:0cm; margin-right:0cm; margin-bottom:15.0pt; margin-left:0cm; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoTitleCxSpFirst, li.MsoTitleCxSpFirst, div.MsoTitleCxSpFirst {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; mso-style-type:export-only; margin:0cm; margin-bottom:.0001pt; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoTitleCxSpMiddle, li.MsoTitleCxSpMiddle, div.MsoTitleCxSpMiddle {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; mso-style-type:export-only; margin:0cm; margin-bottom:.0001pt; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoTitleCxSpLast, li.MsoTitleCxSpLast, div.MsoTitleCxSpLast {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:15.0pt; margin-left:0cm; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; mso-themecolor:hyperlink; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} span.Heading1Char {mso-style-name:"Heading 1 Char"; mso-style-priority:9; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 1"; mso-ansi-font-size:14.0pt; mso-bidi-font-size:14.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#365F91; mso-themecolor:accent1; mso-themeshade:191; font-weight:bold;} span.Heading2Char {mso-style-name:"Heading 2 Char"; mso-style-priority:9; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 2"; mso-ansi-font-size:13.0pt; mso-bidi-font-size:13.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#4F81BD; mso-themecolor:accent1; font-weight:bold;} span.TitleChar {mso-style-name:"Title Char"; mso-style-priority:10; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:Title; mso-ansi-font-size:26.0pt; mso-bidi-font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 70.85pt 70.85pt 70.85pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:544871524; mso-list-type:hybrid; mso-list-template-ids:-841997770 67239949 67239939 67239941 67239937 67239939 67239941 67239937 67239939 67239941;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt; font-family:Wingdings;} @list l0:level2 {mso-level-number-format:bullet; mso-level-text:o; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt; font-family:"Courier New";} @list l0:level3 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt; font-family:Wingdings;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-fareast-language:EN-US;} </style> <![endif]--><p class="MsoNormal"><span style="font-style: italic; font-weight: bold; color: rgb(51, 51, 255);font-family:georgia;" >by Svetoslav Savov</span><br /><span style="" lang="EN-US"></span></p><p class="MsoNormal"><span style="" lang="EN-US">With Service Pack 1 of .NET 3.5 the use of effects in WPF was significantly improved. The old so called “bitmap effects” were using the CPU to render the visual elements. As a result, when a BitmapEffect is used, the whole visual tree of the element on which it’s applied becomes software rendered. As you can imagine, this dramatically decreases the performance of the user interface, especially when you add animations or 3D scenes. The new effects are using the DirectX shader system and they are rendered using the graphical processor which is a lot faster when it comes to calculating pixels, and also it relieves the CPU of the time-consuming effect operations so it is free to perform other tasks. With Effects you can combine the programmability of the GPU and the flexible environment of WPF to create rich user interfaces with animations, data binding and 3D scenes.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <h1><span style="" lang="EN-US">What do you need?<o:p></o:p></span></h1> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">For developing a WPF application with shader effects you need several things:<o:p></o:p></span></p> <ul><li><!--[if !supportLists]--><!--[endif]--><span style="" lang="EN-US">.NET 3.5 SP1 (of course :)</span><span style="" lang="EN-US"> )<o:p></o:p></span></li></ul> <p class="MsoNormal" style="margin-left: 36pt;"><a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=ab99342f-5d1a-413d-8319-81da479ab0d7&displaylang=en"><span style="" lang="EN-US">http://www.microsoft.com/downloads/details.aspx?FamilyID=ab99342f-5d1a-413d-8319-81da479ab0d7&displaylang=en</span></a><span style="" lang="EN-US"><o:p></o:p></span></p> <ul><li><!--[if !supportLists]--><span lang="EN-US" style="font-family:Wingdings;"><span style=""><span style=";font-family:";font-size:7;" > </span></span></span><!--[endif]--><span style="" lang="EN-US">DirectX SDK for the development stage <o:p></o:p></span></li></ul> <p class="MsoListParagraphCxSpMiddle"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoListParagraphCxSpMiddle"><a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=ea4894b5-e98d-44f6-842d-e32147237638&displaylang=en"><span style="" lang="EN-US">http://www.microsoft.com/downloads/details.aspx?FamilyID=ea4894b5-e98d-44f6-842d-e32147237638&displaylang=en</span></a><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle"><span style="" lang="EN-US"><o:p> </o:p></span></p> <ul><li><!--[if !supportLists]--><span lang="EN-US" style="font-family:Wingdings;"><span style=""><span style=";font-family:";font-size:7;" > </span></span></span><!--[endif]--><span style="" lang="EN-US">A tool to create the effects<o:p></o:p></span></li></ul> <p class="MsoListParagraphCxSpMiddle"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoListParagraphCxSpMiddle"><span style="" lang="EN-US">The Shazzam Tool is a great tool for this - </span><a href="http://shazzam-tool.com/"><span style="" lang="EN-US">http://shazzam-tool.com</span></a><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoListParagraphCxSpLast"><span style="" lang="EN-US"><o:p> </o:p></span></p> <h1><span style="" lang="EN-US">Getting started with Shazzam<o:p></o:p></span></h1> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">First of all we can take a look at Shazzam. It comes with some sample shaders<span style=""> </span>we can use for learning.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Start Shazzam and go to <i style="">Shader Loader</i> -> <i style="">Sample Shaders</i>.</span></p><p class="MsoNormal"><span style="" lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrsWsvRYp8fryO_wB_9ffPiu6ZhzW2o9g8Q7ih7hVKdZOx_tTvce_w33CfCh-C-8DpSr8YH9ovMo0PuimS1rLI0ZmbU8bCMuyv9IiHRCPxdfzKRumZfFS4nRHBTvoIct3m6VFRXWq23eq/s1600-h/image001.png"><img style="cursor: pointer; width: 400px; height: 244px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrsWsvRYp8fryO_wB_9ffPiu6ZhzW2o9g8Q7ih7hVKdZOx_tTvce_w33CfCh-C-8DpSr8YH9ovMo0PuimS1rLI0ZmbU8bCMuyv9IiHRCPxdfzKRumZfFS4nRHBTvoIct3m6VFRXWq23eq/s400/image001.png" alt="" id="BLOGGER_PHOTO_ID_5362358382156162562" border="0" /></a></p> <p class="MsoNormal"><span style="" lang="EN-US">You can see the shader’s FX file, and a sample image which will be used to review and test the effect. Click on <i style="">Tools</i>-><i style="">Compile Shader</i> or press F7. Then click on Tools-><i style="">Apply Shader</i> (F5). When the shader is compiled you can see that Shazzam generated a C# class and a Visual Basic class that wrap the effect’s properties. <o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVPfIIxo4AFxkScvfa6yIpRASaN9w75PJlcmUdIFxbVnERkHTTQbZdbpPRU5dSxpdzpGHcjaO8OTf2w-8as8QhjwtL6ASyLmiU2ZYQ1leJ8_dG3Xk23ERLrJkOO6-lZgzqEAadjIv0ETH/s1600-h/image003.png"><img style="cursor: pointer; width: 400px; height: 133px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVPfIIxo4AFxkScvfa6yIpRASaN9w75PJlcmUdIFxbVnERkHTTQbZdbpPRU5dSxpdzpGHcjaO8OTf2w-8as8QhjwtL6ASyLmiU2ZYQ1leJ8_dG3Xk23ERLrJkOO6-lZgzqEAadjIv0ETH/s400/image003.png" alt="" id="BLOGGER_PHOTO_ID_5362358835483113634" border="0" /></a><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Also the <i style="">Change Shader Settings</i> page appeared. There you can see all the changeable properties of the effect and see in real time what happens when you change a property. To test the effect you can use one of the built-in sample images or you can select another.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Let’s try something out. Select the <i style="">Pixelate.fx</i></span><i style=""><span lang="EN-US"> </span></i><span style="" lang="EN-US">shader from the samples. Choose the first sample image (<i style="">Sample1)</i>. Compile (F7) and Apply (F5) the effect. What happened? The image seems to have disappeared. That’s because the properties of the shader have default values of zero, and that just doesn’t work for our effect. <o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW1k6YbzXky6qbk_o8H8hmRo3POjeI3lz6FsVmHGIOTAdd9XEw8jnsswcTiPYGe5lK1blBS1bBbMO-XMOCdqNZ6OJqbiYJUkP8QL2HMf7vgCEh4veXa8s17FFhVeVuLuTBzb-K3lel3jOw/s1600-h/image005.png"><img style="cursor: pointer; width: 400px; height: 119px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW1k6YbzXky6qbk_o8H8hmRo3POjeI3lz6FsVmHGIOTAdd9XEw8jnsswcTiPYGe5lK1blBS1bBbMO-XMOCdqNZ6OJqbiYJUkP8QL2HMf7vgCEh4veXa8s17FFhVeVuLuTBzb-K3lel3jOw/s400/image005.png" alt="" id="BLOGGER_PHOTO_ID_5362359031183387682" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">In the settings page, you can see some text boxes and sliders. They are used for changing the properties of the effect. First of all, you can see that there are a <i style="">Min</i> and a <i style="">Max</i> boxes with default values of 0 and 1. We have to change them to actually see the effect working. That’s because the system cannot know what the property is being used for, it doesn’t make any sense, it’s just a value. So the developers of Shazzam decided that the default values can be from 0 to 1. But in the case of <i style="">Pixelate</i> effect, the parameter values are in pixels. So we need to change them to 0-600 for both <i style="">Horizontal pixel counts </i>and <i style="">Vertical pixel counts</i>. And now when we move the sliders, we change the values from 0 to 600 instead of from 0 to 1. Now it makes sense.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">So let’s change the values to about 100.<o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVAqM9KevxQReRLKCe7XtpOseQZSbjjlG-ynICyYpK6zzu75AJEDhDqz7p_IYzsc4mw9U-krsRC518fGGqT_9GhjF9B318sBUbnCG75iejGCHGaxp4nyvZY2dxQU8SI5Xl_sgrJBNzxqI/s1600-h/image007.png"><img style="cursor: pointer; width: 400px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVAqM9KevxQReRLKCe7XtpOseQZSbjjlG-ynICyYpK6zzu75AJEDhDqz7p_IYzsc4mw9U-krsRC518fGGqT_9GhjF9B318sBUbnCG75iejGCHGaxp4nyvZY2dxQU8SI5Xl_sgrJBNzxqI/s400/image007.png" alt="" id="BLOGGER_PHOTO_ID_5362359247292857362" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">As we move the slider we can actually see what’s happening in the image above. <o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmp0ojcx9nyaxmFGJDMfgB6H3wVI95VBW1iTBcnqBIXSPHGPe16vyDp-vZ_I5stJX7h8utxAmBkZTg8qqb1nAoKGLGNUzY-7llH00f0_-RrgA4TKCBjNs8Yaf9WtaSSA2yA_WH8Vg-9M-/s1600-h/image009.png"><img style="cursor: pointer; width: 400px; height: 272px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmp0ojcx9nyaxmFGJDMfgB6H3wVI95VBW1iTBcnqBIXSPHGPe16vyDp-vZ_I5stJX7h8utxAmBkZTg8qqb1nAoKGLGNUzY-7llH00f0_-RrgA4TKCBjNs8Yaf9WtaSSA2yA_WH8Vg-9M-/s400/image009.png" alt="" id="BLOGGER_PHOTO_ID_5362359385407506418" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">You can try some other effects from the samples, or browse the internet for third-party shaders. There are some nice video tutorials on Shazzam website, </span><a href="http://shazzam-tool.com/"><span style="" lang="EN-US">http://shazzam-tool.com</span></a><span style="" lang="EN-US">.<o:p></o:p></span></p> <h1><span style="" lang="EN-US">Using effects in a WPF application<o:p></o:p></span></h1> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <h2><span style="" lang="EN-US">Adding the effect to a WPF project<o:p></o:p></span></h2> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">The integration of a shader effect in WPF application is a relatively simple task.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">First of all, it’s probably a good idea to add the compiled shader file to our WPF project. In Shazzam, go to the <i style="">Tools</i> menu and click on <i style="">View Compiled Shaders. </i>There are all the effects that we have compiled using Shazzam. In Visual Studio, select the project and right-click on it, choose <i style="">Add New -> Existing Item</i> and select the compiled effect file (the files are with <i style="">.ps</i> extension). Right click on the file in Solution Explorer and select <i style="">Properties</i>. Set the <i style="">Build Action</i> parameter to <i style="">Resource.</i><o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOqFZyfN4OxdCQ3qbEEEyNAKBkpf6jQTRIJVK3FLFi2YOoDRPMb4ZPYx2gHW2OWwaLmGcQnTUnnH0jKB3pvJlvFMWWkHrBHIkhKtxEwTojR9iOyP1IpWfeFxb0ndIqigvJOsAg1-JQYJm/s1600-h/image011.png"><img style="cursor: pointer; width: 316px; height: 151px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOqFZyfN4OxdCQ3qbEEEyNAKBkpf6jQTRIJVK3FLFi2YOoDRPMb4ZPYx2gHW2OWwaLmGcQnTUnnH0jKB3pvJlvFMWWkHrBHIkhKtxEwTojR9iOyP1IpWfeFxb0ndIqigvJOsAg1-JQYJm/s400/image011.png" alt="" id="BLOGGER_PHOTO_ID_5362359638525548642" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Create a new code file, go to Shazzam, copy the auto-generated class code, and paste it in the new code file. You will see some dependency properties, and a constructor. So let’s take a look at the constructor.<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><b><span style=";font-family:Consolas;font-size:10;color:blue;" >public </span></b><b><span style=";font-family:Consolas;font-size:10;color:midnightblue;" >AutoGenShaderEffect</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >(</span><span style=";font-family:Consolas;font-size:10;color:black;" >PixelShader shader</span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >) {<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:darkgreen;" ><span style=""> </span></span><span style=";font-family:Consolas;font-size:10;color:green;" >// Note: for your project you must decide how to use the generated ShaderEffect class (Choose A or B below).<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span>// A: Comment out the following line if you are not passing in the shader and remove the shader parameter from the constructor<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><o:p> </o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span></span><span style=";font-family:Consolas;font-size:10;color:black;" >PixelShader </span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >= </span><span style=";font-family:Consolas;font-size:10;color:black;" >shader</span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >;<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:darkgreen;" ><o:p> </o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:darkgreen;" ><span style=""> </span></span><span style=";font-family:Consolas;font-size:10;color:green;" >// B: Uncomment the following two lines - which load the *.ps file<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span>// Uri u = new Uri(@"pack://application:,,,/bandedswirl.ps");<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span>// PixelShader = new PixelShader() { UriSource = u };<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><o:p> </o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span>// Must initialize each DependencyProperty that's affliated with a shader register<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span>// Ensures the shader initializes to the proper default value.<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span></span><b><span style=";font-family:Consolas;font-size:10;color:black;" >this</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >.</span><b><span style=";font-family:Consolas;font-size:10;color:midnightblue;" >UpdateShaderValue</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >(</span><span style=";font-family:Consolas;font-size:10;color:black;" >InputProperty</span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >);<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:darkgreen;" ><span style=""> </span></span><b><span style=";font-family:Consolas;font-size:10;color:black;" >this</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >.</span><b><span style=";font-family:Consolas;font-size:10;color:midnightblue;" >UpdateShaderValue</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >(</span><span style=";font-family:Consolas;font-size:10;color:black;" >HorizontalpixelcountsProperty</span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >);<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:darkgreen;" ><span style=""> </span></span><b><span style=";font-family:Consolas;font-size:10;color:black;" >this</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >.</span><b><span style=";font-family:Consolas;font-size:10;color:midnightblue;" >UpdateShaderValue</span></b><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >(</span><span style=";font-family:Consolas;font-size:10;color:black;" >VerticalpixelcountsProperty</span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >);<o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:Consolas;font-size:10;color:darkgreen;" ><span style=""> </span>}</span><span style="line-height: 115%;font-family:Consolas;font-size:10;color:darkgreen;" lang="EN-US" ><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">It’s very well commented and it practically tells us what to do.<span style=""> </span>As we can see, there are two cases for using the effect class. First one is to pass the pixel shader as a parameter to the constructor. The second one is to create the pixel shader directly there. In this example, we choose option B – create the <i style="">PixelShader </i>object directly in the constructor. So we remove the line<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:Consolas;font-size:10;color:green;" ><span style=""> </span></span><span style=";font-family:Consolas;font-size:10;color:black;" >PixelShader </span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >= </span><span style=";font-family:Consolas;font-size:10;color:black;" >shader</span><span style=";font-family:Consolas;font-size:10;color:darkgreen;" >;<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">and uncomment the lines for creating the object. Also It’s a good idea to rename the class so that we can recognize it later. The default name is </span><b><span style="line-height: 115%;font-family:Consolas;font-size:10;color:midnightblue;" >AutoGenShaderEffect</span></b><span style="" lang="EN-US"> which is not very intuitive. But when you change the name of the class, don’t forget to change the owner type of the dependency properties.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">So with all the changes our class looks something like this:<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:blue;">public</span> PixelateShaderEffect()<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span>{<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color: rgb(43, 145, 175);">Uri</span> u = <span style="color:blue;">new</span> <span style="color: rgb(43, 145, 175);">Uri</span>(<span style="color: rgb(163, 21, 21);">"/PixelShaders;component/EffectPS/Pixelate.ps"</span>, <span style="color: rgb(43, 145, 175);">UriKind</span>.Relative);<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span>PixelShader = <span style="color:blue;">new</span> <span style="color: rgb(43, 145, 175);">PixelShader</span>() { UriSource = u };<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><o:p> </o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:blue;">this</span>.UpdateShaderValue(InputProperty);<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:blue;">this</span>.UpdateShaderValue(HorizontalpixelcountsProperty);<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:blue;">this</span>.UpdateShaderValue(VerticalpixelcountsProperty);<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span>}<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">And that’s it. We now have a class that represents the pixel shader effect.<o:p></o:p></span></p> <h2><span style="" lang="EN-US"><o:p> </o:p></span></h2> <h2><span style="" lang="EN-US">Using the effect in user interface<o:p></o:p></span></h2> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Now that we have the effect created in our project, we finally can see it in action in our user interface. Let’s create some demo interface, nothing special, just to see the effect. <o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">I created something like this, just for fun:<o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSVSCNRS86-Civ8Pv2ReDzwyY_lfzkZaR7dCx8yHMLnCue66R3k789lClgdpmE2Pot0sb1aLmFEfZeN2fSkvCU7_8YpECz_5-Hciq3379EdhN87H_7BAhXlPDgbmfthDYmruUzY-MHKXb/s1600-h/image013.png"><img style="cursor: pointer; width: 400px; height: 327px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSVSCNRS86-Civ8Pv2ReDzwyY_lfzkZaR7dCx8yHMLnCue66R3k789lClgdpmE2Pot0sb1aLmFEfZeN2fSkvCU7_8YpECz_5-Hciq3379EdhN87H_7BAhXlPDgbmfthDYmruUzY-MHKXb/s400/image013.png" alt="" id="BLOGGER_PHOTO_ID_5362359990371716322" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style="" lang="EN-US">And here’s the XAML code:<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p> </o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid.ColumnDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >ColumnDefinition</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="100" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >ColumnDefinition</span><span style=";font-family:";font-size:10;color:blue;" > /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid.ColumnDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:green;" ><!-- Some Buttons --><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >StackPanel</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest1"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Button One"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest2"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Hack NASA"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest3"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Go to the moon"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest4"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Crash app"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >StackPanel</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >TextBlock</span><span style=";font-family:";font-size:10;color:red;" > Grid.Column</span><span style=";font-family:";font-size:10;color:blue;" >="1"</span><span style=";font-family:";font-size:10;color:red;" > Text</span><span style=";font-family:";font-size:10;color:blue;" >="Some programming languages are so good that a program written with them can go through an infinite loop for about ten minutes on really fast computers."</span><span style=";font-family:";font-size:10;" > <o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>TextWrapping</span><span style="color:blue;">="Wrap"</span><span style="color:red;"> Margin</span><span style="color:blue;">="10"</span><span style="color:red;"> Foreground</span><span style="color:blue;">="Blue"/><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Canvas</span><span style=";font-family:";font-size:10;color:red;" > Grid.Column</span><span style=";font-family:";font-size:10;color:blue;" >="1"</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="100"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="100"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="100"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="100"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Yellow"</span><span style=";font-family:";font-size:10;color:red;" > Stroke</span><span style=";font-family:";font-size:10;color:blue;" >="Black"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Black"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="20"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="20" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Black"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="55"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="20" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="60"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="40"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Black"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="20"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="45" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="60"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="36"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Yellow"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="20"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="44" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Canvas</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;" ><span style=""> </span></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" ></span><span style="line-height: 115%;font-family:";font-size:10;" >Grid</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">So, let’s apply our effect.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Add a namespace reference to the shader class in the XAML code, something like this:<o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:red;" >xmlns</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >:</span><span style="line-height: 115%;font-family:";font-size:10;color:red;" >sh</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >="clr-namespace:Shazzam.Shaders</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" >"<o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Set the effect for the root grid:<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid.Effect</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >sh</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;" >PixelateShaderEffect</span><span style=";font-family:";font-size:10;" > <o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>Horizontalpixelcounts</span><span style="color:blue;">="200"<o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>Verticalpixelcounts</span><span style="color:blue;">="200"/><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid.Effect</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Now, we run the application and see what happens:<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOGa8519Y2mbufbMYw7BahgIj8oPMTOSyFmMm8vf67LnAJ_avCeFKdmAWCCC6z8x7sqGaeZcZdzAM8yVCNA6_O6MBk8VEfXSklDScYBbLtUDmAH5TXQEuPyxbOPxkGHkQAC3mxun3BSIP/s1600-h/image015.png"><img style="cursor: pointer; width: 400px; height: 327px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOGa8519Y2mbufbMYw7BahgIj8oPMTOSyFmMm8vf67LnAJ_avCeFKdmAWCCC6z8x7sqGaeZcZdzAM8yVCNA6_O6MBk8VEfXSklDScYBbLtUDmAH5TXQEuPyxbOPxkGHkQAC3mxun3BSIP/s400/image015.png" alt="" id="BLOGGER_PHOTO_ID_5362360250424889346" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Nice! The effect was applied. That’s it. Simple, right?<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <h1><span style="" lang="EN-US">Things to play with<o:p></o:p></span></h1> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <h2><span style="" lang="EN-US">Testing effects in real time in the application interface<o:p></o:p></span></h2> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Just for fun, I continued working on my shader effects demo application. I added two sliders that can control the effect, just like it was in Shazzam.<span style=""> </span>Only, this works on a real application interface, so it’s more interesting.<o:p></o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwflAc-cdw9DyHHhwI-bmk9BIHKRMxSnjpsQMofP6aYObtYKKPe97-vGSHPI5vT6XMGl2DdGjMn_z64a_ZzcS8-ZrUiSKuWOceGxYqEos6-J0idEJX57okYgtMairMn5Q3hsIgX1bBdGBP/s1600-h/image017.png"><img style="cursor: pointer; width: 400px; height: 327px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwflAc-cdw9DyHHhwI-bmk9BIHKRMxSnjpsQMofP6aYObtYKKPe97-vGSHPI5vT6XMGl2DdGjMn_z64a_ZzcS8-ZrUiSKuWOceGxYqEos6-J0idEJX57okYgtMairMn5Q3hsIgX1bBdGBP/s400/image017.png" alt="" id="BLOGGER_PHOTO_ID_5362360432303847122" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid.ColumnDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >ColumnDefinition</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="40" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >ColumnDefinition</span><span style=";font-family:";font-size:10;color:blue;" > /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid.ColumnDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid.RowDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >RowDefinition</span><span style=";font-family:";font-size:10;color:blue;" > /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >RowDefinition</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="40"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid.RowDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid</span><span style=";font-family:";font-size:10;color:red;" > Grid.Column</span><span style=";font-family:";font-size:10;color:blue;" >="1"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid.ColumnDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >ColumnDefinition</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="100" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >ColumnDefinition</span><span style=";font-family:";font-size:10;color:blue;" > /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid.ColumnDefinitions</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:green;" ><!-- Some Buttons --><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >StackPanel</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest1"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Button One"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest2"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Hack NASA"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest3"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Go to the moon"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Button</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="btnTest4"</span><span style=";font-family:";font-size:10;color:red;" > Content</span><span style=";font-family:";font-size:10;color:blue;" >="Crash app"</span><span style=";font-family:";font-size:10;color:red;" > Margin</span><span style=";font-family:";font-size:10;color:blue;" >="2"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >StackPanel</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >TextBlock</span><span style=";font-family:";font-size:10;color:red;" > Grid.Column</span><span style=";font-family:";font-size:10;color:blue;" >="1"</span><span style=";font-family:";font-size:10;color:red;" > Text</span><span style=";font-family:";font-size:10;color:blue;" >="Some programming languages are so good that a program written with them can go through an infinite loop for about ten minutes on really fast computers."</span><span style=";font-family:";font-size:10;" > <o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>TextWrapping</span><span style="color:blue;">="Wrap"</span><span style="color:red;"> Margin</span><span style="color:blue;">="10"</span><span style="color:red;"> Foreground</span><span style="color:blue;">="Blue"/><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Canvas</span><span style=";font-family:";font-size:10;color:red;" > Grid.Column</span><span style=";font-family:";font-size:10;color:blue;" >="1"</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="100"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="100"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="100"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="100"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Yellow"</span><span style=";font-family:";font-size:10;color:red;" > Stroke</span><span style=";font-family:";font-size:10;color:blue;" >="Black"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Black"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="20"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="20" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="25"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Black"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="55"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="20" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="60"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="40"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Black"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="20"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="45" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Ellipse</span><span style=";font-family:";font-size:10;color:red;" > Width</span><span style=";font-family:";font-size:10;color:blue;" >="60"</span><span style=";font-family:";font-size:10;color:red;" > Height</span><span style=";font-family:";font-size:10;color:blue;" >="36"</span><span style=";font-family:";font-size:10;color:red;" > Fill</span><span style=";font-family:";font-size:10;color:blue;" >="Yellow"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Left</span><span style=";font-family:";font-size:10;color:blue;" >="20"</span><span style=";font-family:";font-size:10;color:red;" > Canvas.Top</span><span style=";font-family:";font-size:10;color:blue;" >="44" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Canvas</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Grid.Effect</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >sh</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;" >PixelateShaderEffect</span><span style=";font-family:";font-size:10;" > <o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>Horizontalpixelcounts</span><span style="color:blue;">="{</span><span style="color: rgb(163, 21, 21);">Binding</span><span style="color:red;"> ElementName</span><span style="color:blue;">=slHori,</span><span style="color:red;"> Path</span><span style="color:blue;">=Value}"<o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>Verticalpixelcounts</span><span style="color:blue;">="{</span><span style="color: rgb(163, 21, 21);">Binding</span><span style="color:red;"> ElementName</span><span style="color:blue;">=slVert,</span><span style="color:red;"> Path</span><span style="color:blue;">=Value}"/><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid.Effect</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Grid</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Slider</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="slHori"</span><span style=";font-family:";font-size:10;color:red;" > Minimum</span><span style=";font-family:";font-size:10;color:blue;" >="10"</span><span style=";font-family:";font-size:10;color:red;" > Maximum</span><span style=";font-family:";font-size:10;color:blue;" >="500"</span><span style=";font-family:";font-size:10;color:red;" > Value</span><span style=";font-family:";font-size:10;color:blue;" >="500"</span><span style=";font-family:";font-size:10;color:red;" > Grid.Row</span><span style=";font-family:";font-size:10;color:blue;" >="1"</span><span style=";font-family:";font-size:10;color:red;" > Grid.Column</span><span style=";font-family:";font-size:10;color:blue;" >="1"/><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Slider</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Name</span><span style=";font-family:";font-size:10;color:blue;" >="slVert"</span><span style=";font-family:";font-size:10;color:red;" > Minimum</span><span style=";font-family:";font-size:10;color:blue;" >="10"</span><span style=";font-family:";font-size:10;color:red;" > Maximum</span><span style=";font-family:";font-size:10;color:blue;" >="500"</span><span style=";font-family:";font-size:10;color:red;" > Value</span><span style=";font-family:";font-size:10;color:blue;" >="500"</span><span style=";font-family:";font-size:10;color:red;" > Orientation</span><span style=";font-family:";font-size:10;color:blue;" >="Vertical" /><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;" ><span style=""> </span></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" ></span><span style="line-height: 115%;font-family:";font-size:10;" >Grid</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p> </o:p></span></p> <h2><span style="" lang="EN-US">Animating the shader effects<o:p></o:p></span></h2> <p class="MsoNormal"><span style="" lang="EN-US">Animating the effects is very simple. Just like any other animation in WPF.<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Window.Resources</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >Storyboard</span><span style=";font-family:";font-size:10;color:red;" > x</span><span style=";font-family:";font-size:10;color:blue;" >:</span><span style=";font-family:";font-size:10;color:red;" >Key</span><span style=";font-family:";font-size:10;color:blue;" >="effectStory" ><o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >DoubleAnimation</span><span style=";font-family:";font-size:10;color:red;" > Storyboard.TargetName</span><span style=";font-family:";font-size:10;color:blue;" >="shaderEffect"<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>Storyboard.TargetProperty</span><span style="color:blue;">="Horizontalpixelcounts"<o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>From</span><span style="color:blue;">="10"</span><span style="color:red;"> To</span><span style="color:blue;">="500"</span><span style="color:red;"> Duration</span><span style="color:blue;">="0:0:10"</span> <span style="color:red;"><span style=""> </span>AutoReverse</span><span style="color:blue;">="True"</span><span style="color:red;"> RepeatBehavior</span><span style="color:blue;">="Forever"/><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ><</span><span style=";font-family:";font-size:10;" >DoubleAnimation</span><span style=";font-family:";font-size:10;color:red;" > Storyboard.TargetName</span><span style=";font-family:";font-size:10;color:blue;" >="shaderEffect"<o:p></o:p></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>Storyboard.TargetProperty</span><span style="color:blue;">="Verticalpixelcounts"<o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span><span style="color:red;"><span style=""> </span>From</span><span style="color:blue;">="10"</span><span style="color:red;"> To</span><span style="color:blue;">="500"</span><span style="color:red;"> Duration</span><span style="color:blue;">="0:0:10"</span><span style="color:red;"> AutoReverse</span><span style="color:blue;">="True"</span><span style="color:red;"> RepeatBehavior</span><span style="color:blue;">="Forever"/><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal;"><span style=";font-family:";font-size:10;" ><span style=""> </span></span><span style=";font-family:";font-size:10;color:blue;" ></span><span style=";font-family:";font-size:10;" >Storyboard</span><span style=";font-family:";font-size:10;color:blue;" >><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;" ><span style=""> </span></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" ></span><span style="line-height: 115%;font-family:";font-size:10;" >Window.Resources</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p></o:p></span></p> <h2><span style="" lang="EN-US">Other shader effects<o:p></o:p></span></h2> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Motion Blur:<o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" ><</span><span style="line-height: 115%;font-family:";font-size:10;" >sh</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >:</span><span style="line-height: 115%;font-family:";font-size:10;" >DirectionalBlurShaderEffect</span><span style="line-height: 115%;font-family:";font-size:10;color:red;" > Bluramount</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >="0.005"</span><span style="line-height: 115%;font-family:";font-size:10;color:red;" > Angle</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >="45" /></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p> </o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj710gC3Z4RSZmxHhfrSEPT0fP0bfhKuMhuVG0wu1DGW8-C8CU5kHtu-oZQnPzjuAu0eMWFjAu-Qjd_h2qs7jEsAqzyfsPvWAz4StonMicq8Tkr8OhmoPWVst3ZcAwL15A4u4U5yC7OMrj4/s1600-h/image019.png"><img style="cursor: pointer; width: 400px; height: 327px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj710gC3Z4RSZmxHhfrSEPT0fP0bfhKuMhuVG0wu1DGW8-C8CU5kHtu-oZQnPzjuAu0eMWFjAu-Qjd_h2qs7jEsAqzyfsPvWAz4StonMicq8Tkr8OhmoPWVst3ZcAwL15A4u4U5yC7OMrj4/s400/image019.png" alt="" id="BLOGGER_PHOTO_ID_5362360481798300610" border="0" /></a><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Embossed<o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" ><</span><span style="line-height: 115%;font-family:";font-size:10;" >sh</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >:</span><span style="line-height: 115%;font-family:";font-size:10;" >EmbossedShaderEffect</span><span style="line-height: 115%;font-family:";font-size:10;color:red;" > Width</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >="0.002"</span><span style="line-height: 115%;font-family:";font-size:10;color:red;" > Amount</span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" >="0.5" /></span><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p></o:p></span></p> <p class="MsoNormal"><span style="line-height: 115%;font-family:";font-size:10;color:blue;" lang="EN-US" ><o:p> </o:p></span></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8pq1s4jpId3zBSbSqGAc6H7goPIlnt7tPDdxsTfY7TX5wPpxEQ2ZrUxdJnAJor77PIhPuDB48H29xI77tSu9oRp0CXAV5JUIAcnzV7t0SYrCfC1rQQNNbBfignfSgh88i3HFHXQxtGoa/s1600-h/image021.png"><img style="cursor: pointer; width: 400px; height: 327px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8pq1s4jpId3zBSbSqGAc6H7goPIlnt7tPDdxsTfY7TX5wPpxEQ2ZrUxdJnAJor77PIhPuDB48H29xI77tSu9oRp0CXAV5JUIAcnzV7t0SYrCfC1rQQNNbBfignfSgh88i3HFHXQxtGoa/s400/image021.png" alt="" id="BLOGGER_PHOTO_ID_5362360533938945570" border="0" /></a></p><p class="MsoNormal"><br /></p><p class="MsoNormal"><span style="color: rgb(51, 102, 255);font-size:180%;" >Download Sample</span><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US"><o:p> </o:p></span><span style="" lang="EN-US">You can download the sample application here: </span><a href="http://www.filefactory.com/file/ahf20eg/n/PixelShadersDemo_src_zip">Download Sample</a></p><style>v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <!--[endif]--><a:clrmap a="http://schemas.openxmlformats.org/drawingml/2006/main" bg1="lt1" tx1="dk1" bg2="lt2" tx2="dk2" accent1="accent1" accent2="accent2" accent3="accent3" accent4="accent4" accent5="accent5" accent6="accent6" hlink="hlink" folhlink="folHlink"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves>false</w:TrackMoves> <w:trackformatting/> <w:hyphenationzone>21</w:HyphenationZone> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>BG</w:LidThemeOther> <w:lidthemeasian>X-NONE</w:LidThemeAsian> <w:lidthemecomplexscript>X-NONE</w:LidThemeComplexScript> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> <w:dontgrowautofit/> <w:splitpgbreakandparamark/> <w:dontvertaligncellwithsp/> <w:dontbreakconstrainedforcedtables/> <w:dontvertalignintxbx/> <w:word11kerningpairs/> <w:cachedcolbalance/> </w:Compatibility> <w:browserlevel>MicrosoftInternetExplorer4</w:BrowserLevel> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:latentstyles deflockedstate="false" defunhidewhenused="true" defsemihidden="true" defqformat="false" defpriority="99" latentstylecount="267"> <w:lsdexception locked="false" priority="0" semihidden="false" unhidewhenused="false" qformat="true" name="Normal"> <w:lsdexception locked="false" priority="9" semihidden="false" unhidewhenused="false" qformat="true" name="heading 1"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 2"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 3"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 4"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 5"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 6"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 7"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 8"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 9"> <w:lsdexception locked="false" priority="39" name="toc 1"> <w:lsdexception locked="false" priority="39" name="toc 2"> <w:lsdexception locked="false" priority="39" name="toc 3"> <w:lsdexception locked="false" priority="39" name="toc 4"> <w:lsdexception locked="false" priority="39" name="toc 5"> <w:lsdexception locked="false" priority="39" name="toc 6"> <w:lsdexception locked="false" priority="39" name="toc 7"> <w:lsdexception locked="false" priority="39" name="toc 8"> <w:lsdexception locked="false" priority="39" name="toc 9"> <w:lsdexception locked="false" priority="35" qformat="true" name="caption"> <w:lsdexception locked="false" priority="10" semihidden="false" unhidewhenused="false" qformat="true" name="Title"> <w:lsdexception locked="false" priority="1" name="Default Paragraph Font"> <w:lsdexception locked="false" priority="11" semihidden="false" unhidewhenused="false" qformat="true" name="Subtitle"> <w:lsdexception locked="false" priority="22" semihidden="false" unhidewhenused="false" qformat="true" name="Strong"> <w:lsdexception locked="false" priority="20" semihidden="false" unhidewhenused="false" qformat="true" name="Emphasis"> <w:lsdexception locked="false" priority="59" semihidden="false" unhidewhenused="false" name="Table Grid"> <w:lsdexception locked="false" unhidewhenused="false" name="Placeholder Text"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="No Spacing"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 1"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 1"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 1"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 1"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 1"> <w:lsdexception locked="false" unhidewhenused="false" name="Revision"> <w:lsdexception locked="false" priority="34" semihidden="false" unhidewhenused="false" qformat="true" name="List Paragraph"> <w:lsdexception locked="false" priority="29" semihidden="false" unhidewhenused="false" qformat="true" name="Quote"> <w:lsdexception locked="false" priority="30" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Quote"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 1"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 1"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 1"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 1"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 1"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 1"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 1"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 2"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 2"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 2"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 2"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 2"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 2"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 2"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 2"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 2"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 2"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 2"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 3"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 3"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 3"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 3"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 3"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 3"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 3"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 3"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 3"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 3"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 3"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 3"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 3"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 4"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 4"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 4"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 4"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 4"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 4"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 4"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 4"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 4"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 4"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 4"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 4"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 4"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 4"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 5"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 5"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 5"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 5"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 5"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 5"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 5"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 5"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 5"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 5"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 5"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 5"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 5"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 5"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 6"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 6"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 6"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 6"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 6"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 6"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 6"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 6"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 6"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 6"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 6"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 6"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 6"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 6"> <w:lsdexception locked="false" priority="19" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Emphasis"> <w:lsdexception locked="false" priority="21" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Emphasis"> <w:lsdexception locked="false" priority="31" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Reference"> <w:lsdexception locked="false" priority="32" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Reference"> <w:lsdexception locked="false" priority="33" semihidden="false" unhidewhenused="false" qformat="true" name="Book Title"> <w:lsdexception locked="false" priority="37" name="Bibliography"> <w:lsdexception locked="false" priority="39" qformat="true" name="TOC Heading"> </w:LatentStyles> </xml><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Cambria; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:204; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1073741899 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:204; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:Consolas; panose-1:2 11 6 9 2 2 4 3 2 4; mso-font-charset:204; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:-1610611985 1073750091 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} h1 {mso-style-priority:9; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Heading 1 Char"; mso-style-next:Normal; margin-top:24.0pt; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; margin-bottom:.0001pt; line-height:115%; mso-pagination:widow-orphan lines-together; page-break-after:avoid; mso-outline-level:1; font-size:14.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#365F91; mso-themecolor:accent1; mso-themeshade:191; mso-font-kerning:0pt; mso-fareast-language:EN-US;} h2 {mso-style-noshow:yes; mso-style-priority:9; mso-style-qformat:yes; mso-style-link:"Heading 2 Char"; mso-style-next:Normal; margin-top:10.0pt; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; margin-bottom:.0001pt; line-height:115%; mso-pagination:widow-orphan lines-together; page-break-after:avoid; mso-outline-level:2; font-size:13.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#4F81BD; mso-themecolor:accent1; mso-fareast-language:EN-US;} p.MsoTitle, li.MsoTitle, div.MsoTitle {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; margin-top:0cm; margin-right:0cm; margin-bottom:15.0pt; margin-left:0cm; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoTitleCxSpFirst, li.MsoTitleCxSpFirst, div.MsoTitleCxSpFirst {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; mso-style-type:export-only; margin:0cm; margin-bottom:.0001pt; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoTitleCxSpMiddle, li.MsoTitleCxSpMiddle, div.MsoTitleCxSpMiddle {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; mso-style-type:export-only; margin:0cm; margin-bottom:.0001pt; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoTitleCxSpLast, li.MsoTitleCxSpLast, div.MsoTitleCxSpLast {mso-style-priority:10; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Title Char"; mso-style-next:Normal; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:15.0pt; margin-left:0cm; mso-add-space:auto; mso-pagination:widow-orphan; border:none; mso-border-bottom-alt:solid #4F81BD 1.0pt; mso-border-bottom-themecolor:accent1; padding:0cm; mso-padding-alt:0cm 0cm 4.0pt 0cm; font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt; mso-fareast-language:EN-US;} p.MsoSubtitle, li.MsoSubtitle, div.MsoSubtitle {mso-style-priority:11; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Subtitle Char"; mso-style-next:Normal; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#4F81BD; mso-themecolor:accent1; letter-spacing:.75pt; mso-fareast-language:EN-US; font-style:italic;} a:link, span.MsoHyperlink {mso-style-noshow:yes; mso-style-priority:99; color:blue; mso-themecolor:hyperlink; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} span.Heading1Char {mso-style-name:"Heading 1 Char"; mso-style-priority:9; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 1"; mso-ansi-font-size:14.0pt; mso-bidi-font-size:14.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#365F91; mso-themecolor:accent1; mso-themeshade:191; font-weight:bold;} span.Heading2Char {mso-style-name:"Heading 2 Char"; mso-style-noshow:yes; mso-style-priority:9; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 2"; mso-ansi-font-size:13.0pt; mso-bidi-font-size:13.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#4F81BD; mso-themecolor:accent1; font-weight:bold;} span.TitleChar {mso-style-name:"Title Char"; mso-style-priority:10; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:Title; mso-ansi-font-size:26.0pt; mso-bidi-font-size:26.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#17365D; mso-themecolor:text2; mso-themeshade:191; letter-spacing:.25pt; mso-font-kerning:14.0pt;} span.SubtitleChar {mso-style-name:"Subtitle Char"; mso-style-priority:11; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:Subtitle; mso-ansi-font-size:12.0pt; mso-bidi-font-size:12.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-ascii-theme-font:major-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:major-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:major-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; color:#4F81BD; mso-themecolor:accent1; letter-spacing:.75pt; font-style:italic;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 70.85pt 70.85pt 70.85pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:544871524; mso-list-type:hybrid; mso-list-template-ids:-841997770 67239949 67239939 67239941 67239937 67239939 67239941 67239937 67239939 67239941;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt; font-family:Wingdings;} @list l0:level2 {mso-level-number-format:bullet; mso-level-text:o; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt; font-family:"Courier New";} @list l0:level3 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt; font-family:Wingdings;} @list l0:level4 {mso-level-tab-stop:144.0pt; mso-level-number-position:left; text-indent:-18.0pt;} @list l0:level5 {mso-level-tab-stop:180.0pt; mso-level-number-position:left; text-indent:-18.0pt;} @list l0:level6 {mso-level-tab-stop:216.0pt; mso-level-number-position:left; text-indent:-18.0pt;} @list l0:level7 {mso-level-tab-stop:252.0pt; mso-level-number-position:left; text-indent:-18.0pt;} @list l0:level8 {mso-level-tab-stop:288.0pt; mso-level-number-position:left; text-indent:-18.0pt;} @list l0:level9 {mso-level-tab-stop:324.0pt; mso-level-number-position:left; text-indent:-18.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style><br /><br /></a:clrmap>Svetoslav Savovhttp://www.blogger.com/profile/02209517988858803309noreply@blogger.com0