﻿<?xml version="1.0" encoding="utf-8"?><rss version="2.0"><channel><title>Hibernating Rhinos</title><link>http://blogs.hibernatingrhinos.com/</link><description>Hibernating Rhinos</description><copyright>Hibernating Rhinos (c) 2009 - 2011 (c) 2012</copyright><ttl>60</ttl><item><title>Stress testing RavenDB</title><description>&lt;p align="left"&gt;
	The following is cross posted from &lt;a href="http://tech-rash.blogspot.com/2012/02/is-raven-db-all-its-cracked-up-to-be.html"&gt;Mark Rodseth&amp;rsquo;s blog&lt;/a&gt;&amp;nbsp;(he also posted a &lt;a href="http://tech-rash.blogspot.com/2012/02/ravendb-vs-sql-follow-up.html"&gt;follow up post with more details&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;
	Mark is a .Net Technical Architect at a digital agency named &lt;a href="http://www.fortunecookie.co.uk"&gt;Fortune Cookie&lt;/a&gt; in London. I would like to take the opportunity and thank Mark both for the grand experiment about which you are about to read and for the permission to post this in the company blog.&lt;/p&gt;
&lt;blockquote&gt;
	&lt;p&gt;
		Please note: Mark or Fortune Cookie are not affiliated with either Hibernating Rhinos or RavenDB in any way.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;
	When a colleague mentioned&amp;nbsp; RavenDB&amp;nbsp; to me I had a poke around and discovered that it was one of the more popular open source NoSQL technologies on the market. Not only that but it was bundled with Lucene.Net Search making it Document Database coupled with Lucene search capabilities.&amp;nbsp; With an interest in NoSQL technology and a grudge match that hadn&amp;rsquo;t been settled with Lucene.Net, I set myself the challenge to swap out our SQL Search implementation with RavenDB and then do a like for like load test against the two search technologies.&lt;br /&gt;
	These are my findings from both a programmatic and performance perspective.&lt;/p&gt;
&lt;p&gt;
	&lt;br /&gt;
	&lt;b&gt;Installing RavenDB&lt;/b&gt;&lt;br /&gt;
	There isnt much to installing Raven and its pretty much a case of downloading the latest build and running the Server application.&lt;br /&gt;
	The server comes with a nice Silverlight management interface which allows you to manage all aspects of Raven Db from databases to data to indexes. All tasks have a programmatic equivalent but a decent GUI is an essential tool for noobs like myself.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Storing the Data&lt;/b&gt;&lt;br /&gt;
	My first development task was to write an import routine which parsed the property data in SQL and then add it into a Raven Database. This was fairly easy and all I needed to do was to create a POCO, plug it with data from SQL and save it using the C# Raven API. The POCO serialised into JSON data and saved as a new document in the&amp;nbsp; RavenDB.&lt;/p&gt;
&lt;p&gt;
	The main challenge here was changing my thinking from relational modelling to domain driven modelling - a paradigm shift required when moving to NoSQL - which includes concepts like aggregate roots, entities and value types. Journeying into this did get a bit metaphysical at times but here is my understanding of this new fangled schism.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Entity &lt;/b&gt;- An entity is something that has a unique identity and meaning in both the business and system context. In the property web site example, a flat or a bungalow or an office match these criteria.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Value Type &lt;/b&gt;- Part of the entity which does not require its own identity and has no domain or system relevance on its own. For example, a bedroom or a toilet.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Aggregate Root&lt;/b&gt; - Is an master entity with special rules and access permissions that relate to a grouping of similar entities. For example, a property is an aggregate of flats, bungalows and offices. This is &lt;a href="http://lostechies.com/jimmybogard/2008/05/21/entities-value-objects-aggregates-and-roots/"&gt;the best description&lt;/a&gt; of these terms I found.&lt;/p&gt;
&lt;blockquote&gt;
	&lt;p&gt;
		&lt;em&gt;Hibernating Rhinos note&lt;/em&gt;: With RavenDB, we usually consider the Entity and Aggregate Root to be synonyms to a Document. There isn&amp;rsquo;t a distinction in RavenDB between the two, and they map to a RavenDB document.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;
	In this example, I created one Aggregate Root Entity to store all property types.&lt;/p&gt;
&lt;p&gt;
	&lt;a href="http://3.bp.blogspot.com/-NhpmzrY5n78/TzEflfQhkgI/AAAAAAAAAOc/mrRPMX0shy4/s1600/poco.jpg"&gt;&lt;img border="0" src="http://3.bp.blogspot.com/-NhpmzrY5n78/TzEflfQhkgI/AAAAAAAAAOc/mrRPMX0shy4/s1600/poco.jpg" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;
	C# Property POCO&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Indexing the Data&lt;/b&gt;&lt;br /&gt;
	Once the Data was stored it needed to be indexed for fast search. To achieve this I had to get to grips with map reduce functions which I had seen around but avoided like the sad and lonely looking bloke** at a FUN party.&lt;br /&gt;
	The documentation is pretty spartan on the&amp;nbsp; RavenDB web site but after hacking away I finally created an index that worked on documents with nested types and allowed for spatial queries.&lt;br /&gt;
	RavenDB allows you to create indexes using Map Reduce functions in LINQ. What this allows you to do is create a Lucene index from a large, tree like structure of data. Map reduce functions give you the same capability as SQL using joins and group by statements. To create a spatial index which allowed me to search properties by type and sector (nested value types) I created an index using the following Map Reduce function.&lt;/p&gt;
&lt;p&gt;
	&lt;a href="http://3.bp.blogspot.com/-rGoLp7ZAR0U/TzEgsEuu_JI/AAAAAAAAAOk/qfePslDrN9A/s1600/spatialindex.jpg"&gt;&lt;img border="0" src="http://3.bp.blogspot.com/-rGoLp7ZAR0U/TzEgsEuu_JI/AAAAAAAAAOk/qfePslDrN9A/s1600/spatialindex.jpg" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;
	Index created using the Raven DB Admin GUI&lt;/p&gt;
&lt;blockquote&gt;
	&lt;p&gt;
		&lt;em&gt;Hibernating Rhinos note:&lt;/em&gt; a more efficient index would likely be something like:&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
	&lt;pre class="csharpcode"&gt;
from r &lt;span class="kwrd"&gt;in&lt;/span&gt; docs.AssetDetailPocos
select &lt;span class="kwrd"&gt;new&lt;/span&gt;
{
  sectorname = r.Sectors,
  prnlname = r.AddressPnrls,

  r.AssetId,
  r.AskingPrice,
  r.NumberOfBedrooms,
  r.NumberOfBathRooms,
  
  
  _ = SpatialIndex.Generate(r.AssetLatitude, r.AssetLongitude)
}&lt;/pre&gt;
	&lt;style type="text/css"&gt;
.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }	&lt;/style&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
	&lt;p&gt;
		This would reduce the number of index entries and make the index smaller and faster to generate.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;
	&lt;b&gt;Querying the data&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;
	Now that I had data that was indexed, the final development challenge was querying it. RavenDB has a basic search API and a Lucene Query API for more complex queries. Both allow you to write queries in LINQ. To create the kind if complex queries you would require in a property searching web site, the API was a bit lacking. To work around this I had to construct my own native Lucene queries. Fortunately the API allowed me to do so.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Performance Testing&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;
	All the pawns were now in place for my load test.&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;
		The entire property SQL database was mirrored to&amp;nbsp; RavenDB.&lt;/li&gt;
	&lt;li&gt;
		The Search Interface now had both a SQL and a&amp;nbsp; RavenDB implementation.&lt;/li&gt;
	&lt;li&gt;
		I created a crude Web Page which allowed switching the search from SQL to&amp;nbsp; RavenDB via query string parameters and output the results using paging.To ensure maximum thrashing the load tests passed in random geo locations for proximity search and keywords for attribute search.&amp;nbsp;&lt;/li&gt;
	&lt;li&gt;
		A VM was setup and ready to face the wrath of &lt;a href="https://browsermob.com/home"&gt;BrowserMob&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
	I created a ramp test scaling from 0 to 1000 concurrent users firing a single get request with no think time at the Web Page and ran it in isolation against the SQL Implementation and then in isolation against the&amp;nbsp; RavenDB Implementation. The test ran for 30 minutes.&lt;br /&gt;
	And for those of you on the edge of you seat the results where a resounding victory for&amp;nbsp; RavenDB. Some details of the load test are below but the headline is SQL choked at 250 concurrent users whereas with&amp;nbsp; RavenDB even with 1000 concurrent users the response time was below 12 seconds.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;SQL Load Test&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;
	Transactions: 111,014 (Transaction = Single Get Request)&lt;br /&gt;
	Failures: 110,286 (Any 500 or timeout)&lt;/p&gt;
&lt;p&gt;
	&lt;a href="http://3.bp.blogspot.com/-s8OGQmWkVGw/TzEEukU_EeI/AAAAAAAAAOE/KlBMa9Kx7jI/s1600/SQLDbThroughPut.jpg"&gt;&lt;img border="0" height="250" src="http://3.bp.blogspot.com/-s8OGQmWkVGw/TzEEukU_EeI/AAAAAAAAAOE/KlBMa9Kx7jI/s400/SQLDbThroughPut.jpg" width="400" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;
	SQL Data Throughput - Flatlines at around 250 concurrent users.&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;RavenDB Load Test&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;
	Transactions: 145,554 (Transaction = Single Get Request)&lt;br /&gt;
	Failures: 0 (Any 500 or timeout)&lt;/p&gt;
&lt;p&gt;
	&lt;a href="http://3.bp.blogspot.com/-4zPzgzwfI8U/TzEE2mxsNBI/AAAAAAAAAOM/G-f6XoqRMYE/s1600/RavenDbThroughPut.jpg"&gt;&lt;img border="0" height="252" src="http://3.bp.blogspot.com/-4zPzgzwfI8U/TzEE2mxsNBI/AAAAAAAAAOM/G-f6XoqRMYE/s400/RavenDbThroughPut.jpg" width="400" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;
	RavenDB Data Throughput - What the graph should look like&lt;/p&gt;
&lt;p&gt;
	&lt;b&gt;Final thoughts&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;
	RavenDB is a great document database with fairly powerful search capabilities. It has a lot of pluses and a few negative which are listed for you viewing pleasure below.&lt;br /&gt;
	Positives&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;
		The documentation although spartan does cover the fundamentals making it easy to get started. On some instances I did have to sniff through the source code to fathom how some things worked but that is the beauty of open source I guess.&amp;nbsp;&lt;/li&gt;
	&lt;li&gt;
		The Silverlight Admin interface is pretty sweet&amp;nbsp;&lt;/li&gt;
	&lt;li&gt;
		The Raven community (&lt;a href="http://groups.google.com/group/ravendb/"&gt;a google group&lt;/a&gt;) is very active and the couple of queries I posted were responded to almost immediately.&lt;/li&gt;
	&lt;li&gt;
		Although the API did present some challenges it both allowed you to bypass its limitations and even contribute yourself to the project.&lt;/li&gt;
	&lt;li&gt;
		The commercial licence for&amp;nbsp; RavenDB is pretty cheap at a $600 once off payment&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
	Negatives&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;
		The web site documentation and content could do with an a facelift. (Saying that, I just checked the web site and it seems to have been be revamped)&lt;/li&gt;
	&lt;li&gt;
		I came a cross a bug in the Lucene.Net related to granular spatial queries which has yet to be resolved.&amp;nbsp;&amp;nbsp; Not&amp;nbsp; RavenDB&amp;#39;s fault but a dependence on third party libraries can cause issues.&amp;nbsp;&lt;/li&gt;
	&lt;li&gt;
		I struggled to find really impressive commercial reference sites. There are some testimonials but they give little information away.&amp;nbsp;&lt;/li&gt;
	&lt;li&gt;
		Sharding scares me.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
	I look forward to following the progress of&amp;nbsp; RavenDB and hopefully one day using it in a commercial project. I&amp;#39;m not at the comfort level yet for proposing it but with some more investigation and perhaps some good reference sites this could change very quickly.&lt;/p&gt;
&lt;p&gt;
	&lt;br /&gt;
	* Starry Eyed groupies sadly didn&amp;#39;t exist, nor have they ever.&lt;br /&gt;
	** Not me.&lt;/p&gt;
&lt;p&gt;
	&lt;a href="http://ravendb.net/"&gt;http://ravendb.net&lt;/a&gt;&lt;/p&gt;
