As many of you know, the kF forums were upgraded recently. As part of the upgrade, all of the old styles have been removed. No worries though! New styles will be underway, and to help speed things up, here is a contest where you….get to design forum styles!

Rules – Summarized
The rules are very simple – create your own forum style. There are two parts to that. The first part is customizing the header, and the second part is defining the main forums look/feel:

1. A template of the header for you to modify can be found here: http://www.kirupa.com/forum/header.htm 
    
2. The header modifications cannot involve you removing the search functionality, kirupa.com text, or changing the width to anything but 850px.
    
3. Your header design must be plain HTML with no Flash or Silverlight parts.
    
4. Along with the revised header, you must also submit an image mockup of the main forum look/feel such as the color scheme, any custom icons (provided they are the Silk icons that are currently used throughout the site and forums), and any images such as anything you would want for the background, etc.
    
5. Once you have everything done, submit your entry by creating a new thread in the kForum Style Contest forum with your entry. You can zip up all of the files and include them as an attachment or provide web links to them as you wish.
    
6. The contest ends on June 1st, and you can submit as many entries as you want.

That’s all there is to it. In case you want more details, here are the rules in an expanded form.

Customizing the Header
The following page contains the source for the header currently used on the default style: http://www.kirupa.com/forum/header.htm Hack and slash it in any way you want….sort of!

The only things that you need to maintain is functionality of the search box, the kirupa.com text that takes you to the home page when clicked, and the width of the main table which is set at 850px. Everything else is up for editing, and you can also come up with your own design for the kirupa.com logo and any icons currently displayed provided the icons are your own are part of the Silk icons.

Everything in the header must be plain HTML. In other words, the header may not contain ANY FLASH, SILVERLIGHT, etc. content. Imagine that these headers will be used for the next four years. Having compiled content means that I would need to keep track of the source files should any updates need to be made in the future. By keeping everything as HTML, that problem gets solved.

Customizing the Main Forum Look/Feel
The header is only one part of the design. The bigger part that users are going to see more of is the actual color scheme, background images, icons, etc. that the forums will take on. For this, simply provide an image mockup of the design that you would like to use along with any assets such as the Silk icons, background image, etc.

Prizes
All of the prizes will be distributed via PayPal. First place winner will receive $250, second place will receive $150, and third place will receive $100. PayPal is the only accepted form of payment, so please make sure to have a valid PayPal account that accepts money sent from the US.

Beyond the monetary awards, your name will also be listed next to each style both on the style picker as well as on member’s profile area.

The style listed on the post:

Your name and style listed in the style picker found at the bottom of each post:

Judging
Judging will be in two phases as always. The first phase is where a few select individuals narrow the entries down to a more manageable number. The second phase is where everyone votes on the entries to determine who the winners will be.

If you have any questions, please post your questions below and I’ll get back to you shortly.

Cheers!
Kirupa

A couple of days ago, we released Expression Studio 2 – of which Expression Blend and Design are components of. Even though we just shipped, all of us are quite busy planning our next versions. Because of that, now is your chance to influence our upcoming releases by letting us know what you would like to see, what you would like to keep seeing, and feel free to also let us know what you don’t want to see!

Head over to our official blog and let your views be known. Comments are closed on this post to allow all feedback to be consolidated on our team blog.

Cheers!
Kirupa

In a previous post, I described how to quickly create XML data by creating elements directly without having to painstakingly recreate the tree using the original DOM API. Creating XML data is only a part of what you will do in the real-world. Another (possibly more tricky) part is adding data to an existing collection of XML data.

In this post, I will quickly describe how to add data to an existing XML file by looking at two examples. The first, easier, example is one where you simply add a new XElement to the end of a collection of XElements. The more complicated example is where you add a new XElement in a particular location. Let’s get started.

First, create a simple Console app and add the following line of code:

XDocument books = XDocument.Load(@"http://www.kirupa.com/net/code/books.xml");

In this line of code, all I am doing is just loading our familiar XML file containing some books. If you do a Console.WriteLine on the books XDocument, you will see the XML data you will be working with:

Our XML file contains data on four books, and what I want to do now is add another book. A book I read recently is the Complete Stories and Poems of Edgar Allan Poe, and I want to add that to my current collection of books.

