tag:blogger.com,1999:blog-69387912024-03-05T06:57:37.189+00:00El color dels somnisPrimarily thoughts on Silverlight and other Microsoft UI Technologies, plus personal rantsJoan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.comBlogger52125tag:blogger.com,1999:blog-6938791.post-38331949614922346262013-08-14T08:50:00.001+01:002013-08-14T08:50:13.411+01:00Multi-Platform Mobile ChordFactory?<p>I have the hardware, but do I have the time to take Windows Phone ChordFactory and port it to iOS and Android?</p> <p>I thought I might look at <a href="http://xamarin.com/">Xamarin Studio</a> and see how easy it is…...</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiiTTOcDMOonhq0s-gG4MmZcxZChqYjSwkeQ1W8uyCh3TbEgV7xlko6V_uYJDWzmA0uKNlBaFbAn8Ql1FqYMnO1MjF7vIEB4_wdTqEFE10Bub0ayzE13VAEeK9C5lLve5LrMvD/s1600-h/WIN_20130814_084433%25255B6%25255D.jpg"><img title="WIN_20130814_084433" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="WIN_20130814_084433" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7wE9Wlklh80AeJ3j37wuwQJgmj7EALDW7EeUh_loQO1E0Jn9AopZWr4TZTKVyvLQSrAUBbooy2ADOlYpWc0bK57NgephuGKnfY3oS6Y8tIweMb-9bdCeiZGQgfHwA7PSnYKeY/?imgmax=800" width="463" height="356" /></a></p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-30892310448574766382013-03-27T12:23:00.001+00:002013-03-27T12:23:11.237+00:00Windows 8 ChordFactory - latest screenshots<span />Getting better and adding features, like notation and settings persistence.<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUYfBxvlk-BzzT5Ko8koy_US00r2vEiK9LZdnSE-OUMzaK4Zu_5XuB5u9bpaqmCIdhT4R4rO4pfMlzdoHgtXlTIDFD0FgJuldlEONmtMLT80hIlIv0USBNYhRMPhMUkCLv5gn/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUYfBxvlk-BzzT5Ko8koy_US00r2vEiK9LZdnSE-OUMzaK4Zu_5XuB5u9bpaqmCIdhT4R4rO4pfMlzdoHgtXlTIDFD0FgJuldlEONmtMLT80hIlIv0USBNYhRMPhMUkCLv5gn/" /></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWNoLIyaDIU8InJd-d-TXNkgYErxPQ7rGgC6H02UlmlrnzOZya8ew_gZwR2IjRIzw69IHW33ytf8eYjqZ8OD1Ty6yZo1XP_6JkkcWGM_EZX3rM6N1KzDBtN_LLQf9oUZDY7MF/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWNoLIyaDIU8InJd-d-TXNkgYErxPQ7rGgC6H02UlmlrnzOZya8ew_gZwR2IjRIzw69IHW33ytf8eYjqZ8OD1Ty6yZo1XP_6JkkcWGM_EZX3rM6N1KzDBtN_LLQf9oUZDY7MF/" /></a></span>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-11656174935020373042012-12-12T10:59:00.001+00:002012-12-12T10:59:11.825+00:00ChordFactory on Windows 8<span />Coming soon - once I get the hang of async data loading and all the visual state support required<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwGfdnDZEgPXRk6iAiyOsvZULorxFqSnmCgX3FVcXs55YPCBXfb_FMqqeMR7WEyElGnix_VdLNgKZONpr2oalhnnBksPlwXBOAx7D9Mtvc5waS8xvhBFsqDfbU3GO0DTm9X5Z/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwGfdnDZEgPXRk6iAiyOsvZULorxFqSnmCgX3FVcXs55YPCBXfb_FMqqeMR7WEyElGnix_VdLNgKZONpr2oalhnnBksPlwXBOAx7D9Mtvc5waS8xvhBFsqDfbU3GO0DTm9X5Z/" /></a><br />
Not exactly the height of Metro design excellence either.<br />
</span>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-67421824288870899622012-11-26T11:34:00.001+00:002014-03-14T14:02:05.812+00:00LINQ Outer Joins<p>I found out today how to do outer joins in LINQ and thought I’d save it as an Aide Memoire post.</p> <p>Given a typical Foreign-Key relationship:</p> <p><font color="#0000ff">class</font> Preference <br />{ <br />  <font color="#0000ff">  public int</font> Id { <font color="#0000ff">get</font>; <font color="#0000ff">set</font>; } <br />    <font color="#0000ff">public string</font> Description { <font color="#0000ff">get</font>; <font color="#0000ff">set</font>; } <br />}</p> <p><font color="#0000ff">class</font> Person <br />{ <br />    <font color="#0000ff">public int</font> Id { <font color="#0000ff">get</font>; <font color="#0000ff">set</font>; } <br />    <font color="#0000ff">public string</font> Forename { <font color="#0000ff">get</font>; <font color="#0000ff">set</font>; } <br />    <font color="#0000ff">public string</font> Surname { <font color="#0000ff">get</font>; <font color="#0000ff">set</font>; } <br />    <font color="#0000ff">public int</font>? PreferenceId { <font color="#0000ff">get</font>; <font color="#0000ff">set</font>; } <br />}</p> <p> </p> <p>And this sample data:</p> <p>    <font color="#0000ff">var</font> peopleList = <font color="#0000ff">new</font> List<Person>(); <br />    peopleList.Add(<font color="#0000ff">new</font> Person {Id = <font color="#9b00d3">77</font>, Forename = <font color="#ff0000">"Fred"</font>, Surname = <font color="#ff0000">"Flintstone"</font>, PreferenceId = <font color="#9b00d3">2</font> }); <br />    peopleList.Add(<font color="#0000ff">new</font> Person {Id = <font color="#9b00d3">154</font>, Forename =<font color="#ff0000"> "Barney"</font>, Surname = "Rubble", PreferenceId = <font color="#9b00d3">1</font> }); <br />    peopleList.Add(<font color="#0000ff">new</font> Person {Id = <font color="#9b00d3">308</font>, Forename = <font color="#ff0000">"Wilma"</font>, Surname = <font color="#ff0000">"Flintstone" </font>}); <br />    peopleList.Add(<font color="#0000ff">new</font> Person {Id = <font color="#9b00d3">462</font>, Forename = <font color="#ff0000">"Betty"</font>, Surname = <font color="#ff0000">"Rubble"</font>, PreferenceId = <font color="#9b00d3">1</font> }); <br />    peopleList.Add(<font color="#0000ff">new</font> Person {Id = <font color="#9b00d3">616</font>, Forename = <font color="#ff0000">"Bam Bam"</font>, Surname = <font color="#ff0000">"Rubble"</font>, PreferenceId = <font color="#9b00d3">4</font> }); <br />    peopleList.Add(<font color="#0000ff">new</font> Person {Id = <font color="#9b00d3">770</font>, Forename = <font color="#ff0000">"Pebbles"</font>, Surname = <font color="#ff0000">"Flintstone"</font> });</p> <p>    <font color="#0000ff">var</font> preferenceList = <font color="#0000ff">new</font> List<Preference>(); <br />    preferenceList.Add(<font color="#0000ff">new</font> Preference {Id =<font color="#9b00d3"> 1</font>, Description = <font color="#ff0000">"Coffee"</font>}); <br />    preferenceList.Add(<font color="#0000ff">new</font> Preference {Id = <font color="#9b00d3">2</font>, Description = <font color="#ff0000">"Tea"</font>}); <br />    preferenceList.Add(<font color="#0000ff">new</font> Preference {Id = <font color="#9b00d3">3</font>, Description = <font color="#ff0000">"Hot Chocolate"</font>}); <br />    preferenceList.Add(<font color="#0000ff">new</font> Preference {Id = <font color="#9b00d3">4</font>, Description = <font color="#ff0000">"Fruit Juice"</font>});</p> <p> </p> <p>The obvious LINQ query:</p> <p>    <font color="#0000ff">var</font> peopleWithPreferences = <font color="#0000ff">from</font> p <font color="#0000ff">in</font> peopleList <br />                            <font color="#0000ff">join</font> pr <font color="#0000ff">in</font> preferenceList <br />                            <font color="#0000ff">on</font> p.PreferenceId <font color="#0000ff">equals</font> pr.Id <br />                            <font color="#0000ff">select new</font>  {p.Forename, p.Surname, pr.Description};</p> <p> </p> <p>Produces results that contain only the inner joined pairs of people and their beverage preference:</p> <p><font face="Courier New"><strong>Forename  Surname     Description</strong> <br />Fred      Flintstone  Tea <br />Barney    Rubble      Coffee <br />Betty     Rubble      Coffee <br />Bam Bam   Rubble      Fruit Juice <br /></font>  <br /></p> <p>In order to retrieve the full list of people with their beverage preference if they have one, the LINQ query becomes:</p> <p>    <font color="#0000ff">var</font> peopleAnyPreferences = <font color="#0000ff">from</font> p <font color="#0000ff">in</font> peopleList <br />                            <font color="#0000ff">join</font> pr <font color="#0000ff">in</font> preferenceList <br />                            <font color="#0000ff">on</font> p.PreferenceId <font color="#0000ff">equals</font> pr.Id <font color="#0000ff">into</font> joinedPreferences <br />                            <font color="#0000ff">from</font> j <font color="#0000ff">in</font> joinedPreferences.DefaultIfEmpty() <br />                            <font color="#0000ff">select new</font>  {p.Forename, p.Surname, pref = j != <font color="#0000ff">null</font> ? j.Description : <font color="#0000ff">string</font>.Empty};</p> <p> </p> <p><font face="Courier New"><strong>Forename  Surname     Description</strong> <br />Fred      Flintstone  Tea <br />Barney    Rubble      Coffee <br />Wilma     Flintstone <br />Betty     Rubble      Coffee <br />Bam Bam   Rubble      Fruit Juice <br />Pebbles   Flintstone <br /></font></p> <p> </p> <p>The differences being the intermediate results <strong><em>joinedPreferences</em></strong> and its use with the <strong><em>DefaultIfEmpty</em></strong> extension, with a null check for the nullable column.</p> <strong> <p> <hr /></p> </strong> <p><font size="3"><strong></strong></font></p> <p><font size="3"><strong>UPDATE: </strong>From a technique shown in </font><a href="http://www.thinqlinq.com/Post.aspx/Title/Left-Outer-Joins-in-LINQ-with-Entity-Framework"><font size="3"><strong>this post</strong></font></a> by Jim Wooley<font size="3"><strong>:</strong></font></p> <p>A way of avoiding the need for intermediate results, using old-fashioned <strong>T-SQL</strong> style joins via a <strong>LINQ</strong> <font color="#0000ff">Where</font> extension:</p> <p><font color="#0000ff">var</font> betterPeopleAnyPreferences = <font color="#0000ff">from</font> p <font color="#0000ff">in</font> peopleList  <br /><font color="#0000ff"><font color="#333333">                    </font>from</font> pr <font color="#0000ff">in</font> preferenceList <br />                    .<font color="#0000ff">Where</font>(x => p.PreferenceId == x.Id) <br />                    .DefaultIfEmpty() <br />                    <font color="#0000ff">select new</font>  {p.Forename, p.Surname, pref = pr != <font color="#0000ff">null</font> ? pr.Description : <font color="#0000ff">string</font>.Empty};</p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-22578069225384319902012-03-23T15:58:00.001+00:002012-04-02T11:38:54.683+01:00System.Collections.Generic.List<T> ForEach method is missing in Windows 8 Runtime<p>It seems that the handy ForEach method has been removed from the List of T class in the WinRT. According to Wes Haggard of the .NET Framework Bas Class Library (BCL) Team:</p> <p><em>“List<T>.ForEach has been removed in Metro style apps. While the method seems simple it has a number of potential problems when the list gets mutated by the method passed to ForEach. Instead it is recommended that you simply use a foreach loop.”</em></p> <p>Which is a shame, as I use this method quite a bit to invoke method group calls to do one-time iterations over Lists, like this:</p> <pre class="code">keywordResults.ForEach(<span style="color: blue">this</span>.searchActivity.Keywords.Add);</pre><br /><br /><font face="Georgia">For situations like this, the mutation issue doesn’t arise and it would be safe to use the ForEach method if it existed. So I did an extension method implementation of the functionality by taking a look at the decompiled code of the method in earlier versions of the .NET Framework:</font><br /><br /><pre class="code"><span style="color: blue">public void </span>ForEach(<span style="color: #2b91af">Action</span><T> action)<br />{<br /> <span style="color: blue">if </span>(action == <span style="color: blue">null</span>)<br /> <span style="color: #2b91af">ThrowHelper</span>.ThrowArgumentNullException(<span style="color: #2b91af">ExceptionArgument</span>.match);<br /> <span style="color: blue">for </span>(<span style="color: blue">int </span>index = 0; index < <span style="color: blue">this</span>._size; ++index)<br /> action(<span style="color: blue">this</span>._items[index]);<br />}</pre><br /><br /><br /><font face="Georgia">Using this as a starting point it was fairly easy to come up with an extension method version:</font><br /><br /><pre class="code"><span style="color: blue">public static void </span>ForEach<T>(<span style="color: blue">this </span><span style="color: #2b91af">IEnumerable</span><T> list, <span style="color: #2b91af">Action</span><T> action)<br />{<br /> <span style="color: blue">if </span>(action == <span style="color: blue">null</span>)<br /> {<br /> <span style="color: blue">throw new </span><span style="color: #2b91af">ArgumentNullException</span>(<span style="color: #a31515">"action"</span>);<br /> }<br /><br /> <span style="color: blue">foreach </span>(<span style="color: blue">var </span>t <span style="color: blue">in </span>list)<br /> {<br /> action(t);<br /> }<br />}</pre><br /><br /><br /><font size="2" face="Georgia">Now I can use the extension to give me the same ForEach functionality on IEnumerable objects such as List<T> as I had before.</font> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-52717073147699482322011-04-21T18:34:00.001+01:002011-04-21T18:34:41.394+01:00Five Minute Silverlight 5 Aides-Memoire #4 – Mouse Click Count<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:b1101028-989a-496c-9e30-3b7aeb75118e" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">Rainbow Rectangle</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Rectangle</span><span style="color:#ff0000"> Width</span><span style="color:#0000ff">="154"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Height</span><span style="color:#0000ff">="77"</span></li> <li> <span style="color:#ff0000"> MouseLeftButtonDown</span><span style="color:#0000ff">="RectangleMouseLeftButtonDown"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Rectangle.Fill</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">LinearGradientBrush</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="GradientFill"</span><span style="color:#ff0000"> StartPoint</span><span style="color:#0000ff">="0,0"</span><span style="color:#ff0000"> EndPoint</span><span style="color:#0000ff">="1,1"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="0"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Red" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="0.1667"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Orange" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="0.334"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Yellow" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="0.5001"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Green" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="0.6668"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Blue" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="0.8335"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Indigo" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">GradientStop</span><span style="color:#ff0000"> Offset</span><span style="color:#0000ff">="1"</span><span style="color:#ff0000"> Color</span><span style="color:#0000ff">="Violet" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">LinearGradientBrush</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Rectangle.Fill</span><span style="color:#0000ff">></span></li> <li><span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Rectangle</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"><span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="ClickCountTextBlock"</span></li> <li> <span style="color:#ff0000"> Foreground</span><span style="color:#0000ff">="White"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> HorizontalAlignment</span><span style="color:#0000ff">="Center"</span></li> <li> <span style="color:#ff0000"> VerticalAlignment</span><span style="color:#0000ff">="Center"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> FontSize</span><span style="color:#0000ff">="40"</span></li> <li> <span style="color:#ff0000"> Opacity</span><span style="color:#0000ff">="0.4"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Text</span><span style="color:#0000ff">="" /></span></li> </ol> </div> </div> </div> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:245085ea-4646-4ee3-8f86-1ccb74aec7dc" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">Click Count in MouseEventArgs</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> RectangleMouseLeftButtonDown(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">MouseButtonEventArgs</span> e)</li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#0000ff">this</span>.ClickCountTextBlock.Text = e.ClickCount.ToString();</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">var</span> topLeft = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Point</span>(0, 0);</li> <li> <span style="color:#0000ff">var</span> topRight = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Point</span>(1, 0);</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">var</span> bottomLeft = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Point</span>(0, 1);</li> <li> <span style="color:#0000ff">var</span> bottomRight = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Point</span>(1, 1);</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">switch</span> (e.ClickCount)</li> <li style="background: #f3f3f3"> {</li> <li> <span style="color:#0000ff">case</span> 2:</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">this</span>.GradientFill.StartPoint = topRight;</li> <li> <span style="color:#0000ff">this</span>.GradientFill.EndPoint = bottomLeft;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">break</span>;</li> <li> <span style="color:#0000ff">case</span> 3:</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">this</span>.GradientFill.StartPoint = bottomRight;</li> <li> <span style="color:#0000ff">this</span>.GradientFill.EndPoint = topLeft;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">break</span>;</li> <li> <span style="color:#0000ff">case</span> 4:</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">this</span>.GradientFill.StartPoint = bottomLeft;</li> <li> <span style="color:#0000ff">this</span>.GradientFill.EndPoint = topRight;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">break</span>;</li> <li> <span style="color:#0000ff">default</span>:</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">this</span>.GradientFill.StartPoint = topLeft;</li> <li> <span style="color:#0000ff">this</span>.GradientFill.EndPoint = bottomRight;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">break</span>;</li> <li> }</li> <li style="background: #f3f3f3">}</li> </ol> </div> </div> </div> </p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWv83ewkH9feFA9Ai4Yn9uoNoEFlpJOKdOuWR4cuCOJeHs7hzoOOfL63fKxZNbZj1TXo-w2anQbzuN02sPso1R0Dse7nBMcnLJzCBYAMw2WJiwL9OPOu9Ou4cQpoPhjCrx70h6/s1600-h/DoubleTripleClick%5B5%5D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="DoubleTripleClick" border="0" alt="DoubleTripleClick" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmT2M2V9Eg-ZUi2CJA7Uk2TlGRA5sHxGiClDdekZUMhF-uSzrLKvGfXLICIp51Z5s_OP1qSI58KTY4caSSF0mE5wbhZc2Q5k1mSiMDUjlEpv-2rINgAGdhUUKJFoUrUbJ0YKa/?imgmax=800" width="531" height="537" /></a></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:ed13fb44-5a64-4886-8690-410a47e617fd" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/.NET" rel="tag">.NET</a>,<a href="http://technorati.com/tags/Silverlight" rel="tag">Silverlight</a>,<a href="http://technorati.com/tags/Silverlight+5+Beta" rel="tag">Silverlight 5 Beta</a>,<a href="http://technorati.com/tags/C%23" rel="tag">C#</a>,<a href="http://technorati.com/tags/Double-Click" rel="tag">Double-Click</a>,<a href="http://technorati.com/tags/Triple-Click" rel="tag">Triple-Click</a>,<a href="http://technorati.com/tags/ClickCount" rel="tag">ClickCount</a></div> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-34838037984849419412011-04-21T17:34:00.001+01:002011-04-21T18:31:09.488+01:00Five Minute Silverlight 5 Aides-Memoire #3 – Out-of-Browser Native Windows<p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ce6693c7-fd95-4cfa-853b-8b28365b7b29" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">Native Window creation in code</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> ButtonClick(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">RoutedEventArgs</span> e)</li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#0000ff">if</span> (!<span style="color:#2b91af">Application</span>.Current.IsRunningOutOfBrowser)</li> <li style="background: #f3f3f3"> {</li> <li> <span style="color:#0000ff">return</span>;</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">var</span> newGrid = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Grid</span></li> <li> {</li> <li style="background: #f3f3f3"> Background = <span style="color:#0000ff">new</span> <span style="color:#2b91af">SolidColorBrush</span>(<span style="color:#2b91af">Colors</span>.White),</li> <li> HorizontalAlignment = <span style="color:#2b91af">HorizontalAlignment</span>.Stretch,</li> <li style="background: #f3f3f3"> VerticalAlignment = <span style="color:#2b91af">VerticalAlignment</span>.Stretch</li> <li> };</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">var</span> newTextBlock = <span style="color:#0000ff">new</span> <span style="color:#2b91af">TextBlock</span></li> <li style="background: #f3f3f3"> {</li> <li> HorizontalAlignment = <span style="color:#2b91af">HorizontalAlignment</span>.Center,</li> <li style="background: #f3f3f3"> VerticalAlignment = <span style="color:#2b91af">VerticalAlignment</span>.Center,</li> <li> Text = <span style="color:#a31515">"New TextBlock in a new Window..."</span></li> <li style="background: #f3f3f3"> };</li> <li> </li> <li style="background: #f3f3f3"> newGrid.Children.Add(newTextBlock);</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">new</span> <span style="color:#2b91af">Window</span> { Content = newGrid, Visibility = <span style="color:#2b91af">Visibility</span>.Visible, Width = 300, Height = 300 };</li> <li>}</li> </ol> </div> </div> </div> </p> <p><a href="http://lh3.ggpht.com/_E_ZM9Y7o2Ow/TbBceAzKiLI/AAAAAAAAAGY/wqFdesRlFGE/s1600-h/NativeWindows%5B6%5D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="NativeWindows" border="0" alt="NativeWindows" src="http://lh3.ggpht.com/_E_ZM9Y7o2Ow/TbBcgRURDSI/AAAAAAAAAGc/SvoDuW2uf3c/NativeWindows_thumb%5B4%5D.png?imgmax=800" width="821" height="632" /></a></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:d56fba12-99f6-4d20-a520-42206d6690b4" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/.NET" rel="tag">.NET</a>,<a href="http://technorati.com/tags/Silverlight" rel="tag">Silverlight</a>,<a href="http://technorati.com/tags/Silverlight+5+Beta" rel="tag">Silverlight 5 Beta</a>,<a href="http://technorati.com/tags/C%23" rel="tag">C#</a>,<a href="http://technorati.com/tags/Native+Window" rel="tag">Native Window</a></div> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-8624790699808130002011-04-20T10:13:00.001+01:002011-04-20T10:15:20.005+01:00Five Minute Silverlight 5 Aides-Memoire #2 – Implicit DataTemplates<p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:65c7ca12-a398-419d-83ea-c8a53cc54a5b" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">Data Classes</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"><summary></span></li> <li style="background: #f3f3f3"><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> The cartoon character.</span></li> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"></summary></span></li> <li style="background: #f3f3f3"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">CartoonCharacter</span></li> <li>{</li> <li style="background: #f3f3f3"> <span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"><summary></span></li> <li> <span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> Gets or sets the forename.</span></li> <li style="background: #f3f3f3"> <span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"></summary></span></li> <li> <span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"><value></span><span style="background:#ffff9a;color:#008000">The forename.</span><span style="background:#ffff9a;color:#808080"></value></span></li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#0000ff">string</span> Forename { <span style="color:#0000ff">get</span>; <span style="color:#0000ff">set</span>; }</li> <li>}</li> <li style="background: #f3f3f3"> </li> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"><summary></span></li> <li style="background: #f3f3f3"><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> The flintstone.</span></li> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"></summary></span></li> <li style="background: #f3f3f3"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">Flintstone</span> : <span style="color:#2b91af">CartoonCharacter</span> { }</li> <li> </li> <li style="background: #f3f3f3"><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"><summary></span></li> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> The griffin.</span></li> <li style="background: #f3f3f3"><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"></summary></span></li> <li><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">Griffin</span> : <span style="color:#2b91af">CartoonCharacter</span> { }</li> <li style="background: #f3f3f3"> </li> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"><summary></span></li> <li style="background: #f3f3f3"><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> The simpson.</span></li> <li><span style="background:#ffff9a;color:#808080">///</span><span style="background:#ffff9a;color:#008000"> </span><span style="background:#ffff9a;color:#808080"></summary></span></li> <li style="background: #f3f3f3"><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">Simpson</span> : <span style="color:#2b91af">CartoonCharacter</span> { }</li> </ol> </div> </div> </div> </p> <p> </p> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4f19e6d3-4976-4aac-8ed4-844595638c6b" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">XAML</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px; white-space: nowrap"> <li><span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Grid</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="LayoutRoot"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Background</span><span style="color:#0000ff">="White"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Grid.Resources</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Style</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Key</span><span style="color:#0000ff">="SimpsonStyle"</span></li> <li> <span style="color:#ff0000"> TargetType</span><span style="color:#0000ff">="TextBlock"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="FontFamily"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="Comic Sans MS" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="FontSize"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="16" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="Foreground"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="Blue" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="FontStyle"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="Italic" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Style</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">DataTemplate</span><span style="color:#ff0000"> DataType</span><span style="color:#0000ff">="this:Simpson"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Border</span><span style="color:#ff0000"> Background</span><span style="color:#0000ff">="Yellow"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> Orientation</span><span style="color:#0000ff">="Horizontal"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> Style</span><span style="color:#0000ff">="{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> SimpsonStyle}</span><span style="color:#0000ff">"</span></li> <li> <span style="color:#ff0000"> Text</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Forename}</span><span style="color:#0000ff">" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="5,0,0,0"</span></li> <li> <span style="color:#ff0000"> Style</span><span style="color:#0000ff">="{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> SimpsonStyle}</span><span style="color:#0000ff">"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Text</span><span style="color:#0000ff">="Simpson" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Border</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">DataTemplate</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">DataTemplate</span><span style="color:#ff0000"> DataType</span><span style="color:#0000ff">="this:Flintstone"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Border</span><span style="color:#ff0000"> Background</span><span style="color:#0000ff">="Orange"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Border.RenderTransform</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TransformGroup</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">SkewTransform</span><span style="color:#ff0000"> AngleX</span><span style="color:#0000ff">="-20" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">ScaleTransform</span><span style="color:#ff0000"> ScaleX</span><span style="color:#0000ff">="2"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> ScaleY</span><span style="color:#0000ff">="0.75" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TranslateTransform</span><span style="color:#ff0000"> X</span><span style="color:#0000ff">="30" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">TransformGroup</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Border.RenderTransform</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> Orientation</span><span style="color:#0000ff">="Horizontal"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> Text</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Forename}</span><span style="color:#0000ff">" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="5,0,0,0"</span></li> <li> <span style="color:#ff0000"> Text</span><span style="color:#0000ff">="Flintstone" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Border</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">DataTemplate</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">DataTemplate</span><span style="color:#ff0000"> DataType</span><span style="color:#0000ff">="this:Griffin"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Border</span><span style="color:#ff0000"> BorderBrush</span><span style="color:#0000ff">="DarkSlateBlue"</span><span style="color:#ff0000"> BorderThickness</span><span style="color:#0000ff">="2"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> Orientation</span><span style="color:#0000ff">="Horizontal"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> Text</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Forename}</span><span style="color:#0000ff">"</span><span style="color:#ff0000"> FontSize</span><span style="color:#0000ff">="18"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock.Effect</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">BlurEffect</span><span style="color:#0000ff"> /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">TextBlock.Effect</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">TextBlock</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="5,0,0,0"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> FontSize</span><span style="color:#0000ff">="22"</span><span style="color:#ff0000"> CharacterSpacing</span><span style="color:#0000ff">="5"</span></li> <li> <span style="color:#ff0000"> Text</span><span style="color:#0000ff">="Griffin"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock.Effect</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">DropShadowEffect</span><span style="color:#0000ff"> /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">TextBlock.Effect</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">TextBlock</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Border</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">DataTemplate</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Grid.Resources</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">ListBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="CartoonCharactersListBox"</span></li> <li> <span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="50,20"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> BorderBrush</span><span style="color:#0000ff">="Blue"</span></li> <li> <span style="color:#ff0000"> BorderThickness</span><span style="color:#0000ff">="2"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> ItemsSource</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding}</span><span style="color:#0000ff">" /></span></li> <li><span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">></span></li> </ol> </div> </div> </div> </p> <p> </p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWmL0MF5S1lKeXvGq1F1EdQWVAdQYCI5kylmrlTz9urveaJ1RtQZqJNeIgp0Has3OSiKNDXmxBLsEwrhsdOf1YSKicgDFAoM6RlKXSFHU5Yr7rkVFTIzgsw5c1CayZirI8zmG/s1600-h/SL5AM2%5B4%5D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="SL5AM2" border="0" alt="SL5AM2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnu1hA8gc2uemqHnBnS0MmM2IDHuVlrID0Y1lM6QK4WH5PATHhOnPmWZKZXlXgSAOmK77P8JviNJgGl28JIYu0GGYX_d9jEh1A_sqcKvP1CYncldRwy4Kdpm67MwKNyFBGY9jO/?imgmax=800" width="392" height="604" /></a></p> <p><em><strong>Yeugh!!</strong></em></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:6da8762b-83af-47bc-bc74-9d3b0faeb4a0" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/.NET" rel="tag">.NET</a>,<a href="http://technorati.com/tags/Silverlight" rel="tag">Silverlight</a>,<a href="http://technorati.com/tags/Silverlight+5+Beta" rel="tag">Silverlight 5 Beta</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a>,<a href="http://technorati.com/tags/Style" rel="tag">Style</a>,<a href="http://technorati.com/tags/Binding" rel="tag">Binding</a>,<a href="http://technorati.com/tags/DataTemplate" rel="tag">DataTemplate</a></div> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-31118759720566831522011-04-20T06:39:00.001+01:002011-04-20T06:39:22.340+01:00Five Minute Silverlight 5 Aides-Memoire #1 – Style Setter Binding<p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:140bc98c-8cfa-4deb-b7d9-a2fe4be52811" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">Code Snippet</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Grid</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="LayoutRoot"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Background</span><span style="color:#0000ff">="White"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Grid.RowDefinitions</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">RowDefinition</span><span style="color:#0000ff"> /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">RowDefinition</span><span style="color:#ff0000"> Height</span><span style="color:#0000ff">="Auto" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Grid.RowDefinitions</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Grid.Resources</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Style</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Key</span><span style="color:#0000ff">="VariableFontTextBlockStyle"</span></li> <li> <span style="color:#ff0000"> TargetType</span><span style="color:#0000ff">="TextBlock"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="Foreground"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="DarkOrange" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="FontWeight"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="Bold" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Setter</span><span style="color:#ff0000"> Property</span><span style="color:#0000ff">="FontSize"</span><span style="color:#ff0000"> Value</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> ElementName</span><span style="color:#0000ff">=FontSizeSlider,</span><span style="color:#ff0000"> Path</span><span style="color:#0000ff">=Value}" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Style</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Grid.Resources</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">TextBlock</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="SampleTextBlock"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Grid.Row</span><span style="color:#0000ff">="0"</span></li> <li> <span style="color:#ff0000"> HorizontalAlignment</span><span style="color:#0000ff">="Center"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> VerticalAlignment</span><span style="color:#0000ff">="Center"</span></li> <li> <span style="color:#ff0000"> Style</span><span style="color:#0000ff">="{</span><span style="color:#a31515">StaticResource</span><span style="color:#ff0000"> VariableFontTextBlockStyle}</span><span style="color:#0000ff">"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Text</span><span style="color:#0000ff">="No Mr Bond - I expect you to die" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">Slider</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="FontSizeSlider"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Grid.Row</span><span style="color:#0000ff">="1"</span></li> <li> <span style="color:#ff0000"> MaxWidth</span><span style="color:#0000ff">="500"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="100,30"</span></li> <li> <span style="color:#ff0000"> Maximum</span><span style="color:#0000ff">="64"</span></li> <li style="background: #f3f3f3"> <span style="color:#ff0000"> Minimum</span><span style="color:#0000ff">="8"</span></li> <li> <span style="color:#ff0000"> Value</span><span style="color:#0000ff">="12" /></span></li> <li style="background: #f3f3f3"><span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">Grid</span><span style="color:#0000ff">></span></li> </ol> </div> </div> </div> </p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9rhBXG9FMcA1KimxHHjFI7T_3sxSFAshQCsQU3gx07-9xu6F9qNeEHi685u6YNzCSmnz39Y-4kR4UTFgFPTZrLG7RlTMcAbWw0xnJrbOfArp-Cs7liOfPtHRD7CCw0RfzdOi/s1600-h/SL5AM1%5B6%5D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="SL5AM1" border="0" alt="SL5AM1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3X1eW4GgW0L26mA7D3RyY_JP0kzp46cl68ShaVVNRp5drqCVB1zjb2xHeb9Q-xNrSqxuJQc1-mHKCKU4GJCEzRppUWGMYL5UYujfd8hqiIX61uP_t6MSy7VOxXT8chUEfsA1b/?imgmax=800" width="689" height="490" /></a></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:9ee20414-7310-44da-b847-b4d908dc46ae" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/.NET" rel="tag">.NET</a>,<a href="http://technorati.com/tags/Silverlight" rel="tag">Silverlight</a>,<a href="http://technorati.com/tags/Silverlight+5+Beta" rel="tag">Silverlight 5 Beta</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a>,<a href="http://technorati.com/tags/Style" rel="tag">Style</a>,<a href="http://technorati.com/tags/Binding" rel="tag">Binding</a></div> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-19438092095201972842011-04-15T13:49:00.001+01:002011-04-15T14:07:30.294+01:00Building Silverlight Chord Factory: Part 3 – The View and Windows Phone 7<p>Despite my good intentions, it’s been a year since I posted the second part of my set of posts on Building Silverlight Chord Factory (see <a href="http://joanmiro.blogspot.com/2010_03_01_archive.html">Part 1</a> and <a href="http://joanmiro.blogspot.com/2010/04/building-silverlight-chord-factory-part.html">Part 2</a>). The third part – on the View in the Model-View-ViewModel (MVVM) triptych has been a bit delayed, mainly by work and other pressures, but also by my attention being diverted by the arrival of Windows Phone 7 (WP7).</p> <p>My practice of exploring new development platforms and languages by converting my hobby project – the Openfeature Chord Factory – kicked in and the application got yet another transformation. Which worked out quite well as it illustrated some of the power and benefits of the MVVM pattern. Converting the Silverlight Chord Factory code to WP7 Silverlight code was pretty simple and the main area of change – the View – was nicely isolated from the remaining code allowing the XAML markup to be adapted to the WP7 Control Toolkit easily and the custom controls in the app to work with virtually no modifications for the new platform.</p> <p>So now this belated post can be both a look at the original View and at the adaptions involved in moving the app to the WP7 platform.</p> <p>Here are a few screenshots of the Silverlight application in a couple of incarnations, running in a browser:</p> <p><a href="http://lh5.ggpht.com/_E_ZM9Y7o2Ow/Tag-jhdKs7I/AAAAAAAAAFc/VDO--ZjebFc/s1600-h/SilverlightChordFactory3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="SilverlightChordFactory" border="0" alt="SilverlightChordFactory" src="http://lh5.ggpht.com/_E_ZM9Y7o2Ow/Tag-l-aNj_I/AAAAAAAAAFg/xkqaskUbqbY/SilverlightChordFactory_thumb1.png?imgmax=800" width="654" height="448" /></a></p> <p><em>Note the unfinished musical stave controls…</em></p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCDcOFlPyN54gdUWX7oD-_KCbFOsBLzpAPyyxAtrw19COyOlNY680IMxW_ZYZzbYMcqbN-s9rxPKk-oSNN98U31o4vx_ft_Xydx822RdLq0BnIiSqt_oOcGyuN97WwlY-SZsc/s1600-h/OpenfeatureChordFactory%5B4%5D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="OpenfeatureChordFactory" border="0" alt="OpenfeatureChordFactory" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07AU2aDMcWyF-gX44_FCul-r43sRsfpTSOAmzHuWpMxuivVXPe3Uofob2bY_W4BDga2IMbhIWIb6oaiBYTU4-Fw42p66Ee568of99xP4foO-30nHkPsLadJsAkjCm874reDWw/?imgmax=800" width="654" height="358" /></a></p> <p><em><strong>Screenshots of Silverlight ChordFactory application</strong></em></p> <p>And here are screenshots of the Wp7 application:</p> <p><a href="http://lh6.ggpht.com/_E_ZM9Y7o2Ow/Tag-r0SqpTI/AAAAAAAAAFs/gsccx0EfDNQ/s1600-h/WP7ChordFactory4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="WP7ChordFactory" border="0" alt="WP7ChordFactory" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4dG-lAKdXkSLy3Y4hDP7KiN71ETKXGjeNp7qtQGhHutpD3owVcscdqj1YG-HKRCK8JTqEFbijRxQ8oTHHQYI5CodeMoLaXLAnnli5eVPT7Ie8kD-vhiUhLKmCdvKi4W5tdLzI/?imgmax=800" width="654" height="380" /></a></p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAHZJEWZpfJbIAmRIWbrGVoluq-LbKH_m3rhjR2at5_BDm0kHu0sWHL8bSbGDkFSELjPGX6AGkODOl81CoBgOoLO4BvHORPcXLQWKtIEr6RS8GkRRj-BvTptSdy0eqC3uVZgdC/s1600-h/WP7ChordFactorySettings%5B13%5D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="WP7ChordFactorySettings" border="0" alt="WP7ChordFactorySettings" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB73IBC15iI4KyATVPQQRryzICsptowrL2Lhy66lxwmQIOSUrrIwKgwpSglX0XWFnQjeCPEnCAP32mKhvck37dq6sqx1_OKL-r5vMORir7NrZXzxGYHJ5Ee9gbMhMmfFXca_O/?imgmax=800" width="653" height="393" /></a></p> <p>s<a href="http://lh5.ggpht.com/_E_ZM9Y7o2Ow/Tag-0VZ_7RI/AAAAAAAAAF8/7P6peWifcgA/s1600-h/WP7ChordFactoryOptions%5B3%5D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="WP7ChordFactoryOptions" border="0" alt="WP7ChordFactoryOptions" src="http://lh3.ggpht.com/_E_ZM9Y7o2Ow/Tag-3lqAPrI/AAAAAAAAAGA/7_vaRWJIZc4/WP7ChordFactoryOptions_thumb%5B1%5D.png?imgmax=800" width="654" height="356" /></a><em><strong></strong></em></p> <p><em><strong>Screenshots of WP7 app</strong></em></p> <p>Leaving aside my relative lack of UI/UX design capability, you can see that basically the User Experience is the same for both versions of the ChordFactory app. And in some of the UI itself the styling is exactly the same – the keyboard keys for example.</p> <p>In fact I was able to reuse large chunks of the Openfeature Silverlight music controls (Keyboard, Octave and PianoKey controls) that I developed for the browser app because they consist of generic, compatible XAML markup and C# code. The Views in either case are of course nothing more than the markup/styling with bindings to the appropriate data sources in the ViewModel.  With the Model and ViewModel classes being completely platform independent, they needed no redevelopment at all.</p> <p>So I was able to get the WP7 ChordFactory app up and running in not much more than an easy afternoon of working on it. The majority of the work required lay in adding XNA code to play piano note samples added to the app so that the user can hear the selected chord or scale. Something I couldn’t do as easily with the browser version and hadn’t got around to implementing with MediaElements. Registering with the App Hub and submitting the app took a few trips back and forth to cross all the ‘Ts’ and dot all the ‘Is’, but the app is now live here:</p> <p><a href="http://social.zune.net/redirect?type=phoneApp&id=089b2c6a-4a34-e011-854c-00237de2db9e" target="_blank"><font color="#0000ff" size="4"><a href="http://social.zune.net/redirect?type=phoneApp&id=089b2c6a-4a34-e011-854c-00237de2db9e" target="_blank"><img style="display: inline" title="ZuneDownload" alt="ZuneDownload" src="http://lh5.ggpht.com/_E_ZM9Y7o2Ow/Tag-4gxGt3I/AAAAAAAAAGE/gw5qtKrQAA0/ZuneDownload%5B15%5D.png?imgmax=800" width="649" height="483" /></a></font></a></p> <p><font color="#0000ff" size="4"><u><a href="http://social.zune.net/redirect?type=phoneApp&id=089b2c6a-4a34-e011-854c-00237de2db9e" target="_blank">Openfeature ChordFactory</a></u></font></p> <p> </p> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:6c8b7b3d-80ba-470c-aea9-e15c48ed229a" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/WP7" rel="tag">WP7</a>,<a href="http://technorati.com/tags/Window+Phone+7" rel="tag">Window Phone 7</a>,<a href="http://technorati.com/tags/C%23" rel="tag">C#</a>,<a href="http://technorati.com/tags/Silverlight" rel="tag">Silverlight</a>,<a href="http://technorati.com/tags/Chord" rel="tag">Chord</a>,<a href="http://technorati.com/tags/Music" rel="tag">Music</a>,<a href="http://technorati.com/tags/Piano" rel="tag">Piano</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a></div></p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-66612886977687615552010-04-13T15:54:00.001+01:002010-04-13T15:54:21.462+01:00Building Silverlight Chord Factory: Part 2 – The ViewModel<p>This is part 2 in my series of posts on building the latest MVVM incarnation of my ChordFactory hobby project; in <a href="http://joanmiro.blogspot.com/2010/03/building-silverlight-chord-factory-part.html" target="_blank">Part 1</a> I discussed modelling musical chord and scale data in XML – the Model in the MVVM (Model-View-ViewModel) pattern. In this post I will look at the next part of the pattern – the ViewModel.</p> <h4>Loading the data</h4> <p>In the MVVM pattern, data is held in properties of the ViewModel to allow the Views to data-bind UI elements directly onto those properties. In the ChordFactory application, the mechanics of loading the data from the XML and building the Chords and Scales collections to supply the View-Model are implemented using the Repository pattern with individual repository classes, deriving from a repository base class, for the Chords and the Scales collections. These classes implement private static methods to load their respective data and then surface the collections retrieved via public methods that return ObservableCollections of Chords and Scales respectively. </p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:bdf25e36-db0f-4a78-b6cd-089d4b30b84f" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">REPOSITORY BASE CLASS</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">RepositoryBase</span></li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#0000ff">protected</span> <span style="color:#0000ff">static</span> <span style="color:#2b91af">Stream</span> GetResourceStream(<span style="color:#0000ff">string</span> resourceFile)</li> <li style="background: #f3f3f3"> {</li> <li> <span style="color:#2b91af">Uri</span> uri = <span style="color:#0000ff">new</span> <span style="color:#2b91af">Uri</span>(resourceFile, <span style="color:#2b91af">UriKind</span>.RelativeOrAbsolute);</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#2b91af">StreamResourceInfo</span> info = <span style="color:#2b91af">Application</span>.GetResourceStream(uri);</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">if</span> (info == <span style="color:#0000ff">null</span> || info.Stream == <span style="color:#0000ff">null</span>)</li> <li> <span style="color:#0000ff">throw</span> <span style="color:#0000ff">new</span> <span style="color:#2b91af">ArgumentException</span>(<span style="color:#a31515">"Missing resource file: "</span> + resourceFile);</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">return</span> info.Stream;</li> <li style="background: #f3f3f3"> }</li> <li>}</li> </ol> </div> </div> </div> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ddc2bdd4-331d-4dad-9a74-1cc6aa50b823" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">CHORD REPOSITORY</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">ChordRepository</span> : <span style="color:#2b91af">RepositoryBase</span></li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#0000ff">private</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Chord</span>> observableChords = <span style="color:#0000ff">new</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Chord</span>>();</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> ChordRepository(<span style="color:#0000ff">string</span> chordDataFile)</li> <li style="background: #f3f3f3"> {</li> <li> LoadChords(chordDataFile).ForEach(observableChords.Add);</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#2b91af">List</span><<span style="color:#2b91af">Chord</span>> LoadChords(<span style="color:#0000ff">string</span> chordDataFile)</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">using</span> (<span style="color:#2b91af">Stream</span> stream = GetResourceStream(chordDataFile))</li> <li> <span style="color:#0000ff">using</span> (<span style="color:#2b91af">XmlReader</span> xmlRdr = <span style="color:#2b91af">XmlReader</span>.Create(stream))</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">return</span> (<span style="color:#0000ff">from</span> chordElem <span style="color:#0000ff">in</span> <span style="color:#2b91af">XDocument</span>.Load(xmlRdr).Element(<span style="color:#a31515">"Chords"</span>).Elements(<span style="color:#a31515">"Chord"</span>)</li> <li> <span style="color:#0000ff">select</span></li> <li style="background: #f3f3f3"> <span style="color:#2b91af">Chord</span>.CreateChord((<span style="color:#0000ff">string</span>) chordElem.Element(<span style="color:#a31515">"Description"</span>),</li> <li> chordElem.Element(<span style="color:#a31515">"NoteList"</span>).Elements(<span style="color:#a31515">"NoteIndex"</span>).Select(</li> <li style="background: #f3f3f3"> x => <span style="color:#0000ff">int</span>.Parse(x.Value)).ToList())).ToList();</li> <li> }</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Chord</span>> GetChords()</li> <li style="background: #f3f3f3"> {</li> <li> <span style="color:#0000ff">return</span> observableChords;</li> <li style="background: #f3f3f3"> }</li> <li>}</li> </ol> </div> </div> </div> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:dac41f02-1748-4360-8e6f-f7ba823099ee" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">SCALE REPOSITORY</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">ScaleRepository</span> : <span style="color:#2b91af">RepositoryBase</span></li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#0000ff">private</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Scale</span>> observableScales = <span style="color:#0000ff">new</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Scale</span>>();</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> ScaleRepository(<span style="color:#0000ff">string</span> scaleDataFile)</li> <li style="background: #f3f3f3"> {</li> <li> LoadScales(scaleDataFile).ForEach(observableScales.Add);</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#0000ff">static</span> <span style="color:#2b91af">List</span><<span style="color:#2b91af">Scale</span>> LoadScales(<span style="color:#0000ff">string</span> scaleDataFile)</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">using</span> (<span style="color:#2b91af">Stream</span> stream = GetResourceStream(scaleDataFile))</li> <li> <span style="color:#0000ff">using</span> (<span style="color:#2b91af">XmlReader</span> xmlRdr = <span style="color:#2b91af">XmlReader</span>.Create(stream))</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">return</span> (<span style="color:#0000ff">from</span> ScaleElem <span style="color:#0000ff">in</span> <span style="color:#2b91af">XDocument</span>.Load(xmlRdr).Element(<span style="color:#a31515">"Scales"</span>).Elements(<span style="color:#a31515">"Scale"</span>)</li> <li> <span style="color:#0000ff">select</span></li> <li style="background: #f3f3f3"> <span style="color:#2b91af">Scale</span>.CreateScale((<span style="color:#0000ff">string</span>)ScaleElem.Element(<span style="color:#a31515">"Description"</span>),</li> <li> ScaleElem.Element(<span style="color:#a31515">"NoteList"</span>).Elements(<span style="color:#a31515">"NoteIndex"</span>).Select(</li> <li style="background: #f3f3f3"> x => <span style="color:#0000ff">int</span>.Parse(x.Value)).ToList())).ToList();</li> <li> }</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Scale</span>> GetScales()</li> <li style="background: #f3f3f3"> {</li> <li> <span style="color:#0000ff">return</span> observableScales;</li> <li style="background: #f3f3f3"> }</li> <li>}</li> </ol> </div> </div> </div> <h4>Data in the ViewModel</h4> <p>The ViewModel uses the Repositories to load the data and provides it as bindable collections together with other bindable properties such as the currently selected items in the collections and implementation of change notification so that bound UI can respond to updates in the ViewModel.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9ac814e0-60c8-4610-a693-5e776cbfab0d" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">CHORDS VIEW-MODEL</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 3em; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">public</span> <span style="color:#0000ff">class</span> <span style="color:#2b91af">ChordsViewModel</span> : <span style="color:#2b91af">INotifyPropertyChanged</span></li> <li style="background: #f3f3f3">{</li> <li> <span style="color:#0000ff">private</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Chord</span>> chords;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Scale</span>> scales;</li> <li> <span style="color:#0000ff">private</span> <span style="color:#2b91af">List</span><<span style="color:#0000ff">int</span>> selectedChord;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#2b91af">List</span><<span style="color:#0000ff">int</span>> selectedScale;</li> <li> <span style="color:#0000ff">private</span> <span style="color:#2b91af">RootNotes</span> rootNote;</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#2b91af">Inversion</span> inversion;</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#0000ff">event</span> <span style="color:#2b91af">PropertyChangedEventHandler</span> PropertyChanged;</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#0000ff">readonly</span> <span style="color:#2b91af">List</span><<span style="color:#2b91af">Inversion</span>> inversions = <span style="color:#0000ff">new</span> <span style="color:#2b91af">List</span><<span style="color:#2b91af">Inversion</span>></li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#2b91af">Inversion</span>.Basic,</li> <li> <span style="color:#2b91af">Inversion</span>.First,</li> <li style="background: #f3f3f3"> <span style="color:#2b91af">Inversion</span>.Second,</li> <li> <span style="color:#2b91af">Inversion</span>.Third,</li> <li style="background: #f3f3f3"> <span style="color:#2b91af">Inversion</span>.Fouth</li> <li> };</li> <li style="background: #f3f3f3"> </li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> ChordsViewModel()</li> <li> {</li> <li style="background: #f3f3f3"> chords = <span style="color:#0000ff">new</span> <span style="color:#2b91af">ChordRepository</span>(<span style="color:#a31515">"/Openfeature.ChordFactory;component/Data/chords.xml"</span>).GetChords();</li> <li> scales = <span style="color:#0000ff">new</span> <span style="color:#2b91af">ScaleRepository</span>(<span style="color:#a31515">"/Openfeature.ChordFactory;component/Data/scales.xml"</span>).GetScales();</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Chord</span>> Chords</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> chords; }</li> <li> }</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> <span style="color:#2b91af">ObservableCollection</span><<span style="color:#2b91af">Scale</span>> Scales</li> <li style="background: #f3f3f3"> {</li> <li> <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> scales; }</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#2b91af">List</span><<span style="color:#2b91af">Inversion</span>> Inversions { <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> inversions; } }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#2b91af">List</span><<span style="color:#0000ff">int</span>> SelectedChord</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> selectedChord; }</li> <li> <span style="color:#0000ff">private</span> <span style="color:#0000ff">set</span></li> <li style="background: #f3f3f3"> {</li> <li> selectedChord = <span style="color:#0000ff">value</span>;</li> <li style="background: #f3f3f3"> OnPropertyChanged(<span style="color:#a31515">"SelectedChord"</span>);</li> <li> }</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#2b91af">List</span><<span style="color:#0000ff">int</span>> SelectedScale</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> selectedScale; }</li> <li> <span style="color:#0000ff">private</span> <span style="color:#0000ff">set</span></li> <li style="background: #f3f3f3"> {</li> <li> selectedScale = <span style="color:#0000ff">value</span>;</li> <li style="background: #f3f3f3"> OnPropertyChanged(<span style="color:#a31515">"SelectedScale"</span>);</li> <li> }</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#2b91af">Inversion</span> Inversion</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> inversion; }</li> <li> <span style="color:#0000ff">set</span></li> <li style="background: #f3f3f3"> {</li> <li> inversion = <span style="color:#0000ff">value</span>;</li> <li style="background: #f3f3f3"> OnPropertyChanged(<span style="color:#a31515">"Inversion"</span>);</li> <li> }</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#2b91af">RootNotes</span> RootNote</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">get</span> { <span style="color:#0000ff">return</span> rootNote; }</li> <li> <span style="color:#0000ff">set</span></li> <li style="background: #f3f3f3"> {</li> <li> rootNote = <span style="color:#0000ff">value</span>;</li> <li style="background: #f3f3f3"> OnPropertyChanged(<span style="color:#a31515">"RootNote"</span>);</li> <li> }</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> ChordSelectionChanged(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">SelectionChangedEventArgs</span> e)</li> <li> {</li> <li style="background: #f3f3f3"> SelectedChord = ((<span style="color:#2b91af">Chord</span>)e.AddedItems[0]).Notes;</li> <li> }</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> InversionSelectionChanged(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">SelectionChangedEventArgs</span> e)</li> <li style="background: #f3f3f3"> {</li> <li> Inversion = (<span style="color:#2b91af">Inversion</span>)e.AddedItems[0];</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> RootNoteChanged(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">SelectionChangedEventArgs</span> e)</li> <li> {</li> <li style="background: #f3f3f3"> RootNote = (<span style="color:#2b91af">RootNotes</span>)e.AddedItems[0];</li> <li> }</li> <li style="background: #f3f3f3"> </li> <li> <span style="color:#0000ff">public</span> <span style="color:#0000ff">void</span> ScaleSelectionChanged(<span style="color:#0000ff">object</span> sender, <span style="color:#2b91af">SelectionChangedEventArgs</span> e)</li> <li style="background: #f3f3f3"> {</li> <li> SelectedScale = ((<span style="color:#2b91af">Scale</span>)e.AddedItems[0]).Notes;</li> <li style="background: #f3f3f3"> }</li> <li> </li> <li style="background: #f3f3f3"> <span style="color:#0000ff">private</span> <span style="color:#0000ff">void</span> OnPropertyChanged(<span style="color:#0000ff">string</span> propertyName)</li> <li> {</li> <li style="background: #f3f3f3"> <span style="color:#0000ff">if</span> (PropertyChanged != <span style="color:#0000ff">null</span>)</li> <li> {</li> <li style="background: #f3f3f3"> PropertyChanged(<span style="color:#0000ff">this</span>, <span style="color:#0000ff">new</span> <span style="color:#2b91af">PropertyChangedEventArgs</span>(propertyName));</li> <li> }</li> <li style="background: #f3f3f3"> }</li> <li>}</li> </ol> </div> </div> </div> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:c1f1dc20-ad6f-476a-b64e-05a37afc944d" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/.NET" rel="tag">.NET</a>,<a href="http://technorati.com/tags/C%23" rel="tag">C#</a>,<a href="http://technorati.com/tags/Chord" rel="tag">Chord</a>,<a href="http://technorati.com/tags/CodePlex" rel="tag">CodePlex</a>,<a href="http://technorati.com/tags/MVVM" rel="tag">MVVM</a>,<a href="http://technorati.com/tags/Music" rel="tag">Music</a>,<a href="http://technorati.com/tags/Piano" rel="tag">Piano</a>,<a href="http://technorati.com/tags/Scale" rel="tag">Scale</a>,<a href="http://technorati.com/tags/Silverlight" rel="tag">Silverlight</a>,<a href="http://technorati.com/tags/XAML" rel="tag">XAML</a></div> <p>The Chords and Scales collection properties of the ViewModel are bound to UI elements, (initially ComboBoxes – UI/UX enhancement will have to come later), and their SelectionChanged events wired back to the ViewModel using the CallDataMethod behaviour from the excellent <a href="http://expressionblend.codeplex.com/">Expression Blend Samples</a> on Codeplex:</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:cd142289-e98f-42cf-91d8-8e89cbdc8efa" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px">COLLECTION PROPERTIES BINDINGS</div> <div style="background: #ddd; overflow: auto"> <ol style="background: #ffffff; margin: 0 0 0 2.5em; padding: 0 0 0 5px;"> <li><span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">StackPanel</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="BoundData"</span><span style="color:#ff0000"> Orientation</span><span style="color:#0000ff">="Horizontal"</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="10,10,10,20" ></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">ComboBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="ChordsList"</span><span style="color:#ff0000"> ItemsSource</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Chords}</span><span style="color:#0000ff">"</span><span style="color:#ff0000"> DisplayMemberPath</span><span style="color:#0000ff">="Description"</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="10,0"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">Interaction.Triggers</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">EventTrigger</span><span style="color:#ff0000"> EventName</span><span style="color:#0000ff">="SelectionChanged"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">si</span><span style="color:#0000ff">:</span><span style="color:#a31515">CallDataMethod</span><span style="color:#ff0000"> Method</span><span style="color:#0000ff">="ChordSelectionChanged" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">EventTrigger</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">Interaction.Triggers</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">ComboBox</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">ComboBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="ScalesList"</span><span style="color:#ff0000"> ItemsSource</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Scales}</span><span style="color:#0000ff">"</span><span style="color:#ff0000"> DisplayMemberPath</span><span style="color:#0000ff">="Description"</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="10,0"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">Interaction.Triggers</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">EventTrigger</span><span style="color:#ff0000"> EventName</span><span style="color:#0000ff">="SelectionChanged"></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">si</span><span style="color:#0000ff">:</span><span style="color:#a31515">CallDataMethod</span><span style="color:#ff0000"> Method</span><span style="color:#0000ff">="ScaleSelectionChanged" /></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">EventTrigger</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">Interaction.Triggers</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">ComboBox</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">ComboBox</span><span style="color:#ff0000"> x</span><span style="color:#0000ff">:</span><span style="color:#ff0000">Name</span><span style="color:#0000ff">="InversionsList"</span><span style="color:#ff0000"> Margin</span><span style="color:#0000ff">="10,0"</span><span style="color:#ff0000"> ItemsSource</span><span style="color:#0000ff">="{</span><span style="color:#a31515">Binding</span><span style="color:#ff0000"> Inversions}</span><span style="color:#0000ff">"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">Interaction.Triggers</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">EventTrigger</span><span style="color:#ff0000"> EventName</span><span style="color:#0000ff">="SelectionChanged"></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"><</span><span style="color:#a31515">si</span><span style="color:#0000ff">:</span><span style="color:#a31515">CallDataMethod</span><span style="color:#ff0000"> Method</span><span style="color:#0000ff">="InversionSelectionChanged" /></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">EventTrigger</span><span style="color:#0000ff">></span></li> <li> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">i</span><span style="color:#0000ff">:</span><span style="color:#a31515">Interaction.Triggers</span><span style="color:#0000ff">></span></li> <li style="background: #f3f3f3"> <span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">ComboBox</span><span style="color:#0000ff">></span></li> <li><span style="color:#a31515"></span><span style="color:#0000ff"></</span><span style="color:#a31515">StackPanel</span><span style="color:#0000ff">></span></li> </ol> </div> </div> </div> <p>The ViewModel handles selection changes and sets its SelectedChord and SelectedScale properties appropriately. The piano keyboard which displays the notes from the selected chord and scale is written as a Silverlight Control and it too has SelectedChord and SelectedScale properties; these bind to the properties on the ViewModel with the same name. The keyboard control also responds to left-mouse clicks in order to allow the selection of the root note of the chord or scale.</p> <p>So now I have my data loaded and in a bindable ViewModel, creating a user interface in XAML to represent it to the user of the Silverlight ChordFactory is next, together with some stuff about testing. That’s for part 3.</p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-86728711283330350582010-03-05T07:25:00.024+00:002010-03-12T07:37:59.809+00:00Building Silverlight Chord Factory: Part 1 – The Data ModelBack in November 2008 I posted about <a href="http://joanmiro.blogspot.com/2008/11/creating-chord-factory-in-silverlight-2.html" target="_blank">converting my reference app Chord Factory to Silverlight</a> – Chord Factory is a piano chord finder utility that I wrote years ago and I have been porting from one development platform to the next as a series of protracted learning exercises ever since. It started out as a <a href="http://www.openfeature.co.uk/download/chord.zip" target="_blank">VB6 WinForms app</a> and has been through various .NET incarnations since. The Silverlight version went through partially complete Silverlight 2.0 and 3.0 versions in a fairly monolithic architecture and I always meant to produce a few posts about the code once I had it complete and had a <a href="http://www.openfeature.co.uk/Silverlight/SilverlightChordFactory.html" target="_blank">published version</a> on my website. <br />But before I had managed that (see the most recent incomplete version <a href="http://www.openfeature.co.uk/Silverlight/SilverlightChordFactory.html" target="_blank">here</a>) I became interested in overhauling the component design and re-architecting it as another learning exercise, this time to help me work through the concepts of producing loosely-coupled component designs using MVC/MVVM patterns and looking at concerns like unit testing & testability together with an attempt at expressing the data structures involved in XML. <br />I long since gave up trying to make the UI pretty – whilst I think I can distinguish good UI/UX from bad I am no designer, but I have managed to produce something that fits some of the MVVM principles and allowed me to understand how MVVM works and makes for testable components and clean data-binding. And before I get distracted again and feel the urge to overhaul the code again and douse everything in MEF, it is time for those long-delayed posts. <br /> <h4>Representing note sequences as data</h4> <p>Without straying too much into music theory, chords and musical scales are basically sequences of notes – the 8 notes in a scale (e.g. the scale of C Major: C-D-E-F-G-A-B-C) or the 3, 4 or more notes in a chord (e.g. the chord of C Major: C-E-G) can be stored and positions or offsets in a sequence. However the progressive sequence is measured in pitch-steps of semitones from the starting note i.e. including the black notes (looking at the piano keyboard, the semitone sequence starting from the note C is: C, C#, D, Eb, E, F, F#, G, Ab, A, B, C, C#, D, Eb… and so on up the keyboard). So to store the sequence for the scale of C Major we need to store offsets for the 1st, 3rd, 5th, 6th, 8th, 10th, 11th and 12th semitones, and for the chord of C Major we need to store the offsets for the 1st, 5th and 7th. With this information for a scale or a chord we have the means to select or highlight on the UI representation of our piano keyboard the notes that make it up, starting at the base or <i>root note</i> – C in the previous examples. <br />We can now store these sequences of offsets for all the standard scales and chords that musicians have come up with and use them to produce representations of any variation from a particular root note. An XML schema for these sequences is simple to produce:  </p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:dadc6654-366b-4b95-a274-41219002d0ea" class="wlWriterSmartContent"> <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid"> <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">CHORD DATA SCHEMA</div> <div style="background: #ddd; overflow: auto"> <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px"> <li><span style="color: #0000ff"><?</span><span style="color: #a31515">xml</span><span style="color: #0000ff"> </span><span style="color: #ff0000">version</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1.0</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">encoding</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">utf-8</span>"<span style="color: #0000ff">?> </span></li> <li style="background: #f3f3f3"><span style="color: #0000ff"><</span><span style="color: #a31515">xs:schema</span><span style="color: #0000ff"> </span><span style="color: #ff0000">targetNamespace</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">http://tempuri.org/XMLSchema.xsd</span>"<span style="color: #0000ff"> </span></li> <li>           <span style="color: #0000ff"></span><span style="color: #ff0000">elementFormDefault</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">qualified</span>"<span style="color: #0000ff"> </span></li> <li style="background: #f3f3f3">           <span style="color: #0000ff"></span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">http://tempuri.org/XMLSchema.xsd</span>"<span style="color: #0000ff"> </span></li> <li>           <span style="color: #0000ff"></span><span style="color: #ff0000">xmlns:mstns</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">http://tempuri.org/XMLSchema.xsd</span>"<span style="color: #0000ff"> </span></li> <li style="background: #f3f3f3">           <span style="color: #0000ff"></span><span style="color: #ff0000">xmlns:xs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">http://www.w3.org/2001/XMLSchema</span>"<span style="color: #0000ff">> </span></li> <li>  <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">ChordFactoryData</span>"<span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff">> </span></li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">        <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Chords</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Chords</span>"<span style="color: #0000ff"> /> </span></li> <li>        <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Scales</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Scales</span>"<span style="color: #0000ff"> /> </span></li> <li style="background: #f3f3f3">      <span style="color: #0000ff"></</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff">> </span></li> <li>  <span style="color: #0000ff"><</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Chords</span>"<span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Chord</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">minOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">maxOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">unbounded</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteSequence</span>"<span style="color: #0000ff"> /> </span></li> <li style="background: #f3f3f3">    <span style="color: #0000ff"></</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li>  <span style="color: #0000ff"></</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">  <span style="color: #0000ff"><</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Scales</span>"<span style="color: #0000ff">> </span></li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Scale</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">minOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">maxOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">unbounded</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteSequence</span>"<span style="color: #0000ff"> /> </span></li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff">> </span></li> <li>  <span style="color: #0000ff"><</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteSequence</span>"<span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">SequenceType</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">SequenceType</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">maxOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">minOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> /> </span></li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Description</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">xs:string</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">maxOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">minOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> /> </span></li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteList</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteList</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">maxOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">minOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> /> </span></li> <li style="background: #f3f3f3">    <span style="color: #0000ff"></</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li>  <span style="color: #0000ff"></</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">  <span style="color: #0000ff"><</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteList</span>"<span style="color: #0000ff">> </span></li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:element</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NoteIndex</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">xs:int</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">minOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">maxOccurs</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">unbounded</span>"<span style="color: #0000ff"> /> </span></li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">xs:sequence</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">xs:complexType</span><span style="color: #0000ff">> </span></li> <li>  <span style="color: #0000ff"><</span><span style="color: #a31515">xs:simpleType</span><span style="color: #0000ff"> </span><span style="color: #ff0000">name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">SequenceType</span>"<span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">xs:restriction</span><span style="color: #0000ff"> </span><span style="color: #ff0000">base</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">xs:string</span>"<span style="color: #0000ff">> </span></li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:enumeration</span><span style="color: #0000ff"> </span><span style="color: #ff0000">value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Chord</span>"<span style="color: #0000ff"> /> </span></li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">xs:enumeration</span><span style="color: #0000ff"> </span><span style="color: #ff0000">value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Scale</span>"<span style="color: #0000ff"> /> </span></li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">xs:restriction</span><span style="color: #0000ff">> </span></li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">xs:simpleType</span><span style="color: #0000ff">> </span></li> <li><span style="color: #0000ff"></</span><span style="color: #a31515">xs:schema</span><span style="color: #0000ff">></span> </li> </ol> </div> </div> </div> <p> </p> <p>The XML for a Major Chord would then look like this: </p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:bf20ecf6-642e-4115-b6f1-636fba153152" class="wlWriterSmartContent"> <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid"> <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">MAJOR CHORD</div> <div style="background: #ddd; overflow: auto"> <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px"> <li><span style="color: #0000ff"><</span><span style="color: #a31515">chords</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"><</span><span style="color: #a31515">chord</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">sequencetype</span><span style="color: #0000ff">></span>Chord<span style="color: #0000ff"></</span><span style="color: #a31515">sequencetype</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">description</span><span style="color: #0000ff">></span>Major<span style="color: #0000ff"></</span><span style="color: #a31515">description</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">notelist</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>0<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>4<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>7<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">notelist</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">chord</span><span style="color: #0000ff">></span> </li> <li>  </li> <li style="background: #f3f3f3">  ...more chords... </li> <li>  </li> <li style="background: #f3f3f3"><span style="color: #0000ff"></</span><span style="color: #a31515">chords</span><span style="color: #0000ff">></span> </li> </ol> </div> </div> </div> <p></p> <p> </p> <p>and a Major Scale would look like this:</p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:f0075c05-9da4-4678-9b44-bd4291e60839" class="wlWriterSmartContent"> <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid"> <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">MAJOR SCALE</div> <div style="background: #ddd; overflow: auto"> <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px"> <li><span style="color: #0000ff"><</span><span style="color: #a31515">scales</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"><</span><span style="color: #a31515">scale</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">sequencetype</span><span style="color: #0000ff">></span>Scale<span style="color: #0000ff"></</span><span style="color: #a31515">sequencetype</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">description</span><span style="color: #0000ff">></span>Major<span style="color: #0000ff"></</span><span style="color: #a31515">description</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">notelist</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>0<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>2<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>4<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>5<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>7<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>9<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>11<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span>12<span style="color: #0000ff"></</span><span style="color: #a31515">noteindex</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"></</span><span style="color: #a31515">notelist</span><span style="color: #0000ff">></span> </li> <li>  <span style="color: #0000ff"></</span><span style="color: #a31515">scale</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></span></li> <li>  ...more scales... </li> <li style="background: #f3f3f3">  </li> <li><span style="color: #0000ff"></</span><span style="color: #a31515">scales</span><span style="color: #0000ff">></span> </li> </ol> </div> </div> </div> <p></p> <h4> </h4> <h4>Data Classes</h4> <p>In my MVVM implementation this Chord and Scale data is loaded into models that represent the Chord or the Scale and I can then produce collections of instances of all the Chords and Scales. Here are the simple models in C#: </p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:f4cf5632-b7e3-470d-b75a-c2e84a067d1b" class="wlWriterSmartContent"> <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid"> <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">DATA MODEL CLASSES</div> <div style="background: #ddd; overflow: auto"> <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px"> <li><span style="color: #0000ff">public</span> <span style="color: #0000ff">abstract</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">NoteSequence</span> </li> <li style="background: #f3f3f3">{ </li> <li>    <span style="color: #0000ff">public</span> <span style="color: #2b91af">List</span><<span style="color: #0000ff">int</span>> Notes { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; } </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Description { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; } </li> <li>} </li> <li style="background: #f3f3f3">  </li> <li><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">Chord</span> : <span style="color: #2b91af">NoteSequence</span> </li> <li style="background: #f3f3f3">{ </li> <li>    <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> <span style="color: #2b91af">Chord</span> CreateNewChord() </li> <li style="background: #f3f3f3">    { </li> <li>        <span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span> <span style="color: #2b91af">Chord</span>(); </li> <li style="background: #f3f3f3">    } </li> <li>  </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> <span style="color: #2b91af">Chord</span> CreateChord(<span style="color: #0000ff">string</span> description, <span style="color: #2b91af">List</span><<span style="color: #0000ff">int</span>> notes) </li> <li>    { </li> <li style="background: #f3f3f3">        <span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span> <span style="color: #2b91af">Chord</span> </li> <li>        { </li> <li style="background: #f3f3f3">            Notes = notes, </li> <li>            Description = description </li> <li style="background: #f3f3f3">        }; </li> <li>    } </li> <li style="background: #f3f3f3">  </li> <li>    <span style="color: #0000ff">protected</span> Chord() { } </li> <li style="background: #f3f3f3">} </li> <li>  </li> <li style="background: #f3f3f3"><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">Scale</span> : <span style="color: #2b91af">NoteSequence</span> </li> <li>{ </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> <span style="color: #2b91af">Scale</span> CreateNewScale() </li> <li>    { </li> <li style="background: #f3f3f3">        <span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span> <span style="color: #2b91af">Scale</span>(); </li> <li>    } </li> <li style="background: #f3f3f3">  </li> <li>    <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> <span style="color: #2b91af">Scale</span> CreateScale(<span style="color: #0000ff">string</span> description, <span style="color: #2b91af">List</span><<span style="color: #0000ff">int</span>> notes) </li> <li style="background: #f3f3f3">    { </li> <li>        <span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span> <span style="color: #2b91af">Scale</span> </li> <li style="background: #f3f3f3">        { </li> <li>            Notes = notes, </li> <li style="background: #f3f3f3">            Description = description </li> <li>        }; </li> <li style="background: #f3f3f3">    } </li> <li>  </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">protected</span> Scale() { } </li> <li>} </li> </ol> </div> </div> </div> <p></p> <p> <br />In implementation, the Chord and Scale classes are no different and it could be argued that the respective data could be loaded into two collections of the more general NoteSequence class (which would have to be changed from its current abstract incarnation of course); but I prefer to keep them as separate classes as they are logically different and might diverge in the future. <br /> <br />So I now represent my chord and scale data as XML and I have a straightforward model for instantiating it in data objects. The next stage is to load that data into a ViewModel using data access code that will deserialize the XML into the objects. That will be in part 2. </p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-75847974738488348432009-12-14T16:01:00.005+00:002010-03-15T07:40:00.638+00:00Five Minute Silverlight 4 Aides-Memoire #7 – IDataErrorInfo<p>The XAML:</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:f5dbcb01-5856-4529-954c-5d287fce6d8a" class="wlWriterSmartContent"> <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid"> <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">DATA INPUT</div> <div style="background: #ddd; overflow: auto"> <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px"> <li><span style="color: #0000ff"><</span><span style="color: #a31515">Grid</span><span style="color: #0000ff"> </span><span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">LayoutRoot</span>"<span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"><</span><span style="color: #a31515">Grid.Resources</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">local:Person</span><span style="color: #0000ff"> </span><span style="color: #ff0000">x:Key</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">NewJoiner</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Age</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">49</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Forename</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Fred</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Surname</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Flintstone</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">Grid.Resources</span><span style="color: #0000ff">></span> </li> <li>  <span style="color: #0000ff"><</span><span style="color: #a31515">Grid</span><span style="color: #0000ff"> </span><span style="color: #ff0000">DataContext</span><span style="color: #0000ff">=</span>"{<span style="color: #0000ff">StaticResource NewJoiner}</span>"<span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">Grid.ColumnDefinitions</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">columndefinition</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Width</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1*</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">columndefinition</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Width</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">5*</span>"<span style="color: #0000ff"> /></span> </li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">Grid.ColumnDefinitions</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">rowdefinition</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Height</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">50</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">rowdefinition</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Height</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">50</span>"<span style="color: #0000ff"> /></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">rowdefinition</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Height</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">50</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"></</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">Grid.Resources</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"><</span><span style="color: #a31515">Style</span><span style="color: #0000ff"> </span><span style="color: #ff0000">TargetType</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">TextBlock</span>"<span style="color: #0000ff">></span> </li> <li>        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Margin</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">10</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">HorizontalAlignment</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Right</span>"<span style="color: #0000ff"> /></span> </li> <li>        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">VerticalAlignment</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Center</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"></</span><span style="color: #a31515">Style</span><span style="color: #0000ff">></span> </li> <li>      <span style="color: #0000ff"><</span><span style="color: #a31515">Style</span><span style="color: #0000ff"> </span><span style="color: #ff0000">TargetType</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">TextBox</span>"<span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Margin</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">10</span>"<span style="color: #0000ff"> /></span> </li> <li>        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Width</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">154</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">HorizontalAlignment</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Left</span>"<span style="color: #0000ff"> /></span> </li> <li>        <span style="color: #0000ff"><</span><span style="color: #a31515">setter</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Property</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">VerticalAlignment</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Value</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Center</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">      <span style="color: #0000ff"></</span><span style="color: #a31515">Style</span><span style="color: #0000ff">></span> </li> <li>    <span style="color: #0000ff"></</span><span style="color: #a31515">Grid.Resources</span><span style="color: #0000ff">></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Text</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">First Name</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Row</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">0</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Column</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">0</span>"<span style="color: #0000ff"> /></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Text</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Last Name</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Row</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Column</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">0</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff"> </span><span style="color: #ff0000">Text</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Age</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Row</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">2</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Column</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">0</span>"<span style="color: #0000ff"> /></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">textbox</span><span style="color: #0000ff"> </span><span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Forename</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Row</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">0</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Column</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Text</span><span style="color: #0000ff">=</span>"{<span style="color: #0000ff">Binding Forename, Mode=TwoWay, ValidatesOnDataErrors=True}</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">    <span style="color: #0000ff"><</span><span style="color: #a31515">textbox</span><span style="color: #0000ff"> </span><span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Surname</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Row</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Column</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Text</span><span style="color: #0000ff">=</span>"{<span style="color: #0000ff">Binding Surname, Mode=TwoWay, ValidatesOnDataErrors=True}</span>"<span style="color: #0000ff"> /></span> </li> <li>    <span style="color: #0000ff"><</span><span style="color: #a31515">textbox</span><span style="color: #0000ff"> </span><span style="color: #ff0000">x:Name</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">Age</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Row</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">2</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Grid.Column</span><span style="color: #0000ff">=</span>"<span style="color: #0000ff">1</span>"<span style="color: #0000ff"> </span><span style="color: #ff0000">Text</span><span style="color: #0000ff">=</span>"{<span style="color: #0000ff">Binding Age, Mode=TwoWay, ValidatesOnDataErrors=True}</span>"<span style="color: #0000ff"> /></span> </li> <li style="background: #f3f3f3">  <span style="color: #0000ff"></</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span> </li> <li><span style="color: #0000ff"></</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span> </li> </ol> </div> </div> </div> <br /> <p>The code:</p> <p></p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:568aaddd-4d61-45e7-80bd-d396badd44db" class="wlWriterSmartContent"> <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid"> <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">IMPLEMENTATION</div> <div style="background: #ddd; overflow: auto"> <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px"> <li><span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">Person</span> : <span style="color: #2b91af">IDataErrorInfo</span> </li> <li style="background: #f3f3f3">{ </li> <li>    <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Forename { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; } </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Surname { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; } </li> <li>    <span style="color: #0000ff">public</span> <span style="color: #0000ff">int</span> Age { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; } </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Error { <span style="color: #0000ff">get</span> { <span style="color: #0000ff">return</span> <span style="color: #0000ff">null</span>; } } </li> <li>  </li> <li style="background: #f3f3f3">    <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> <span style="color: #0000ff">this</span>[<span style="color: #0000ff">string</span> columnName] </li> <li>    { </li> <li style="background: #f3f3f3">        <span style="color: #0000ff">get</span> </li> <li>        { </li> <li style="background: #f3f3f3">            <span style="color: #0000ff">string</span> error = <span style="color: #0000ff">null</span>; </li> <li>            <span style="color: #0000ff">switch</span> (columnName) </li> <li style="background: #f3f3f3">            { </li> <li>                <span style="color: #0000ff">case</span> <span style="color: #a31515">"Forename"</span>: </li> <li style="background: #f3f3f3">                    <span style="color: #0000ff">if</span> (<span style="color: #0000ff">string</span>.IsNullOrEmpty(Forename)) </li> <li>                        error = <span style="color: #a31515">"Forename required"</span>; </li> <li style="background: #f3f3f3">                    <span style="color: #0000ff">break</span>; </li> <li>                <span style="color: #0000ff">case</span> <span style="color: #a31515">"Surname"</span>: </li> <li style="background: #f3f3f3">                    <span style="color: #0000ff">if</span> (<span style="color: #0000ff">string</span>.IsNullOrEmpty(<span style="color: #0000ff">this</span>.Surname)) </li> <li>                        error = <span style="color: #a31515">"Surname required"</span>; </li> <li style="background: #f3f3f3">                    <span style="color: #0000ff">break</span>; </li> <li>                <span style="color: #0000ff">case</span> <span style="color: #a31515">"Age"</span>: </li> <li style="background: #f3f3f3">                    <span style="color: #0000ff">if</span> (<span style="color: #0000ff">this</span>.Age < 0 || <span style="color: #0000ff">this</span>.Age > 130) </li> <li>                        error = <span style="color: #a31515">"Invalid Age"</span>; </li> <li style="background: #f3f3f3">                    <span style="color: #0000ff">break</span>; </li> <li>            } </li> <li style="background: #f3f3f3">            <span style="color: #0000ff">return</span> error; </li> <li>        } </li> <li style="background: #f3f3f3">    } </li> <li>} </li> </ol> </div> </div> </div> <p></p> <p> <br />The result:</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb87pBffVDSS4mQ3J1yCIxoHlzjo4UQTdITkNDd1BLi5ndDZ-MCHop-FZCAS0WmTO4-x2pC-XMULYiqAi5Qu0PLfvdhDF-bOzePZ0VvxwnX9628zfpAw42V8tfU2-a4e26F2FR/s1600-h/image%5B14%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIFYFjfn0XT86C82qGhUYnUki5CXjEehKrA9mOwIWpw1SrAWNMrcfrEf8foAnh9xcuh-CgmlRPJSzZ2DYr2mMm-8aPPDZk-1Pfm_JdB3pGJ3Ym4ZTk_13gl3lfdOVxopJK3l5/?imgmax=800" width="706" height="359" /></a></p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-2826860010086375572009-12-14T12:23:00.003+00:002009-12-14T16:00:09.880+00:00Five Minute Silverlight 4 Aides-Memoire #6 – Right Mouse Event Support<pre class="code"><span style="color: blue;"><</span><span style="color: #a31515;">Popup </span><span style="color: red;">x</span><span style="color: blue;">:</span><span style="color: red;">Name</span><span style="color: blue;">="PopupMenu" </span><span style="color: red;">IsOpen</span><span style="color: blue;">="False">
<</span><span style="color: #a31515;">ListBox </span><span style="color: red;">x</span><span style="color: blue;">:</span><span style="color: red;">Name</span><span style="color: blue;">="MenuItems">
<</span><span style="color: #a31515;">ListBoxItem </span><span style="color: red;">Content</span><span style="color: blue;">="Item 1" />
<</span><span style="color: #a31515;">ListBoxItem </span><span style="color: red;">Content</span><span style="color: blue;">="Item 2" />
<</span><span style="color: #a31515;">ListBoxItem </span><span style="color: red;">Content</span><span style="color: blue;">="Item 3" />
<</span><span style="color: #a31515;">ListBoxItem </span><span style="color: red;">Content</span><span style="color: blue;">="Item 4" />
</</span><span style="color: #a31515;">ListBox</span><span style="color: blue;">>
</</span><span style="color: #a31515;">Popup</span><span style="color: blue;">>
</span></pre><br />
<br />
<pre class="code"><span style="color: blue;">public </span>MainPage()
{
InitializeComponent();
MouseRightButtonDown += (s, e) => e.Handled = <span style="color: blue;">true</span>;
MouseRightButtonUp += MainPage_MouseRightButtonUp;
MenuItems.MouseLeftButtonUp += MenuItems_MouseLeftButtonUp;
}</pre><br />
<br />
<pre class="code"><span style="color: blue;">void </span>MainPage_MouseRightButtonUp(<span style="color: blue;">object </span>sender, System.Windows.Input.<span style="color: #2b91af;">MouseButtonEventArgs </span>e)
{
<span style="color: blue;"> this</span>.PopupMenu.HorizontalOffset = e.GetPosition(<span style="color: blue;">this</span>).X;
<span style="color: blue;"> this</span>.PopupMenu.VerticalOffset = e.GetPosition(<span style="color: blue;">this</span>).Y;
<span style="color: blue;"> this</span>.PopupMenu.IsOpen = <span style="color: blue;">true</span>;
}
<span style="color: blue;">void </span>MenuItems_MouseLeftButtonUp(<span style="color: blue;">object </span>sender, System.Windows.Input.<span style="color: #2b91af;">MouseButtonEventArgs </span>e)
{
PopupMenu.IsOpen = <span style="color: blue;">false</span>;
System.Diagnostics.<span style="color: #2b91af;">Debug</span>.WriteLine(((sender <span style="color: blue;">as </span><span style="color: #2b91af;">ListBox</span>).SelectedItem <span style="color: blue;">as </span><span style="color: #2b91af;">ListBoxItem</span>).Content);
}</pre><br />
<a href="http://11011.net/software/vspaste"></a>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-8014193461644333652009-12-14T12:07:00.004+00:002009-12-14T16:04:16.947+00:00Five Minute Silverlight 4 Aides-Memoire #5 – Rich Text Area Control<pre class="code"><span style="color: blue;"><</span><span style="color: #a31515;">RichTextArea </span><span style="color: red;">x</span><span style="color: blue;">:</span><span style="color: red;">Name</span><span style="color: blue;">="Editor"</span><span style="color: blue;">>
<</span><span style="color: #a31515;">RichTextArea.Blocks</span><span style="color: blue;">>
<</span><span style="color: #a31515;">Paragraph</span><span style="color: blue;">>
<</span><span style="color: #a31515;">Run </span><span style="color: red;">Foreground</span><span style="color: blue;">="Blue" </span><span style="color: red;">Text</span><span style="color: blue;">="This is "/>
<</span><span style="color: #a31515;">Run </span><span style="color: red;">Foreground</span><span style="color: blue;">="Red" </span><span style="color: red;">FontWeight</span><span style="color: blue;">="Bold" </span><span style="color: red;">Text</span><span style="color: blue;">="some sample " />
<</span><span style="color: #a31515;">Run </span><span style="color: red;">FontStyle</span><span style="color: blue;">="Italic" </span><span style="color: red;">Text</span><span style="color: blue;">="text" />
</</span><span style="color: #a31515;">Paragraph</span><span style="color: blue;">>
<</span><span style="color: #a31515;">Paragraph</span><span style="color: blue;">>
<</span><span style="color: #a31515;">Run </span><span style="color: red;">Text</span><span style="color: blue;">="Here is "/>
<</span><span style="color: #a31515;">Run </span><span style="color: red;">TextDecorations</span><span style="color: blue;">="Underline" </span><span style="color: red;">Text</span><span style="color: blue;">="some more" />
</</span><span style="color: #a31515;">Paragraph</span><span style="color: blue;">>
</</span><span style="color: #a31515;">RichTextArea.Blocks</span><span style="color: blue;">>
</</span><span style="color: #a31515;">RichTextArea</span><span style="color: blue;">>
</span></pre><br />
<pre class="code"><span style="color: blue;">void </span>UnderlineSelection_Click(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">RoutedEventArgs </span>e)
{
<span style="color: blue;"> var </span>currentValue = <span style="color: blue;">this</span>.Editor.Selection.GetPropertyValue(<span style="color: #2b91af;">TextElement</span>.TextDecorationsProperty);
<span style="color: #2b91af;"> TextDecorationCollection </span>setValue = <span style="color: #2b91af;">TextDecorations</span>.Underline;
<span style="color: blue;"> if </span>(currentValue != <span style="color: #2b91af;">DependencyProperty</span>.UnsetValue)
setValue = (<span style="color: #2b91af;">TextDecorationCollection</span>)currentValue == setValue ? <span style="color: blue;">null </span>: setValue;
<span style="color: blue;"> this</span>.Editor.Selection.SetPropertyValue(<span style="color: #2b91af;">TextElement</span>.TextDecorationsProperty, setValue);
}
<span style="color: blue;">void </span>ItalicSelection_Click(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">RoutedEventArgs </span>e)
{
<span style="color: blue;"> var </span>currentValue = <span style="color: blue;">this</span>.Editor.Selection.GetPropertyValue(<span style="color: #2b91af;">TextElement</span>.FontStyleProperty);
<span style="color: #2b91af;"> FontStyle </span>setValue = <span style="color: #2b91af;">FontStyles</span>.Italic;
<span style="color: #2b91af;"> FontStyle </span>defaultValue = <span style="color: #2b91af;">FontStyles</span>.Normal;
<span style="color: blue;"> if </span>(currentValue != <span style="color: #2b91af;">DependencyProperty</span>.UnsetValue)
setValue = (<span style="color: #2b91af;">FontStyle</span>)currentValue == setValue ? defaultValue : setValue;
<span style="color: blue;"> this</span>.Editor.Selection.SetPropertyValue(<span style="color: #2b91af;">TextElement</span>.FontStyleProperty, setValue);
}
<span style="color: blue;">void </span>BoldSelection_Click(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">RoutedEventArgs </span>e)
{
<span style="color: blue;"> var </span>currentValue = <span style="color: blue;">this</span>.Editor.Selection.GetPropertyValue(<span style="color: #2b91af;">TextElement</span>.FontWeightProperty);
<span style="color: #2b91af;"> FontWeight </span>setValue = <span style="color: #2b91af;">FontWeights</span>.Bold;
<span style="color: #2b91af;"> FontWeight </span>defaultValue = <span style="color: #2b91af;">FontWeights</span>.Normal;
<span style="color: blue;"> if </span>(currentValue != <span style="color: #2b91af;">DependencyProperty</span>.UnsetValue)
setValue = (<span style="color: #2b91af;">FontWeight</span>)currentValue == setValue ? defaultValue : setValue;
<span style="color: blue;"> this</span>.Editor.Selection.SetPropertyValue(<span style="color: #2b91af;">TextElement</span>.FontWeightProperty, setValue);
}</pre><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAh1Swp8DYo0zanLlVZS5NvWAQ6b0jvIaDu-nKa8xAiEJtEuFVKCnXMr5c5eCpjM3nGHxVArY0ECtAoOGYxqBXI4OVztmmRrL46noHgjCVwdC3eIU-SIPSIXhgp7-qFFaetXZ/s1600-h/image[7].png"><img alt="image" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdQxHoSTSaBu7GeSQGHf_i9emiZNtATH2DauADaIxMK0sdOVhF_zYCV1DwpvMPViQS81Spj46mL5Ng6-XZHd7DmdfCSXa8Cvmlpx-Jhr-0-2uHcZEDGk5E8wY0R1Nq5LPDa66s/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px 0px 0px 40px;" title="image" width="540" /></a> <a href="http://11011.net/software/vspaste"></a>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-21356901174082399942009-12-04T07:22:00.002+00:002009-12-14T16:05:04.897+00:00Five Minute Silverlight 4 Aides-Memoire #4 – Clipboard Access<pre class="code"><span style="color: blue;">private void </span>PopButton_Click(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">RoutedEventArgs </span>e)
{
<span style="color: blue;"> var </span>newPara = <span style="color: blue;">new </span><span style="color: #2b91af;">Paragraph</span>();
newPara.Inlines.Add(<span style="color: blue;">new </span><span style="color: #2b91af;">Run </span>{ Text = <span style="color: #2b91af;">Clipboard</span>.GetText() });
<span style="color: blue;"> this</span>.rightRichTextArea.Blocks.Add(newPara);
}
<span style="color: blue;">private void </span>PushButton_Click(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">RoutedEventArgs </span>e)
{
<span style="color: #2b91af;"> Clipboard</span>.SetText(<span style="color: blue;">this</span>.leftRichTextArea.Selection.Text);
}</pre><br />
<a href="http://11011.net/software/vspaste"></a>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-89695064018688909492009-12-01T21:07:00.005+00:002009-12-03T00:22:17.684+00:00Five Minute Silverlight 4 Aides-Memoire #3 – WebCam/Microphone Device Support<pre class="code"><span style="color: blue"><</span><span style="color: #a31515">UserControl.Resources</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="ListBoxStyle" </span><span style="color: red">TargetType</span><span style="color: blue">="ListBox"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="ItemTemplate"><br /> <</span><span style="color: #a31515">Setter.Value</span><span style="color: blue">><br /> <</span><span style="color: #a31515">DataTemplate</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Image </span><span style="color: red">Margin</span><span style="color: blue">="5" </span><span style="color: red">Source</span><span style="color: blue">="{</span><span style="color: #a31515">Binding</span><span style="color: blue">}" </span><span style="color: red">Stretch</span><span style="color: blue">="UniformToFill" </span><span style="color: red">Height</span><span style="color: blue">="80" </span><span style="color: red">VerticalAlignment</span><span style="color: blue">="Center"/><br /> </</span><span style="color: #a31515">DataTemplate</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Setter.Value</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Setter</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="ItemsPanel"><br /> <</span><span style="color: #a31515">Setter.Value</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ItemsPanelTemplate</span><span style="color: blue">><br /> <</span><span style="color: #a31515">StackPanel </span><span style="color: red">Orientation</span><span style="color: blue">="Horizontal" </span><span style="color: red">VerticalAlignment</span><span style="color: blue">="Center" </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">="Center"/><br /> </</span><span style="color: #a31515">ItemsPanelTemplate</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Setter.Value</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Setter</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /></</span><span style="color: #a31515">UserControl.Resources</span><span style="color: blue">><br /><br /></span></pre><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">StackPanel </span><span style="color: red">Grid.Row</span><span style="color: blue">="2" </span><span style="color: red">Grid.Column</span><span style="color: blue">="0"><br /> <</span><span style="color: #a31515">Button </span><span style="color: red">Content</span><span style="color: blue">="Start WebCam" </span><span style="color: red">Click</span><span style="color: blue">="StartWebCam_Click" </span><span style="color: red">Height</span><span style="color: blue">="30"</span><span style="color: red"> </span><span style="color: blue">/><br /> <</span><span style="color: #a31515">Button </span><span style="color: red">Content</span><span style="color: blue">="Snapshot" </span><span style="color: red">Click</span><span style="color: blue">="Snapshot_Click" </span><span style="color: red">Height</span><span style="color: blue">="30" </span><span style="color: blue">/><br /></</span><span style="color: #a31515">StackPanel</span><span style="color: blue">><br /><</span><span style="color: #a31515">Rectangle </span><span style="color: red">Grid.Row</span><span style="color: blue">="0" </span><span style="color: red">Stretch</span><span style="color: blue">="Fill" </span><span style="color: red">Grid.Column</span><span style="color: blue">="1" </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="CapturedImage" </span><span style="color: blue">/><br /></span><span style="color: blue"><</span><span style="color: #a31515">ListBox </span><span style="color: red">Grid.Row</span><span style="color: blue">="1" </span><span style="color: red">Margin</span><span style="color: blue">="10" </span><span style="color: red">Grid.RowSpan</span><span style="color: blue">="2" </span><span style="color: red">Grid.Column</span><span style="color: blue">="1" </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="Snapshots" </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">ListBoxStyle</span><span style="color: blue">}"/><br /></span></pre><br /><br /><pre class="code"><span style="color: blue">private void </span>StartWebCam_Click(<span style="color: blue">object </span>sender, <span style="color: #2b91af">RoutedEventArgs </span>e)<br />{<br /><span style="color: blue"> if </span>(!<span style="color: #2b91af">CaptureDeviceConfiguration</span>.AllowedDeviceAccess & !<span style="color: #2b91af">CaptureDeviceConfiguration</span>.RequestDeviceAccess())<br /><span style="color: blue"> return</span>;<br /><br /><span style="color: #2b91af"> VideoBrush </span>videoBrush = <span style="color: blue">new </span><span style="color: #2b91af">VideoBrush</span>();<br /> videoBrush.SetSource(captureSource);<br /> CapturedImage.Fill = videoBrush;<br /><span style="color: blue"> this</span>.Snapshots.ItemsSource = snaps;<br /> captureSource.Start();<br />}</pre><br /><br /><pre class="code"><span style="color: blue">private void </span>Snapshot_Click(<span style="color: blue">object </span>sender, <span style="color: #2b91af">RoutedEventArgs </span>e)<br />{<br /> captureSource.AsyncCaptureImage((image) => { snaps.Add(image); });<br />}</pre> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-85877660975843267102009-12-01T20:45:00.003+00:002009-12-02T10:01:15.630+00:00Five Minute Silverlight 4 Aides-Memoire #2 – Printing<pre class="code"><span style="color: blue;">private void </span>Print_Click(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">RoutedEventArgs </span>e)
{
<span style="color: #2b91af;"> PrintDocument </span>printDoc = <span style="color: blue;">new </span><span style="color: #2b91af;">PrintDocument</span>();
<span style="background: #caffca; color: green;"><span style="background-color: white;"> </span>// Name that will show in the spooler...
</span> printDoc.DocumentName = <span style="color: #a31515;">"Directory Tree"</span>;
printDoc.PrintPage += <span style="color: blue;">new </span><span style="color: #2b91af;">EventHandler</span><<span style="color: #2b91af;">PrintPageEventArgs</span>>(printDoc_PrintPage);
printDoc.Print();
}
<span style="color: blue;">private void </span>printDoc_PrintPage(<span style="color: blue;">object </span>sender, <span style="color: #2b91af;">PrintPageEventArgs </span>e)
{
<span style="background: #caffca; color: green;"><span style="background-color: white;"> </span>// Needs a UIElement (visual tree)
</span> e.PageVisual = DirectoriesTreeView;</pre><pre class="code"><span style="background: #caffca; color: green;"><span style="background-color: white;"> </span>// Setting true will ensure PrintPage is called again for subsequent pages
</span> e.HasMorePages = <span style="color: blue;">false</span>;
}</pre>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-24487859903895202152009-11-30T12:18:00.004+00:002009-12-02T09:37:32.258+00:00Five Minute Silverlight 4 Aides-Memoire #1 – Drag and Drop<p>Build a hierarchical treeview of files and directories dropped from a Windows Explorer window. Requires elevated trust running out of browser to avoid security exceptions when accessing the directory information in the FileInfo objects returned from the e.Data.GetData call.</p><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijvjkJRkRF3UnOD_IIfA630aqAAVIMg99vgWI6NM5uyqH8569_k62f0FqdVnW83w936yDhcybCx3W7QVYOkE4tDUsHCdQm1MWO3u3mQIgQwTIXr4e0OZdAhGhC1hsvcwn9-bTZ/s1600-h/image7.png"><img title="image" style="BORDER-TOP-WIDTH: 0px; DISPLAY: inline; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="526" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf9qBKhaiX6882sOQ9UwNyvmDSjGw7UlZvFR4TDxeOWH9iQQvAO-z7rRhXev9WRQbMtZuS_yOIlKNNTGysJdSJwXO9pM_ec4-LbvkZGd33fBK9T4n7-cLDNlbZaUHamop4WEfo/?imgmax=800" width="440" border="0" /></a></p><pre class="csharpcode"><span class="kwrd"></span></pre><br /><br /><pre class="code"><span style="color:blue;"><</span><span style="color:#a31515;">Grid </span><span style="color:red;">x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="LayoutRoot" </span><span style="color:red;">AllowDrop</span><span style="color:blue;">="True" </span><span style="color:red;">Drop</span><span style="color:blue;">="LayoutRoot_Drop"><br /> <</span><span style="color:#a31515;">my</span><span style="color:blue;">:</span><span style="color:#a31515;">TreeView </span><span style="color:red;">x</span><span style="color:blue;">:</span><span style="color:red;">Name</span><span style="color:blue;">="DirectoriesTreeView" </span><span style="color:red;">Margin</span><span style="color:blue;">="50" </span><span style="color:red;">Width</span><span style="color:blue;">="500" /><br /></</span><span style="color:#a31515;">Grid</span><span style="color:blue;">></span></pre><br /><pre class="code"><span style="color:blue;"></span><span style="color:blue;">private void </span>LayoutRoot_Drop(<span style="color:blue;">object </span>sender, <span style="color:#2b91af;">DragEventArgs </span>e)<br />{<br /> <span style="color:blue;">if </span>(!<span style="color:#2b91af;">Application</span>.Current.HasElevatedPermissions e.Data == <span style="color:blue;">null</span>)<br /> <span style="color:blue;">return</span>;<br /><br /> <span style="color:#2b91af;">FileInfo</span>[] fileInfos = e.Data.GetData(<span style="color:#2b91af;">DataFormats</span>.FileDrop) <span style="color:blue;">as </span><span style="color:#2b91af;">FileInfo</span>[];<br /> <span style="color:blue;">if </span>(fileInfos == <span style="color:blue;">null</span>)<br /> <span style="color:blue;">return</span>;<br /> <span style="color:#2b91af;">List</span><<span style="color:#2b91af;">FileInfo</span>> sortedList = <span style="color:blue;">new </span><span style="color:#2b91af;">List</span><<span style="color:#2b91af;">FileInfo</span>>(fileInfos);<br /><br /> sortedList.Sort((x, y) =><br /> {<br /> <span style="color:blue;">if </span>(x.Attributes == <span style="color:#2b91af;">FileAttributes</span>.Directory && y.Attributes != <span style="color:#2b91af;">FileAttributes</span>.Directory)<br /> <span style="color:blue;">return </span>-<span style="color:brown;">1</span>;<br /> <span style="color:blue;">if </span>(y.Attributes == <span style="color:#2b91af;">FileAttributes</span>.Directory && x.Attributes != <span style="color:#2b91af;">FileAttributes</span>.Directory)<br /> <span style="color:blue;">return </span><span style="color:brown;">1</span>;<br /> <span style="color:blue;">return </span>x.Name.CompareTo(y.Name);<br /> });<br /><br /> <span style="color:blue;">foreach </span>(<span style="color:#2b91af;">FileInfo </span>fileInfo <span style="color:blue;">in </span>sortedList)<br /> {<br /> <span style="color:blue;">var </span>newNode = <span style="color:blue;">new </span><span style="color:#2b91af;">TreeViewItem </span>{ Header = fileInfo.Name };<br /> DirectoriesTreeView.Items.Add(newNode);<br /> <span style="color:blue;">if </span>(!fileInfo.Exists)<br /> ProcessDirectory(fileInfo, newNode);<br /> }<br />}</pre><pre class="code"><span style="color:blue;">private static void </span>ProcessDirectory(<span style="color:#2b91af;">FileSystemInfo </span>fileSystemInfo, <span style="color:#2b91af;">TreeViewItem </span>currentNode)<br />{<br /> <span style="color:#2b91af;">DirectoryInfo </span>directoryInfo = <span style="color:blue;">new </span><span style="color:#2b91af;">DirectoryInfo</span>(fileSystemInfo.FullName);<br /><br /> <span style="color:blue;">foreach </span>(<span style="color:#2b91af;">FileSystemInfo </span>childFileSystemInfo <span style="color:blue;">in </span>directoryInfo.EnumerateFileSystemInfos())<br /> {<br /> <span style="color:blue;">var </span>newNode = <span style="color:blue;">new </span><span style="color:#2b91af;">TreeViewItem </span>{ Header = childFileSystemInfo.Name };<br /> currentNode.Items.Add(newNode);<br /> <span style="color:blue;">if </span>(childFileSystemInfo.Attributes == <span style="color:#2b91af;">FileAttributes</span>.Directory)<br /> ProcessDirectory(childFileSystemInfo, newNode);<br /> }<br />}</pre><br /><a href="http://11011.net/software/vspaste"></a><a href="http://11011.net/software/vspaste"></a>Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-37691593202349401782009-11-18T23:41:00.003+00:002009-12-02T09:55:18.610+00:00Silverlight 4Quite unexpectedly, at least I wasn’t expecting it, today saw the announcement of the first <a href="http://silverlight.net/getstarted/silverlight-4-beta/">beta of Silverlight 4</a> at PDC09 in Los Angeles. Barely has version 3 made it out there, but we have a new beta to play with together with another rev of Blend to support it (and .NET 4 in general).<br />
A quick run through the main features in the beta:<br />
<ul><li><strong>Printing</strong> – Full access to the regular print facilities of the host machine – the print dialog and print preview features – so long to all the writable bitmaps and HTML bridge hacks</li>
<li><strong>Webcam/microphone support</strong> – Subject to UAC/user confirmation, you can now programmatically get access to connected devices, capture video, stills and audio input streams</li>
<li><strong>A Rich TextBox control</strong> – the WPF RTF control makes its appearance in Silverlight – embed other UI Elements, control text Runs and other formatting such as Text Decorations</li>
<li><strong>Clipboard Access</strong> – Programmatic access to the clipboard – again subject to UAC</li>
<li><strong>Right Mouse Context Menus</strong> – Full control of a customisable context menu – add whatever you want to it and respond to selection events</li>
<li><strong>Drag-Drop Drop-Target support</strong> Silverlight apps can now act as drag-drop drop-targets receiving file information for the dropped file object(s)</li>
<li><strong>MVVM Commanding – </strong>Finally proper implementation of the ICommand interface – no longer a need to kludge it via bindings to helper classes</li>
<li><strong>IDataErrorInfo/Validation support – </strong>Integration of the support for the IDataErrorInfo interface in Silverlight’s DataBinding giving a validation framework for input controls to leverage in consistently surfacing data input errors with asynchronous data validation</li>
<li><strong>String Formatting in Binding Extensions</strong> – As with WPF, Silverlight has been retrofitted with improved formatting support in the binding extension to give better control over stuff like date, time and other formatting for locales and long and short formatting</li>
<li><strong>Out of Browser improvements: </strong><strong>HTML content</strong> - Hosting of HTML content within the Silverlight app; <strong>Notifications </strong>(aka toast) support; <strong>Elevated Trust </strong>(again via UAC) access to the My Documents, My Videos, My Pictures special folders; <strong>Cross domain access </strong>and <strong>Full keyboard access in Full Screen</strong> mode</li>
<li><strong>Better tooling and integration of RIA/ADO Services/WCF/MEF</strong></li>
</ul>Lots to check out and try out – exciting stuff!Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-49627372704759959862009-08-11T07:26:00.001+01:002009-08-11T07:26:35.471+01:00Five Minute Silverlight 3 Aides-Memoire #5 – Based on Styles<pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">UserControl.Resources</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="ColouredContentControlStyle" </span><span style="color: red">TargetType</span><span style="color: blue">="ContentControl"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Height" </span><span style="color: red">Value</span><span style="color: blue">="30" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Width" </span><span style="color: red">Value</span><span style="color: blue">="100" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Margin" </span><span style="color: red">Value</span><span style="color: blue">="10" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="FontFamily" </span><span style="color: red">Value</span><span style="color: blue">="Verdana" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="FontSize" </span><span style="color: red">Value</span><span style="color: blue">="14" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="FontStyle" </span><span style="color: red">Value</span><span style="color: blue">="Italic" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="ColouredCheckBoxStyle" </span><span style="color: red">BasedOn</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">ColouredContentControlStyle</span><span style="color: blue">}" </span><span style="color: red">TargetType</span><span style="color: blue">="CheckBox"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Width" </span><span style="color: red">Value</span><span style="color: blue">="154" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="RedButtonStyle" </span><span style="color: red">BasedOn</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">ColouredContentControlStyle</span><span style="color: blue">}" </span><span style="color: red">TargetType</span><span style="color: blue">="Button"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Red" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="GreenButtonStyle" </span><span style="color: red">BasedOn</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">ColouredContentControlStyle</span><span style="color: blue">}" </span><span style="color: red">TargetType</span><span style="color: blue">="Button"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Green" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="YellowCheckBoxStyle" </span><span style="color: red">BasedOn</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">ColouredCheckBoxStyle</span><span style="color: blue">}" </span><span style="color: red">TargetType</span><span style="color: blue">="CheckBox"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Yellow" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="OrangeRadioButtonStyle" </span><span style="color: red">BasedOn</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">ColouredContentControlStyle</span><span style="color: blue">}" </span><span style="color: red">TargetType</span><span style="color: blue">="RadioButton"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Orange" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Width" </span><span style="color: red">Value</span><span style="color: blue">="190" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="FontWeight" </span><span style="color: red">Value</span><span style="color: blue">="Bold" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> </</span><span style="color: #a31515">UserControl.Resources</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="LayoutRoot"><br /> <</span><span style="color: #a31515">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5,1" </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5,0"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Black" </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">="White" </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">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">StackPanel </span><span style="color: red">Orientation</span><span style="color: blue">="Vertical" </span><span style="color: red">Margin</span><span style="color: blue">="20"><br /> <</span><span style="color: #a31515">Button </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">RedButtonStyle</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Red Button" /><br /> <</span><span style="color: #a31515">CheckBox </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">YellowCheckBoxStyle</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Yellow CheckBox" /><br /> <</span><span style="color: #a31515">RadioButton </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">OrangeRadioButtonStyle</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Orange RadioButton" /><br /> <</span><span style="color: #a31515">Button </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">GreenButtonStyle</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Green Button" /><br /> </</span><span style="color: #a31515">StackPanel</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Grid</span><span style="color: blue">><br /></span></pre><br /><br /><p><a href="http://lh5.ggpht.com/_E_ZM9Y7o2Ow/SoEPFRqyF3I/AAAAAAAAAEY/oqAPdmtSGxE/s1600-h/FiveMinuteSilverlight3_53.png"><img style="border-right-width: 0px; margin: 30px 0px 0px 30px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="FiveMinuteSilverlight3_5" border="0" alt="FiveMinuteSilverlight3_5" src="http://lh4.ggpht.com/_E_ZM9Y7o2Ow/SoEPGSB17LI/AAAAAAAAAEc/gXWp0K09PQ8/FiveMinuteSilverlight3_5_thumb1.png?imgmax=800" width="308" height="284" /></a> <a href="http://11011.net/software/vspaste"></a></p> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-89414591959462111152009-08-11T07:25:00.001+01:002009-08-11T07:25:26.976+01:00Five Minute Silverlight 3 Aides-Memoire #4 – Merged Resource Dictionaries<p><strong>ButtonStyles.xaml:</strong></p> <pre class="code"><span style="color: blue"><</span><span style="color: #a31515">ResourceDictionary <br /> </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="ButtonsStyles" <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 /> ><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="RedButton" </span><span style="color: red">TargetType</span><span style="color: blue">="Button"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Red" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Height" </span><span style="color: red">Value</span><span style="color: blue">="30" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Width" </span><span style="color: red">Value</span><span style="color: blue">="100" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Margin" </span><span style="color: red">Value</span><span style="color: blue">="10" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="GreenButton" </span><span style="color: red">TargetType</span><span style="color: blue">="Button"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Green" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Height" </span><span style="color: red">Value</span><span style="color: blue">="30" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Width" </span><span style="color: red">Value</span><span style="color: blue">="100" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Margin" </span><span style="color: red">Value</span><span style="color: blue">="10" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /></</span><span style="color: #a31515">ResourceDictionary</span><span style="color: blue">><br /></span></pre><br /><br /><p><strong>CheckBoxStyles.xaml:</strong></p><br /><a href="http://11011.net/software/vspaste"></a><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">ResourceDictionary <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">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="CheckBoxStyles"<br /> ><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="YellowCheckBox" </span><span style="color: red">TargetType</span><span style="color: blue">="CheckBox"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Yellow" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Height" </span><span style="color: red">Value</span><span style="color: blue">="30" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Margin" </span><span style="color: red">Value</span><span style="color: blue">="10" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Style </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">="OrangeCheckBox" </span><span style="color: red">TargetType</span><span style="color: blue">="CheckBox"><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Foreground" </span><span style="color: red">Value</span><span style="color: blue">="Orange" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Height" </span><span style="color: red">Value</span><span style="color: blue">="30" /><br /> <</span><span style="color: #a31515">Setter </span><span style="color: red">Property</span><span style="color: blue">="Margin" </span><span style="color: red">Value</span><span style="color: blue">="10" /><br /> </</span><span style="color: #a31515">Style</span><span style="color: blue">><br /></</span><span style="color: #a31515">ResourceDictionary</span><span style="color: blue">><br /></span></pre><br /><br /><p><strong>MainPage.xaml:</strong></p><br /><a href="http://11011.net/software/vspaste"></a><br /><br /><pre class="code"><span style="color: blue"><</span><span style="color: #a31515">UserControl.Resources</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ResourceDictionary</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ResourceDictionary.MergedDictionaries</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ResourceDictionary </span><span style="color: red">Source</span><span style="color: blue">="ButtonStyles.xaml" /><br /> <</span><span style="color: #a31515">ResourceDictionary </span><span style="color: red">Source</span><span style="color: blue">="CheckBoxStyles.xaml" /><br /> </</span><span style="color: #a31515">ResourceDictionary.MergedDictionaries</span><span style="color: blue">><br /> </</span><span style="color: #a31515">ResourceDictionary</span><span style="color: blue">><br /></</span><span style="color: #a31515">UserControl.Resources</span><span style="color: blue">><br /><</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="LayoutRoot"><br /> <</span><span style="color: #a31515">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5,1" </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5,0"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Black" </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">="White" </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">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">StackPanel </span><span style="color: red">Orientation</span><span style="color: blue">="Horizontal"><br /> <</span><span style="color: #a31515">Button </span><span style="color: red">Grid.Row</span><span style="color: blue">="0" </span><span style="color: red">Grid.Column</span><span style="color: blue">="0" </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">RedButton</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Red Button" /><br /> <</span><span style="color: #a31515">Button </span><span style="color: red">Grid.Row</span><span style="color: blue">="0" </span><span style="color: red">Grid.Column</span><span style="color: blue">="1" </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">GreenButton</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Green Button" /><br /> <</span><span style="color: #a31515">CheckBox </span><span style="color: red">Grid.Row</span><span style="color: blue">="1" </span><span style="color: red">Grid.Column</span><span style="color: blue">="0" </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">YellowCheckBox</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Yellow CheckBox" /><br /> <</span><span style="color: #a31515">CheckBox </span><span style="color: red">Grid.Row</span><span style="color: blue">="1" </span><span style="color: red">Grid.Column</span><span style="color: blue">="1" </span><span style="color: red">Style</span><span style="color: blue">="{</span><span style="color: #a31515">StaticResource </span><span style="color: red">OrangeCheckBox</span><span style="color: blue">}" </span><span style="color: red">Content</span><span style="color: blue">="Orange CheckBox" /><br /> </</span><span style="color: #a31515">StackPanel</span><span style="color: blue">><br /></</span><span style="color: #a31515">Grid</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fdmVHhCiz27FUa7l3PCwF4rAVN9zM8AJJj9A7l5BFWM2bIY4R-gWMnTKN8u3YGjJ_YNLX60Uz5rzQWXaVelXwjZvSa3f09SSnXQg67aKWnthHQ1is8t61xYn1GKBYr_Xhm2H/s1600-h/FiveMinuteSilverlight3_43.png"><img style="border-right-width: 0px; margin: 30px 0px 0px 30px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="FiveMinuteSilverlight3_4" border="0" alt="FiveMinuteSilverlight3_4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-5GmxQfqpypzsrQqAfLDXdcaYqVGNeU5W3xHCx9SEjB1ln2dSRmX9aPqKOU6xFSy2b-4jqtlLB8LvXnQoLX2IRsYOGJV3Roan7pF6zg9cOZVYWogmuTlaMeNA5KXygsJlC4jk/?imgmax=800" width="519" height="137" /></a> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-4137141322420651172009-08-06T20:36:00.001+01:002009-08-06T20:36:39.207+01:00Five Minute Silverlight 3 Aides-Memoire #3 – Element-to-element binding<p></p> <pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="LayoutRoot"><br /> <</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: blue">><br /> <</span><span style="color: #a31515">RowDefinition </span><span style="color: red">Height</span><span style="color: blue">="*" /><br /> <</span><span style="color: #a31515">RowDefinition </span><span style="color: red">Height</span><span style="color: blue">="40" /><br /> </</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Grid.ColumnDefinitions</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ColumnDefinition </span><span style="color: blue">/><br /> <</span><span style="color: #a31515">ColumnDefinition </span><span style="color: blue">/><br /> </</span><span style="color: #a31515">Grid.ColumnDefinitions</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5,1" </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5,0"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Black" </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">="White" </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">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Image </span><span style="color: red">Grid.Column</span><span style="color: blue">="0" </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">="Left" </span><span style="color: red">Margin</span><span style="color: blue">="50,50,0,0" </span><span style="color: red">Width</span><span style="color: blue">="200" </span><span style="color: red">Height</span><span style="color: blue">="200" </span><span style="color: red">Source</span><span style="color: blue">="OpenfeatureLizardSquare.jpg"><br /> <</span><span style="color: #a31515">Image.Projection</span><span style="color: blue">><br /> <</span><span style="color: #a31515">PlaneProjection </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="ImagePlaneProjection"/><br /> </</span><span style="color: #a31515">Image.Projection</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Image</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Slider </span><span style="color: red">Value</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">RotationX</span><span style="color: blue">, </span><span style="color: red">Mode</span><span style="color: blue">=TwoWay, </span><span style="color: red">ElementName</span><span style="color: blue">=ImagePlaneProjection}" </span><span style="color: red">Grid.Row</span><span style="color: blue">="1" </span><span style="color: red">Grid.Column</span><span style="color: blue">="0" </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="XSlider" </span><span style="color: red">Minimum</span><span style="color: blue">="-360" </span><span style="color: red">Maximum</span><span style="color: blue">="360" </span><span style="color: red">Margin</span><span style="color: blue">="50,10" /><br /> <</span><span style="color: #a31515">Slider </span><span style="color: red">Value</span><span style="color: blue">="{</span><span style="color: #a31515">Binding </span><span style="color: red">RotationY</span><span style="color: blue">, </span><span style="color: red">Mode</span><span style="color: blue">=TwoWay, </span><span style="color: red">ElementName</span><span style="color: blue">=ImagePlaneProjection}" </span><span style="color: red">Grid.Row</span><span style="color: blue">="1" </span><span style="color: red">Grid.Column</span><span style="color: blue">="1" </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="YSlider" </span><span style="color: red">Minimum</span><span style="color: blue">="-360" </span><span style="color: red">Maximum</span><span style="color: blue">="360" </span><span style="color: red">Margin</span><span style="color: blue">="50,10" /><br /> </</span><span style="color: #a31515">Grid</span><span style="color: blue">><br /></span></pre><br /><a href="http://11011.net/software/vspaste"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMRLItnWhjyo0kivEJEZ8RmRNP3wVHeWsFKJO35Ve_KztS3jDXlJciE4HADli-CVaQAB_kzesil60pQ_qAo1I9A1_ujxMpf9SzZuNrbxHDPp_Z-mxmeJXyZdd8Ik-ZiJhyKrG/s1600-h/FiveMinuteSilverlight3_33.png"><img style="border-right-width: 0px; margin: 30px 0px 0px 30px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="FiveMinuteSilverlight3_3" border="0" alt="FiveMinuteSilverlight3_3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD6f7XXUqDqOiVf8ukoMsxPh4f4B3RXnA6hWZD1Fcn0bzwMm9LLZnlRm2oY5YqFnp3PVLJr0JwpnjZ1kG0YDMg2VhGRsrOY8dzMGDTZ_-kAg2YTILU2s2RXKBEeK98lq0P3cDp/?imgmax=800" width="426" height="291" /></a> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-49146748419080190522009-08-05T21:16:00.001+01:002009-08-05T21:18:04.919+01:00Five Minute Silverlight 3 Aides-Memoire #2 – Pixel Effects<pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="LayoutRoot"><br /> <</span><span style="color: #a31515">Grid.ColumnDefinitions</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ColumnDefinition </span><span style="color: blue">/><br /> <</span><span style="color: #a31515">ColumnDefinition </span><span style="color: blue">/><br /> </</span><span style="color: #a31515">Grid.ColumnDefinitions</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5,1" </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5,0"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Black" </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">="White" </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">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Image </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">="Left" </span><span style="color: red">Grid.Column</span><span style="color: blue">="0" </span><span style="color: red">Margin</span><span style="color: blue">="50,50,0,0" </span><span style="color: red">Width</span><span style="color: blue">="200" </span><span style="color: red">Height</span><span style="color: blue">="200" </span><span style="color: red">Source</span><span style="color: blue">="OpenfeatureLizardSquare.jpg"><br /> <</span><span style="color: #a31515">Image.Effect</span><span style="color: blue">><br /> <</span><span style="color: #a31515">BlurEffect </span><span style="color: red">Radius</span><span style="color: blue">="15"/><br /> </</span><span style="color: #a31515">Image.Effect</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Image</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Image </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">="Left" </span><span style="color: red">Grid.Column</span><span style="color: blue">="1" </span><span style="color: red">Margin</span><span style="color: blue">="50,50,0,0" </span><span style="color: red">Width</span><span style="color: blue">="200" </span><span style="color: red">Height</span><span style="color: blue">="200" </span><span style="color: red">Source</span><span style="color: blue">="OpenfeatureLizardSquare.jpg"><br /> <</span><span style="color: #a31515">Image.Effect</span><span style="color: blue">><br /> <</span><span style="color: #a31515">DropShadowEffect </span><span style="color: red">ShadowDepth</span><span style="color: blue">="10"/><br /> </</span><span style="color: #a31515">Image.Effect</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Image</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Grid</span><span style="color: blue">><br /></span></pre><br /><a href="http://11011.net/software/vspaste"></a><a href="http://lh6.ggpht.com/_E_ZM9Y7o2Ow/SnnohVhfgYI/AAAAAAAAAEA/LPVgHC6hfOg/s1600-h/FiveMinuteSilverlight3_2%5B5%5D.png"><img style="border-right-width: 0px; margin: 30px 0px 0px 30px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="FiveMinuteSilverlight3_2" border="0" alt="FiveMinuteSilverlight3_2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvqRcjkQfYfYrlXjbid3dlViraguqgrDmP2Dk1qzidNfFANRcqxHelXjPmli7gkjQ98Y3XkMtOVlMAERdNNSXnIPAPvJdDHHX2g06riYCrbk5HLxXIlF8I5lssAYnQtt-xl79/?imgmax=800" width="599" height="279" /></a> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0tag:blogger.com,1999:blog-6938791.post-34635007691816504362009-08-05T21:04:00.001+01:002009-08-05T21:04:18.398+01:00Five Minute Silverlight 3 Aides-Memoire #1 – 3D Projection<p></p> <pre class="code"> <span style="color: blue"><</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">="LayoutRoot"><br /> <</span><span style="color: #a31515">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">LinearGradientBrush </span><span style="color: red">EndPoint</span><span style="color: blue">="0.5,1" </span><span style="color: red">StartPoint</span><span style="color: blue">="0.5,0"><br /> <</span><span style="color: #a31515">GradientStop </span><span style="color: red">Color</span><span style="color: blue">="Black" </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">="White" </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">Grid.Background</span><span style="color: blue">><br /> <</span><span style="color: #a31515">Image </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">="Left" </span><span style="color: red">Margin</span><span style="color: blue">="50,50,0,0" </span><span style="color: red">Width</span><span style="color: blue">="200" </span><span style="color: red">Height</span><span style="color: blue">="200" </span><span style="color: red">Source</span><span style="color: blue">="OpenfeatureLizardSquare.jpg"><br /> <</span><span style="color: #a31515">Image.Projection</span><span style="color: blue">><br /> <</span><span style="color: #a31515">PlaneProjection </span><span style="color: red">RotationX</span><span style="color: blue">="-25" </span><span style="color: red">RotationY</span><span style="color: blue">="45"/><br /> </</span><span style="color: #a31515">Image.Projection</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Image</span><span style="color: blue">><br /> </</span><span style="color: #a31515">Grid</span><span style="color: blue">><br /></span></pre><br /><a href="http://11011.net/software/vspaste"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnyaW2lltL2ME22OCn-d0YaRsuQ0RJps8c6VnufVUI_F0buaoQ7Q7SVhK1TBZeZcipSEVDL22dnVH7Q2zSOjmLjpZcoRTd3O7VXX2TbP-ppb_CTmQSlI8FjuNGD2A08pjr2Gz/s1600-h/FiveMinuteSilverlight3_1%5B2%5D.png"><img style="border-bottom: 0px; border-left: 0px; margin: 30px 0px 0px 30px; display: inline; border-top: 0px; border-right: 0px" title="FiveMinuteSilverlight3_1" border="0" alt="FiveMinuteSilverlight3_1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgUFDm1MuAfhm6jJtN3HXX5g_1Fd4OlCfLmnHRkZFhqMwTbU2SJzN0DGipSP6YWQRbmwujJd4HlOku_N7b3Ps-OvMTh7aj06X9fEnb_duXFIk4hRwtGuPPp6NuzaI3fe1MS2C/?imgmax=800" width="244" height="244" /></a> Joan Miro (aka Gordon Mackie)http://www.blogger.com/profile/10154076207056707301noreply@blogger.com0