</description><link>http://blogs.hibernatingrhinos.com/12321/stress-testing-ravendb</link><guid>http://blogs.hibernatingrhinos.com/12321/stress-testing-ravendb</guid><pubDate>Fri, 10 Feb 2012 10:00:00 GMT</pubDate></item><item><title>Invalid JSON results via Powershell 3</title><description>&lt;blockquote&gt; &lt;p&gt;This is a guest post by Chris, a RavenDB user, originally posted on the RavenDB group.&lt;/p&gt;&lt;/blockquote&gt; &lt;h4&gt;Background&lt;/h4&gt; &lt;p&gt;I’ve been fiddling with document databases for a while trying to find a way to aggregate our logs without having to demoralize everything. I started with CouchDB and because of the odd status of the project with the founder abandoning it and since I work in a Windows world, going with Raven ultimately seemed like a wholly better solution – all the goods of Couch plus a .Net API. &lt;p&gt;I built a data model in C# and used a CSV library to push a few hundred thousand records into Raven. The goal is to allow support engineers to query this log information with some simple PowerShell one-liners. &lt;p&gt;I thought parsing 100megs of CSV and jamming in the thousands of corresponding documents would be the difficult part to figure out and the one-liners would be a couple hours of work at most. &lt;h4&gt;The Problem&lt;/h4&gt; &lt;p&gt;Yes, it was a bit challenging to build an efficient importer, but most of that was due to my limited knowledge of C#. I thought it was still not working when I started to build my Posh one-liners and some queries were returning invalid JSON. The PowerShell 3 CTP introduce some new cmdlets for handling JSON and one specifically for executing HTTP Rest API calls – Invoke-RestMethod (alias irm). IRM is 100 times more user friendly than CURL and it even goes a step above and beyond by automatically deserializing the content returned. So, it’s extremely easy to consume JSON via a REST API, but I kept running into an issue where Posh would throw an error that there was no Results (the deserialized JSON) property on the object. I must have been pushing in bad data – garbage in equals garbage out. &lt;p&gt;I thought the HTML in some of the log values was invalidating the JSON string. I deleted all the documents, added a call to HTTPEncode on all strings before Storing it to Raven, then I reloaded the records. I ended up with the same results; or, lack of Results property in this case. &lt;p&gt;The Invoke-RestMethod cmdlet did return what looked like a valid JSON string, so I dropped it into Notepad++ and turned on JavaScript syntax highlighting and went through the string. I found the culprit. &lt;p&gt;"SkippedResults:0, &lt;p&gt;There was a missing quote around a key name. I almost posted this as a RavenDB bug, but I checked the raw HTTP response in Fiddler and found that the quote existed. &lt;h4&gt;What do to about it&lt;/h4&gt; &lt;p&gt;I am working with a Technology Preview release of Powershell 3, so I checked Connect and found a similar &lt;a href="https://connect.microsoft.com/PowerShell/feedback/details/716283/invoke-restmethod-returns-incorrect-data" target="_blank"&gt;report&lt;/a&gt; of missing characters in content deserialization. &lt;p&gt;“It seems that the last byte of the second HTTP response packet is being dropped by powershell. This only seems to happen when the second response packet is smaller than the first.” &lt;p&gt;Microsoft closed this issue as “Won’t Fix” and suggested using Invoke-WebRequest instead. Invoke-WebRequest removes all the magic of Invoke-RestMethod and just gets raw HTTP content. I piped the Content parameter to the, also new to Powershell 3, cmdlet ConvertFrom-Json and got proper deserializedJSON. &lt;p&gt;$c = Invoke-WebRequest "http://localhost:8080/indexes/vovici/Logs/process?query=customer:blah"&lt;br&gt;$r = $c.content | convertfrom-json &lt;p&gt;So, it’s an extra step, but if you want to reliably access RavenDB’s HTTP API via PowerShell 3 that seems to be the way to do it.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/12289/invalid-json-results-via-powershell-3</link><guid>http://blogs.hibernatingrhinos.com/12289/invalid-json-results-via-powershell-3</guid><pubDate>Mon, 30 Jan 2012 09:28:00 GMT</pubDate></item><item><title>Model Attacher pattern in Silverlight applications</title><description>&lt;p&gt;A while ago, when we started to develop our next version of RavenDB Studio, one of our goals was to make its code as simple as possible. That way, we ensure that it is easy to understand what is going on, so making changes to the Studio should be a trivial task.&lt;/p&gt; &lt;p&gt;In order to achieve that, we decided to not use any MVVM toolkits, but simply use a simple pages (views) and attach a model to them. In this approach, every view (page) know how to resolve its view-model by itself. This makes the Silverlight code much more simple, since it let’s you open a specific view by just navigating to its relative URL. &lt;/p&gt; &lt;p&gt;In order to make this possible we have a ModelAttacher.AttachModel attached property on the page, which takes care of instantiating the view-model and attach it to the page’s DataContext property. &lt;/p&gt; &lt;p&gt;Take a look on the following tipical view (page) in order to see it in action:&lt;/p&gt;&lt;pre class="csharpcode"&gt;&lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;Infrastructure:View&lt;/span&gt; &lt;span class="attr"&gt;x:Class&lt;/span&gt;&lt;span class="kwrd"&gt;="Raven.Studio.Views.Home"&lt;/span&gt;
                     &lt;span class="attr"&gt;xmlns&lt;/span&gt;&lt;span class="kwrd"&gt;="http://schemas.microsoft.com/winfx/2006/xaml/presentation"&lt;/span&gt;
                     &lt;span class="attr"&gt;xmlns:x&lt;/span&gt;&lt;span class="kwrd"&gt;="http://schemas.microsoft.com/winfx/2006/xaml"&lt;/span&gt;
                     &lt;span class="attr"&gt;xmlns:Infrastructure&lt;/span&gt;&lt;span class="kwrd"&gt;="clr-namespace:Raven.Studio.Infrastructure"&lt;/span&gt;
                     &lt;span class="attr"&gt;Title&lt;/span&gt;&lt;span class="kwrd"&gt;="Home"&lt;/span&gt;
                     &lt;span class="attr"&gt;Style&lt;/span&gt;&lt;span class="kwrd"&gt;="{StaticResource PageStyle}"&lt;/span&gt;
                     &lt;span class="attr"&gt;Infrastructure:ModelAttacher&lt;/span&gt;.&lt;span class="attr"&gt;AttachModel&lt;/span&gt;&lt;span class="kwrd"&gt;="HomeModel"&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;Infrastructure:View&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;style type="text/css"&gt;.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
&lt;/style&gt;

&lt;p&gt;In this example, we have an empty Home view, which is make a use of a HomeModel. The ModelAttacher’s job here is to create an instance of the HomeModel class and attach it to the View.DataContext property. (The view is a simple class that derives from Page.)&lt;/p&gt;
&lt;p&gt;This is how ModelAttacher works, in order to achieve this:&lt;/p&gt;&lt;pre class="csharpcode"&gt;&lt;span class="kwrd"&gt;namespace&lt;/span&gt; Raven.Studio.Infrastructure
{
    &lt;span class="kwrd"&gt;public&lt;/span&gt; &lt;span class="kwrd"&gt;static&lt;/span&gt; &lt;span class="kwrd"&gt;class&lt;/span&gt; ModelAttacher
    {
        &lt;span class="kwrd"&gt;public&lt;/span&gt; &lt;span class="kwrd"&gt;static&lt;/span&gt; &lt;span class="kwrd"&gt;readonly&lt;/span&gt; DependencyProperty AttachModelProperty =
            DependencyProperty.RegisterAttached(&lt;span class="str"&gt;"AttachModel"&lt;/span&gt;, &lt;span class="kwrd"&gt;typeof&lt;/span&gt;(&lt;span class="kwrd"&gt;string&lt;/span&gt;), &lt;span class="kwrd"&gt;typeof&lt;/span&gt;(ModelAttacher), &lt;span class="kwrd"&gt;new&lt;/span&gt; PropertyMetadata(&lt;span class="kwrd"&gt;null&lt;/span&gt;, AttachModelCallback));
        
        &lt;span class="kwrd"&gt;private&lt;/span&gt; &lt;span class="kwrd"&gt;static&lt;/span&gt; &lt;span class="kwrd"&gt;void&lt;/span&gt; AttachModelCallback(DependencyObject source, DependencyPropertyChangedEventArgs args)
        {
            var typeName = args.NewValue &lt;span class="kwrd"&gt;as&lt;/span&gt; &lt;span class="kwrd"&gt;string&lt;/span&gt;;
            var view = source &lt;span class="kwrd"&gt;as&lt;/span&gt; FrameworkElement;
            &lt;span class="kwrd"&gt;if&lt;/span&gt; (typeName == &lt;span class="kwrd"&gt;null&lt;/span&gt; || view == &lt;span class="kwrd"&gt;null&lt;/span&gt;)
                &lt;span class="kwrd"&gt;return&lt;/span&gt;;

            var modelType = Type.GetType(&lt;span class="str"&gt;"Raven.Studio.Models."&lt;/span&gt; + typeName) ?? Type.GetType(typeName);
            &lt;span class="kwrd"&gt;if&lt;/span&gt; (modelType == &lt;span class="kwrd"&gt;null&lt;/span&gt;)
                &lt;span class="kwrd"&gt;return&lt;/span&gt;;

            &lt;span class="kwrd"&gt;try&lt;/span&gt;
            {
                var model = Activator.CreateInstance(modelType);
                view.DataContext = model;
            }
            &lt;span class="kwrd"&gt;catch&lt;/span&gt; (Exception ex)
            {
                &lt;span class="kwrd"&gt;throw&lt;/span&gt; &lt;span class="kwrd"&gt;new&lt;/span&gt; InvalidOperationException(&lt;span class="kwrd"&gt;string&lt;/span&gt;.Format(&lt;span class="str"&gt;"Cannot create instance of model type: {0}"&lt;/span&gt;, modelType), ex);
            }
        }

        &lt;span class="kwrd"&gt;public&lt;/span&gt; &lt;span class="kwrd"&gt;static&lt;/span&gt; &lt;span class="kwrd"&gt;string&lt;/span&gt; GetAttachModel(UIElement element)
        {
            &lt;span class="kwrd"&gt;return&lt;/span&gt; (&lt;span class="kwrd"&gt;string&lt;/span&gt;)element.GetValue(AttachModelProperty);
        }

        &lt;span class="kwrd"&gt;public&lt;/span&gt; &lt;span class="kwrd"&gt;static&lt;/span&gt; &lt;span class="kwrd"&gt;void&lt;/span&gt; SetAttachModel(UIElement element, &lt;span class="kwrd"&gt;string&lt;/span&gt; &lt;span class="kwrd"&gt;value&lt;/span&gt;)
        {
            element.SetValue(AttachModelProperty, &lt;span class="kwrd"&gt;value&lt;/span&gt;);
        }
    }
}&lt;/pre&gt;
&lt;style type="text/css"&gt;.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
&lt;/style&gt;