To do that, I need to add that book as a child of of our Books element, and this new book needs to resemble all of the books I currently have. In other words, it needs to have the ISBN as an attribute with title and author as its children. The code for doing that is:

books.Element("Books").Add(

  new XElement("Book",

    new XAttribute("ISBN", 0385074077),

    new XElement("title", "Complete Stories and Poems of Edgar Allan Poe"),

    new XElement("author", "Edgar Allan Poe")));

What I am doing is pretty straightforward. Since I want to add our book as a child of our Books element, I go directly to it by using the Element method found in our XDocument object, books. The Element method takes an XName as its argument, and an XName is simply a string representing the element’s name. In this case, the XName I am interested in is called Books, so what gets returned by the first line of our multi-line statement is a reference to the Books element itself.

With the Books element in our crosshairs, the Add method allows you to construct your new XElement, its attributes, and children just like I showed you in the earlier post. If I run our application now, notice that our new book makes an appearance:

The Add method, by default, adds your new XElement to the end of your parent element’s children. If you wanted to add your new book to the beginning of your parent’s children, you can use the exact same code and replace Add with AddFirst. But, what if you wanted to insert a book in-between a set of nodes? Let’s look at that next.

For some reason, I want to add The Indispensable Calvin and Hobbes book directly after Undaunted Courage. The standard Add or AddFirst methods won’t work, and there are no methods that allow you to specify an index position to insert a value at a particular location. Instead, this is where the querying capabilities of LINQ come in handy.

The following is the code for adding Calvin and Hobbes to my book collection directly after Undaunted Courage:

books.Element("Books").

  Elements("Book").

    Where(e => ((string)e.Element("title")) == "Undaunted Courage").

    Single<XElement>().AddAfterSelf(

       new XElement("Book",

         new XAttribute("ISBN", 0836218981),

         new XElement("title", "The Indispensable Calvin And Hobbes"),

         new XElement("author", "Bill Watterson")));

When I run the above code and pass our books XDocument to the command line, the following is what I see:

Notice that our book, The Indispensable Calvin and Hobbes, appears directly after Undaunted Courage. Isn’t is great when code does what you want it to do?

The important lines to pay attention to are what I emphasize below:

books.Element("Books").

  Elements("Book").

    Where(e => ((string)e.Element("title")) == "Undaunted Courage").

    Single<XElement>().AddAfterSelf(

       new XElement("Book",

         new XAttribute("ISBN", 0836218981),

         new XElement("title", "The Indispensable Calvin And Hobbes"),

         new XElement("author", "Bill Watterson")));

Notice that I am using a lambda expression where I use the Where operator to specify what to look for when iterating through our data. The lambda expression (e => ((string)e.Element("title")) == "Undaunted Courage") returns the appropriate element whose title value is Undaunted Courage. Once I have that value, then just imagine that the highlighted lines are the equivalent of a hard-coded element to which I am calling the AddAfterSelf method to. Once you see that relation, what you see in this code and what I posted earlier is only the variation of me calling AddAfterSelf instead of just Add.

LINQ is very straightforward to understand, for there are only a few key concepts that you need to keep in mind. Those few key concepts, though, are extremely flexible, so the challenge is in seeing through the flexibility until the key concepts become visible again. It is easy to look at some of the code and feel overwhelmed, but more often than not, it is just an elaboration of a very simple code snippet that you’ve seen many times before.

Cheers!
Kirupa

In a larger article about professional web design forums, Smashing Magazine featured our little community along with some other really good ones.

To screenshot exactly what they said:

A big thanks to everyone who continues to make this a fun place for me to hang out!

Cheers!
Kirupa

I’m a huge fan of LINQ…short for Language Integrated Query. In case you are not familiar with LINQ, in a nutshell, it is a part of C# 3.0 .NET Framework 3.5 that allows you to (among other things) read and write XML files. Based purely on the XML-specific part of my LINQ description, you may be wondering what makes LINQ so much different from that of the XML DOM API that the .NET Framework has had for quite a while.

Since lines of code are better than words, in this post, let’s look at the lines of code needed to represent the following XML file:

The code for adding just one book (node) using the older XML API is:

static void Main(string[] args)

