tag:blogger.com,1999:blog-17008664540330695912024-03-13T16:07:54.525+01:00Anders @ WorkSilverlight, WPF and other work related stuff.Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.comBlogger33125tag:blogger.com,1999:blog-1700866454033069591.post-41701818736046663982009-10-16T08:06:00.002+02:002009-10-16T08:13:44.010+02:00Öredev 2009, 2-6 November in MalmöDon't miss the Öredev developer conference in Malmö this year! A lot of interesting <a href="http://518.nu/Prod/Oredev/site.nsf/Alldocuments/946A9E39B28EF9E1C12575A60026DB86">sessions</a>, <a href="http://518.nu/Prod/Oredev/site.nsf/AllDocuments/916ED493B1B54D3AC12575C800374E4E">tutorials</a>, <a href="http://518.nu/Prod/Oredev/site.nsf/AllDocuments/2C6EFFC01183D768C12575C5004B10F7">courses</a> and it's also a forum for meeting other people in the community! I'm looking forward to listen to Bea Stollnitz (Costa);<br /><div class="unit size2of5"><h3><a href="http://oredev.org/prod/oredev/site.nsf/docsbycodename/session?opendocument&sid=57B48CB723C48AA5C12575970012CBEE&day=4&track=5EA1ADD99261C8A5C12575A500494952">Advanced features for line-of-business applications in Silverlight and WPF</a></h3><p> </p><p><span>The latest versions of Silverlight and WPF make it easier than ever to create compelling user interfaces. This presentation will cover advanced topics of these frameworks, with a special focus on features relevant to business applications. You will gain a solid understanding of virtualization, data validation, and other advanced areas that are sure to increase your productivity and effectiveness.</span><br /></p> </div> <br />and her husband Eric Stollnitz;<br /><br /><div class="unit size2of5"><h3><a href="http://oredev.org/prod/oredev/site.nsf/docsbycodename/session?opendocument&sid=423238637D5DFE8CC12575970014A858&day=3&track=BD3C09484C257950C12575A500497688">Interactive Visualizations from Microsoft Research</a></h3><p> </p><p>Today’s software can display information in ways we only dreamed of just five or ten years ago.<span> </span>We’ll look at some of the ways Microsoft Research is contributing to these advances, including projects like Photosynth, Image Composite Editor, HD View, and WorldWide Telescope.<span> </span>We'll see how developers can use similar visualization techniques and take advantage of technologies like Virtual Earth’s Silverlight map control, Silverlight’s Deep Zoom feature, and WPF’s Direct3D integration.</p><p><a href="http://oredev.org/">See you there?! http://oredev.org/</a><br /></p></div> <h3><br /></h3>Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-9311926982041428152009-08-06T08:40:00.003+02:002009-08-06T08:51:05.357+02:00Multiple instances of Conime.exe in theTask Manager when compiling in Viusal Studio.This post will be about Visual Studio creating a lot of conime.exe processes and also a fix to the problem.<br /><br />Today I found a bug when working with one of my projects in Visual Studio 2008 Sp1. After running the studio for a while a lot of conime.exe processes appeared in the Task Manager. After some research I found out that sometimes when I compiled my solution (6 projects) a new instance of the process appeared. The process is a Windows process that is used for asian languages, but I'm using a swedish/english system.<br />I asked google for a solution and found out that there could be a tojan that caused this. But no, not in my case. I also found other persons having the same problem and also one person that recommended disabling conime.exe for consoles and that solved the problem for now. (Source: http://www.neowin.net/forum/index.php?showtopic=621035)<br /><br />1. Start regedit (Windows key + R, then type regedit)<br />2. Browse to HKEY_CURRENT_USER/Console<br />3. There you will find a value called LoadConIme, set this value to 0.Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-79024792312416878082009-05-28T13:18:00.013+02:002009-05-28T15:02:54.986+02:00En första titt på Visual Studio 2010<p><span style="font-size:85%;">This post will follow in Swedish.</span><br />Denna post handlar om min första titt på Visual Studio 2010 Beta 1 tillsammans med Silverlight (2.0 och 3.0).<br /><br />Min nyfikenhet har fått ett slut. Jag kavlade imorse upp ärmarna och installerade följande:<br /><a href="http://www.microsoft.com/downloads/details.aspx?familyid=28C97D22-6EB8-4A09-A7F7-F6C7A1F000B5&displaylang=en">Virtual PC </a>(hade jag i och för sig redan installerat)<br /><a href="http://www.microsoft.com/windows/windows-7/download.aspx">Windows 7 RC</a><br /><a href="http://www.microsoft.com/downloads/details.aspx?familyid=3296BB4F-D8BA-4CFD-AA95-A424C5913F6B&displaylang=en">Visual Studio 2010 Beta 1 </a>tillsammans med .NET 4.0<br /><a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=8D933343-038F-499C-986C-C3C7E87A60B3&displaylang=en">Silverlight 2.0 SDK</a><br /><a href="http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=d09b6ecf-9a45-4d99-b752-2a330a937bc4">Silverlight 3.0 Beta SDK</a><br /><a href="http://go.microsoft.com/fwlink/?LinkID=143433">Silverlight 3.0 Beta Developer Runtime</a><br /><a href="http://www.microsoft.com/expression/try-it/blendpreview.aspx">Expression Blend 3.0 Preview</a><br />+ andra nyttiga program som FireFox, Notepad++, antivirusprogram, Paint.NET </p><p align="left"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 320px; DISPLAY: block; HEIGHT: 240px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340838295210554274" border="0" alt="" src="http://1.bp.blogspot.com/_bX7ZN-r674g/Sh54IezT86I/AAAAAAAAAU8/4eYiaUBkW-M/s320/Windows7RC.jpg" />Installationen tar en liten stund men till slut kunde jag kicka igång Visual Studio 2010 för första gången och det man ser är följande (jag valde inställningar för utvecklingsmiljön för C#-utveckling):<br /><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 320px; DISPLAY: block; HEIGHT: 247px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340839909766981442" border="0" alt="" src="http://1.bp.blogspot.com/_bX7ZN-r674g/Sh55mdfj50I/AAAAAAAAAVU/-ZnZveXZqRM/s320/visualstudio2010.jpg" /> Det är en trevlig syn med delvis ett nytt gränssnitt. Jag känner igen mig men ser ändå en del detaljer som är nya, antagligen kommer jag upptäcka mer och mer som är nytt. Mitt första mål var att testa Silverlight 3 utveckling. <a href="http://timheuer.com/">Tim Heuer</a> har skrivit ett väldigt bra<a href="http://timheuer.com/blog/archive/2009/05/20/silverlight-and-visual-studio-2010-beta.aspx"> inlägg </a>hur man kan köra multitargeting (både Silverlight 2.0 och 3.0 Beta) från Visual Studio 2010.</p><p align="left">Det första jag gjorde var att skapa ett nytt projekt och valde där en ny Silverligh-applikation:</p><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 320px; DISPLAY: block; HEIGHT: 221px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340851629276280914" border="0" alt="" src="http://3.bp.blogspot.com/_bX7ZN-r674g/Sh6EQoEUOFI/AAAAAAAAAVc/vEm4TY-I4eA/s320/vs10_1.jpg" />När projektet skapas väljer man inte vilken Silverlight-version man vill rikta sig mot utan det görs först i nästa dialog:<br /><br /><a href="http://2.bp.blogspot.com/_bX7ZN-r674g/Sh6EanRHG6I/AAAAAAAAAVk/R5YUPlU3N3o/s1600-h/vs10_2.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 320px; DISPLAY: block; HEIGHT: 294px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340851800860203938" border="0" alt="" src="http://2.bp.blogspot.com/_bX7ZN-r674g/Sh6EanRHG6I/AAAAAAAAAVk/R5YUPlU3N3o/s320/vs10_2.jpg" /></a>Här väljer man alltså om man vill skapa ett nytt webb-projekt som ska visa Silverlight-applikationen samt vilken Silverlight-version som ska användas (det går även att ändra i projektproperties senare). Jag väljer att skapa ett webbprojekt och riktar mig mot Silverlight v3.0. Gillar verkligen att man kan rikta sig mot olika Silverlight-versioner. Tidigare har det kanske inte funnits så stort behov av det eftersom Silverlight 2.0 i princip varit den enda vettiga versionen, men nu med Silveright 3.0 Betan så är det bra att kunna rikta sig mot olika versioner (notera att Silverlight 3.0 ändå är bakåtkompatibel med 2.0!).<br />De filer som genereras hittar vi i Solution Explorern. Här brukar jag vanligtvis städa upp lite i webbprojektet genom att ta bort Default.aspx, ta bort [SilverlightProjektNamn]TestPage.aspx och sätta [SilverlightProjektNamn]TestPage.html till startsida genom att högerklicka och välja Set As Start Page. Genast slänger jag in lite komponenter för att se vad som händer:<br /><br /><a href="http://4.bp.blogspot.com/_bX7ZN-r674g/Sh6EgOzvFNI/AAAAAAAAAVs/_J-LydnzlUk/s1600-h/vs10_3.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 307px; DISPLAY: block; HEIGHT: 320px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340851897373758674" border="0" alt="" src="http://4.bp.blogspot.com/_bX7ZN-r674g/Sh6EgOzvFNI/AAAAAAAAAVs/_J-LydnzlUk/s320/vs10_3.jpg" /></a>Tyvärr måste jag säga att jag inte riktigt gillar den visuella designern i Visual Studio (tips är att använda Expression Blend för visuell design). "Som vanligt" crashar designern i Visual Studio stup i kvarten och man får ladda om den för att se något. I Visual Studio 2008 stängde jag av designervyn för XAML helt och hållet för att jag tyckte den var så kass. Jag hoppas verkligen att den blir bättre i den skarpa versionen av VS2010.<br /><br /><a href="http://4.bp.blogspot.com/_bX7ZN-r674g/Sh6EoYNufeI/AAAAAAAAAV0/h1DlXFIia8o/s1600-h/vs10_4.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 312px; DISPLAY: block; HEIGHT: 320px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340852037337644514" border="0" alt="" src="http://4.bp.blogspot.com/_bX7ZN-r674g/Sh6EoYNufeI/AAAAAAAAAV0/h1DlXFIia8o/s320/vs10_4.jpg" /></a>Men jag måste säga att jag älskar och är imponerad av intellisensen i VS2010! En väldigt användbar förbättring är att vi nu får hjälp när vi ska knåpa ihop våra bindningar (eller andra MarkupExtensions som StaticResource):<br /><br /><a href="http://2.bp.blogspot.com/_bX7ZN-r674g/Sh6Euzbav8I/AAAAAAAAAV8/Hv6Ufzq8w1M/s1600-h/vs10_5.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 320px; DISPLAY: block; HEIGHT: 202px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340852147722043330" border="0" alt="" src="http://2.bp.blogspot.com/_bX7ZN-r674g/Sh6Euzbav8I/AAAAAAAAAV8/Hv6Ufzq8w1M/s320/vs10_5.jpg" /></a>Applikationen i sig är bara en stack panel med en knapp, en rektangel och en slider. Dessutom använder den en nyhet i Silverlight 3.0 nämligen Pixel Shader effekter (HW-accelererade). Här har jag bara kopplat ihop slidern med mängden blur (pixel shader) som används på fönstret.<br /><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/SilverlightApplication1%7C_090528.zip"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 320px; DISPLAY: block; HEIGHT: 312px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5340852273693260338" border="0" alt="" src="http://3.bp.blogspot.com/_bX7ZN-r674g/Sh6E2ItS-jI/AAAAAAAAAWE/tzSn9xYOb6Y/s320/vs10_6.jpg" /> Exempelprojekt kan laddas ner här!<br /></a><p align="left">Detta var bara en första titt på Visual Studio 2010 och Silveright, mer kommer inom kort...</p>Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-41377634022418965442008-11-25T09:30:00.001+01:002008-11-25T09:30:55.137+01:00Naming and conventions in XAML<p>I think the naming and code/markup conventions in XAML is a bit unclear. This post will raise some of the issues. <br /><img height="250" src="http://blaugh.com/cartoons/070620_naming_her_skype.gif" width="447" /></p> <p>I <a href="http://silverlight.net/forums/t/52244.aspx" target="_blank">posted</a> a new thread in the Silverlight.net forums about why there is no PART_ convention in Silverlight when this convention exists in WPF. I described the problem like this: </p> <p>"In WPF there is a convention for TemplateElements in controls that distinguishes controls that must exist in a template from other controls. This means that if I edit a control template I know that all elements named PART_* must be in the template and all other parts I can remove or do whatever I like to. </p> <p>When I looked in Silverlight Toolkit and the shipped controls there are no such standard, why? How should the user know which controls that must be in the template? I think it is sad that the framework doesn't look the same in all parts (yes I know that the Silverlight Toolkit is not in the framework, but realize that it will be a template and a teacher for many control developers). Is there a reason?"</p> <p>I did not get a clear answer for why they have made it this way but the replies made me realize that PART_ convention can probably not be entered in the future because this will break the released code. And on the other side, in WPF the PART_ convention can not be removed because that will break the WPF code. I think the problem is that the two so similar frameworks differ in conventions and readability. What about the problem?</p> <p>Yes, I know about the TemplatePart attribute and I know that the functionality does not change because of the naming convention. I think that the problem is that the tools does not use this information today. Tools like Visual Studio and Blend will soon be consuming the attribute but there are a lot of other tools that won't. This brings us to my second opinion.</p> <p>I think this is a usability and design issue. If you read <a href="http://www.amazon.com/Framework-Design-Guidelines-Conventions-Development/dp/0321246756" target="_blank">Framework Design Guidelines (K. Cwalina, B. Abrams)</a> they have an important point when they say that the .NET Framework should "look the same" wherever you are. Therefore I think its a bad thing that Silverlight and WPF differs. A developer should recognize himself/herself when adopting a new area within the framework, and the framework code should be clear and readable. This is not a big issue and maybe I'm whining a little bit too much about this, but I think it is important that we create conventions for markup (XAML) in the same way that we use camelCasing and PascalCasing in e.g. C#. I have seen some unclear naming within the framework (in XAML), are there any conventions for naming and so on and do people use them?</p> <p>Another part that is related to this is how you should name your members in XAML. Your XAML-file are compiled into the same container as the code behind (in the case of a UserControl) and there they will be members of that class. This means that if you name e.g. a Button "MyButton" it will appear as a member of the class with a field name "MyButton". In C# and in standard naming conventions fields should be named with camelCasing which means that the right name for MyButton should be myButton. The same thing for naming resources. Right now the naming is unclear and it differs within Silverlight and WPF and also between XAML and e.g. C#.</p> <p>I think it is sad that Silverlight/WPF differs and I think it is important to create conventions for writing XAML. This is not about the functionality of the code you write, it is about the usability and the experience for the next developer that will read and try to understand your code. What do you think?</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-85092352694305937112008-11-21T21:03:00.004+01:002008-11-21T21:21:12.663+01:00The Misuse of var in .NET - it's bad programming!This post will argue that many .NET developers misuse implicit typing (var) in their programming. I see this more often and I really think this is really, really bad programming. This is why:<br /><img src="http://chamberofsecrets89.files.wordpress.com/2008/01/anger.gif" /><br /><strong>About implicit variables</strong><br />Fist of all, what does the documentation say about var?<br />var keyword[C#]:<br />"Variables that are declared at method scope can have an implicit type var. An implicitly typed local variable is strongly typed just as if you had declared the type yourself, but the compiler determines the type. The following two declarations of i are functionally equivalent: <div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:86be7fc5-de5b-4bd5-89ba-08b80c670e54" style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"></div><pre style="OVERFLOW: auto;color:white;" ><span style="color:#000000;">var i </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#800080;">10</span><span style="color:#000000;">; </span><span style="color:#008000;">//</span><span style="color:#008000;"> implicitly typed</span><span style="color:#008000;"><br /></span><span style="color:#0000ff;">int</span><span style="color:#000000;"> i </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#800080;">10</span><span style="color:#000000;">; </span><span style="color:#008000;">//</span><span style="color:#008000;">explicitly typed</span><span style="color:#008000;"><br /></span><br /></pre><br /><br /><strong>Remarks</strong><br />Overuse of var can make source code less readable for others. It is recommended to use var only when it is necessary, that is, when the variable will be used to store an anonymous type or a collection of anonymous types." Many developers do not read the remarks text and I can also add that if you are looking at var [C#] instead of the var keyword [C#] this warning is less obvious. So when should you use it?<br /><br /><strong>How to use var</strong><br />var is a way of implicitly create a type, an temporary anonymous type. Note that this is not the same as variant in other languages. This means that the variable is still typesafe and can not change its type. For example the variable "i" in var i=10; can not be set to i="foo";. When declaring "i" we will implicitly say that i is an int. var is powerful for example when we use LINQ. It is a way of letting .NET help us create a temporary type for us (it is often temporary since it can only be used for local variables). <div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:e4567843-bf00-44bf-a6d5-8942e8ad759a" style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"></div><pre style="OVERFLOW: auto;color:white;" ><span style="color:#000000;">var somePerson </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> { SomeProperty1 </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#800080;">10</span><span style="color:#000000;">, SomeProperty2 </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#800000;">"</span><span style="color:#800000;">Foo</span><span style="color:#800000;">"</span><span style="color:#000000;"> };<br /><br />var persons1 </span><span style="color:#000000;">=</span><span style="color:#000000;"> from p </span><span style="color:#0000ff;">in</span><span style="color:#000000;"> Person<br /></span><span style="color:#0000ff;">where</span><span style="color:#000000;"> p.Age </span><span style="color:#000000;">==</span><span style="color:#000000;"> </span><span style="color:#800080;">30</span><span style="color:#000000;"><br />select p.Name;<br /><br />var persons2 </span><span style="color:#000000;">=</span><span style="color:#000000;"> from p </span><span style="color:#0000ff;">in</span><span style="color:#000000;"> Person<br /></span><span style="color:#0000ff;">where</span><span style="color:#000000;"> p.Age </span><span style="color:#000000;">==</span><span style="color:#000000;"> </span><span style="color:#800080;">30</span><span style="color:#000000;"><br />select </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> { p.Name, p.Age, p.EyeColor };</span><br /></pre><br /><br />In persons1 the type will be a string (if p.Name is a string) and in persons2 it will be a temporary type containing name, age and eye color. This is a ok syntax and it is also a very powerful feature. Implicit typing can also be used in lambda expressions but sometimes I think it makes the code unreadable. What about my rage against var?<br /><strong></strong><br /><strong>How not to use var!</strong><br />A colleague of mine has a motto that says: "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." In a time where usability and collaboration with people is key features you must write code that anyone can understand and that is self-explaining. Lately I have see more and more misuse of var and here are some examples of misuse: <div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:4ea226a7-49ec-471b-a25f-68b51c254ede" style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"></div><pre style="OVERFLOW: auto;color:white;" ><span style="color:#000000;">var sample1 </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#800080;">10</span><span style="color:#000000;">; </span><span style="color:#008000;">//</span><span style="color:#008000;"> Why not just type int? Maybe I really wanted a double?</span><span style="color:#008000;"><br /></span><span style="color:#000000;">var sample2 </span><span style="color:#000000;">=</span><span style="color:#000000;"> GetPersonName(person); </span><span style="color:#008000;">//</span><span style="color:#008000;"> What will be returned, an object, a string?</span><span style="color:#008000;"><br /></span><span style="color:#000000;">var sample3 </span><span style="color:#000000;">=</span><span style="color:#000000;"> someReference.DoSomethingReallyFancy</span><span style="color:#000000;"><</span><span style="color:#000000;">ReallyStrangeObject</span><span style="color:#000000;">></span><span style="color:#000000;">(); </span><span style="color:#008000;">//</span><span style="color:#008000;"> Same as above!</span><span style="color:#008000;"><br /></span><span style="color:#000000;">var sample4 </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> MyClass(); </span><span style="color:#008000;">//</span><span style="color:#008000;"> Maybe ok?</span><br /></pre><br /><br />The first sample is just stupid and makes the code hard to read. As the comment say, maybe you really wanted a double but forgot the ".0", this can be hard to see in debugging a calculation. In sample2 you really have no clue what type of object the method is returning. Sure you have intellisense but you should NEVER have to use intellisense to read code, maybe you are in an editor without intellisense. Sample3 is the same as sample2 but in a more complex format. I see this a lot and I hate it! Sample4 is not my favorite but it can be ok if you have a really long class name. In this samploe you can see the type in the declaration. I see a small risk here and that is if you refactor sample4 to a factory or some method, then sample4 will be the same as sample2. In this short context these use of var might not seem to ugly, but try a method that only uses var to declare its variables and get all instances from other methods and then do some fancy stuff with it. I promise you that the code will be hard to read bot for you and especially for another developer.<br /><br />I think this use of var is really bad programming and I think that developers that use this type of coding are bad developers writing bad code, so please stop the misuse of var! Please!Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com11tag:blogger.com,1999:blog-1700866454033069591.post-86189525945938561822008-11-19T22:26:00.001+01:002008-11-19T22:26:52.871+01:00Oredev 2008 - First day<p>The first day of Öredev 2008 is at its end and it's really been a great day. I just love the exchange of knowledge and all the people you meet at the conference. Today the highlight were: meeting people, Glenn Block talking about Composite WPF/Silverlight and the keynote speaker Ted Neward talking about "The New Big Thing".</p> <p><a href="http://lh6.ggpht.com/_bX7ZN-r674g/SSSEmK1FM9I/AAAAAAAAAIs/z7UWaGPL9As/s1600-h/oredev2008%5B3%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="50" alt="oredev2008" src="http://lh4.ggpht.com/_bX7ZN-r674g/SSSEmgBVF-I/AAAAAAAAAIw/EDlKPNeLT-M/oredev2008_thumb%5B1%5D.jpg?imgmax=800" width="432" border="0" /></a></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-81718994956548115822008-10-17T08:11:00.001+02:002008-10-17T08:44:21.253+02:00Seminar - Composite WPF<p><a href="http://www.dotway.se" target="_blank">Dotway</a> will present a seminar about <a href="http://msdn.microsoft.com/en-gb/library/cc707819.aspx" target="_blank">Composite WPF</a> in Stockholm, Malmö, Göteborg and Linköping, Sweden. Speaker will be my colleague George Bolsch. Composite WPF, former known as Prism, is a Composite Application Guidance for WPF and is a project from the Microsoft Patters & Practices team. This is a really interesting seminar about building scalable, modular applications in the Windows Presentation Foundation. George has a tremendous knowledge about .NET and is also a member of the Patters & Practices reference team. The seminar is free and you can register by sending an email to one of the addresses below.</p> <p>Linköping 21/10 2008 (07.30-09.30) - linkoping at dotway.se <br />Stockholm 21/10 2008 (17.00-19.00) - stockholm at dotway.se <br />Göteborg 22/10 2008 (07.30-09.30) - goteborg at dotway.se <br />Malmö 23/10 2008 (07.30-09.30) - seminarie at dotway.se </p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-24249032602687954522008-10-08T22:52:00.001+02:002008-10-08T22:52:32.679+02:00Dotway.WPF - A library with WPF controls, effects and panels<p>A <a href="http://www.codeplex.com/dotwaywpf/" target="_blank">first version of a WPF library</a> has been published at <a href="http://www.codeplex.com/" target="_blank">CodePlex</a>. It contains custom controls, pixel shader effects and custom panels. More functionality will be added later. Go to the project site and download source code or only the libraries. You can also download and try the sample application. Example of controls: color picker, editable slider, grayscale effect, pixelate effect, interaction controls, halftoning effect, a auto fitted wrap panel and more. <br /><a href="http://lh3.ggpht.com/bursjoo/SO0djqMLPOI/AAAAAAAAAH4/I3NMFl0TjP8/s1600-h/wpf1%5B2%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="184" alt="wpf1" src="http://lh6.ggpht.com/bursjoo/SO0dkChMjNI/AAAAAAAAAH8/4mJ1g14Bqk0/wpf1_thumb.jpg?imgmax=800" width="244" border="0" /></a>  <br />The sample application with a custom WPF control, a color picker much like the one in Expression Blend.</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com1tag:blogger.com,1999:blog-1700866454033069591.post-74878209781135321202008-09-23T09:09:00.001+02:002008-09-23T09:09:35.988+02:00A Greeting Creator - Silverlight<p>This is a reference to a project on CodePlex. It refers to a Silverlight 2 Beta 2 sample application (with source code) that will show solutions to a set of problems in Silverlight. E.g. creating custom controls, communicating with a WCF service, use replaceable GUI (templating), captcha functionality, creating custom panels, multi templated ListBox.  <br /><a href="http://lh5.ggpht.com/bursjoo/SNiWLahDtRI/AAAAAAAAAHw/kKuqc7XIs2s/s1600-h/greeting0%5B2%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="173" alt="greeting0" src="http://lh5.ggpht.com/bursjoo/SNiWLwGtWSI/AAAAAAAAAH0/xvwZpcMjdfY/greeting0_thumb.jpg?imgmax=800" width="244" border="0" /></a> <br />I hade the privilege to post one of my project at work on CodePlex. It is a Silverlight application where you in edit mode can create a greeting with text, images and magnetic poetry and then send it to your friends or save it to a database. The receiver can then read the message or you can embed your message on a web site. I had a lot of help from <a href="http://www.johannormen.com/blog/" target="_blank">Johan Normén</a> and <a href="http://blogs.msdn.com/robf/" target="_blank">Robert Folkesson</a> in this project. <br /><a href="http://www.codeplex.com/greetingcreator" target="_blank">You find the project here!</a></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-36369898116699734312008-09-21T12:23:00.001+02:002008-09-21T12:28:29.860+02:00Scale, Move and rotate controls in your GUI - WPF<p>In this blog post I will describe and share a custom control in WPF (Windows Presentation Foundation) that you can use to encapsulate other WPF-controls. This control will add functionality so that you can move, rotate and scale your WPF-controls with your mouse. It also adds a control that will rasie an event (Click-event) when clicked. You can download a sample project with the control at the bottom of the page.</p> <p><a href="http://lh6.ggpht.com/bursjoo/SNYgmfMSA2I/AAAAAAAAAHg/gL0AJqBduvU/s1600-h/image%5B2%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="244" alt="image" src="http://lh5.ggpht.com/bursjoo/SNYgmxcP2bI/AAAAAAAAAHk/-7TQk1JVlGI/image_thumb.png?imgmax=800" width="244" border="0" /></a> </p> <p>In the image above the red square is a control that will raise a click-event. The outer gray squares are for rotation and the inner ones are for scaling. In the middle the control can be moved (translated).</p> <p><strong>Background <br /></strong>In a previous post I did this <a href="http://bursjootech.blogspot.com/2008/09/scale-move-and-rotate-controls-in-your.html" target="_blank">control in Silverlight</a>. This is the WPF version and I have made some adjustments and used some other solutions in this version. These will be described below. </p> <p><strong>Problem</strong> <br />Many times when you design an application you do not only want to present information to a user, you also want the user to interact with your program and your controls. Sometimes this interaction involves moving, scaling and rotating an object. I missed a simple control to wrap other controls in that would add this.</p> <p><strong>How does it work? <br /></strong>Feel free to compare this solution with the <a href="http://bursjootech.blogspot.com/2008/09/scale-move-and-rotate-controls-in-your.html" target="_blank">Silverligh version</a>. To start with, this is a control that can be used as a container for other controls. This means that you do not have to modify any other code in your existing controls. This control just adds the ability to interact (move, scale and rotate) with your control. <br />To do this we need a bock of Transforms in our custom control:</p> <div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:941912e3-eada-4d96-9ecc-e60adf36c552" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: none;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000;"><</span><span style="color: #000000;">Grid.RenderTransform</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">TransformGroup</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">ScaleTransform ScaleX</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Scale}</span><span style="color: #800000;">"</span><span style="color: #000000;"> ScaleY</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Scale}</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">RotateTransform Angle</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Angle}</span><span style="color: #800000;">"</span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">TranslateTransform X</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{Binding RelativeSource={RelativeSource TemplatedParent}, Path=X}</span><span style="color: #800000;">"</span><span style="color: #000000;"> Y</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Y}</span><span style="color: #800000;">"</span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">TransformGroup</span><span style="color: #000000;">></span><span style="color: #000000;"><br /></span><span style="color: #000000;"></</span><span style="color: #000000;">Grid.RenderTransform</span><span style="color: #000000;">></span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br />This is the first different to the Silverlight version. In Silverlight we used the PART_-convension and set the ScaleX, Angle etc. in code behind through these variables. We still have dependency properties in code behind but we don't need to have the reference to the Transforms. Instead we use a binding to our properties. The RelativeSource property is something that doesn't exist in Silverlight and therefore we need the PART_-solution in that example. In WPF we can solve the problem by using a binding and in that way we doesn't restrict us as much in the template. It also results in less code in code behind (a lot of code/logic is removed) and that will make this control simpler and easier to maintain. <br /><br />The templates are much the same in WPF/Silverlight. One other difference than the binding is that the VisualStateManager doen't exist in WPF (but I think it will be implmeneted in future versions). I love the VisualStateManager and its separation between control and template. In WPF we instead put all the interaction controls in a Panel and then set the Visibility of that panel in code behind. <br /><br />To get all the interaction working we hook up on mouse events in both our interaction controls (panels) and also in our base the custom control (inherited from ContentControl). When I first translated from Silverlight to WPF the whole control froze after the first interaction. The listeners for mouse event looks like this: <br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:1d112a88-5411-4364-a2ef-166d10a38539" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: auto;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF;">private</span><span style="color: #000000;"> </span><span style="color: #0000FF;">void</span><span style="color: #000000;"> OnScaleControlsMouseLeftButtonDown(</span><span style="color: #0000FF;">object</span><span style="color: #000000;"> sender, MouseButtonEventArgs e)<br />{<br /> _previousPosition </span><span style="color: #000000;">=</span><span style="color: #000000;"> e.GetPosition(</span><span style="color: #0000FF;">this</span><span style="color: #000000;">);<br /> </span><span style="color: #0000FF;">this</span><span style="color: #000000;">.CaptureMouse();<br /> _iteractionMode </span><span style="color: #000000;">=</span><span style="color: #000000;"> InteractionMode.Scaling;<br />}</span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br />We call CaptureMouse() and in Silverlight this will be automatically released then the mouse button is released. In WPF we need to do this manually by setting: <br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:cc07e36f-86ab-40bf-8112-6c31b93770ac" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: auto;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF;">private</span><span style="color: #000000;"> </span><span style="color: #0000FF;">void</span><span style="color: #000000;"> OnControlMouseLeftButtonUp(</span><span style="color: #0000FF;">object</span><span style="color: #000000;"> sender, MouseButtonEventArgs e)<br />{<br /> _iteractionMode </span><span style="color: #000000;">=</span><span style="color: #000000;"> InteractionMode.None;<br /> Mouse.Capture(</span><span style="color: #0000FF;">null</span><span style="color: #000000;">);<br />}</span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br />With Mouse.Capture(null) the mouse will be released. <br /><br />WPF also have more Cursors that we can use. We use more common cursors for moving and sizing which makes the interaction more intuitive. <br /> <br /><a href="http://lh5.ggpht.com/bursjoo/SNYgnT-VPXI/AAAAAAAAAHo/4Mj4CvPrRp0/s1600-h/image%5B5%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="244" alt="image" src="http://lh4.ggpht.com/bursjoo/SNYgnzm-4mI/AAAAAAAAAHs/MiR42VUhn1E/image_thumb%5B1%5D.png?imgmax=800" width="244" border="0" /></a>  <br /><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/TransformInteractionSampleWPF.zip" target="_blank">Code and sample project can be found here.</a> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com4tag:blogger.com,1999:blog-1700866454033069591.post-79260738403365498592008-09-20T11:14:00.005+02:002008-12-06T11:08:32.696+01:00Scale, Move and rotate controls in your GUI - Silverlight<p>In this blog post I will describe and share a custom control in Silverlight 2 that you can use to encapsulate other Silverlight-controls. This control will add functionality so that you can move, rotate and scale your Silverlight-controls with your mouse. It also adds a control that will rasie an event (Click-event) when clicked. You can download a sample project with the control at the bottom of the page.<br /><a href="http://lh6.ggpht.com/bursjoo/SNS-7OHd7UI/AAAAAAAAAHQ/rItdYv3MUyk/s1600-h/image%5B2%5D.png"><img style="border-width: 0px;" alt="image" src="http://lh6.ggpht.com/bursjoo/SNS-7gY_VFI/AAAAAAAAAHU/oK_z6wuE-D4/image_thumb.png?imgmax=800" width="244" border="0" height="122" /></a><br />In the image above the red square is the are that will raise a click-event when pressed. The outer squares at the other corners is controls for rotation and the inner squares are controls for scaling.</p><p><strong>Problem</strong><br />Many times when you design an application you do not only want to present information to a user, you also want the user to interact with your program and your controls. Sometimes this interaction involves moving, scaling and rotating an object. I missed a simple control to wrap other controls in that would add this.</p><p><strong>How does it work?</strong><br />A custom control in Silverlight and WPF is a control that contains some functionality and it is look-less. This means that you can change and switch the presentation of a control by changing its template. The base class chosen for this control is ContentControl and this base class is extremely powerful for encapsulating other controls (the content).<br />The functionality we want in this control is logic for clicking, moving, rotating and scaling. This includes listening to mouse-events of different kinds and the acting on those. What we need is some way of catching these events for the different type of transforms that we want to do. </p><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:f190f7bc-4240-4ed2-83d1-61e5a149029d" style="margin: 0px; padding: 0px; display: inline; float: none;"><pre style="overflow: auto;color:white;"><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Grid x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_TranslateControls</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Transparent</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Cursor</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Hand</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"></</span><span style="color: rgb(0, 0, 0);">Grid</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Grid x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_ClickControls</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Red</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Black</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Cursor</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Arrow</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"></</span><span style="color: rgb(0, 0, 0);">Grid</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Grid x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_RotateControls</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">DimGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Black</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">DimGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Black</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">DimGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Black</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"></</span><span style="color: rgb(0, 0, 0);">Grid</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Grid x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_ScaleControls</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">LightGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">DimGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">LightGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">DimGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">Rectangle Fill</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">LightGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> Stroke</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">DimGray</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"></</span><span style="color: rgb(0, 0, 0);">Grid</span><span style="color: rgb(0, 0, 0);">></span><br /></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><br />The rectangles in the snippet above is only the appearance of the control and since we are listening to events from the panels we can set any look and feel of the clickable areas. Also not that we use the PART_ convention for creating custom controls.<br /><br />In code behind, we add listeners for mousedown events for the different panels and calculates new position, rotation or size when the mouse is moved. The ContentControl contains a TransformGroup with a ScaleTransform, RotateTransform and a TranslateTransform which is the values that we are adjusting.<br /><br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:0e2b8ccd-3761-42ae-a490-e430a50e001e" style="margin: 0px; padding: 0px; display: inline; float: none;"><pre style="overflow: auto;color:white;"><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">TransformGroup</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">ScaleTransform x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_Scale</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">RotateTransform x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_Rotation</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">TranslateTransform x:Name</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PART_Translation</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"></</span><span style="color: rgb(0, 0, 0);">TransformGroup</span><span style="color: rgb(0, 0, 0);">></span><br /></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br />We also have dependency properties that we can bind to in this control. The most beautiful solution for this would be to skip using PART_ for the transform and bind to the properties instead. The problem is that you can not bind to ScaleX, Angle, X etc. and therefore we need to get these parts in code-behind and then set the properties manually.<br /><br />In the sample project below you can see all the mechanisms for this control.<br /><br /><a href="http://lh5.ggpht.com/bursjoo/SNS-71ip07I/AAAAAAAAAHY/J47hgFygZ5s/s1600-h/image%5B5%5D.png"><img style="border-width: 0px;" alt="image" src="http://lh3.ggpht.com/bursjoo/SNS-8Q_V-NI/AAAAAAAAAHc/zu8sxfgMBOw/image_thumb%5B1%5D.png?imgmax=800" width="244" border="0" height="188" /></a><br /><span style="color: rgb(255, 0, 0);">Update 1</span>: The sample code is now updated to Silverlight 2 RTW and I also added an sample of a transformable TextBox and functionality for ZIndex.<br /><span style="color: rgb(255, 0, 0);">Update 2</span>: The sample code has been updated. <a href="profile/02197430750648608332" rel="nofollow">Hal9000Lives</a> pointed out that the calculations for the rotation used the upper left corner as its center point. This has now been changed to use the middple point as center.<br /><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/TransformInteractionSample.zip" target="_blank">Code and sample project can be found here.</a><br /><br /><a href="http://bursjootech.blogspot.com/2008/09/scale-move-and-rotate-controls-in-your_21.html" target="_blank">WPF-version of this control can be found here.</a>Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com12tag:blogger.com,1999:blog-1700866454033069591.post-70156069478239718472008-09-04T14:03:00.002+02:002008-09-04T14:05:35.605+02:00How to use Sessions in WCF and Silverlight (basicHttpBinding)<p>I was writing a WCF Service for a Silverlight application and I needed to use Sessions in my WCF service to store some info. As you know Silverlight 2 (beta 2) only supports basicHttpBinding and therefore we can not use sessions as in wsHttpBinding. I wanted to write something like: </p> <p> </p><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:1b09ce68-1e73-4fba-ac80-9cdf2072bb5a" style="margin: 0px; padding: 0px; display: inline; float: none;"><pre style="overflow: auto; background-color: White;"><div><!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: rgb(0, 0, 0);">HttpContext.Current.Application.Add(</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">MyKey</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">, someInfo);</span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><p></p><p>But HttpContext.Current returned null. After reading some threads in forums I found this workaround, make your WCF Service ASP.NET compatible:<br /><br />1. Put this attribute on your WCF Sevice class: [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]:</p><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:9cf79799-906f-4979-85d9-79817e8cef68" style="margin: 0px; padding: 0px; display: inline; float: none;"><pre style="overflow: auto; background-color: White;"><div><!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: rgb(0, 0, 0);">[AspNetCompatibilityRequirements(RequirementsMode </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> AspNetCompatibilityRequirementsMode.Allowed)]<br /></span><span style="color: rgb(0, 0, 255);">public</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 255);">class</span><span style="color: rgb(0, 0, 0);"> MyService : IMyService<br />{<br /> ...<br />} </span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><p></p><p>2. In your Web.config for your WCF Service project set:</p><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:efdf2bbd-331b-4b82-a24a-0cfcef918a69" style="margin: 0px; padding: 0px; display: inline; float: none;"><pre style="overflow: auto; background-color: White;"><div><!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">system.serviceModel</span><span style="color: rgb(0, 0, 0);">></span><span style="color: rgb(0, 0, 0);"><br /> </span><span style="color: rgb(0, 0, 0);"><</span><span style="color: rgb(0, 0, 0);">serviceHostingEnvironment aspNetCompatibilityEnabled</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">true</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">/></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 0);"></</span><span style="color: rgb(0, 0, 0);">system.serviceModel</span><span style="color: rgb(0, 0, 0);">></span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><p></p><p>This will make HttpContext.Current return something and you can now store your sessions. The difference I found in my solutions from some others is that I had a separate project for my WCF service than my ASP.NET web-project and that made the HttpContext fail.</p><p>Read more here: <a title="https://silverlight.net/forums/p/14175/57586.aspx" href="https://silverlight.net/forums/p/14175/57586.aspx">https://silverlight.net/forums/p/14175/57586.aspx</a></p>Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com1tag:blogger.com,1999:blog-1700866454033069591.post-51277014532721221302008-06-19T15:11:00.001+02:002008-06-19T15:11:35.046+02:00WCF - The type name ServiceReference1 does not exist in the type Namespace.ClassName<p>This is a short blog post about a strange error when adding a WCF service reference. A WCF service was created and I wanted to add a service reference to a client project. I added the reference through Visual Studio and everything went fine until I compiled. Then I got this error: <br />Error    3    The type name 'ServiceReference1' does not exist in the type 'MyWorld.MyWorld' ...\Service References\ServiceReference1\Reference.cs <br /> <br />I found that this is caused by me having the same namespace name as class name (MyWorld.MyWorld = Namespace.ClassName). Change your namespace to a name that is not the same name as your class and this will compile.</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com26tag:blogger.com,1999:blog-1700866454033069591.post-79377787170793333872008-06-13T14:40:00.002+02:002008-09-25T11:07:15.192+02:00Pixel Shader Wave Effect - Hit-testing in WPF Effect<p>In my <a href="http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html" target="_blank">previous post</a> I wrote about a grayscale effect. That effect only changed the color of the GUI. In this post I will describe an effect that will apply a sine-wave effect on a GUI that will displace the controls. The cool thing is that the controls will still work with user interaction. This is quite simple and it is done by implementing an EffectMapping (GeneralTransform) in the ShaderEffect.<br /><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/ShaderEffectMappingSample080613.zip" target="_blank">Download sample project here.</a><br /><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/WaveEffect.dll" target="_blank">Download only WaveEffect.dll here.</a><br /><strong>You must have .NET Framework 3.5 sp1 or later installed for this to work. You also need DirectX SDK installed to be able to compile the pixel shader effect.</strong></p><p><a href="http://lh6.ggpht.com/bursjoo/SFJqopA9qcI/AAAAAAAAAGI/Mp6kNQMGkPU/s1600-h/image%5B2%5D.png"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="244" alt="image" src="http://lh3.ggpht.com/bursjoo/SFJqqNUgJoI/AAAAAAAAAGM/Vr5m7yLAC2M/image_thumb.png?imgmax=800" width="222" border="0" /></a> </p><p>If you are interested in how pixel shaders work in WPF I refer to my previous post about the <a href="http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html" target="_blank">grayscale effect</a>. In this post I will not write much about how pixel shaders work in general, but more about how to interact with a GUI after an effect has been applied. As I mentioned before there are different types of effects. An effect can modify the appearance of a GUI (e.g. grayscale, modify colors or contrast...) or it can apply an effect that will displace the controls from its original positions. The wave effect used in this example is an displacement effect that will apply a simple sine-wave to the GUI. Download the sample project above for source code.</p><p>1. The Sine-Wave Algorithm<br />The algorithm is quite simple and we will use it both in out shader file (HLSL-file) and also in our transform class. This is the math part:<br />Output.Y = Input.Y + (Math.Sin(Input.X * Frequency) * Amplitude);<br />Output.X = Input.X;<br />What is this? Ok, we will have some input, a x-value and a y-value, and then provide some output, a x-value and y-value. Think of them as coordinates in an image. In this example we only modify the y value and therefore the output x will be the same as the input x. We then calculate the y-value by taking the input y and add another value to it. The added value comes from a Sine-calculation meaning that it will be a +/- value. This also means that for a position y we will instead output a position above or below the input value, this will create the wave effect. In the Sine-calculation we have two properties that we can change to modify the appearance of the wave (amplitude and frequency).</p><p>2. WaveEffect : ShaderEffect<br />This is the C#-effect that we use in WPF and XAML. It it the interface toward the pixel shader and the GPU. The difference between this effect and the grayscale effect is that we have overridden a property called EffectMapping:</p><p></p><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:a66a731e-2fb3-4454-a193-ebca61f3fc9a" style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"><pre style="OVERFLOW: auto; BACKGROUND-COLOR: white"><span style="color:#000000;"></span><span style="color:#0000ff;">private</span><span style="color:#000000;"> WaveTransform _waveTransform </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> WaveTransform();<br /></span><span style="color:#0000ff;">protected</span><span style="color:#000000;"> </span><span style="color:#0000ff;">override</span><span style="color:#000000;"> GeneralTransform EffectMapping<br />{<br /></span><span style="color:#0000ff;">get</span><span style="color:#000000;"><br />{<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> _waveTransform;<br />}<br />}<br /></span><br /></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><br />We provide a customized transform class that inherits from GeneralTransform.<br /><br /><p></p><br /><br /><p>3. WaveTransform : GeneralTransform<br /><br />This is out transform class that is associated with our pixel shader (WaveEffect.fx). When we apply the shader, we will displace the controls from their original positions. If we then try to mouse click the control where we see it on screen, we might actually miss is because in the logic of our program it is placed at a different location. The EffectMapping is here to help us. If we implement this mapping of positions, the framework can ask the transform class how the displayed position actually maps to the logical position. It is actually very simple, if the user clicks at screen position x,y, the framework asks the transform-class: -Hey, where is this position in my logical world?<br /><br /><br />Note that we can not create a pixel shader that is created from total random numbers (noise) and at the same time apply interaction logic. In other words, there are a very strong relation between the pixel shader and the transform. First look at our pixel shader:</p><br /><br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:96aea6d0-395c-4901-b678-382a06d0785b" style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"><pre style="OVERFLOW: auto; BACKGROUND-COLOR: white"><span style="color:#000000;">sampler2D implicitInput : register(s0);<br /></span><span style="color:#0000ff;">float</span><span style="color:#000000;"> frequency : register(c0);<br /></span><span style="color:#0000ff;">float</span><span style="color:#000000;"> amplitude : register(c1);<br /><br />float4 main(float2 uv : TEXCOORD) : COLOR<br />{<br />uv.y </span><span style="color:#000000;">=</span><span style="color:#000000;"> uv.y </span><span style="color:#000000;">+</span><span style="color:#000000;"> (sin(uv.x </span><span style="color:#000000;">*</span><span style="color:#000000;"> frequency) </span><span style="color:#000000;">*</span><span style="color:#000000;"> amplitude);<br />float4 color </span><span style="color:#000000;">=</span><span style="color:#000000;"> tex2D(implicitInput, uv);<br /><br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> color;<br />}<br /></span><br /></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><br />And this algorithm corresponds to the algorithm in the following WaveTransform (see TryTransform, TransformBounds):<br /><br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:10513ac6-592c-468c-98ea-e122bcdf7982" style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"><pre style="OVERFLOW: auto; BACKGROUND-COLOR: white"><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">class</span><span style="color:#000000;"> WaveTransform : GeneralTransform, ICloneable<br />{<br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> WaveTransform()<br />{ }<br /><br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">static</span><span style="color:#000000;"> </span><span style="color:#0000ff;">readonly</span><span style="color:#000000;"> DependencyProperty FrequencyProperty </span><span style="color:#000000;">=</span><span style="color:#000000;"> DependencyProperty.Register(</span><span style="color:#800000;">"</span><span style="color:#800000;">Frequency</span><span style="color:#800000;">"</span><span style="color:#000000;">, </span><span style="color:#0000ff;">typeof</span><span style="color:#000000;">(</span><span style="color:#0000ff;">double</span><span style="color:#000000;">), </span><span style="color:#0000ff;">typeof</span><span style="color:#000000;">(WaveTransform), </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> PropertyMetadata(</span><span style="color:#800080;">1.0</span><span style="color:#000000;">), </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> ValidateValueCallback(IsValidFrequency));<br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">double</span><span style="color:#000000;"> Frequency<br />{<br /></span><span style="color:#0000ff;">get</span><span style="color:#000000;"> { </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> (</span><span style="color:#0000ff;">double</span><span style="color:#000000;">)GetValue(FrequencyProperty); }<br /></span><span style="color:#0000ff;">set</span><span style="color:#000000;"> { SetValue(FrequencyProperty, value); }<br />}<br /><br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">static</span><span style="color:#000000;"> </span><span style="color:#0000ff;">bool</span><span style="color:#000000;"> IsValidFrequency(</span><span style="color:#0000ff;">object</span><span style="color:#000000;"> value)<br />{<br /></span><span style="color:#0000ff;">double</span><span style="color:#000000;"> checkValue </span><span style="color:#000000;">=</span><span style="color:#000000;"> (</span><span style="color:#0000ff;">double</span><span style="color:#000000;">)value;<br /><br /></span><span style="color:#0000ff;">if</span><span style="color:#000000;"> (checkValue </span><span style="color:#000000;"><</span><span style="color:#000000;"> </span><span style="color:#800080;">0.0</span><span style="color:#000000;">)<br />{<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> </span><span style="color:#0000ff;">false</span><span style="color:#000000;">;<br />}<br /><br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> </span><span style="color:#0000ff;">true</span><span style="color:#000000;">;<br />}<br /><br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">static</span><span style="color:#000000;"> </span><span style="color:#0000ff;">readonly</span><span style="color:#000000;"> DependencyProperty AmplitudeProperty </span><span style="color:#000000;">=</span><span style="color:#000000;"> DependencyProperty.Register(</span><span style="color:#800000;">"</span><span style="color:#800000;">Amplitude</span><span style="color:#800000;">"</span><span style="color:#000000;">, </span><span style="color:#0000ff;">typeof</span><span style="color:#000000;">(</span><span style="color:#0000ff;">double</span><span style="color:#000000;">), </span><span style="color:#0000ff;">typeof</span><span style="color:#000000;">(WaveTransform), </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> PropertyMetadata(</span><span style="color:#800080;">0.2</span><span style="color:#000000;">), </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> ValidateValueCallback(IsValidAmplitude));<br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">double</span><span style="color:#000000;"> Amplitude<br />{<br /></span><span style="color:#0000ff;">get</span><span style="color:#000000;"> { </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> (</span><span style="color:#0000ff;">double</span><span style="color:#000000;">)GetValue(AmplitudeProperty); }<br /></span><span style="color:#0000ff;">set</span><span style="color:#000000;"> { SetValue(AmplitudeProperty, value); }<br />}<br /><br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">static</span><span style="color:#000000;"> </span><span style="color:#0000ff;">bool</span><span style="color:#000000;"> IsValidAmplitude(</span><span style="color:#0000ff;">object</span><span style="color:#000000;"> value)<br />{<br /></span><span style="color:#0000ff;">double</span><span style="color:#000000;"> checkValue </span><span style="color:#000000;">=</span><span style="color:#000000;"> (</span><span style="color:#0000ff;">double</span><span style="color:#000000;">)value;<br /><br /></span><span style="color:#0000ff;">if</span><span style="color:#000000;"> (checkValue </span><span style="color:#000000;"><</span><span style="color:#000000;"> </span><span style="color:#800080;">0.0</span><span style="color:#000000;">)<br />{<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> </span><span style="color:#0000ff;">false</span><span style="color:#000000;">;<br />}<br /><br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> </span><span style="color:#0000ff;">true</span><span style="color:#000000;">;<br />}<br /><br /></span><span style="color:#0000ff;">private</span><span style="color:#000000;"> </span><span style="color:#0000ff;">bool</span><span style="color:#000000;"> _isInverse </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">false</span><span style="color:#000000;">;<br /></span><span style="color:#0000ff;">private</span><span style="color:#000000;"> </span><span style="color:#0000ff;">bool</span><span style="color:#000000;"> IsInverse<br />{<br /></span><span style="color:#0000ff;">get</span><span style="color:#000000;"> { </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> _isInverse; }<br /></span><span style="color:#0000ff;">set</span><span style="color:#000000;"> { _isInverse </span><span style="color:#000000;">=</span><span style="color:#000000;"> value; }<br />}<br /><br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">override</span><span style="color:#000000;"> GeneralTransform Inverse<br />{<br /></span><span style="color:#0000ff;">get</span><span style="color:#000000;"><br />{<br />WaveTransform newWaveTransform </span><span style="color:#000000;">=</span><span style="color:#000000;"> (WaveTransform)</span><span style="color:#0000ff;">this</span><span style="color:#000000;">.Clone();<br />newWaveTransform.IsInverse </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#000000;">!</span><span style="color:#000000;">IsInverse;<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> newWaveTransform;<br />}<br />}<br /><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><summary></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> Transform a bounding box to/from Sin-wave.<br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"></summary></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><param name="rect"></param></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><returns></returns></span><span style="color:#808080;"><br /></span><span style="color:#000000;"></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">override</span><span style="color:#000000;"> Rect TransformBounds(Rect rect)<br />{<br />Rect boundingBox </span><span style="color:#000000;">=</span><span style="color:#000000;"> rect;<br /><br /></span><span style="color:#0000ff;">if</span><span style="color:#000000;"> (IsInverse)<br />{<br />boundingBox.Y </span><span style="color:#000000;">=</span><span style="color:#000000;"> rect.Y </span><span style="color:#000000;">-</span><span style="color:#000000;"> Amplitude;<br />boundingBox.Height </span><span style="color:#000000;">=</span><span style="color:#000000;"> rect.Height </span><span style="color:#000000;">+</span><span style="color:#000000;"> (</span><span style="color:#800080;">2</span><span style="color:#000000;"> </span><span style="color:#000000;">*</span><span style="color:#000000;"> Amplitude);<br />}<br /></span><span style="color:#0000ff;">else</span><span style="color:#000000;"><br />{<br />boundingBox.Y </span><span style="color:#000000;">=</span><span style="color:#000000;"> rect.Y </span><span style="color:#000000;">+</span><span style="color:#000000;"> Amplitude;<br />boundingBox.Height </span><span style="color:#000000;">=</span><span style="color:#000000;"> rect.Height </span><span style="color:#000000;">-</span><span style="color:#000000;"> (</span><span style="color:#800080;">2</span><span style="color:#000000;"> </span><span style="color:#000000;">*</span><span style="color:#000000;"> Amplitude);<br />}<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> boundingBox;<br />}<br /><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><summary></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> Transform a point to/from the Sin-wave. Use Inverse to get the inverse transformation<br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> of the Sine-wave.<br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"></summary></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><param name="inPoint"></param></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><param name="result"></param></span><span style="color:#008000;"><br /></span><span style="color:#808080;">///</span><span style="color:#008000;"> </span><span style="color:#808080;"><returns></returns></span><span style="color:#808080;"><br /></span><span style="color:#000000;"></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">override</span><span style="color:#000000;"> </span><span style="color:#0000ff;">bool</span><span style="color:#000000;"> TryTransform(Point inPoint, </span><span style="color:#0000ff;">out</span><span style="color:#000000;"> Point result)<br />{<br />result </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> Point();<br /><br /></span><span style="color:#0000ff;">if</span><span style="color:#000000;"> (IsInverse)<br />{<br />result.Y </span><span style="color:#000000;">=</span><span style="color:#000000;"> inPoint.Y </span><span style="color:#000000;">+</span><span style="color:#000000;"> (Math.Sin(inPoint.X </span><span style="color:#000000;">*</span><span style="color:#000000;"> Frequency) </span><span style="color:#000000;">*</span><span style="color:#000000;"> Amplitude);<br />result.X </span><span style="color:#000000;">=</span><span style="color:#000000;"> inPoint.X;<br />}<br /></span><span style="color:#0000ff;">else</span><span style="color:#000000;"><br />{<br />result.Y </span><span style="color:#000000;">=</span><span style="color:#000000;"> inPoint.Y </span><span style="color:#000000;">-</span><span style="color:#000000;"> (Math.Sin(inPoint.X </span><span style="color:#000000;">*</span><span style="color:#000000;"> Frequency) </span><span style="color:#000000;">*</span><span style="color:#000000;"> Amplitude);<br />result.X </span><span style="color:#000000;">=</span><span style="color:#000000;"> inPoint.X;<br />}<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> </span><span style="color:#0000ff;">true</span><span style="color:#000000;">;<br />}<br /><br /></span><span style="color:#0000ff;">protected</span><span style="color:#000000;"> </span><span style="color:#0000ff;">override</span><span style="color:#000000;"> Freezable CreateInstanceCore()<br />{<br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> WaveTransform();<br />}<br /><br /></span><span style="color:#0000ff;">protected</span><span style="color:#000000;"> </span><span style="color:#0000ff;">override</span><span style="color:#000000;"> </span><span style="color:#0000ff;">void</span><span style="color:#000000;"> CloneCore(Freezable sourceFreezable)<br />{<br />WaveTransform newWaveTransform </span><span style="color:#000000;">=</span><span style="color:#000000;"> (WaveTransform)sourceFreezable;<br /></span><span style="color:#0000ff;">base</span><span style="color:#000000;">.CloneCore(newWaveTransform);<br /></span><span style="color:#0000ff;">this</span><span style="color:#000000;">.CopyCommon(newWaveTransform);<br />}<br /><br /></span><span style="color:#0000ff;">#region</span><span style="color:#000000;"> ICloneable Members</span><span style="color:#000000;"><br /><br /></span><span style="color:#0000ff;">public</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> </span><span style="color:#0000ff;">object</span><span style="color:#000000;"> Clone()<br />{<br />WaveTransform newWaveTransform </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">new</span><span style="color:#000000;"> WaveTransform();<br />newWaveTransform.CopyCommon(</span><span style="color:#0000ff;">this</span><span style="color:#000000;">);<br /><br /></span><span style="color:#0000ff;">return</span><span style="color:#000000;"> newWaveTransform;<br />}<br /><br /></span><span style="color:#0000ff;">#endregion</span><span style="color:#000000;"> ICloneable Members</span><span style="color:#000000;"><br /><br /></span><span style="color:#0000ff;">private</span><span style="color:#000000;"> </span><span style="color:#0000ff;">void</span><span style="color:#000000;"> CopyCommon(WaveTransform transform)<br />{<br /></span><span style="color:#0000ff;">this</span><span style="color:#000000;">.IsInverse </span><span style="color:#000000;">=</span><span style="color:#000000;"> transform.IsInverse;<br /></span><span style="color:#0000ff;">this</span><span style="color:#000000;">.Frequency </span><span style="color:#000000;">=</span><span style="color:#000000;"> transform.Frequency;<br /></span><span style="color:#0000ff;">this</span><span style="color:#000000;">.Amplitude </span><span style="color:#000000;">=</span><span style="color:#000000;"> transform.Amplitude;<br />}<br />}</span><br /></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><br />This is pretty much it. Now we have an effect that displaces the controls (WaveEffect.fx and WaveEffect.cs), but we also have a transform mapping (WaveTransform.cs) that makes it possible to interact with the displaced controls. How are we going to use this functionality? Well, I don't know yet, I haven't found a very good area for this, however... It is really cool!!! :) <br />I think we can use this for a maginfying glass/zoom effect and maybe for some focus-context stuff. In the final release of .NET 3.5 sp1, there will be some added functionality to this. One question that I have is if the pixel shader only works for Pixel Shader version 2.0 (ps_2_0). I tried to implement a mandelbrot effect but it failed due to the shader version. Does anyone know about this? I would like it to work with ps_3_0!Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com5tag:blogger.com,1999:blog-1700866454033069591.post-65174364197869403032008-06-12T16:00:00.001+02:002008-06-14T12:16:07.335+02:00Grayscale Effect - A Pixel Shader Effect in WPF<p>This post will describe how Effects (pixel shaders) are used in WPF. I will give a simple step-by-step example of a grayscale effect. <strong>You must have .NET Framework 3.5 sp1 or later installed for this to work. You also need DirectX SDK installed to be able to compile the pixel shader effect.</strong></p> <p><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/GrayscaleEffectSample080612.zip" target="_blank">Download Sample Project and source code here.</a> <br /><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/GrayscaleEffect.dll" target="_blank">Download effect here (add it to your project and use a grayscale effect on your WPF components)</a></p> <p><a href="http://lh3.ggpht.com/bursjoo/SFErxEjVziI/AAAAAAAAAFM/-S6tmtEa0MU/s1600-h/image%5B12%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="204" alt="image" src="http://lh3.ggpht.com/bursjoo/SFEryKn5eVI/AAAAAAAAAFQ/2R2rgu9k25k/image_thumb%5B4%5D.png?imgmax=800" width="244" border="0" /></a>  <a href="http://lh3.ggpht.com/bursjoo/SFEry_KWQnI/AAAAAAAAAFU/HhskPLR06gg/s1600-h/image%5B15%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="204" alt="image" src="http://lh3.ggpht.com/bursjoo/SFErzbSYzBI/AAAAAAAAAFY/KJJhhMmwr04/image_thumb%5B5%5D.png?imgmax=800" width="244" border="0" /></a>   <a href="http://lh3.ggpht.com/bursjoo/SFEr0HTh2mI/AAAAAAAAAFc/JMOKUjuT7xg/s1600-h/image%5B21%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="204" alt="image" src="http://lh6.ggpht.com/bursjoo/SFEr8t_a8uI/AAAAAAAAAFg/ivhgX9PukN4/image_thumb%5B7%5D.png?imgmax=800" width="244" border="0" /></a> </p> <p>1. New Project <br />Start Visual Studio and create a new WPF Application. (Targeting the .NET 3.5 Framework)</p> <p><a href="http://lh6.ggpht.com/bursjoo/SFEr9UsDrwI/AAAAAAAAAFk/SoDtte7eM2Y/s1600-h/image%5B3%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="165" alt="image" src="http://lh5.ggpht.com/bursjoo/SFEr-dAatjI/AAAAAAAAAFo/BnU4CX4_4AU/image_thumb%5B1%5D.png?imgmax=800" width="244" border="0" /></a> </p> <p>2. Add new project. (Targeting the .NET 3.5 Framework) <br />In your solution, add a new project, a Class Library-project. Name your project "GrayscaleEffect". Now you will have the following view in your Solution Explorer:</p> <p><a href="http://lh6.ggpht.com/bursjoo/SFEr-kICKlI/AAAAAAAAAFs/DLLan3X2RkE/s1600-h/image%5B6%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="216" alt="image" src="http://lh6.ggpht.com/bursjoo/SFEr_HBMpdI/AAAAAAAAAFw/vvXwsRVnLaU/image_thumb%5B2%5D.png?imgmax=800" width="244" border="0" /></a> </p> <p>3. Prepare the Grayscale Effect. <br />First add some references to the GrayscaleEffect-project: <br />PresentationCore <br />PresentationFramework <br />WindowsBase <br />Delete the autogenerated Class1.cs-file and instead create a new C# class and name it "GrayscaleEffect.cs". This will be an empty class. Now lets add the C#-part of the effect:</p> <div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:2e9cb65b-aee1-4564-93ff-b86b6e147c49" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: auto;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF;">using</span><span style="color: #000000;"> System;<br /></span><span style="color: #0000FF;">using</span><span style="color: #000000;"> System.Windows.Media.Effects;<br /></span><span style="color: #0000FF;">using</span><span style="color: #000000;"> System.Windows;<br /></span><span style="color: #0000FF;">using</span><span style="color: #000000;"> System.Windows.Media;<br /><br /></span><span style="color: #0000FF;">namespace</span><span style="color: #000000;"> GrayscaleEffect<br />{<br /> </span><span style="color: #0000FF;">public</span><span style="color: #000000;"> </span><span style="color: #0000FF;">class</span><span style="color: #000000;"> GrayscaleEffect : ShaderEffect<br /> {<br /> </span><span style="color: #0000FF;">private</span><span style="color: #000000;"> </span><span style="color: #0000FF;">static</span><span style="color: #000000;"> PixelShader _pixelShader </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #0000FF;">new</span><span style="color: #000000;"> PixelShader() { UriSource </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #0000FF;">new</span><span style="color: #000000;"> Uri(</span><span style="color: #800000;">@"</span><span style="color: #800000;">pack://application:,,,/GrayscaleEffect;component/GrayscaleEffect.ps</span><span style="color: #800000;">"</span><span style="color: #000000;">) };<br /><br /> </span><span style="color: #0000FF;">public</span><span style="color: #000000;"> GrayscaleEffect()<br /> {<br /> PixelShader </span><span style="color: #000000;">=</span><span style="color: #000000;"> _pixelShader;<br /><br /> UpdateShaderValue(InputProperty);<br /> UpdateShaderValue(DesaturationFactorProperty);<br /> }<br /><br /> </span><span style="color: #0000FF;">public</span><span style="color: #000000;"> </span><span style="color: #0000FF;">static</span><span style="color: #000000;"> </span><span style="color: #0000FF;">readonly</span><span style="color: #000000;"> DependencyProperty InputProperty </span><span style="color: #000000;">=</span><span style="color: #000000;"> ShaderEffect.RegisterPixelShaderSamplerProperty(</span><span style="color: #800000;">"</span><span style="color: #800000;">Input</span><span style="color: #800000;">"</span><span style="color: #000000;">, </span><span style="color: #0000FF;">typeof</span><span style="color: #000000;">(GrayscaleEffect), </span><span style="color: #800080;">0</span><span style="color: #000000;">);<br /> </span><span style="color: #0000FF;">public</span><span style="color: #000000;"> Brush Input<br /> {<br /> </span><span style="color: #0000FF;">get</span><span style="color: #000000;"> { </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> (Brush)GetValue(InputProperty); }<br /> </span><span style="color: #0000FF;">set</span><span style="color: #000000;"> { SetValue(InputProperty, value); }<br /> }<br /><br /> </span><span style="color: #0000FF;">public</span><span style="color: #000000;"> </span><span style="color: #0000FF;">static</span><span style="color: #000000;"> </span><span style="color: #0000FF;">readonly</span><span style="color: #000000;"> DependencyProperty DesaturationFactorProperty </span><span style="color: #000000;">=</span><span style="color: #000000;"> DependencyProperty.Register(</span><span style="color: #800000;">"</span><span style="color: #800000;">DesaturationFactor</span><span style="color: #800000;">"</span><span style="color: #000000;">, </span><span style="color: #0000FF;">typeof</span><span style="color: #000000;">(</span><span style="color: #0000FF;">double</span><span style="color: #000000;">), </span><span style="color: #0000FF;">typeof</span><span style="color: #000000;">(GrayscaleEffect), </span><span style="color: #0000FF;">new</span><span style="color: #000000;"> UIPropertyMetadata(</span><span style="color: #800080;">0.0</span><span style="color: #000000;">, PixelShaderConstantCallback(</span><span style="color: #800080;">0</span><span style="color: #000000;">), CoerceDesaturationFactor));<br /> </span><span style="color: #0000FF;">public</span><span style="color: #000000;"> </span><span style="color: #0000FF;">double</span><span style="color: #000000;"> DesaturationFactor<br /> {<br /> </span><span style="color: #0000FF;">get</span><span style="color: #000000;"> { </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> (</span><span style="color: #0000FF;">double</span><span style="color: #000000;">)GetValue(DesaturationFactorProperty); }<br /> </span><span style="color: #0000FF;">set</span><span style="color: #000000;"> { SetValue(DesaturationFactorProperty, value); }<br /> }<br /><br /> </span><span style="color: #0000FF;">private</span><span style="color: #000000;"> </span><span style="color: #0000FF;">static</span><span style="color: #000000;"> </span><span style="color: #0000FF;">object</span><span style="color: #000000;"> CoerceDesaturationFactor(DependencyObject d, </span><span style="color: #0000FF;">object</span><span style="color: #000000;"> value)<br /> {<br /> GrayscaleEffect effect </span><span style="color: #000000;">=</span><span style="color: #000000;"> (GrayscaleEffect)d;<br /> </span><span style="color: #0000FF;">double</span><span style="color: #000000;"> newFactor </span><span style="color: #000000;">=</span><span style="color: #000000;"> (</span><span style="color: #0000FF;">double</span><span style="color: #000000;">)value;<br /><br /> </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> (newFactor </span><span style="color: #000000;"><</span><span style="color: #000000;"> </span><span style="color: #800080;">0.0</span><span style="color: #000000;"> </span><span style="color: #000000;">||</span><span style="color: #000000;"> newFactor </span><span style="color: #000000;">></span><span style="color: #000000;"> </span><span style="color: #800080;">1.0</span><span style="color: #000000;">)<br /> {<br /> </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> effect.DesaturationFactor;<br /> }<br /><br /> </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> newFactor;<br /> }<br /> }<br />}</span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><p>This is the C# side of the effect and will be the interface to the shader effect. This class and its properties (dependency properties) can be used directly from WPF and XAML. Note that the properties can be animated in the same way as other dependency properties. The difference is that we use a special type for the Input property and for our custom property we just refer to a register on the GPU, but we really do not need to know that ;). I really love the simplicity!</p><br /><br /><p>4. Add the effect files. <br /> <br />In the GrayscaleEffect-project, add two new files (Add -> New Item). GrayscaleEffect.fx and GrayscaleEffect.ps as Text-file. Make sure that GrayscaleEffect.ps is set as a Resource (in Build Action) in Properties. NOTE: The GrayscaleEffect.fx must be in ANSI format. Convert it to ANSI by opening the file in Notepad and save it, select ANSI format in the save dialog.</p><br /><br /><p>5. Now open the GrayscaleEffect.fx and add the following code (this is HLSL - High Level Shader Language): </p><br /><br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:33e96af1-5301-4e25-94c6-4d0781e9d362" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: auto;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000;">sampler2D implicitInput : register(s0);<br /></span><span style="color: #0000FF;">float</span><span style="color: #000000;"> factor : register(c0);<br /><br />float4 main(float2 uv : TEXCOORD) : COLOR<br />{<br /> float4 color </span><span style="color: #000000;">=</span><span style="color: #000000;"> tex2D(implicitInput, uv);<br /> </span><span style="color: #0000FF;">float</span><span style="color: #000000;"> gray </span><span style="color: #000000;">=</span><span style="color: #000000;"> color.r </span><span style="color: #000000;">*</span><span style="color: #000000;"> </span><span style="color: #800080;">0.3</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> color.g </span><span style="color: #000000;">*</span><span style="color: #000000;"> </span><span style="color: #800080;">0.59</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> color.b </span><span style="color: #000000;">*</span><span style="color: #800080;">0.11</span><span style="color: #000000;">; <br /> <br /> float4 result; <br /> result.r </span><span style="color: #000000;">=</span><span style="color: #000000;"> (color.r </span><span style="color: #000000;">-</span><span style="color: #000000;"> gray) </span><span style="color: #000000;">*</span><span style="color: #000000;"> factor </span><span style="color: #000000;">+</span><span style="color: #000000;"> gray;<br /> result.g </span><span style="color: #000000;">=</span><span style="color: #000000;"> (color.g </span><span style="color: #000000;">-</span><span style="color: #000000;"> gray) </span><span style="color: #000000;">*</span><span style="color: #000000;"> factor </span><span style="color: #000000;">+</span><span style="color: #000000;"> gray;<br /> result.b </span><span style="color: #000000;">=</span><span style="color: #000000;"> (color.b </span><span style="color: #000000;">-</span><span style="color: #000000;"> gray) </span><span style="color: #000000;">*</span><span style="color: #000000;"> factor </span><span style="color: #000000;">+</span><span style="color: #000000;"> gray;<br /> result.a </span><span style="color: #000000;">=</span><span style="color: #000000;"> color.a;<br /> <br /> </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> result;<br />}<br /></span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><br />This is our pixel shader. As we can see at the top implicitInput refers to one registry and a float named factor refers to another register. This is the register that we set in our C#-file (the last parameter in RegisterPixelShaderSamplerProperty(,,0) and the parameter in PixelShaderConstantCallback(0)). Below is our entry point the the shader file. We take a position as input and the first thing we do is to get the value in the "texture" at this position. <br /><br /><br />The magic below this is out grayscale alogrithm. We first create a grayscale value from the red, green and blue channel. Then we set this value in the output value depending on the factor parameter. The factor parameter is the DesaturationFactor in the C#-file and we use it to create a desaturation effect and a gradient between color and grayscale mode.<br /><br /><p></p><br /><br /><p>6. Compile the pixel shader. <br /> <br />We have created the pixel shader effect but we need to compile it to use it. Note that we can do this outside of Visual Studio, but we don't want that, so do the following. Open the project-properties for the GrayscaleEffect-project and select "Build Events". Under Pre-build event command line, add the following: <br /><br /> <br />"$(DXSDK_DIR)Utilities\Bin\x86\fxc.exe" /T ps_2_0 /E main /Fo"$(SolutionDir)GrayscaleEffect/GrayscaleEffect.ps" "$(SolutionDir)GrayscaleEffect/GrayscaleEffect.fx" <br /><br /> <br />If you now compile the project your effect should compile just fine. But we are not using it so lets use it:</p><br /><br /><p>7. Now in WpfApplication1. <br /> <br />First add a reference to the GrayscaleEffect-project from the WpfApplication1-project. <br /><br /> <br />We also want to use some images that we can apply out effect on. NOTE that the effect is not limited to images, we can use any control or panel in WPF, and that's cool!!! However, we use images because they are nice ;). Add a folder the the WpfApplication1 called "images". Add a few (~4) images to this folder (Add -> Existing item), name them like img1.jpg, img2.jpg... . <br /><br /> <br />Your Solution Explorer should look like this: <br /><br /> <br /><a href="http://lh4.ggpht.com/bursjoo/SFEsAtCMCMI/AAAAAAAAAF0/iHmYHYq8oxQ/s1600-h/image%5B9%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="244" alt="image" src="http://lh6.ggpht.com/bursjoo/SFEsBXCXIVI/AAAAAAAAAF4/8OkikNIbKdY/image_thumb%5B3%5D.png?imgmax=800" width="127" border="0" /></a>  <br />Now add the following XAML to Window1.xaml:</p><br /><br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:e4128d6d-3908-489d-8ba4-0ee55053504d" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: auto;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000;"><</span><span style="color: #000000;">Window x:Class</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">WpfApplication1.Window1</span><span style="color: #800000;">"</span><span style="color: #000000;"><br /> xmlns</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">http://schemas.microsoft.com/winfx/2006/xaml/presentation</span><span style="color: #800000;">"</span><span style="color: #000000;"><br /> xmlns:x</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">http://schemas.microsoft.com/winfx/2006/xaml</span><span style="color: #800000;">"</span><span style="color: #000000;"><br /> xmlns:effect</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect</span><span style="color: #800000;">"</span><span style="color: #000000;"><br /> Title</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">Grayscale Effect - Dotway (www.dotway.se)</span><span style="color: #800000;">"</span><span style="color: #000000;"> Height</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">400</span><span style="color: #800000;">"</span><span style="color: #000000;"> Width</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">480</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Window.Resources</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">DataTemplate x:Key</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">itemTemplate</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Grid Width</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">225</span><span style="color: #800000;">"</span><span style="color: #000000;"> Margin</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">3</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Border BorderBrush</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">White</span><span style="color: #800000;">"</span><span style="color: #000000;"> BorderThickness</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">2</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Image Source</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{Binding}</span><span style="color: #800000;">"</span><span style="color: #000000;"> HorizontalAlignment</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">Center</span><span style="color: #800000;">"</span><span style="color: #000000;"> VerticalAlignment</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">Center</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Image.Effect</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">effect:GrayscaleEffect x:Name</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">grayscaleEffect</span><span style="color: #800000;">"</span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Image.Effect</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Image.Triggers</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">EventTrigger RoutedEvent</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">Mouse.MouseEnter</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">BeginStoryboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Storyboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">DoubleAnimation To</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">1.0</span><span style="color: #800000;">"</span><span style="color: #000000;"> Duration</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0:0:0.3</span><span style="color: #800000;">"</span><span style="color: #000000;"> AccelerationRatio</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0.10</span><span style="color: #800000;">"</span><span style="color: #000000;"> DecelerationRatio</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0.25</span><span style="color: #800000;">"</span><span style="color: #000000;"> Storyboard.TargetName</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">grayscaleEffect</span><span style="color: #800000;">"</span><span style="color: #000000;"> Storyboard.TargetProperty</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">(effect:GrayscaleEffect.DesaturationFactor)</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Storyboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">BeginStoryboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">EventTrigger</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">EventTrigger RoutedEvent</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">Mouse.MouseLeave</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">BeginStoryboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Storyboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">DoubleAnimation To</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0.0</span><span style="color: #800000;">"</span><span style="color: #000000;"> Duration</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0:0:4</span><span style="color: #800000;">"</span><span style="color: #000000;"> AccelerationRatio</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0.10</span><span style="color: #800000;">"</span><span style="color: #000000;"> DecelerationRatio</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">0.25</span><span style="color: #800000;">"</span><span style="color: #000000;"> Storyboard.TargetName</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">grayscaleEffect</span><span style="color: #800000;">"</span><span style="color: #000000;"> Storyboard.TargetProperty</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">(effect:GrayscaleEffect.DesaturationFactor)</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Storyboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">BeginStoryboard</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">EventTrigger</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Image.Triggers</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Image</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Border</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Grid</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">DataTemplate</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Window.Resources</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">Grid Background</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">Black</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">ItemsControl x:Name</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">myItemsControl</span><span style="color: #800000;">"</span><span style="color: #000000;"> ItemTemplate</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">{StaticResource itemTemplate}</span><span style="color: #800000;">"</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">ItemsControl.ItemsPanel</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">ItemsPanelTemplate</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">WrapPanel </span><span style="color: #000000;">/></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">ItemsPanelTemplate</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">ItemsControl.ItemsPanel</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">ItemsControl</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">Grid</span><span style="color: #000000;">></span><span style="color: #000000;"><br /><br /></span><span style="color: #000000;"></</span><span style="color: #000000;">Window</span><span style="color: #000000;">></span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><p>We have a ItemsControl that have a WrapPanel as layout panel. We also have a template for each item in the ItemsControl. In the template two triggers have been added with animations. These animations will animate the DesaturationFactor property which will affect the shader effect. <br /> <br />To use the images add the following to the code-behind file: <br /><br /> <br /></p><br /><br /><div class="wlWriterSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:00eef493-3460-49e2-aaed-98cbb8b5e318" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:White;;overflow: auto;"><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF;">public</span><span style="color: #000000;"> Window1()<br /> {<br /> InitializeComponent();<br /><br /> List</span><span style="color: #000000;"><</span><span style="color: #0000FF;">string</span><span style="color: #000000;">></span><span style="color: #000000;"> images </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #0000FF;">new</span><span style="color: #000000;"> List</span><span style="color: #000000;"><</span><span style="color: #0000FF;">string</span><span style="color: #000000;">></span><span style="color: #000000;">();<br /> </span><span style="color: #0000FF;">for</span><span style="color: #000000;"> (</span><span style="color: #0000FF;">int</span><span style="color: #000000;"> i </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800080;">0</span><span style="color: #000000;">; i </span><span style="color: #000000;"><</span><span style="color: #000000;"> </span><span style="color: #800080;">4</span><span style="color: #000000;">; i</span><span style="color: #000000;">++</span><span style="color: #000000;">)<br /> {<br /> images.Add(</span><span style="color: #800000;">"</span><span style="color: #800000;">images/img</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> i </span><span style="color: #000000;">+</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">.jpg</span><span style="color: #800000;">"</span><span style="color: #000000;">);<br /> }<br /> myItemsControl.ItemsSource </span><span style="color: #000000;">=</span><span style="color: #000000;"> images;<br /> }</span></div></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --></div><br /><br /><p></p><br /><br /><p></p><br /><br /><p>Now just compile and run your new effect! <br /> <br />BUT, how is this really useful except that it gives us "pretty images". Well, I am a fan of focus and context/master-detail implementations. It is all about putting focus to some part of my GUI and leave the rest unfocused and in a context. With the color/grayscale we can put focus to an item by giving it color and all the rest (context) is grayscale.  <br />This is not the end of it. In a <a href="http://bursjootech.blogspot.com/2008/06/wave-effect-effect-with-hit-testing-in.html" target="_blank">later post</a> I hope I can show you how to interact with the GUI after applying a pixel shader effect. The only thing you have to do is to implement EffeceMapping in you C#-file, more on that later.  <br />I hope this will help someone, otherwise contact the consultants at Dotway (<a href="http://www.dotway.se">www.dotway.se</a>)! ;)</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com8tag:blogger.com,1999:blog-1700866454033069591.post-73185443852931307932008-06-11T15:41:00.001+02:002008-06-11T15:41:30.597+02:00<Image Source="images/myimage.jpg" /> in WPF<p>I had a very annoying problem when I did a simple WPF program. I just wanted to test something and I wanted my program to display an image. This is what I did:</p> <p>1. Create a new WPF application in Visual Studio.</p> <p>2. Create a folder in my project with the name "images". Add an image to this folder on disk.</p> <p>3. Right click the images-folder and select add existing item. The image is added and it is set to "Resource".</p> <p>4. In Window1.xaml set the following code:</p> <p><Window x:Class="TestProject.Window1" <br />    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a> <br />    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml"">http://schemas.microsoft.com/winfx/2006/xaml"</a> <br />    xmlns:local="clr-namespace:TestProject" <br />    Title="Test" Height="500" Width="650"> </p> <p>    <Grid Background="Black"> <br />        <Image Source="images/1.jpg" />         <br />    </Grid> </p> <p></Window></p> <p>5. When running this code it works ok, but when I want to see it in the Visual Studio Designer I get an exception saying: </p> <p>Error    1    The file /images/1.jpg is not part of the project or its 'Build Action' property is not set to 'Resource'.    </p> <p><strong>Solution:</strong> Rename the image to something like img1.jpg. I do not know why this happen but it works if you rename the image-file. You could rename it to 2.jpg and it will work. Anyone?</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com8tag:blogger.com,1999:blog-1700866454033069591.post-9481657999332558882008-06-11T12:10:00.001+02:002008-06-11T12:10:10.621+02:00Use Live ID to login to your Silverlight application<p>In this post I will give you a step by step walkthrough of how to use <a href="http://msdn.microsoft.com/en-us/library/bb676633.aspx" target="_blank">Windows Live ID Web Authentication</a> for logging in to a Silverlight app. </p> <p>My first attempt was to create a login directly in Silverlight. I looked at <a href="http://msdn.microsoft.com/en-us/library/bb404791.aspx" target="_blank">Windows Live ID Client SDK</a> which is the WinForm version of the Live ID SDK, but it seems that this SDK can not be used with Silverlight apps. The next approach was to use ASP.NET authentication and encapsulate the Silverlight authentication in ASP.NET sites. This is exactly what I will describe below. The example is pretty much independent of Silverlight version, but it uses Silverlight 2 (Silverlight 2 Beta 2).</p> <p> </p> <h3>1. Register your application with Windows Live ID</h3> <p>First of all we need to register our application with the Windows Live ID. To be able to use the authentication functionality of Live ID the application must be registered. Go to <a title="https://msm.live.com/app/default.aspx" href="https://msm.live.com/app/default.aspx">https://msm.live.com/app/default.aspx</a> and select "Register an Application".</p> <p><a href="http://lh3.ggpht.com/bursjoo/SE-kX7_M69I/AAAAAAAAAEU/f8wQCkomlTw/s1600-h/image%5B2%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="161" alt="image" src="http://lh6.ggpht.com/bursjoo/SE-kY4Izr_I/AAAAAAAAAEY/rgmNZLQq_Qc/image_thumb.png?imgmax=800" width="244" border="0" /></a> </p> <p>Note: If you want to use <strong>localhost</strong> in development and testing you must register this as an application. If you then have another server for publishing the application, you also need to register that one as another application. In this example I will use localhost.</p> <p><a href="http://lh6.ggpht.com/bursjoo/SE-kZTMlJMI/AAAAAAAAAEc/Pd5yrUUR3ro/s1600-h/image%5B5%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="215" alt="image" src="http://lh6.ggpht.com/bursjoo/SE-kZwMzhRI/AAAAAAAAAEg/Nku5UqLkr2g/image_thumb%5B1%5D.png?imgmax=800" width="244" border="0" /></a> </p> <p>E.g.: <br /><strong>Application Name</strong>: MySilverlightLoginTestDev <br /><strong>Return URL</strong>: http://localhost:5501/LoginSampleWeb/authresponse.aspx <br /><strong>Domain Name</strong>: [Leave this empty for localhost registration] <br /><strong>Secret Key</strong>: Some7ingVery_1ong_AnD_S7ran9e <br /><strong>Application verifier required</strong>: 0</p> <p>Remember the port that is registered as return URL, this will later be set in Visual Studio. When the information has been submitted you find information about it under "Manage My Application". You also find an Application ID here that you need later in Visual Studio.</p> <p>Now you have registered an application with Live ID and it is time for code and Visual Studio.</p> <p> </p> <h3>2. Sample Project</h3> <p><font color="#800000"><strong><a href="http://cid-b83a2397fc0f4eb6.skydrive.live.com/self.aspx/Blog/LoginSample080611.zip" target="_blank"><<font color="#800000">SourceCode</font>>Download sample project here.</<font color="#800000">SourceCode</font>></a></strong></font></p> <p>First download, unzip and open the Visual Studio sample. You will see something like this in the Solution Explorer:</p> <p><a href="http://lh3.ggpht.com/bursjoo/SE-kaVxOMhI/AAAAAAAAAEk/TUZeCPauoH4/s1600-h/image%5B8%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="244" alt="image" src="http://lh3.ggpht.com/bursjoo/SE-kbQ36mXI/AAAAAAAAAEo/EnzcyolAcDk/image_thumb%5B2%5D.png?imgmax=800" width="231" border="0" /></a> </p> <p>1. Open web.config, you find this block in the config file. Copy the information that you entered previously in the registration.</p> <p><appSettings> <br />   <add key="wll_appid" value="YourAppIdHere e.g. 00161AA1111111A"/> <br />   <add key="wll_secret" value="YourSecretKeyHere e.g. Some7ingVery_1ong_AnD_S7ran9e"/> <br />   <add key="wll_securityalgorithm" value="wsignin1.0"/> <br />   <add key="loginpage" value="Default.aspx"/> <br />   <add key="loggedinpage" value="LoginSampleTestPage.aspx"/> <br />   <add key="logincookie" value="webauthtoken"/> <br /></appSettings></p> <p>2. Now set the right port number. Select the web project in Solution Explorer (LoginSampleWeb) and then select properties.</p> <p><a href="http://lh6.ggpht.com/bursjoo/SE-kb9131tI/AAAAAAAAAEs/13CN_sDtO5Y/s1600-h/image%5B11%5D.png"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="244" alt="image" src="http://lh4.ggpht.com/bursjoo/SE-kckb-k-I/AAAAAAAAAEw/qxQ76RlZz7U/image_thumb%5B3%5D.png?imgmax=800" width="198" border="0" /></a> <a href="http://lh3.ggpht.com/bursjoo/SE-kc4cIjWI/AAAAAAAAAE0/DxmXeAnpA3A/s1600-h/image%5B14%5D.png"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="91" alt="image" src="http://lh6.ggpht.com/bursjoo/SE-keHmGX3I/AAAAAAAAAE4/uC-_TlskWvc/image_thumb%5B4%5D.png?imgmax=800" width="244" border="0" /></a> </p> <p>In the properties view, set Use dynamic ports to "False" and then set the port number to the same as you entered after localhost in the registration (localhost:5501).</p> <p>3. Run the example.</p> <p><a href="http://lh4.ggpht.com/bursjoo/SE-keogGyFI/AAAAAAAAAE8/0K-Vy9SJ97s/s1600-h/image%5B17%5D.png"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="118" alt="image" src="http://lh6.ggpht.com/bursjoo/SE-kffft9iI/AAAAAAAAAFA/d_omZbNsRBI/image_thumb%5B5%5D.png?imgmax=800" width="244" border="0" /></a>  <a href="http://lh5.ggpht.com/bursjoo/SE-kf7x-suI/AAAAAAAAAFE/qhBz42v4sp4/s1600-h/image%5B20%5D.png"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="119" alt="image" src="http://lh4.ggpht.com/bursjoo/SE-kgfQPrOI/AAAAAAAAAFI/GFB1bDJRIrc/image_thumb%5B6%5D.png?imgmax=800" width="244" border="0" /></a> </p> <h3>3. How does it work - Overview</h3> <p>When you start the sample project Default.aspx will open. This is a very simple page that only displays some text and a "Sign in" link. </p> <p><body> <br />    <h1>Silverlight login using Windows Live&trade; ID Web Authentication SDK</h1>    </p> <p>    <iframe <br />       id="WebAuthControl" <br />       name="WebAuthControl" <br />       src="<a href="http://login.live.com/controls/WebAuth.htm?appid=">http://login.live.com/controls/WebAuth.htm?appid=</a><%=_applicationId%>&style=font-size%3A+10pt%3B+font-family%3A+verdana%3B+background%3A+white%3B" <br />       width="80px" <br />       height="20px" <br />       marginwidth="0" <br />       marginheight="0" <br />       align="middle" <br />       frameborder="0" <br />       scrolling="no"> <br />   </iframe>    <br /></body></p> <p>When the user clicks the link he/she will be redirected to a Live login page. If the login is successful the Live ID login page will return to the page that was specified in the registration, e.g. authresponse.aspx. In authresponse.aspx a cookie will be set with some settings to determine whether a user is logged in or not. This will also redirect the user to the right target page (LoginSampleTestPage.aspx). You can also get a specific token ("stoken") for the logged in user that you can use to identify your user and connect to user specific settings.</p> <p>In LoginSampleTestPage.aspx we check that the user really is logged in. If he/she is not, we redirect them to the login page. If they are logged in we continue to load the page which in this case contains a Silverlight control.</p> <p>    private static WindowsLiveLogin _windowsLiveLogin = new WindowsLiveLogin(true); <br />    protected static string _applicationId = _windowsLiveLogin.AppId; </p> <p>    protected void Page_Load(object sender, EventArgs e) <br />    { <br />        HttpRequest request = HttpContext.Current.Request; <br />        HttpCookie loginCookie = request.Cookies[_windowsLiveLogin.LoginCookie]; </p> <p>        if (loginCookie == null) <br />        { <br />            RedirectToLoginPage(); <br />        } </p> <p>        string token = loginCookie.Value; <br />        if (string.IsNullOrEmpty(token)) <br />        { <br />            RedirectToLoginPage(); <br />        } </p> <p>        WindowsLiveLogin.User user = _windowsLiveLogin.ProcessToken(token); <br />        if (user == null) <br />        { <br />            RedirectToLoginPage(); <br />        } <br />    }</p> <h3>4. Summary</h3> <p>This is in fact only a encapsulation of a login to Silverlight. We use ASP.NET and server authentication for the login procedure and then give access to the Silverlight application. It is very easy to implement and we let the Live services handle the user registration and so on. Someone also mentioned that Silverlight will get some authentication controls in future versions but I do not know if that is true or not?! If such a control will come, then we can do client side authentication directly in Silverlight.</p> <p> </p> <p>This example uses a modified version of WindowsLiveLogin.cs. The original file can be downloaded from the <a href="http://msdn.microsoft.com/en-us/library/bb676633.aspx" target="_blank">Windows Live ID Authentication SDK</a>. You also find documentation and useful links at that location.</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com2tag:blogger.com,1999:blog-1700866454033069591.post-3801631708239105802008-05-22T10:11:00.001+02:002008-05-22T10:11:09.359+02:00Best scrollbar ever!<p>Last week I installed an addon to Visual Studio that replaces the old, gray scrollbar. RockScroll gives you a preview of your current file an it really rocks! :)</p> <p><a title="http://www.hanselman.com/blog/IntroducingRockScroll.aspx" href="http://www.hanselman.com/blog/IntroducingRockScroll.aspx">http://www.hanselman.com/blog/IntroducingRockScroll.aspx</a></p> <p><img height="265" alt="RockScroll" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/IntroducingRockScroll_C29C/RockScroll_5.png" width="350" border="0" /></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-77011610624076632422008-05-21T11:56:00.001+02:002008-05-21T11:56:40.250+02:00I miss some interfaces<p>I don't think I'm the only one that misses some interfaces in the .NET framework. A while ago I worked with a graphics framework written in .NET and I wanted to create a generic class that would handle different types of data items collection. The type would be byte, int, double, Decimal and so on. The class should then be able to perform some calculations.</p> <p>Now, the problem with generic classes is that it is generic. You should be able to put in any type and the class will work. But, one thing you can do is set some constraint on your generic class and only allow types implementing a specific interface or only value type/reference type. You do this by setting:</p> <p><font color="#4f4fff">public class MyClass<T> where T : IMyInteface</font></p> <p>Now the problem in my situation was that I wanted do perform calculations using standard value types. Ok, I could set that the generic type must only be a value type, but that wouldn't solve any of my problems. The real problem is that there is no interface for addition, subtraction... This means that you can not use generic classes and calculation :/. I had to limit my data type to double (or copy the class and implement the same class for byte, int). </p> <p>My question is, will we see an interface for mathematical operations in the .NET framework?</p> <p><img height="248" alt="Bilden “http://www.multisensory.biz/catalog/images/small%20maths%20symbols.jpg” kan inte visas, då den innehåller fel." src="http://www.multisensory.biz/catalog/images/small%20maths%20symbols.jpg" width="300" /></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com1tag:blogger.com,1999:blog-1700866454033069591.post-76477366479808391262008-05-15T11:48:00.001+02:002008-05-15T11:52:34.966+02:00Use DirectX in WPF<p>Yesterday I wrote about hardware accelerated effects in WPF 2D. Today I saw this video (<a title="http://channel9.msdn.com/Showpost.aspx?postid=403854" href="http://channel9.msdn.com/Showpost.aspx?postid=403854">http://channel9.msdn.com/Showpost.aspx?postid=403854</a>) that show us that DirectX can be used from WPF. There are some (a lot!) differences between DirectX and WPF 3D and you might reach some point where WPF 3D isn't enough, you need the power of DirectX. Instead of a huge rewrite of WPF to DirectX, you can now combine these two and that is just soooo cool! I love it!</p> <p> </p> <p><a href="http://lh3.ggpht.com/bursjoo/SCwG0YpZ3JI/AAAAAAAAADs/J7yCItmV-qM/s1600-h/image%5B2%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="230" alt="image" src="http://lh3.ggpht.com/bursjoo/SCwG1YpZ3KI/AAAAAAAAAD0/K1wI53B9Rms/image_thumb.png?imgmax=800" width="244" border="0" /></a> </p> <p>9 different DirectX sample apps running on a cube each. Displayed in WPF 3D!</p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com1tag:blogger.com,1999:blog-1700866454033069591.post-38272907841466823272008-05-14T15:10:00.001+02:002008-05-14T15:11:46.125+02:00WPF Effect on the GPU<p>This is just so cool! Now with .NET 3.5 Sp1, visual effects running on the GPU can be created and applied to WPF-components. There will be a set of effects provided for you like shadow and blur, or you can create your own with HLSL. The hittesting will still work and if the target computer can't handle shader language 2.0 or higher, it will automatically switch to software rendering. </p> <p>To apply an effect you only need to write: <br /><span style="color: blue"><</span><span style="color: #a31515">Button </span><span style="color: red">...</span><span style="color: blue"> > <br />    <</span><span style="color: #a31515">Button.Effect</span><span style="color: blue">> <br />        <</span><span style="color: #a31515">DropShadowEffect </span><span style="color: blue">/> <br />    </</span><span style="color: #a31515">Button.Effect</span><span style="color: blue">> <br />    </span><span style="color: #a31515">Hello <br /></span><span style="color: blue"></</span><span style="color: #a31515">Button</span><span style="color: blue">></span></p> <p>Read more about WPF and GPU Effect here (it is a very good series of post): <a title="http://blogs.msdn.com/greg_schechter/archive/2008/05/12/a-series-on-gpu-based-effects-for-wpf.aspx" href="http://blogs.msdn.com/greg_schechter/archive/2008/05/12/a-series-on-gpu-based-effects-for-wpf.aspx">http://blogs.msdn.com/greg_schechter/archive/2008/05/12/a-series-on-gpu-based-effects-for-wpf.aspx</a></p> <p> </p> <p>Motion blur:</p> <p><a href="http://blogs.msdn.com/blogfiles/greg_schechter/WindowsLiveWriter/GPUacceleratedcustomeffectsforWPF_AD74/image_12.png"><img height="59" alt="image" src="http://blogs.msdn.com/blogfiles/greg_schechter/WindowsLiveWriter/GPUacceleratedcustomeffectsforWPF_AD74/image_thumb_2.png" width="350" border="0" /></a></p> <p><a href="http://blogs.msdn.com/blogfiles/greg_schechter/WindowsLiveWriter/GPUacceleratedcustomeffectsforWPF_AD74/image_14.png"><img height="59" alt="image" src="http://blogs.msdn.com/blogfiles/greg_schechter/WindowsLiveWriter/GPUacceleratedcustomeffectsforWPF_AD74/image_thumb_5.png" width="350" border="0" /></a></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-47456474857379483972008-05-09T08:59:00.001+02:002008-05-09T08:59:32.619+02:00Dotway Seminar: Painless migration to Silverlight 2.0<p>This summer the next highly awaited version of Silverlight will be released. New functionality, new languages and new ways to interact with the web. We will explain the most interesting news and show, with concrete examples in Silverlight and ASP.NET, what is needed to reap the benefits of these features. We will also show how to handle the transition to Silverlight 2.0 in a straightforward and painless way.</p> <ul> <li>The news in Silverlight 2.0 </li> <li>The integration with ASP.NET and other techniques </li> <li>The advantages with using Silverlight compared to other web client frameworks </li> <li>The painless transition to Silverlight 2.0 </li> <ul> <li>For the customer </li> <li>For the developer </li> </ul> </ul> <p> </p> <p><strong>Speakers:</strong> <br />Carl Kenne <br />Lars Sjögreen</p> <a href="mailto:"></a> <p><strong>Time:</strong> <br />2008-05-14 (Wednesday) <br />Kl. 17.00 - 18.30</p> <p><strong>Location:</strong> <br />Kompetenscenter Stockholm, Vasagatan 8-10 </p> <p><strong>More info and Registration:</strong> <br />The seminar will be presented in Swedish. <br /><a href="http://www.dotway.se">www.dotway.se</a></p> <p><strong>Price:</strong> <br />Free </p> <p><strong>Programming languages:</strong> <br />C# <br />JavaScript <br />HTML</p> <p><strong>Technologies:</strong> <br />.NET <br />WPF <br />AJAX <br />Silverlight</p> <p><a href="http://lh5.ggpht.com/bursjoo/SCP2Ub8UJYI/AAAAAAAAAC8/66GPYihpNbk/s1600-h/image%5B3%5D.png"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="244" alt="image" src="http://lh3.ggpht.com/bursjoo/SCP2U78UJZI/AAAAAAAAADE/ob8Fw9pJy3k/image_thumb%5B1%5D.png?imgmax=800" width="219" border="0" /></a></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-42032627682836860882008-04-24T10:21:00.001+02:002008-04-25T10:10:55.379+02:00ScrumMaster<p>Now I have become a certified ScrumMaster after a course by Jeff Sutherland. I really like scrum since it makes development fun and is a tool that helps the team communicate. I believe that scrum can make a difference for development teams but at the same time it is not a silver bullet that will write your code. Think of it as a very simple tool for you and your team that makes it fun to work and also will help you increase your development velocity. I am looking forward to work with scrum and would really like to build an expert team that will reach the hyper speed of development and deliver, deliver, deliver :).</p> <p><img height="68" src="http://www.bursjoo.se/userfiles/Image/Blogs/ScrumMaster.jpg" width="240" /></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-12012850644015051212008-03-04T14:24:00.001+01:002008-03-04T14:24:32.062+01:00WPF Cursors<p>If you want to see or test the different mouse cursors in WPF (Windows Presentation Foundation) I've created a simple sample project to do so. Note that it is very easy to set the cursor on a FrameworkElement, all you have to do is to set the Cursor property: </p> <p class="MsoNormal" style="margin-bottom: 0pt; line-height: normal; mso-layout-grid-align: none"><span lang="EN-US" style="font-size: 10pt; color: blue; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes"><</span><span lang="EN-US" style="font-size: 10pt; color: #a31515; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes">Border</span><span lang="EN-US" style="font-size: 10pt; color: red; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes"> Cursor</span><span lang="EN-US" style="font-size: 10pt; color: blue; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes">="Hand"> <br /></span><span lang="EN-US" style="font-size: 10pt; color: #a31515; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes"><span style="mso-spacerun: yes">    </span></span><span lang="EN-US" style="font-size: 10pt; color: blue; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes"><</span><span lang="EN-US" style="font-size: 10pt; color: #a31515; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes">Button</span><span lang="EN-US" style="font-size: 10pt; color: red; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes"> Content</span><span lang="EN-US" style="font-size: 10pt; color: blue; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes">="My Button"</span><span lang="EN-US" style="font-size: 10pt; color: red; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes"> Cursor</span><span lang="EN-US" style="font-size: 10pt; color: blue; font-family: " courier new"; mso-ansi-language: EN-US; mso-no-proof: yes">="Help" /> <br /></span><span style="font-size: 10pt; color: blue; line-height: 115%; font-family: " courier new"; mso-no-proof: yes"></</span><span style="font-size: 10pt; color: #a31515; line-height: 115%; font-family: " courier new"; mso-no-proof: yes">Border</span><span style="font-size: 10pt; color: blue; line-height: 115%; font-family: " courier new"; mso-no-proof: yes">></span></p> <p class="MsoNormal" style="margin-bottom: 0pt; line-height: normal; mso-layout-grid-align: none">Some default Vista cursors:</p> <p class="MsoNormal" style="margin-bottom: 0pt; line-height: normal; mso-layout-grid-align: none"><img src="http://e7vtcq.bay.livefilestore.com/y1p8Hif_63TcT9w4yQvpOnZdd1dDjcYyZXZWZWbAMQIDa46KlgbUtbt7zoP2Kp67G5hRQZyqbeL9jAqyRvz2sOFjw/cursors.png" /> </p> <p class="MsoNormal" style="margin-bottom: 0pt; line-height: normal; mso-layout-grid-align: none"><a href="http://e7vtcq.bay.livefilestore.com/y1p8Hif_63TcT-BbrcWynW7yQwJ5AUympLwT8TS3sARChu5Vy1McbH8eQwEz_vP5oi_msNoc_lI2Fz6FfiLLlXgvA/CursorSample_080304.zip?download" target="_blank">Download sample project here.</a></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com0tag:blogger.com,1999:blog-1700866454033069591.post-88283283553005242812008-02-22T10:11:00.001+01:002008-02-22T10:18:26.790+01:00SkyDrive - Wow!<p>I didn't use Windows Live Spaces as source for my blog because I missed the ability to have more than one blog. But Live Spaces have other great things and it is evolving all the time. The latest thing it Live SkyDrive which is a web based storage space for files. You can have your private folders, share folders with a set of friend or you can have public folders. The storage area is 5 GB (!) and it is free. All you need is to register for Live Spaces (which is piece of cake if you have a Hotmail-account). </p> <p>Read more in the SkyDrive blog: <a title="http://skydriveteam.spaces.live.com/blog/" href="http://skydriveteam.spaces.live.com/blog/">http://skydriveteam.spaces.live.com/blog/</a></p> <p><img style="border-right: dimgray 1px solid; border-top: dimgray 1px solid; left: 0px; border-left: dimgray 1px solid; border-bottom: dimgray 1px solid; top: 10px; width: 398px" src="http://e7vtcq.bay.livefilestore.com/y1p8Hif_63TcT_rmOOriY1xKBYpwCWmTCdJ-43SsRSQbP-5kniilqcEFpetOZbMI06M41anfZiB0Nie_6xfMAuHdQ/skydrive.png" /></p> Anders Bursjööhttp://www.blogger.com/profile/00368944210980433789noreply@blogger.com3