&lt;p&gt;Now in order to attach a model to its view, we need to just add the attached property to the view element:&amp;nbsp; Infrastructure:ModelAttacher.AttachModel="HomeModel".&lt;/p&gt;
&lt;p&gt;Please note that in this case any view-model has to have a default (parameters-less) constructor. In order to solve that, what we have done in RavenDB Studio is to have a ModelBase class for our view-models which make sure to expose all our common model dependencies.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/11265/model-attacher-pattern-in-silverlight-applications</link><guid>http://blogs.hibernatingrhinos.com/11265/model-attacher-pattern-in-silverlight-applications</guid><pubDate>Thu, 24 Nov 2011 06:49:00 GMT</pubDate></item><item><title>XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan</title><description>&lt;blockquote&gt; &lt;p&gt;This is a guest post by &lt;a href="http://blog.functionalfun.net"&gt;Samuel Jack&lt;/a&gt;, who had done a lot of work on the new UI for RavenDB.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Three weeks ago Ayende put out a request for &lt;a href="http://ayende.com/blog/111617/looking-for-a-xaml-expert"&gt;help in turning an ugly duckling into a beautiful swan&lt;/a&gt;, and I, rather nervously, signed up for the job. The ugly duckling in question was Raven Studio, the Silverlight-based management UI for Raven Db. The nerves were a result of doubting that my limited graphic design skills were up to the job. But when Ayende assured me that he had a proto-type swan in the form of a Photoshop design, drawn up by a bona-fide, turtle-neck-wearing designer, they were calmed. Marginally.&lt;/p&gt; &lt;p&gt;Because the design Ayende had was for the new-look RavenDb website. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_2.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb.png" width="600" height="457"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_4.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_1.png" width="600" height="440"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Ahh! Where to start?&lt;/p&gt; &lt;h4&gt;Photoshop for Developer Dummies&lt;/h4&gt; &lt;p&gt;To ease myself in, I got started by simply trying to imitate parts of the Photoshop design in XAML, beginning with the header bar at the very top of the page. Not being a designer myself, I’m rather like a duck out of water when it comes to Photoshop, but I’ve at least got the basics sussed.&lt;/p&gt; &lt;p&gt;The thing to understand is that designers construct Photoshop images like onions, layer upon layer, sometimes eye-watering in complexity, and to reproduce the design, you have to peel down through the layers. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_8.png"&gt;&lt;img style="display: inline; float: left" title="Photoshop Layer Basics" alt="Photoshop Layer Basics" align="left" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_3.png" width="450" height="241"&gt;&lt;/a&gt;First go to Photoshop’s Layers pane, and make sure all the layers are unlocked. This allows the Move Layer tool to come into play, not to move layers, but identify layers by selecting them in the Layers pane when you click the corresponding part of the image. Once you’ve identified a layer, Alt-Click it, and all other layers in the image will be hidden, allowing you to figure out exactly how the thing should look.&lt;/p&gt; &lt;p&gt;Mostly when I’m paring down Photoshop layers I’m looking to isolate them so that I can figure out the colour gradients they use. You could, of course, navigate your way through Photoshop’s dialogs to read off the exact RGB values. Or, if you can get the layer on its lonesome, you can use Expression Blend’s Gradient Dropper tool. &lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_2.png"&gt;&lt;img style="margin: 5px 0px; display: inline; float: right" title="GradientEyeDropper" alt="GradientEyeDropper" align="right" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_thumb.png" width="240" height="221"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;This is a brilliant little timesaver. In the Blend Property pane, select the Brush property of your choice, put it into Gradient mode, click the Gradient Dropper tool, then drag over any area on screen, and Blend will reproduce the gradient under the cursor in XAML form.&lt;/p&gt; &lt;p&gt;After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.&lt;/p&gt; &lt;h4&gt;Let it Live: Control Templates and Visual States&lt;/h4&gt; &lt;p&gt;Silverlight, following WPF, has the concept of look-less controls. That is, the Controls (take Button as an example) manage their behaviour (Buttons respond to mouse clicks by executing commands) but don’t define how they are rendered on screen. That is left to the control’s &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics"&gt;Style&lt;/a&gt;, and specifically its &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_controltemplates"&gt;ControlTemplate&lt;/a&gt;. The ControlTemplate defines the visual tree of all the UI elements needed to present the control and make it look snazzy. With a little patience, some assistance from Expression Blend, and plenty of application of the Gradient Dropper tool, it’s possible to take the built-in controls and make them look and feel just how the designer ordered.&lt;/p&gt; &lt;p&gt;I wanted Buttons that look like those in the header bar of the Photoshop design, but when the corresponding page is selected, they should change to have a background gradient with colours like the RavenDb logo.&lt;/p&gt; &lt;p&gt;When restyling a Control, it’s best to start by modifying the existing style. This way you can be sure you won’t miss an aspect of the control’s behaviour that you might otherwise forget. Blend makes this easy by giving you the option of editing a copy of the Control’s current ControlTemplate (right-click on it in the Objects and Timeline View, then select Edit Template &amp;gt; Edit a Copy). There are occasions when that little trick has failed, and I’ve ended up with an empty control template. But MSDN has come through for me then: it has a whole section containing the &lt;a href="http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx"&gt;default Styles and Control Templates for all the built-in controls&lt;/a&gt;, like this one for &lt;a href="http://msdn.microsoft.com/en-us/library/cc278069(v=VS.95).aspx"&gt;Button&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Part of the ControlTemplate defines how the control looks in its various states, when the mouse is over it, when it has focus, or when it is selected, for example. The Control itself is responsible for indicating when it has entered each state. As a designer, it’s your job to specify Storyboards that are activated each time particular states are entered. Each Storyboard can animate whichever properties it likes to achieve the desired effect – in my Buttons, for example, I animate the opacity property of a Border element to fade in a coloured background indicating that it is selected. All this is overseen by the VisualStateManager, of which, more &lt;a href="http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx"&gt;here&lt;/a&gt;. Naturally, Expression Blend has great editing support for visual states. Read John Papa’s &lt;a href="http://visualstudiomagazine.com/articles/2011/09/20/retemplating-in-blend.aspx"&gt;tutorial&lt;/a&gt; to learn more.&lt;/p&gt; &lt;p&gt;So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?&lt;/p&gt; &lt;h4&gt;Textured Backgrounds&lt;/h4&gt; &lt;p&gt;Well, that page background could do with spicing up. The Photoshop design has a nice textured background, which I extracted to a PNG file that Silverlight would understand by hiding every layer except the background, then using Photoshop’s “Save for Web &amp;amp; Devices” feature. &lt;/p&gt; &lt;p&gt;The thing about textured backgrounds is that you do want them to cover the whole of the page background, which means tiling the texture to fill all the space. WPF makes this easy with its ImageBrush, which has a &lt;a href="http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.tilemode.aspx"&gt;TileMode&lt;/a&gt; property, which, when set to a value other than None, automatically repeats the image over the whole area to be painted by the brush. Silverlight has ImageBrushes, but they don’t support tiling out of the box. Fortunately, Phil Middlemiss has supplied what is lacking in the form of the &lt;a href="http://silverscratch.blogspot.com/2010/09/tiled-image-brush-for-silverlight.html"&gt;TiledBGControl&lt;/a&gt; which does exactly what I need – you should take a look: it makes clever use of Silverlight’s pixel shader effects.&lt;/p&gt; &lt;p&gt;This is what we’ve got so far. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_10.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_4.png" width="600" height="334"&gt;&lt;/a&gt;&lt;/p&gt; &lt;h4&gt;The Index Editor Page, Before and After&lt;/h4&gt; &lt;p&gt;Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_12.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_5.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And now:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_14.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_6.png" width="600" height="365"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Again, it was a challenge knowing where to apply my beautician’s brush first. I settled on adding the header bar at the top, and I then realised it could double up as a toolbar. Originally the page had no header at all, but by having a bread-crumb bar in the header it helps to give the user a bit more context when they’re looking at the page, as well as making it easier to navigate around.&lt;/p&gt; &lt;h4&gt;Inspiration and Icons&lt;/h4&gt; &lt;p&gt;Since my graphic-design skills are so underdeveloped, I borrow ideas shamelessly wherever I find something that fits. You may recognise the styling of the toolbar buttons in the Index page header bar as being remarkably similar to the ones on the Google Chrome toolbar. Yes – Expression Blend’s Gradient dropper does work on live applications too! Two places to check out if you find yourself short on inspiration are &lt;a href="http://quince.infragistics.com/"&gt;Quince&lt;/a&gt; and &lt;a href="http://patterntap.com/"&gt;Pattern Tab&lt;/a&gt; which both catalogue examples of user interface and user experience design from across the web. Pattern Tab especially has myriad examples of beautiful UIs.&lt;/p&gt; &lt;p&gt;In the past I’ve struggled to find icons for my projects, but I’ve recently discovered two great sources: &lt;a href="http://www.iconfinder.com/"&gt;IconFinder.com&lt;/a&gt; and &lt;a href="http://www.iconarchive.com/"&gt;IconArchive.com&lt;/a&gt;. Both have excellent search facilities (which is often what’s missing from the commercial collections you buy and download to your machine in a whacking great zip file), and are careful to call out the license attached to each icon. A surprisingly large number are licensed so that they can be used without charge in commercial products.&lt;/p&gt; &lt;h4&gt;A XAML Tip&lt;/h4&gt; &lt;p&gt;The nice thing about styling an application is that it gets easier with every page you complete. Once you’ve settled on a look for a particular kind of element, you can repeat that look on every page. Silverlight’s support for Styles and Resources makes this very easy. And I have a tip that can make it easier still. &lt;/p&gt; &lt;p&gt;I put all my styles into a single resource dictionary, Styles.xaml which I merge into my App.xaml resource dictionary. I then name all my Styles, Brushes, etc. using a hierarchical naming convention. So Styles all begin with “Style_”, Styles for Buttons would all begin “Style_Button”, and then would come the styles for different purposes: “Style_Button_Toolbar”, “Style_Button_Hero” (for those big red buttons in your app that the hero uses to save the world), etc.. The pay-off for using this convention comes when you’re hand-editing XAML and making use of Resharper’s XAML intellisense. Type “{StaticResource Style_[ControlType]” and Resharper instantly presents you with a list of all the styles that might apply.&lt;/p&gt; &lt;h4&gt;A Parting Screenshot&lt;/h4&gt; &lt;p&gt;To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_16.png"&gt;&lt;img style="display: inline" title="Edit Document Page - Before" alt="Edit Document Page - Before" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_7.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And after:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_20.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_9.png" width="600" height="362"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.&lt;/p&gt; &lt;p&gt;I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on &lt;a href="https://github.com/ravendb/studio"&gt;GitHub&lt;/a&gt;. We’d love to hear what you think.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</link><guid>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</guid><pubDate>Mon, 24 Oct 2011 10:00:00 GMT</pubDate></item><item><title>XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan</title><description>&lt;blockquote&gt; &lt;p&gt;This is a guest post by &lt;a href="http://blog.functionalfun.net"&gt;Samuel Jack&lt;/a&gt;, who had done a lot of work on the new UI for RavenDB.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Three weeks ago Ayende put out a request for &lt;a href="http://ayende.com/blog/111617/looking-for-a-xaml-expert"&gt;help in turning an ugly duckling into a beautiful swan&lt;/a&gt;, and I, rather nervously, signed up for the job. The ugly duckling in question was Raven Studio, the Silverlight-based management UI for Raven Db. The nerves were a result of doubting that my limited graphic design skills were up to the job. But when Ayende assured me that he had a proto-type swan in the form of a Photoshop design, drawn up by a bona-fide, turtle-neck-wearing designer, they were calmed. Marginally.&lt;/p&gt; &lt;p&gt;Because the design Ayende had was for the new-look RavenDb website. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_2.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb.png" width="600" height="457"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_4.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_1.png" width="600" height="440"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Ahh! Where to start?&lt;/p&gt; &lt;h4&gt;Photoshop for Developer Dummies&lt;/h4&gt; &lt;p&gt;To ease myself in, I got started by simply trying to imitate parts of the Photoshop design in XAML, beginning with the header bar at the very top of the page. Not being a designer myself, I’m rather like a duck out of water when it comes to Photoshop, but I’ve at least got the basics sussed.&lt;/p&gt; &lt;p&gt;The thing to understand is that designers construct Photoshop images like onions, layer upon layer, sometimes eye-watering in complexity, and to reproduce the design, you have to peel down through the layers. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_8.png"&gt;&lt;img style="display: inline; float: left" title="Photoshop Layer Basics" alt="Photoshop Layer Basics" align="left" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_3.png" width="450" height="241"&gt;&lt;/a&gt;First go to Photoshop’s Layers pane, and make sure all the layers are unlocked. This allows the Move Layer tool to come into play, not to move layers, but identify layers by selecting them in the Layers pane when you click the corresponding part of the image. Once you’ve identified a layer, Alt-Click it, and all other layers in the image will be hidden, allowing you to figure out exactly how the thing should look.&lt;/p&gt; &lt;p&gt;Mostly when I’m paring down Photoshop layers I’m looking to isolate them so that I can figure out the colour gradients they use. You could, of course, navigate your way through Photoshop’s dialogs to read off the exact RGB values. Or, if you can get the layer on its lonesome, you can use Expression Blend’s Gradient Dropper tool. &lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_2.png"&gt;&lt;img style="margin: 5px 0px; display: inline; float: right" title="GradientEyeDropper" alt="GradientEyeDropper" align="right" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_thumb.png" width="240" height="221"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;This is a brilliant little timesaver. In the Blend Property pane, select the Brush property of your choice, put it into Gradient mode, click the Gradient Dropper tool, then drag over any area on screen, and Blend will reproduce the gradient under the cursor in XAML form.&lt;/p&gt; &lt;p&gt;After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.&lt;/p&gt; &lt;h4&gt;Let it Live: Control Templates and Visual States&lt;/h4&gt; &lt;p&gt;Silverlight, following WPF, has the concept of look-less controls. That is, the Controls (take Button as an example) manage their behaviour (Buttons respond to mouse clicks by executing commands) but don’t define how they are rendered on screen. That is left to the control’s &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics"&gt;Style&lt;/a&gt;, and specifically its &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_controltemplates"&gt;ControlTemplate&lt;/a&gt;. The ControlTemplate defines the visual tree of all the UI elements needed to present the control and make it look snazzy. With a little patience, some assistance from Expression Blend, and plenty of application of the Gradient Dropper tool, it’s possible to take the built-in controls and make them look and feel just how the designer ordered.&lt;/p&gt; &lt;p&gt;I wanted Buttons that look like those in the header bar of the Photoshop design, but when the corresponding page is selected, they should change to have a background gradient with colours like the RavenDb logo.&lt;/p&gt; &lt;p&gt;When restyling a Control, it’s best to start by modifying the existing style. This way you can be sure you won’t miss an aspect of the control’s behaviour that you might otherwise forget. Blend makes this easy by giving you the option of editing a copy of the Control’s current ControlTemplate (right-click on it in the Objects and Timeline View, then select Edit Template &amp;gt; Edit a Copy). There are occasions when that little trick has failed, and I’ve ended up with an empty control template. But MSDN has come through for me then: it has a whole section containing the &lt;a href="http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx"&gt;default Styles and Control Templates for all the built-in controls&lt;/a&gt;, like this one for &lt;a href="http://msdn.microsoft.com/en-us/library/cc278069(v=VS.95).aspx"&gt;Button&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Part of the ControlTemplate defines how the control looks in its various states, when the mouse is over it, when it has focus, or when it is selected, for example. The Control itself is responsible for indicating when it has entered each state. As a designer, it’s your job to specify Storyboards that are activated each time particular states are entered. Each Storyboard can animate whichever properties it likes to achieve the desired effect – in my Buttons, for example, I animate the opacity property of a Border element to fade in a coloured background indicating that it is selected. All this is overseen by the VisualStateManager, of which, more &lt;a href="http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx"&gt;here&lt;/a&gt;. Naturally, Expression Blend has great editing support for visual states. Read John Papa’s &lt;a href="http://visualstudiomagazine.com/articles/2011/09/20/retemplating-in-blend.aspx"&gt;tutorial&lt;/a&gt; to learn more.&lt;/p&gt; &lt;p&gt;So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?&lt;/p&gt; &lt;h4&gt;Textured Backgrounds&lt;/h4&gt; &lt;p&gt;Well, that page background could do with spicing up. The Photoshop design has a nice textured background, which I extracted to a PNG file that Silverlight would understand by hiding every layer except the background, then using Photoshop’s “Save for Web &amp;amp; Devices” feature. &lt;/p&gt; &lt;p&gt;The thing about textured backgrounds is that you do want them to cover the whole of the page background, which means tiling the texture to fill all the space. WPF makes this easy with its ImageBrush, which has a &lt;a href="http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.tilemode.aspx"&gt;TileMode&lt;/a&gt; property, which, when set to a value other than None, automatically repeats the image over the whole area to be painted by the brush. Silverlight has ImageBrushes, but they don’t support tiling out of the box. Fortunately, Phil Middlemiss has supplied what is lacking in the form of the &lt;a href="http://silverscratch.blogspot.com/2010/09/tiled-image-brush-for-silverlight.html"&gt;TiledBGControl&lt;/a&gt; which does exactly what I need – you should take a look: it makes clever use of Silverlight’s pixel shader effects.&lt;/p&gt; &lt;p&gt;This is what we’ve got so far. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_10.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_4.png" width="600" height="334"&gt;&lt;/a&gt;&lt;/p&gt; &lt;h4&gt;The Index Editor Page, Before and After&lt;/h4&gt; &lt;p&gt;Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_12.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_5.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And now:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_14.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_6.png" width="600" height="365"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Again, it was a challenge knowing where to apply my beautician’s brush first. I settled on adding the header bar at the top, and I then realised it could double up as a toolbar. Originally the page had no header at all, but by having a bread-crumb bar in the header it helps to give the user a bit more context when they’re looking at the page, as well as making it easier to navigate around.&lt;/p&gt; &lt;h4&gt;Inspiration and Icons&lt;/h4&gt; &lt;p&gt;Since my graphic-design skills are so underdeveloped, I borrow ideas shamelessly wherever I find something that fits. You may recognise the styling of the toolbar buttons in the Index page header bar as being remarkably similar to the ones on the Google Chrome toolbar. Yes – Expression Blend’s Gradient dropper does work on live applications too! Two places to check out if you find yourself short on inspiration are &lt;a href="http://quince.infragistics.com/"&gt;Quince&lt;/a&gt; and &lt;a href="http://patterntap.com/"&gt;Pattern Tab&lt;/a&gt; which both catalogue examples of user interface and user experience design from across the web. Pattern Tab especially has myriad examples of beautiful UIs.&lt;/p&gt; &lt;p&gt;In the past I’ve struggled to find icons for my projects, but I’ve recently discovered two great sources: &lt;a href="http://www.iconfinder.com/"&gt;IconFinder.com&lt;/a&gt; and &lt;a href="http://www.iconarchive.com/"&gt;IconArchive.com&lt;/a&gt;. Both have excellent search facilities (which is often what’s missing from the commercial collections you buy and download to your machine in a whacking great zip file), and are careful to call out the license attached to each icon. A surprisingly large number are licensed so that they can be used without charge in commercial products.&lt;/p&gt; &lt;h4&gt;A XAML Tip&lt;/h4&gt; &lt;p&gt;The nice thing about styling an application is that it gets easier with every page you complete. Once you’ve settled on a look for a particular kind of element, you can repeat that look on every page. Silverlight’s support for Styles and Resources makes this very easy. And I have a tip that can make it easier still. &lt;/p&gt; &lt;p&gt;I put all my styles into a single resource dictionary, Styles.xaml which I merge into my App.xaml resource dictionary. I then name all my Styles, Brushes, etc. using a hierarchical naming convention. So Styles all begin with “Style_”, Styles for Buttons would all begin “Style_Button”, and then would come the styles for different purposes: “Style_Button_Toolbar”, “Style_Button_Hero” (for those big red buttons in your app that the hero uses to save the world), etc.. The pay-off for using this convention comes when you’re hand-editing XAML and making use of Resharper’s XAML intellisense. Type “{StaticResource Style_[ControlType]” and Resharper instantly presents you with a list of all the styles that might apply.&lt;/p&gt; &lt;h4&gt;A Parting Screenshot&lt;/h4&gt; &lt;p&gt;To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_16.png"&gt;&lt;img style="display: inline" title="Edit Document Page - Before" alt="Edit Document Page - Before" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_7.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And after:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_20.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_9.png" width="600" height="362"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.&lt;/p&gt; &lt;p&gt;I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on &lt;a href="https://github.com/ravendb/studio"&gt;GitHub&lt;/a&gt;. We’d love to hear what you think.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</link><guid>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</guid><pubDate>Mon, 24 Oct 2011 10:00:00 GMT</pubDate></item><item><title>XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan</title><description>&lt;blockquote&gt; &lt;p&gt;This is a guest post by &lt;a href="http://blog.functionalfun.net"&gt;Samuel Jack&lt;/a&gt;, who had done a lot of work on the new UI for RavenDB.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Three weeks ago Ayende put out a request for &lt;a href="http://ayende.com/blog/111617/looking-for-a-xaml-expert"&gt;help in turning an ugly duckling into a beautiful swan&lt;/a&gt;, and I, rather nervously, signed up for the job. The ugly duckling in question was Raven Studio, the Silverlight-based management UI for Raven Db. The nerves were a result of doubting that my limited graphic design skills were up to the job. But when Ayende assured me that he had a proto-type swan in the form of a Photoshop design, drawn up by a bona-fide, turtle-neck-wearing designer, they were calmed. Marginally.&lt;/p&gt; &lt;p&gt;Because the design Ayende had was for the new-look RavenDb website. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_2.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb.png" width="600" height="457"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_4.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_1.png" width="600" height="440"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Ahh! Where to start?&lt;/p&gt; &lt;h4&gt;Photoshop for Developer Dummies&lt;/h4&gt; &lt;p&gt;To ease myself in, I got started by simply trying to imitate parts of the Photoshop design in XAML, beginning with the header bar at the very top of the page. Not being a designer myself, I’m rather like a duck out of water when it comes to Photoshop, but I’ve at least got the basics sussed.&lt;/p&gt; &lt;p&gt;The thing to understand is that designers construct Photoshop images like onions, layer upon layer, sometimes eye-watering in complexity, and to reproduce the design, you have to peel down through the layers. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_8.png"&gt;&lt;img style="display: inline; float: left" title="Photoshop Layer Basics" alt="Photoshop Layer Basics" align="left" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_3.png" width="450" height="241"&gt;&lt;/a&gt;First go to Photoshop’s Layers pane, and make sure all the layers are unlocked. This allows the Move Layer tool to come into play, not to move layers, but identify layers by selecting them in the Layers pane when you click the corresponding part of the image. Once you’ve identified a layer, Alt-Click it, and all other layers in the image will be hidden, allowing you to figure out exactly how the thing should look.&lt;/p&gt; &lt;p&gt;Mostly when I’m paring down Photoshop layers I’m looking to isolate them so that I can figure out the colour gradients they use. You could, of course, navigate your way through Photoshop’s dialogs to read off the exact RGB values. Or, if you can get the layer on its lonesome, you can use Expression Blend’s Gradient Dropper tool. &lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_2.png"&gt;&lt;img style="margin: 5px 0px; display: inline; float: right" title="GradientEyeDropper" alt="GradientEyeDropper" align="right" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_thumb.png" width="240" height="221"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;This is a brilliant little timesaver. In the Blend Property pane, select the Brush property of your choice, put it into Gradient mode, click the Gradient Dropper tool, then drag over any area on screen, and Blend will reproduce the gradient under the cursor in XAML form.&lt;/p&gt; &lt;p&gt;After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.&lt;/p&gt; &lt;h4&gt;Let it Live: Control Templates and Visual States&lt;/h4&gt; &lt;p&gt;Silverlight, following WPF, has the concept of look-less controls. That is, the Controls (take Button as an example) manage their behaviour (Buttons respond to mouse clicks by executing commands) but don’t define how they are rendered on screen. That is left to the control’s &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics"&gt;Style&lt;/a&gt;, and specifically its &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_controltemplates"&gt;ControlTemplate&lt;/a&gt;. The ControlTemplate defines the visual tree of all the UI elements needed to present the control and make it look snazzy. With a little patience, some assistance from Expression Blend, and plenty of application of the Gradient Dropper tool, it’s possible to take the built-in controls and make them look and feel just how the designer ordered.&lt;/p&gt; &lt;p&gt;I wanted Buttons that look like those in the header bar of the Photoshop design, but when the corresponding page is selected, they should change to have a background gradient with colours like the RavenDb logo.&lt;/p&gt; &lt;p&gt;When restyling a Control, it’s best to start by modifying the existing style. This way you can be sure you won’t miss an aspect of the control’s behaviour that you might otherwise forget. Blend makes this easy by giving you the option of editing a copy of the Control’s current ControlTemplate (right-click on it in the Objects and Timeline View, then select Edit Template &amp;gt; Edit a Copy). There are occasions when that little trick has failed, and I’ve ended up with an empty control template. But MSDN has come through for me then: it has a whole section containing the &lt;a href="http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx"&gt;default Styles and Control Templates for all the built-in controls&lt;/a&gt;, like this one for &lt;a href="http://msdn.microsoft.com/en-us/library/cc278069(v=VS.95).aspx"&gt;Button&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Part of the ControlTemplate defines how the control looks in its various states, when the mouse is over it, when it has focus, or when it is selected, for example. The Control itself is responsible for indicating when it has entered each state. As a designer, it’s your job to specify Storyboards that are activated each time particular states are entered. Each Storyboard can animate whichever properties it likes to achieve the desired effect – in my Buttons, for example, I animate the opacity property of a Border element to fade in a coloured background indicating that it is selected. All this is overseen by the VisualStateManager, of which, more &lt;a href="http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx"&gt;here&lt;/a&gt;. Naturally, Expression Blend has great editing support for visual states. Read John Papa’s &lt;a href="http://visualstudiomagazine.com/articles/2011/09/20/retemplating-in-blend.aspx"&gt;tutorial&lt;/a&gt; to learn more.&lt;/p&gt; &lt;p&gt;So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?&lt;/p&gt; &lt;h4&gt;Textured Backgrounds&lt;/h4&gt; &lt;p&gt;Well, that page background could do with spicing up. The Photoshop design has a nice textured background, which I extracted to a PNG file that Silverlight would understand by hiding every layer except the background, then using Photoshop’s “Save for Web &amp;amp; Devices” feature. &lt;/p&gt; &lt;p&gt;The thing about textured backgrounds is that you do want them to cover the whole of the page background, which means tiling the texture to fill all the space. WPF makes this easy with its ImageBrush, which has a &lt;a href="http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.tilemode.aspx"&gt;TileMode&lt;/a&gt; property, which, when set to a value other than None, automatically repeats the image over the whole area to be painted by the brush. Silverlight has ImageBrushes, but they don’t support tiling out of the box. Fortunately, Phil Middlemiss has supplied what is lacking in the form of the &lt;a href="http://silverscratch.blogspot.com/2010/09/tiled-image-brush-for-silverlight.html"&gt;TiledBGControl&lt;/a&gt; which does exactly what I need – you should take a look: it makes clever use of Silverlight’s pixel shader effects.&lt;/p&gt; &lt;p&gt;This is what we’ve got so far. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_10.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_4.png" width="600" height="334"&gt;&lt;/a&gt;&lt;/p&gt; &lt;h4&gt;The Index Editor Page, Before and After&lt;/h4&gt; &lt;p&gt;Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_12.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_5.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And now:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_14.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_6.png" width="600" height="365"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Again, it was a challenge knowing where to apply my beautician’s brush first. I settled on adding the header bar at the top, and I then realised it could double up as a toolbar. Originally the page had no header at all, but by having a bread-crumb bar in the header it helps to give the user a bit more context when they’re looking at the page, as well as making it easier to navigate around.&lt;/p&gt; &lt;h4&gt;Inspiration and Icons&lt;/h4&gt; &lt;p&gt;Since my graphic-design skills are so underdeveloped, I borrow ideas shamelessly wherever I find something that fits. You may recognise the styling of the toolbar buttons in the Index page header bar as being remarkably similar to the ones on the Google Chrome toolbar. Yes – Expression Blend’s Gradient dropper does work on live applications too! Two places to check out if you find yourself short on inspiration are &lt;a href="http://quince.infragistics.com/"&gt;Quince&lt;/a&gt; and &lt;a href="http://patterntap.com/"&gt;Pattern Tab&lt;/a&gt; which both catalogue examples of user interface and user experience design from across the web. Pattern Tab especially has myriad examples of beautiful UIs.&lt;/p&gt; &lt;p&gt;In the past I’ve struggled to find icons for my projects, but I’ve recently discovered two great sources: &lt;a href="http://www.iconfinder.com/"&gt;IconFinder.com&lt;/a&gt; and &lt;a href="http://www.iconarchive.com/"&gt;IconArchive.com&lt;/a&gt;. Both have excellent search facilities (which is often what’s missing from the commercial collections you buy and download to your machine in a whacking great zip file), and are careful to call out the license attached to each icon. A surprisingly large number are licensed so that they can be used without charge in commercial products.&lt;/p&gt; &lt;h4&gt;A XAML Tip&lt;/h4&gt; &lt;p&gt;The nice thing about styling an application is that it gets easier with every page you complete. Once you’ve settled on a look for a particular kind of element, you can repeat that look on every page. Silverlight’s support for Styles and Resources makes this very easy. And I have a tip that can make it easier still. &lt;/p&gt; &lt;p&gt;I put all my styles into a single resource dictionary, Styles.xaml which I merge into my App.xaml resource dictionary. I then name all my Styles, Brushes, etc. using a hierarchical naming convention. So Styles all begin with “Style_”, Styles for Buttons would all begin “Style_Button”, and then would come the styles for different purposes: “Style_Button_Toolbar”, “Style_Button_Hero” (for those big red buttons in your app that the hero uses to save the world), etc.. The pay-off for using this convention comes when you’re hand-editing XAML and making use of Resharper’s XAML intellisense. Type “{StaticResource Style_[ControlType]” and Resharper instantly presents you with a list of all the styles that might apply.&lt;/p&gt; &lt;h4&gt;A Parting Screenshot&lt;/h4&gt; &lt;p&gt;To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_16.png"&gt;&lt;img style="display: inline" title="Edit Document Page - Before" alt="Edit Document Page - Before" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_7.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And after:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_20.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_9.png" width="600" height="362"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.&lt;/p&gt; &lt;p&gt;I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on &lt;a href="https://github.com/ravendb/studio"&gt;GitHub&lt;/a&gt;. We’d love to hear what you think.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</link><guid>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</guid><pubDate>Mon, 24 Oct 2011 10:00:00 GMT</pubDate></item><item><title>XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan</title><description>&lt;blockquote&gt; &lt;p&gt;This is a guest post by &lt;a href="http://blog.functionalfun.net"&gt;Samuel Jack&lt;/a&gt;, who had done a lot of work on the new UI for RavenDB.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Three weeks ago Ayende put out a request for &lt;a href="http://ayende.com/blog/111617/looking-for-a-xaml-expert"&gt;help in turning an ugly duckling into a beautiful swan&lt;/a&gt;, and I, rather nervously, signed up for the job. The ugly duckling in question was Raven Studio, the Silverlight-based management UI for Raven Db. The nerves were a result of doubting that my limited graphic design skills were up to the job. But when Ayende assured me that he had a proto-type swan in the form of a Photoshop design, drawn up by a bona-fide, turtle-neck-wearing designer, they were calmed. Marginally.&lt;/p&gt; &lt;p&gt;Because the design Ayende had was for the new-look RavenDb website. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_2.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb.png" width="600" height="457"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_4.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_1.png" width="600" height="440"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Ahh! Where to start?&lt;/p&gt; &lt;h4&gt;Photoshop for Developer Dummies&lt;/h4&gt; &lt;p&gt;To ease myself in, I got started by simply trying to imitate parts of the Photoshop design in XAML, beginning with the header bar at the very top of the page. Not being a designer myself, I’m rather like a duck out of water when it comes to Photoshop, but I’ve at least got the basics sussed.&lt;/p&gt; &lt;p&gt;The thing to understand is that designers construct Photoshop images like onions, layer upon layer, sometimes eye-watering in complexity, and to reproduce the design, you have to peel down through the layers. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_8.png"&gt;&lt;img style="display: inline; float: left" title="Photoshop Layer Basics" alt="Photoshop Layer Basics" align="left" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_3.png" width="450" height="241"&gt;&lt;/a&gt;First go to Photoshop’s Layers pane, and make sure all the layers are unlocked. This allows the Move Layer tool to come into play, not to move layers, but identify layers by selecting them in the Layers pane when you click the corresponding part of the image. Once you’ve identified a layer, Alt-Click it, and all other layers in the image will be hidden, allowing you to figure out exactly how the thing should look.&lt;/p&gt; &lt;p&gt;Mostly when I’m paring down Photoshop layers I’m looking to isolate them so that I can figure out the colour gradients they use. You could, of course, navigate your way through Photoshop’s dialogs to read off the exact RGB values. Or, if you can get the layer on its lonesome, you can use Expression Blend’s Gradient Dropper tool. &lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_2.png"&gt;&lt;img style="margin: 5px 0px; display: inline; float: right" title="GradientEyeDropper" alt="GradientEyeDropper" align="right" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_thumb.png" width="240" height="221"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;This is a brilliant little timesaver. In the Blend Property pane, select the Brush property of your choice, put it into Gradient mode, click the Gradient Dropper tool, then drag over any area on screen, and Blend will reproduce the gradient under the cursor in XAML form.&lt;/p&gt; &lt;p&gt;After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.&lt;/p&gt; &lt;h4&gt;Let it Live: Control Templates and Visual States&lt;/h4&gt; &lt;p&gt;Silverlight, following WPF, has the concept of look-less controls. That is, the Controls (take Button as an example) manage their behaviour (Buttons respond to mouse clicks by executing commands) but don’t define how they are rendered on screen. That is left to the control’s &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics"&gt;Style&lt;/a&gt;, and specifically its &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_controltemplates"&gt;ControlTemplate&lt;/a&gt;. The ControlTemplate defines the visual tree of all the UI elements needed to present the control and make it look snazzy. With a little patience, some assistance from Expression Blend, and plenty of application of the Gradient Dropper tool, it’s possible to take the built-in controls and make them look and feel just how the designer ordered.&lt;/p&gt; &lt;p&gt;I wanted Buttons that look like those in the header bar of the Photoshop design, but when the corresponding page is selected, they should change to have a background gradient with colours like the RavenDb logo.&lt;/p&gt; &lt;p&gt;When restyling a Control, it’s best to start by modifying the existing style. This way you can be sure you won’t miss an aspect of the control’s behaviour that you might otherwise forget. Blend makes this easy by giving you the option of editing a copy of the Control’s current ControlTemplate (right-click on it in the Objects and Timeline View, then select Edit Template &amp;gt; Edit a Copy). There are occasions when that little trick has failed, and I’ve ended up with an empty control template. But MSDN has come through for me then: it has a whole section containing the &lt;a href="http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx"&gt;default Styles and Control Templates for all the built-in controls&lt;/a&gt;, like this one for &lt;a href="http://msdn.microsoft.com/en-us/library/cc278069(v=VS.95).aspx"&gt;Button&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Part of the ControlTemplate defines how the control looks in its various states, when the mouse is over it, when it has focus, or when it is selected, for example. The Control itself is responsible for indicating when it has entered each state. As a designer, it’s your job to specify Storyboards that are activated each time particular states are entered. Each Storyboard can animate whichever properties it likes to achieve the desired effect – in my Buttons, for example, I animate the opacity property of a Border element to fade in a coloured background indicating that it is selected. All this is overseen by the VisualStateManager, of which, more &lt;a href="http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx"&gt;here&lt;/a&gt;. Naturally, Expression Blend has great editing support for visual states. Read John Papa’s &lt;a href="http://visualstudiomagazine.com/articles/2011/09/20/retemplating-in-blend.aspx"&gt;tutorial&lt;/a&gt; to learn more.&lt;/p&gt; &lt;p&gt;So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?&lt;/p&gt; &lt;h4&gt;Textured Backgrounds&lt;/h4&gt; &lt;p&gt;Well, that page background could do with spicing up. The Photoshop design has a nice textured background, which I extracted to a PNG file that Silverlight would understand by hiding every layer except the background, then using Photoshop’s “Save for Web &amp;amp; Devices” feature. &lt;/p&gt; &lt;p&gt;The thing about textured backgrounds is that you do want them to cover the whole of the page background, which means tiling the texture to fill all the space. WPF makes this easy with its ImageBrush, which has a &lt;a href="http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.tilemode.aspx"&gt;TileMode&lt;/a&gt; property, which, when set to a value other than None, automatically repeats the image over the whole area to be painted by the brush. Silverlight has ImageBrushes, but they don’t support tiling out of the box. Fortunately, Phil Middlemiss has supplied what is lacking in the form of the &lt;a href="http://silverscratch.blogspot.com/2010/09/tiled-image-brush-for-silverlight.html"&gt;TiledBGControl&lt;/a&gt; which does exactly what I need – you should take a look: it makes clever use of Silverlight’s pixel shader effects.&lt;/p&gt; &lt;p&gt;This is what we’ve got so far. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_10.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_4.png" width="600" height="334"&gt;&lt;/a&gt;&lt;/p&gt; &lt;h4&gt;The Index Editor Page, Before and After&lt;/h4&gt; &lt;p&gt;Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_12.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_5.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And now:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_14.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_6.png" width="600" height="365"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Again, it was a challenge knowing where to apply my beautician’s brush first. I settled on adding the header bar at the top, and I then realised it could double up as a toolbar. Originally the page had no header at all, but by having a bread-crumb bar in the header it helps to give the user a bit more context when they’re looking at the page, as well as making it easier to navigate around.&lt;/p&gt; &lt;h4&gt;Inspiration and Icons&lt;/h4&gt; &lt;p&gt;Since my graphic-design skills are so underdeveloped, I borrow ideas shamelessly wherever I find something that fits. You may recognise the styling of the toolbar buttons in the Index page header bar as being remarkably similar to the ones on the Google Chrome toolbar. Yes – Expression Blend’s Gradient dropper does work on live applications too! Two places to check out if you find yourself short on inspiration are &lt;a href="http://quince.infragistics.com/"&gt;Quince&lt;/a&gt; and &lt;a href="http://patterntap.com/"&gt;Pattern Tab&lt;/a&gt; which both catalogue examples of user interface and user experience design from across the web. Pattern Tab especially has myriad examples of beautiful UIs.&lt;/p&gt; &lt;p&gt;In the past I’ve struggled to find icons for my projects, but I’ve recently discovered two great sources: &lt;a href="http://www.iconfinder.com/"&gt;IconFinder.com&lt;/a&gt; and &lt;a href="http://www.iconarchive.com/"&gt;IconArchive.com&lt;/a&gt;. Both have excellent search facilities (which is often what’s missing from the commercial collections you buy and download to your machine in a whacking great zip file), and are careful to call out the license attached to each icon. A surprisingly large number are licensed so that they can be used without charge in commercial products.&lt;/p&gt; &lt;h4&gt;A XAML Tip&lt;/h4&gt; &lt;p&gt;The nice thing about styling an application is that it gets easier with every page you complete. Once you’ve settled on a look for a particular kind of element, you can repeat that look on every page. Silverlight’s support for Styles and Resources makes this very easy. And I have a tip that can make it easier still. &lt;/p&gt; &lt;p&gt;I put all my styles into a single resource dictionary, Styles.xaml which I merge into my App.xaml resource dictionary. I then name all my Styles, Brushes, etc. using a hierarchical naming convention. So Styles all begin with “Style_”, Styles for Buttons would all begin “Style_Button”, and then would come the styles for different purposes: “Style_Button_Toolbar”, “Style_Button_Hero” (for those big red buttons in your app that the hero uses to save the world), etc.. The pay-off for using this convention comes when you’re hand-editing XAML and making use of Resharper’s XAML intellisense. Type “{StaticResource Style_[ControlType]” and Resharper instantly presents you with a list of all the styles that might apply.&lt;/p&gt; &lt;h4&gt;A Parting Screenshot&lt;/h4&gt; &lt;p&gt;To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_16.png"&gt;&lt;img style="display: inline" title="Edit Document Page - Before" alt="Edit Document Page - Before" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_7.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And after:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_20.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_9.png" width="600" height="362"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.&lt;/p&gt; &lt;p&gt;I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on &lt;a href="https://github.com/ravendb/studio"&gt;GitHub&lt;/a&gt;. We’d love to hear what you think.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</link><guid>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</guid><pubDate>Mon, 24 Oct 2011 10:00:00 GMT</pubDate></item><item><title>XAML Magic: Turning an Ugly Silverlight Duckling into a Beautiful Photoshopped Swan</title><description>&lt;blockquote&gt; &lt;p&gt;This is a guest post by &lt;a href="http://blog.functionalfun.net"&gt;Samuel Jack&lt;/a&gt;, who had done a lot of work on the new UI for RavenDB.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Three weeks ago Ayende put out a request for &lt;a href="http://ayende.com/blog/111617/looking-for-a-xaml-expert"&gt;help in turning an ugly duckling into a beautiful swan&lt;/a&gt;, and I, rather nervously, signed up for the job. The ugly duckling in question was Raven Studio, the Silverlight-based management UI for Raven Db. The nerves were a result of doubting that my limited graphic design skills were up to the job. But when Ayende assured me that he had a proto-type swan in the form of a Photoshop design, drawn up by a bona-fide, turtle-neck-wearing designer, they were calmed. Marginally.&lt;/p&gt; &lt;p&gt;Because the design Ayende had was for the new-look RavenDb website. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_2.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb.png" width="600" height="457"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;He wanted me to take the look and feel and transfer it to the Silverlight Raven Studio application. Which, when he handed it over to me, looked like this:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_4.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_1.png" width="600" height="440"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Ahh! Where to start?&lt;/p&gt; &lt;h4&gt;Photoshop for Developer Dummies&lt;/h4&gt; &lt;p&gt;To ease myself in, I got started by simply trying to imitate parts of the Photoshop design in XAML, beginning with the header bar at the very top of the page. Not being a designer myself, I’m rather like a duck out of water when it comes to Photoshop, but I’ve at least got the basics sussed.&lt;/p&gt; &lt;p&gt;The thing to understand is that designers construct Photoshop images like onions, layer upon layer, sometimes eye-watering in complexity, and to reproduce the design, you have to peel down through the layers. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_8.png"&gt;&lt;img style="display: inline; float: left" title="Photoshop Layer Basics" alt="Photoshop Layer Basics" align="left" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_3.png" width="450" height="241"&gt;&lt;/a&gt;First go to Photoshop’s Layers pane, and make sure all the layers are unlocked. This allows the Move Layer tool to come into play, not to move layers, but identify layers by selecting them in the Layers pane when you click the corresponding part of the image. Once you’ve identified a layer, Alt-Click it, and all other layers in the image will be hidden, allowing you to figure out exactly how the thing should look.&lt;/p&gt; &lt;p&gt;Mostly when I’m paring down Photoshop layers I’m looking to isolate them so that I can figure out the colour gradients they use. You could, of course, navigate your way through Photoshop’s dialogs to read off the exact RGB values. Or, if you can get the layer on its lonesome, you can use Expression Blend’s Gradient Dropper tool. &lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_2.png"&gt;&lt;img style="margin: 5px 0px; display: inline; float: right" title="GradientEyeDropper" alt="GradientEyeDropper" align="right" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/GradientEyeDropper_thumb.png" width="240" height="221"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;This is a brilliant little timesaver. In the Blend Property pane, select the Brush property of your choice, put it into Gradient mode, click the Gradient Dropper tool, then drag over any area on screen, and Blend will reproduce the gradient under the cursor in XAML form.&lt;/p&gt; &lt;p&gt;After all that, I have the first feather of the new swan: a header bar matching the Photoshop design. Well, the background of the header bar. It needs fleshing out with some buttons.&lt;/p&gt; &lt;h4&gt;Let it Live: Control Templates and Visual States&lt;/h4&gt; &lt;p&gt;Silverlight, following WPF, has the concept of look-less controls. That is, the Controls (take Button as an example) manage their behaviour (Buttons respond to mouse clicks by executing commands) but don’t define how they are rendered on screen. That is left to the control’s &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_basics"&gt;Style&lt;/a&gt;, and specifically its &lt;a href="http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_controltemplates"&gt;ControlTemplate&lt;/a&gt;. The ControlTemplate defines the visual tree of all the UI elements needed to present the control and make it look snazzy. With a little patience, some assistance from Expression Blend, and plenty of application of the Gradient Dropper tool, it’s possible to take the built-in controls and make them look and feel just how the designer ordered.&lt;/p&gt; &lt;p&gt;I wanted Buttons that look like those in the header bar of the Photoshop design, but when the corresponding page is selected, they should change to have a background gradient with colours like the RavenDb logo.&lt;/p&gt; &lt;p&gt;When restyling a Control, it’s best to start by modifying the existing style. This way you can be sure you won’t miss an aspect of the control’s behaviour that you might otherwise forget. Blend makes this easy by giving you the option of editing a copy of the Control’s current ControlTemplate (right-click on it in the Objects and Timeline View, then select Edit Template &amp;gt; Edit a Copy). There are occasions when that little trick has failed, and I’ve ended up with an empty control template. But MSDN has come through for me then: it has a whole section containing the &lt;a href="http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx"&gt;default Styles and Control Templates for all the built-in controls&lt;/a&gt;, like this one for &lt;a href="http://msdn.microsoft.com/en-us/library/cc278069(v=VS.95).aspx"&gt;Button&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Part of the ControlTemplate defines how the control looks in its various states, when the mouse is over it, when it has focus, or when it is selected, for example. The Control itself is responsible for indicating when it has entered each state. As a designer, it’s your job to specify Storyboards that are activated each time particular states are entered. Each Storyboard can animate whichever properties it likes to achieve the desired effect – in my Buttons, for example, I animate the opacity property of a Border element to fade in a coloured background indicating that it is selected. All this is overseen by the VisualStateManager, of which, more &lt;a href="http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx"&gt;here&lt;/a&gt;. Naturally, Expression Blend has great editing support for visual states. Read John Papa’s &lt;a href="http://visualstudiomagazine.com/articles/2011/09/20/retemplating-in-blend.aspx"&gt;tutorial&lt;/a&gt; to learn more.&lt;/p&gt; &lt;p&gt;So now I have a header bar with buttons that change colour when the corresponding page is selected. Where next?&lt;/p&gt; &lt;h4&gt;Textured Backgrounds&lt;/h4&gt; &lt;p&gt;Well, that page background could do with spicing up. The Photoshop design has a nice textured background, which I extracted to a PNG file that Silverlight would understand by hiding every layer except the background, then using Photoshop’s “Save for Web &amp;amp; Devices” feature. &lt;/p&gt; &lt;p&gt;The thing about textured backgrounds is that you do want them to cover the whole of the page background, which means tiling the texture to fill all the space. WPF makes this easy with its ImageBrush, which has a &lt;a href="http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.tilemode.aspx"&gt;TileMode&lt;/a&gt; property, which, when set to a value other than None, automatically repeats the image over the whole area to be painted by the brush. Silverlight has ImageBrushes, but they don’t support tiling out of the box. Fortunately, Phil Middlemiss has supplied what is lacking in the form of the &lt;a href="http://silverscratch.blogspot.com/2010/09/tiled-image-brush-for-silverlight.html"&gt;TiledBGControl&lt;/a&gt; which does exactly what I need – you should take a look: it makes clever use of Silverlight’s pixel shader effects.&lt;/p&gt; &lt;p&gt;This is what we’ve got so far. &lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_10.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_4.png" width="600" height="334"&gt;&lt;/a&gt;&lt;/p&gt; &lt;h4&gt;The Index Editor Page, Before and After&lt;/h4&gt; &lt;p&gt;Here are a couple of other pages I’ve beautified. First, the Index Editor page, as it was before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_12.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_5.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And now:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_14.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_6.png" width="600" height="365"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Again, it was a challenge knowing where to apply my beautician’s brush first. I settled on adding the header bar at the top, and I then realised it could double up as a toolbar. Originally the page had no header at all, but by having a bread-crumb bar in the header it helps to give the user a bit more context when they’re looking at the page, as well as making it easier to navigate around.&lt;/p&gt; &lt;h4&gt;Inspiration and Icons&lt;/h4&gt; &lt;p&gt;Since my graphic-design skills are so underdeveloped, I borrow ideas shamelessly wherever I find something that fits. You may recognise the styling of the toolbar buttons in the Index page header bar as being remarkably similar to the ones on the Google Chrome toolbar. Yes – Expression Blend’s Gradient dropper does work on live applications too! Two places to check out if you find yourself short on inspiration are &lt;a href="http://quince.infragistics.com/"&gt;Quince&lt;/a&gt; and &lt;a href="http://patterntap.com/"&gt;Pattern Tab&lt;/a&gt; which both catalogue examples of user interface and user experience design from across the web. Pattern Tab especially has myriad examples of beautiful UIs.&lt;/p&gt; &lt;p&gt;In the past I’ve struggled to find icons for my projects, but I’ve recently discovered two great sources: &lt;a href="http://www.iconfinder.com/"&gt;IconFinder.com&lt;/a&gt; and &lt;a href="http://www.iconarchive.com/"&gt;IconArchive.com&lt;/a&gt;. Both have excellent search facilities (which is often what’s missing from the commercial collections you buy and download to your machine in a whacking great zip file), and are careful to call out the license attached to each icon. A surprisingly large number are licensed so that they can be used without charge in commercial products.&lt;/p&gt; &lt;h4&gt;A XAML Tip&lt;/h4&gt; &lt;p&gt;The nice thing about styling an application is that it gets easier with every page you complete. Once you’ve settled on a look for a particular kind of element, you can repeat that look on every page. Silverlight’s support for Styles and Resources makes this very easy. And I have a tip that can make it easier still. &lt;/p&gt; &lt;p&gt;I put all my styles into a single resource dictionary, Styles.xaml which I merge into my App.xaml resource dictionary. I then name all my Styles, Brushes, etc. using a hierarchical naming convention. So Styles all begin with “Style_”, Styles for Buttons would all begin “Style_Button”, and then would come the styles for different purposes: “Style_Button_Toolbar”, “Style_Button_Hero” (for those big red buttons in your app that the hero uses to save the world), etc.. The pay-off for using this convention comes when you’re hand-editing XAML and making use of Resharper’s XAML intellisense. Type “{StaticResource Style_[ControlType]” and Resharper instantly presents you with a list of all the styles that might apply.&lt;/p&gt; &lt;h4&gt;A Parting Screenshot&lt;/h4&gt; &lt;p&gt;To finish, here’s one more before and after comparison, this time of the Edit Document page. Before:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_16.png"&gt;&lt;img style="display: inline" title="Edit Document Page - Before" alt="Edit Document Page - Before" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_7.png" width="600" height="340"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;And after:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_20.png"&gt;&lt;img style="display: inline" title="image" alt="image" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/4c8d5ac8e3b0_A71A/image_thumb_9.png" width="600" height="362"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;You can begin to sense the benefit of using a consistent set of styles, as it brings a harmonious feel to the whole application.&lt;/p&gt; &lt;p&gt;I hope you’ve enjoyed this whistle-stop tour of the Raven Studio beautification process. Remember that all the code is available on &lt;a href="https://github.com/ravendb/studio"&gt;GitHub&lt;/a&gt;. We’d love to hear what you think.&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</link><guid>http://blogs.hibernatingrhinos.com/10241/xaml-magic-turning-an-ugly-silverlight-duckling-into-a-beautiful-photoshopped-swan</guid><pubDate>Mon, 24 Oct 2011 10:00:00 GMT</pubDate></item><item><title>Sneak peek at the new RavenDB Studio</title><description>&lt;p&gt;We started to develop the next generation of RavenDB Studio and I wanted to share a screenshot of first take of the new UI in order to gather some feedback:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/First-take-of_DD20/RavenDB-UI_1.png"&gt;&lt;img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="RavenDB-UI" border="0" alt="RavenDB-UI" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/First-take-of_DD20/RavenDB-UI_thumb_1.png" width="1016" height="710"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;The main goals of the new UI are:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Responsiveness.&lt;/strong&gt; You can’t see this in this picture but the UI that we play with now is &lt;em&gt;very&lt;/em&gt; responsive.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Easy to use.&lt;/strong&gt; The UI should be simple and very easy to use.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Easy to understand.&lt;/strong&gt; This goal is to create a project that is very easy to contribute to. So far, we had very little contributions to the Studio, no doubt because the current version is quite complex. We are trying to make it very easy to understand and work with the new studio, so if you have a problem or want a new feature, it would be trivial to add and contribute.&lt;/li&gt;&lt;/ol&gt;</description><link>http://blogs.hibernatingrhinos.com/9217/sneak-peek-at-the-new-ravendb-studio</link><guid>http://blogs.hibernatingrhinos.com/9217/sneak-peek-at-the-new-ravendb-studio</guid><pubDate>Sun, 02 Oct 2011 14:24:46 GMT</pubDate></item><item><title>Sneak peek at the new RavenDB Studio</title><description>&lt;p&gt;We started to develop the next generation of RavenDB Studio and I wanted to share a screenshot of first take of the new UI in order to gather some feedback:&lt;/p&gt; &lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/First-take-of_DD20/RavenDB-UI_1.png"&gt;&lt;img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="RavenDB-UI" border="0" alt="RavenDB-UI" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/First-take-of_DD20/RavenDB-UI_thumb_1.png" width="1016" height="710"&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;The main goals of the new UI are:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Responsiveness.&lt;/strong&gt; You can’t see this in this picture but the UI that we play with now is &lt;em&gt;very&lt;/em&gt; responsive.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Easy to use.&lt;/strong&gt; The UI should be simple and very easy to use.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Easy to understand.&lt;/strong&gt; This goal is to create a project that is very easy to contribute to. So far, we had very little contributions to the Studio, no doubt because the current version is quite complex. We are trying to make it very easy to understand and work with the new studio, so if you have a problem or want a new feature, it would be trivial to add and contribute.&lt;/li&gt;&lt;/ol&gt;</description><link>http://blogs.hibernatingrhinos.com/9217/sneak-peek-at-the-new-ravendb-studio</link><guid>http://blogs.hibernatingrhinos.com/9217/sneak-peek-at-the-new-ravendb-studio</guid><pubDate>Sun, 02 Oct 2011 14:24:46 GMT</pubDate></item><item><title>RavenDB Webinar #1 now available on YouTube</title><description>&lt;p&gt;The first ever RavenDB webinar aired last week, Thursday the 8th, and it was a great success. We announced it only about 12 hours in advance, yet 260+ people registered. Unfortunately the software we were using only allowed 100 people in – our apologies for all of you who wanted to participate but couldn’t get in, or heard of it too late.&lt;/p&gt; &lt;p&gt;We have now uploaded the recording to our YouTube channel here, and you can watch it from there. Embedded here is the first part:&lt;/p&gt; &lt;p&gt; &lt;div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:5fed0a60-e7ba-4a1d-ab8b-b2cf340655c9" class="wlWriterEditableSmartContent"&gt;&lt;div&gt;&lt;object width="448" height="252"&gt;&lt;param name="movie" value="http://www.youtube.com/v/PGz9GokDkkg?hl=en&amp;amp;hd=1"&gt;&lt;/param&gt;&lt;embed src="http://www.youtube.com/v/PGz9GokDkkg?hl=en&amp;amp;hd=1" type="application/x-shockwave-flash" width="448" height="252"&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/div&gt;&lt;/div&gt;&lt;/p&gt; &lt;p&gt;The other parts are available from our YouTube channel: &lt;a href="http://www.youtube.com/user/HibernatingRhinos"&gt;www.youtube.com/user/HibernatingRhinos&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;We had a second webinar last Friday, and had a very good Q&amp;amp;A session during it. Unfortunately _someone_ forgot to press the “Record” button, and there we are all left with no recording…&lt;/p&gt; &lt;p&gt;&lt;u&gt;RavenDB webinars are here to stay&lt;/u&gt;. We are still formulating our plans for future webcasts – both in terms of a format and topics. The general idea is that whenever there will be enough demand, we will do a webcast on a specific topic, or just a Q&amp;amp;A session. Ideally we would like to have a bi-weekly session, and by the time we settle on a format you can expect many more spontaneous sessions like we had last week…&lt;/p&gt; &lt;p&gt;This is why we would really like to hear back from you. What are you looking for to have, when, in what format. Any other feedback – here or in the RavenDB mailing list – is definitely welcome.&lt;/p&gt; &lt;p&gt;See you all in our next webinars…&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/8193/ravendb-webinar-1-now-available-on-youtube</link><guid>http://blogs.hibernatingrhinos.com/8193/ravendb-webinar-1-now-available-on-youtube</guid><pubDate>Sun, 11 Sep 2011 04:58:00 GMT</pubDate></item><item><title>RavenDB Webinar #1 now available on YouTube</title><description>&lt;p&gt;The first ever RavenDB webinar aired last week, Thursday the 8th, and it was a great success. We announced it only about 12 hours in advance, yet 260+ people registered. Unfortunately the software we were using only allowed 100 people in – our apologies for all of you who wanted to participate but couldn’t get in, or heard of it too late.&lt;/p&gt; &lt;p&gt;We have now uploaded the recording to our YouTube channel here, and you can watch it from there. Embedded here is the first part:&lt;/p&gt; &lt;p&gt; &lt;div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:5fed0a60-e7ba-4a1d-ab8b-b2cf340655c9" class="wlWriterEditableSmartContent"&gt;&lt;div&gt;&lt;object width="448" height="252"&gt;&lt;param name="movie" value="http://www.youtube.com/v/PGz9GokDkkg?hl=en&amp;amp;hd=1"&gt;&lt;/param&gt;&lt;embed src="http://www.youtube.com/v/PGz9GokDkkg?hl=en&amp;amp;hd=1" type="application/x-shockwave-flash" width="448" height="252"&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/div&gt;&lt;/div&gt;&lt;/p&gt; &lt;p&gt;The other parts are available from our YouTube channel: &lt;a href="http://www.youtube.com/user/HibernatingRhinos"&gt;www.youtube.com/user/HibernatingRhinos&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;We had a second webinar last Friday, and had a very good Q&amp;amp;A session during it. Unfortunately _someone_ forgot to press the “Record” button, and there we are all left with no recording…&lt;/p&gt; &lt;p&gt;&lt;u&gt;RavenDB webinars are here to stay&lt;/u&gt;. We are still formulating our plans for future webcasts – both in terms of a format and topics. The general idea is that whenever there will be enough demand, we will do a webcast on a specific topic, or just a Q&amp;amp;A session. Ideally we would like to have a bi-weekly session, and by the time we settle on a format you can expect many more spontaneous sessions like we had last week…&lt;/p&gt; &lt;p&gt;This is why we would really like to hear back from you. What are you looking for to have, when, in what format. Any other feedback – here or in the RavenDB mailing list – is definitely welcome.&lt;/p&gt; &lt;p&gt;See you all in our next webinars…&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/8193/ravendb-webinar-1-now-available-on-youtube</link><guid>http://blogs.hibernatingrhinos.com/8193/ravendb-webinar-1-now-available-on-youtube</guid><pubDate>Sun, 11 Sep 2011 04:58:00 GMT</pubDate></item><item><title>Entity Framework Profiler supports for LinqPAD</title><description>&lt;p&gt;If you’re using &lt;a href="http://www.linqpad.net/" target="_blank"&gt;LinqPAD&lt;/a&gt; and wants to profile your Entity Framework usage with the &lt;a href="http://efprof.com/" target="_blank"&gt;Entity Framework Profiler&lt;/a&gt;, you can use the following snippet of code in order to achieve that:&lt;/p&gt;&lt;pre class="csharpcode"&gt;&lt;span class="kwrd"&gt;void&lt;/span&gt; Main()
{
    HibernatingRhinos.Profiler.Appender.EntityFramework.EntityFrameworkProfiler.Initialize();
    Blogs.Take(50).Dump();
}&lt;/pre&gt;
&lt;p&gt;Please make sure to use the "C# Program" option from the "language" ComboBox, and that’s it. You can now see the the profiling data in the &lt;a href="http://efprof.com/" target="_blank"&gt;Entity Framework Profiler&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/Entity-Framework-support_B683/LinqPAD.png"&gt;&lt;img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="LinqPAD" border="0" alt="LinqPAD" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/Entity-Framework-support_B683/LinqPAD_thumb.png" width="1049" height="415"&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/7169/entity-framework-profiler-supports-for-linqpad</link><guid>http://blogs.hibernatingrhinos.com/7169/entity-framework-profiler-supports-for-linqpad</guid><pubDate>Fri, 29 Jul 2011 07:33:00 GMT</pubDate></item><item><title>Entity Framework Profiler supports for LinqPAD</title><description>&lt;p&gt;If you’re using &lt;a href="http://www.linqpad.net/" target="_blank"&gt;LinqPAD&lt;/a&gt; and wants to profile your Entity Framework usage with the &lt;a href="http://efprof.com/" target="_blank"&gt;Entity Framework Profiler&lt;/a&gt;, you can use the following snippet of code in order to achieve that:&lt;/p&gt;&lt;pre class="csharpcode"&gt;&lt;span class="kwrd"&gt;void&lt;/span&gt; Main()
{
    HibernatingRhinos.Profiler.Appender.EntityFramework.EntityFrameworkProfiler.Initialize();
    Blogs.Take(50).Dump();
}&lt;/pre&gt;
&lt;p&gt;Please make sure to use the "C# Program" option from the "language" ComboBox, and that’s it. You can now see the the profiling data in the &lt;a href="http://efprof.com/" target="_blank"&gt;Entity Framework Profiler&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/Entity-Framework-support_B683/LinqPAD.png"&gt;&lt;img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="LinqPAD" border="0" alt="LinqPAD" src="http://blog.hibernatingrhinos.com/Images/Windows-Live-Writer/Entity-Framework-support_B683/LinqPAD_thumb.png" width="1049" height="415"&gt;&lt;/a&gt;&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/7169/entity-framework-profiler-supports-for-linqpad</link><guid>http://blogs.hibernatingrhinos.com/7169/entity-framework-profiler-supports-for-linqpad</guid><pubDate>Fri, 29 Jul 2011 07:33:00 GMT</pubDate></item><item><title>RavenDB is now on Freenode</title><description>&lt;p&gt;Our mailing list is probably the most responsive one around. Nevertheless, we thought having an IRC channel could come in handy, so the community would have a place to hang around in, and perhaps also get questions answered quicker once the channel gets big enough.&lt;/p&gt; &lt;p&gt;Come visit us at #RavenDB on Freenode!&lt;/p&gt;
&lt;p&gt;BTW - There are quite a few free web UIs available if you don't want to install any software, see &lt;a href="http://webchat.freenode.net/"&gt;http://webchat.freenode.net/&lt;/a&gt; for example&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/7170/ravendb-is-now-on-freenode</link><guid>http://blogs.hibernatingrhinos.com/7170/ravendb-is-now-on-freenode</guid><pubDate>Thu, 28 Jul 2011 13:24:00 GMT</pubDate></item><item><title>RavenDB is now on Freenode</title><description>&lt;p&gt;Our mailing list is probably the most responsive one around. Nevertheless, we thought having an IRC channel could come in handy, so the community would have a place to hang around in, and perhaps also get questions answered quicker once the channel gets big enough.&lt;/p&gt; &lt;p&gt;Come visit us at #RavenDB on Freenode!&lt;/p&gt;
&lt;p&gt;BTW - There are quite a few free web UIs available if you don't want to install any software, see &lt;a href="http://webchat.freenode.net/"&gt;http://webchat.freenode.net/&lt;/a&gt; for example&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/7170/ravendb-is-now-on-freenode</link><guid>http://blogs.hibernatingrhinos.com/7170/ravendb-is-now-on-freenode</guid><pubDate>Thu, 28 Jul 2011 13:24:00 GMT</pubDate></item><item><title>RavenDB gets a new face</title><description>&lt;p&gt;RavenDB is already a very mature product: the official release was over a year ago, and it is already being used in production by several companies, some for about a year now. Before the official release, RavenDB has been in development for about 2.5 years, totaling more than 3.5 years of active, daily development now. Today we are mainly working on performance improvements, and on perfecting what’s already there.&lt;/p&gt; &lt;p&gt;So much effort has been put into development, that proper documentation was consistently lagging behind. We worked very hard on creating the most awesome document-oriented database around, that we hardly put any thought on visibility, and on spreading the word.&lt;/p&gt; &lt;p&gt;Now that the API has stabilized, and the product is definitely in a very good shape to say the least, it is time to redirect some efforts for making the documentation more comprehensive and up-to-date, and for letting people know how awesome RavenDB is.&lt;/p&gt; &lt;p&gt;The first step for doing this is giving RavenDB a face, a logo, something that people would recognize. After a few weeks of work and polls, we now have a final logo:&lt;/p&gt; &lt;p&gt;&lt;img style="display: block; float: none; margin-left: auto; margin-right: auto" src="http://ravendb.net/static/logo/RavenDBlogo.png"&gt;&lt;/p&gt; &lt;p&gt;We are already hard at work on the next steps – redesigning the website, and creating better user experience with it. Documentation is also catching up quite nicely, and we will soon be blogging about this separately (there’s much to tell…).&lt;/p&gt; &lt;p&gt;You can now also follow the RavenDB project on Twitter: &lt;a href="http://twitter.com/ravendb" target="_blank"&gt;@RavenDB&lt;/a&gt; . Starting today, we will be posting updates there as well.&lt;/p&gt; &lt;p&gt;Stay tuned while we work on making RavenDB even more awesome!&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/6145/ravendb-gets-a-new-face</link><guid>http://blogs.hibernatingrhinos.com/6145/ravendb-gets-a-new-face</guid><pubDate>Wed, 27 Jul 2011 09:00:00 GMT</pubDate></item><item><title>RavenDB gets a new face</title><description>&lt;p&gt;RavenDB is already a very mature product: the official release was over a year ago, and it is already being used in production by several companies, some for about a year now. Before the official release, RavenDB has been in development for about 2.5 years, totaling more than 3.5 years of active, daily development now. Today we are mainly working on performance improvements, and on perfecting what’s already there.&lt;/p&gt; &lt;p&gt;So much effort has been put into development, that proper documentation was consistently lagging behind. We worked very hard on creating the most awesome document-oriented database around, that we hardly put any thought on visibility, and on spreading the word.&lt;/p&gt; &lt;p&gt;Now that the API has stabilized, and the product is definitely in a very good shape to say the least, it is time to redirect some efforts for making the documentation more comprehensive and up-to-date, and for letting people know how awesome RavenDB is.&lt;/p&gt; &lt;p&gt;The first step for doing this is giving RavenDB a face, a logo, something that people would recognize. After a few weeks of work and polls, we now have a final logo:&lt;/p&gt; &lt;p&gt;&lt;img style="display: block; float: none; margin-left: auto; margin-right: auto" src="http://ravendb.net/static/logo/RavenDBlogo.png"&gt;&lt;/p&gt; &lt;p&gt;We are already hard at work on the next steps – redesigning the website, and creating better user experience with it. Documentation is also catching up quite nicely, and we will soon be blogging about this separately (there’s much to tell…).&lt;/p&gt; &lt;p&gt;You can now also follow the RavenDB project on Twitter: &lt;a href="http://twitter.com/ravendb" target="_blank"&gt;@RavenDB&lt;/a&gt; . Starting today, we will be posting updates there as well.&lt;/p&gt; &lt;p&gt;Stay tuned while we work on making RavenDB even more awesome!&lt;/p&gt;</description><link>http://blogs.hibernatingrhinos.com/6145/ravendb-gets-a-new-face</link><guid>http://blogs.hibernatingrhinos.com/6145/ravendb-gets-a-new-face</guid><pubDate>Wed, 27 Jul 2011 09:00:00 GMT</pubDate></item><item><title>Entity Framework June 2011 CTP (v4.2) is now supported in Entity Framework Profiler</title><description>&lt;p&gt;When &lt;a href="http://blogs.msdn.com/b/adonet/archive/2011/06/30/announcing-the-microsoft-entity-framework-june-2011-ctp.aspx" target="_blank"&gt;&lt;font face="Georgia"&gt;Entity Framework June 2011 CTP&lt;/font&gt;&lt;/a&gt; was out, we were asked by our users to provide support for it in the &lt;a href="http://efprof.com/" target="_blank"&gt;&lt;font face="Georgia"&gt;Entity Framework Profiler&lt;/font&gt;&lt;/a&gt;. &lt;/p&gt; &lt;p&gt;As we started to investigate how to provide support for it, we discovered that it’s not that easy task to do. The way that Entity Framework Profiler appender works in nutshell is by replacing the instances of DbProviderFactory (like SqlClientFactory or OracleClientFactory) that the client has on his machine with a custom provider factory that wrap the original provider factory. This wasn’t easy task to do, because Entity Framework June CTP made a few assumptions that make our life more complicated. Specifically:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;There is an assumption that the provider factory type is not a generic type. This broke our code which is uses a generic provider factory type which wrap each of the providers factories that the client have &lt;em&gt;on the fly, &lt;/em&gt;since the client can use any provider factory that he wants.  &lt;li&gt;Even if we use non-generic providers for each of the client’s providers, we found out that each provider should be compiled in a separate assembly because of the way that Entity Framework matches providers.&lt;/li&gt;&lt;/ul&gt; &lt;p&gt;We’re working with the Entity Framework team in order to find a solution for this in the future versions, but in the mean time if you’re using the &lt;a href="http://blogs.msdn.com/b/adonet/archive/2011/06/30/announcing-the-microsoft-entity-framework-june-2011-ctp.aspx" target="_blank"&gt;&lt;font face="Georgia"&gt;Entity Framework June 2011 CTP&lt;/font&gt;&lt;/a&gt; we temporary worked around this issue with a temp API that by providing a non-generic provider factory of type SqlClientFactory, which means that in the meantime you’ll be able to use the Entity Framework profiler only with Sql Server:&lt;/p&gt; &lt;blockquote&gt;&lt;pre class="csharpcode"&gt;EntityFrameworkProfiler.TempApi_InitializeForV42_CTP();&lt;/pre&gt;&lt;/blockquote&gt;
&lt;style type="text/css"&gt;.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
&lt;/style&gt;