{

XmlDocument xmlDoc = new XmlDocument();

 

//Adding the parent <Books> Element

XmlElement booksElement = xmlDoc.CreateElement("Books");

 

//Adding the <Book> Element

XmlElement bookElement = xmlDoc.CreateElement("Book");

booksElement.AppendChild(bookElement);

 

// Adding <title> and Setting Value

XmlElement titleElement = xmlDoc.CreateElement("title");

titleElement.InnerText = "Great Gatsby";

bookElement.AppendChild(titleElement);

 

// Adding <author> and Setting Value

XmlElement authorElement = xmlDoc.CreateElement("author");

authorElement.InnerText = "F. Scott Fitzgerald";

bookElement.AppendChild(authorElement);

 

// Creating Attribute and assigning it to <Book>

XmlAttribute bookAttribute = xmlDoc.CreateAttribute("ISBN");

bookElement.SetAttributeNode(bookAttribute);

bookAttribute.Value = "0553212419";

 

// Adding root element

xmlDoc.AppendChild(booksElement);

}

If I wanted to add the remaining three books, I will have to duplicate much of the above code several more times to make sure all of my data is represented. To contrast what you see above, the following is the code for representing the the entire XML file in LINQ:

XDocument books =

new XDocument(new XElement("Books",

    new XElement("Book",

        new XAttribute("ISBN", 0553212419),

        new XElement("title", "Sherlock Holmes: Complete
                             Novels and Stories, Vol 1"),

        new XElement("author", "Sir Arthur Conan Doyle")),

    new XElement("Book",

        new XAttribute("ISBN", 0743273567),

        new XElement("title", "The Great Gatsby"),

        new XElement("author", "F. Scott Fitzgerald")),

    new XElement("Book",

        new XAttribute("ISBN", 0684826976),

        new XElement("title", "Undaunted Courage"),

        new XElement("author", "Stephen E. Ambrose")),

    new XElement("Book",

        new XAttribute("ISBN", 0743203178),

        new XElement("title", "Nothing Like It In the
                             World"),

        new XElement("author", "Stephen E. Ambrose"))));

 

Can you see the difference? Using LINQ, you are able to represent an entire XML file comprised of four main nodes in fewer lines than it takes to represent just a single node using the older XML API.

Beyond just the lines of code, notice that the LINQ version is more readable. You can quickly glance through your code and, even if you are not a coder, have a good idea of what your code is trying to do.

Going Further
If you are interested in learning a bit more about LINQ, there are two tutorials on the site written by Granville Barnett that can help you out:

• Introduction to LINQ
• Further Exploration with LINQ

I may devote a few tutorials in the future describing other aspects of LINQ.

Cheers!
Kirupa

In my most recent tutorial, I discuss the advantages of setting up your solution with both a Silverlight project as well as a Web Site. What I didn’t exactly do is describe what a XAP actually is. XAP, the sound an electro-proton gun would make when fired at an incoming spaceship, doesn’t really stand for anything. What it is, though, is a compressed archive of everything your Silverlight plug-in needs to display your project.

The archive is essentially the equivalent of a Zip file that has been renamed with the XAP extension. Let’s take a look at the XAP created from my earlier Random Colors post:

Using any unzipping program (I like 7-zip a lot!), you can extract your XAP and see all of its contents:

In my case, RandomColors.dll pertains to the project that you built, and your AppManifest.xaml contains the information about what files are in this XAP and where:

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="RandomColors" EntryPointType="RandomColors.App" RuntimeVersion="2.0.30226.2">

<Deployment.Parts>

<AssemblyPart x:Name="RandomColors" Source="RandomColors.dll" />

<AssemblyPart x:Name="System.Windows.Controls" Source="System.Windows.Controls.dll" />

<AssemblyPart x:Name="System.Windows.Controls.Extended" Source="System.Windows.Controls.Extended.dll" />

</Deployment.Parts>

</Deployment>

All of this should be pretty straightforward. Even for complicated projects, unless you specify otherwise, all of the resources you use in your project will be compiled into the XAP as well.

Reducing your XAP File Size by Compressing Yourself
There is something interesting I noticed while playing around with this. XAPs are created by a tool called chiron.exe which is a part of the Silverlight Tools installation. When you build your project, Chiron goes ahead and compresses your output into the XAP format for you. That’s not the interesting part.

When I extracted those files and re-compressed them using the maximum compression setting of 7-zip, my file size actually went down by 32KB! At first I thought my project might no longer work. To test that out, I simply renamed the .ZIP extension to .XAP, pasted it into my bin folder, and opened my HTML page. Strangely enough, everything displayed just fine!

Manually recompressing the contents of the XAP gave me a good file size reduction without causing my project to break.

Cheers!
Kirupa

One of the neat things in Silverlight is the WebClient class. This class allows you to load a whole host of external content either as a string or as a stream. Of course, the first thing I did was to attempt to load images.

The code for loading an image via code is:

public Page()

{

// Required to initialize variables

InitializeComponent();

LoadImage();

}

 

private void LoadImage()

{

//

// Creating WebClient object and setting up events

//

WebClient downloader = new WebClient();

downloader.OpenReadCompleted += new OpenReadCompletedEventHandler(downloader_OpenReadCompleted);

downloader.DownloadProgressChanged += new DownloadProgressChangedEventHandler(downloader_DownloadProgressChanged);

 

//

// Specify Image to load

//

downloader.OpenReadAsync(new Uri("Creek.jpg", UriKind.Relative));

}

 

void downloader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

{

//

// Create a new BitmapImage and load the stream

//

BitmapImage loadedImage = new BitmapImage();

loadedImage.SetSource(e.Result);

 

//

// Setting our BitmapImage as the source of a BackgroundImage control I have in XAML

//

BackgroundImage.Source = loadedImage;

 

//

// Done to fix a bug that exists in Beta 1

//

BackgroundImage.Visibility = Visibility.Visible;

}

 

void downloader_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)

{

// Progress Updates

// loadPercentage.Text = e.ProgressPercentage.ToString();

}

The code for doing this is pretty straightforward. My favorite part of the WebClient class is the DownloadProgressChanged event that allows me to quickly create a preloader with minimal effort. Thinking back at how complicated preloaders used to be to create on other platforms (edit: languages such as AS2), it feels odd just writing one line of code to get progress updates for whatever it is I am downloading.

One thing to note is that, there is currently a bug in the Beta 1 version where an image gets loaded but doesn’t actually display. The fix for that is quite simple as you can see from my comment in the code. Just set the Visibility of your Image control to Visibility.Visible.

There are some other cool examples of how to load external content into your Silverlight app:

• Pete Blois : Dynamic Loading of External Content
• Laurent Bugnion : Downloading Zipped Files with WebClient
• Karen Corby : Silverlight HTTP Networking Stack Overview, Part 1

Cheers!
Kirupa

I was browsing through Tim Sneath’s excellent blog when I stumbled upon a funny spoof video titled Silverlight Rehab that a few MS colleagues made:

The video is great all around, but what puts it over the edge is the mention of Deep Zoom at around 3:25.

Cheers!
Kirupa

One of the questions that I get asked about quite frequently concerns the fun and wonderful world of copyrights. Since this isn’t a simple yes/no answer, let me list out the common questions people have asked and my answers to them:

Hope the above info helps, and if there is a question you have that I did not address, please feel free to comment below or send me an e-mail (kirupa.at.kirupa.com).

Cheers!
Kirupa

Well...nothing eventful happened for April 1st on kirupa.com. Since many of you had some bizarre expectation of being entertained, and in light of April Fool’s being over, I can’t legally prank any of you. Despite that limitation, if you voluntarily happened to walk into a prank, I wouldn’t stop you. Keep your expectations really REALLY low, and read on.

The Challenge
So, if you are feeling lucky, below you will find a few links. One of the links is that of a cute kitten. Another link is that of a Rickroll:

http://www.youtube.com/watch?v=eBGIQ7ZuuiU
http://www.youtube.com/watch?v=ZOU8GIRUd_g

In case you are not familiar with this, cute kittens are epic wins. Rickrolls are not.

Inspiration for this goes to Tom Forsythe on the Zune team who posted a variation of this on one of our internal distribution lists. I chose unwisely and felt unclean for the rest of the day.

Cheers!
Kirupa