&lt;p&gt;In addition, you’ll need to add the following assembly redirection to your config file in order to instruct the profiler to use the correct version of Entity Framework:&lt;/p&gt;&lt;pre class="csharpcode"&gt;&lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;runtime&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;assemblyBinding&lt;/span&gt; &lt;span class="attr"&gt;xmlns&lt;/span&gt;&lt;span class="kwrd"&gt;="urn:schemas-microsoft-com:asm.v1"&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;dependentAssembly&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;assemblyIdentity&lt;/span&gt; &lt;span class="attr"&gt;name&lt;/span&gt;&lt;span class="kwrd"&gt;="System.Data.Entity"&lt;/span&gt; &lt;span class="attr"&gt;publicKeyToken&lt;/span&gt;&lt;span class="kwrd"&gt;="b77a5c561934e089"&lt;/span&gt; &lt;span class="attr"&gt;culture&lt;/span&gt;&lt;span class="kwrd"&gt;="neutral"&lt;/span&gt; &lt;span class="kwrd"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;bindingRedirect&lt;/span&gt; &lt;span class="attr"&gt;oldVersion&lt;/span&gt;&lt;span class="kwrd"&gt;="4.0.0.0"&lt;/span&gt; &lt;span class="attr"&gt;newVersion&lt;/span&gt;&lt;span class="kwrd"&gt;="4.2.0.0"&lt;/span&gt; &lt;span class="kwrd"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;dependentAssembly&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;assemblyBinding&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;runtime&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;style type="text/css"&gt;.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
&lt;/style&gt;

&lt;p&gt;The main problem is that we can’t currently easily support providers other than SqlClient, if you do need that support on the new CTP, please let us know, and we will provide you with a custom version for that purpose. Considering that this is a CTP version, we decided to provide a partial solution that will work for most of our users and we’re working with the Entity Framework team in order to find a better solution.&lt;/p&gt;
&lt;p&gt;Happy Profiling&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The Hibernating Rhinos Team&lt;/p&gt;&lt;/blockquote&gt;</description><link>http://blogs.hibernatingrhinos.com/5121/entity-framework-june-2011-ctp-v4-2-is-now-supported-in-entity-framework-profiler</link><guid>http://blogs.hibernatingrhinos.com/5121/entity-framework-june-2011-ctp-v4-2-is-now-supported-in-entity-framework-profiler</guid><pubDate>Tue, 26 Jul 2011 09:57:00 GMT</pubDate></item><item><title>Entity Framework June 2011 CTP (v4.2) is now supported in Entity Framework Profiler</title><description>&lt;p&gt;When &lt;a href="http://blogs.msdn.com/b/adonet/archive/2011/06/30/announcing-the-microsoft-entity-framework-june-2011-ctp.aspx" target="_blank"&gt;&lt;font face="Georgia"&gt;Entity Framework June 2011 CTP&lt;/font&gt;&lt;/a&gt; was out, we were asked by our users to provide support for it in the &lt;a href="http://efprof.com/" target="_blank"&gt;&lt;font face="Georgia"&gt;Entity Framework Profiler&lt;/font&gt;&lt;/a&gt;. &lt;/p&gt; &lt;p&gt;As we started to investigate how to provide support for it, we discovered that it’s not that easy task to do. The way that Entity Framework Profiler appender works in nutshell is by replacing the instances of DbProviderFactory (like SqlClientFactory or OracleClientFactory) that the client has on his machine with a custom provider factory that wrap the original provider factory. This wasn’t easy task to do, because Entity Framework June CTP made a few assumptions that make our life more complicated. Specifically:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;There is an assumption that the provider factory type is not a generic type. This broke our code which is uses a generic provider factory type which wrap each of the providers factories that the client have &lt;em&gt;on the fly, &lt;/em&gt;since the client can use any provider factory that he wants.  &lt;li&gt;Even if we use non-generic providers for each of the client’s providers, we found out that each provider should be compiled in a separate assembly because of the way that Entity Framework matches providers.&lt;/li&gt;&lt;/ul&gt; &lt;p&gt;We’re working with the Entity Framework team in order to find a solution for this in the future versions, but in the mean time if you’re using the &lt;a href="http://blogs.msdn.com/b/adonet/archive/2011/06/30/announcing-the-microsoft-entity-framework-june-2011-ctp.aspx" target="_blank"&gt;&lt;font face="Georgia"&gt;Entity Framework June 2011 CTP&lt;/font&gt;&lt;/a&gt; we temporary worked around this issue with a temp API that by providing a non-generic provider factory of type SqlClientFactory, which means that in the meantime you’ll be able to use the Entity Framework profiler only with Sql Server:&lt;/p&gt; &lt;blockquote&gt;&lt;pre class="csharpcode"&gt;EntityFrameworkProfiler.TempApi_InitializeForV42_CTP();&lt;/pre&gt;&lt;/blockquote&gt;
&lt;style type="text/css"&gt;.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
&lt;/style&gt;

&lt;p&gt;In addition, you’ll need to add the following assembly redirection to your config file in order to instruct the profiler to use the correct version of Entity Framework:&lt;/p&gt;&lt;pre class="csharpcode"&gt;&lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;runtime&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;assemblyBinding&lt;/span&gt; &lt;span class="attr"&gt;xmlns&lt;/span&gt;&lt;span class="kwrd"&gt;="urn:schemas-microsoft-com:asm.v1"&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;dependentAssembly&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;assemblyIdentity&lt;/span&gt; &lt;span class="attr"&gt;name&lt;/span&gt;&lt;span class="kwrd"&gt;="System.Data.Entity"&lt;/span&gt; &lt;span class="attr"&gt;publicKeyToken&lt;/span&gt;&lt;span class="kwrd"&gt;="b77a5c561934e089"&lt;/span&gt; &lt;span class="attr"&gt;culture&lt;/span&gt;&lt;span class="kwrd"&gt;="neutral"&lt;/span&gt; &lt;span class="kwrd"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="kwrd"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html"&gt;bindingRedirect&lt;/span&gt; &lt;span class="attr"&gt;oldVersion&lt;/span&gt;&lt;span class="kwrd"&gt;="4.0.0.0"&lt;/span&gt; &lt;span class="attr"&gt;newVersion&lt;/span&gt;&lt;span class="kwrd"&gt;="4.2.0.0"&lt;/span&gt; &lt;span class="kwrd"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;dependentAssembly&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;assemblyBinding&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="kwrd"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="html"&gt;runtime&lt;/span&gt;&lt;span class="kwrd"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;style type="text/css"&gt;.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
&lt;/style&gt;

&lt;p&gt;The main problem is that we can’t currently easily support providers other than SqlClient, if you do need that support on the new CTP, please let us know, and we will provide you with a custom version for that purpose. Considering that this is a CTP version, we decided to provide a partial solution that will work for most of our users and we’re working with the Entity Framework team in order to find a better solution.&lt;/p&gt;
&lt;p&gt;Happy Profiling&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The Hibernating Rhinos Team&lt;/p&gt;&lt;/blockquote&gt;</description><link>http://blogs.hibernatingrhinos.com/5121/entity-framework-june-2011-ctp-v4-2-is-now-supported-in-entity-framework-profiler</link><guid>http://blogs.hibernatingrhinos.com/5121/entity-framework-june-2011-ctp-v4-2-is-now-supported-in-entity-framework-profiler</guid><pubDate>Tue, 26 Jul 2011 09:57:00 GMT</pubDate></item></channel></rss>
