Michael Crump - January 2011 Entries

Posts: 133
Comments: 328
Trackbacks: 0

January 2011 Entries

Building a personal website using Silverlight.

I’ve always believed that as a developer you should always have a hobby project going on. I think a hobby project needs to contain at least one of following things:

Something that you have never done before.
Something that you are interested in.
Something that you can work on in your spare time without affecting your *paying* job.

I decided my hobby project would be an entire web application written in Silverlight that could be used as a self-promotion/marketing tool. This goal of the site is to provide information on the work that I’ve done to conferences, future employers and anyone else that wanted to learn more about me.

Before I go any further, if you just want to check out the site then it is located at http://michaelcrump.info.

So, what did I use to create it?

MVVM Light – I’m a big fan of this software. The item and project templates plus code snippets make this a huge win for any SL/WPF/WP7 application.
Jetpack Theme by Microsoft – I suck at designing so I used this template to help speed up this project.
ComponentOne 3rd Party Controls – I have a license and really like several of their products.
A User Control that Jeremy Likness created called DynamicXaml (used with his permission). I had created my own version of this a while back, but Jeremy’s implementation was simply better.

Main Page – Designed to create my “brand”. This was built for a quick glimpse of who I am and what do I do.

Blog – The best marketing tool for a developer is their blog. I decided to go with an HTML page displaying my site and the user could pop into full-screen if desired. I also included my feed and Silverlight-Zone. (Another site I work on)

Online – This page links to sites that I have been featured on as well as community involvement and awards. I also have a web service that I can update this information without re-compiling the Silverlight App.

Projects – I’ve been wanting to use a CoverFlow for a really long time now. =) This page list several hobby projects as well as a few professional projects.

Resume Page – This page only exist because I got tired of sending companies my resume in e-mail. I can now provide a deep link to this page and the recruiter can print, search or save my resume. The PDF of my resume exist in a folder that I can easily update without recompiling the app.

Contact Page – Just a contact page with a web service that sends the email. The Send button becomes disabled after a successful send. I thought of adding captcha to this page but in the end didn’t think it was worth it.

Looking back at this app, I’m happy with how it turned out. I love Silverlight and I am already thinking of my next hobby project. (Thinking another Windows Phone 7 app or MVC3).

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bN1

Posted On Thursday, January 27, 2011 5:33 AM | Feedback (5)

Does your Silverlight application really have to end in .XAP?

The answer is surprisingly no. It is time to end the myth that when hosting a Silverlight application, it has to end in .XAP. Let’s look at a sample Silverlight project first.

When you create a new Silverlight Project and inspect the ClientBin folder, you will see that the filename ends in .XAP.

What do you think would happen if we renamed this file to .zip and updated our hosting page to look like the following?

<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="ClientBin/EndInXapIsCrap.zip"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50826.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

OK, now this is interesting. If we run the application, it works just like it does with the file named .XAP. We can view the page source on the Silverlight application and verify this.

Let’s examine what happened to our actual Silverlight Project. A new .XAP file was created, but it left our .ZIP alone.

If it works with .zip, what about any other extension? Let’s try a bogus extension like .MIKE. As you can see below, that that works too.

So now your probably thinking, can’t we can change the filename in the Silverlight project and it will stick right? The answer is you can but it will change itself back after you save the project.

Default Filename: (EndInXapIsCrap.xap)

New File Name – Notice the .zip file: (EndInXapIsCrap.zip)

After you save the project – it automatically appends .xap to whatever filename you entered. (EndInXapIsCrap.zip.xap)

So, what is the point of all of this? Well, if the server doesn’t allow adding MIME types then you can rename to whatever extension that you choose. You can also setup setup a post-build event to run a batch file or whatever and rename it the .XAP back to whatever extension we want. This is a very nifty trick that I hope someone finds useful.

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bLf

Posted On Friday, January 21, 2011 7:22 AM | Feedback (2)

I will be speaking at SSWUG Spring V-Conference on Silverlight.

I will be presenting several sessions on Silverlight 4 at the SSWUG V-Conference on April 20th through April 22nd.

The sessions include:

15 Things I learned about Silverlight.

Description: This session is great for an audience that has never worked with Silverlight. It describes my real-world experience developing for Silverlight 4. It should help the audience avoid some of the beginner mistakes with working with Silverlight.

Tools and Utilities for the .NET Developer (based off of http://tools.michaelcrump.net)

Description: This sessions demonstrates the tools that I use at a .NET developer to do my job day in and day-out. The audience usually leaves with a better understanding of some of the FREE (and a few paid) tools available for .NET developers.

20 Tips and Tricks for the Silverlight Developer.

Description: 20 Tips and Tricks to make your Silverlight Development go faster. If you work with Silverlight daily then this is the session for you.

Beginner's Guide to Silverlight Development

Description: This session to to introduce Silverlight and get the audience familiar with XAML. We create a basic Silverlight Application starting from File –> New Project.

If you are interested in this then you can register here and don’t forget to use VIP Code “SP11DBTechMC” to save $30 on the overall purchase.. The full list of speakers is located here.

I wanted to thank SSWUG for this great opportunity.

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bLL

Posted On Thursday, January 20, 2011 7:45 AM | Feedback (0)

If I were in a Silverlight focus group, here is ten things I would say.

Silverlight is a great product right off the shelf. I use it, love it and spend a lot of time helping the community understand it. This however, doesn’t mean that I don’t think that it can get better. If I were invited to a Microsoft Focus Group about Silverlight here is 10 things I would say:

We need more navigation templates.
- I’ve found (4) templates that Microsoft has released (Cosmo, Windows 7, Accent and JetPack). This number needs to be around 16. In order to get more people developing for Silverlight, we need to give them a variety of templates to get them off the ground quickly.
Silverlight needs to ship with the next version of Windows.
- At least version 4 needs to be pre-installed on Windows going forward. It’s small, in its own sandbox and I cannot find a reason for it not to be included.
Silverlight needs to run on more platforms.
- iOS and Android are the key here. I think Microsoft should shoot for Android first since I believe Android will take the lead in the mobile market (at least for the short-term). It would also be great to see Microsoft use Silverlight as the focus on their new tablets / “AppleTV”. I would even invest in getting it working with Kinect.
When creating a new project in Silverlight, we should have the option to create a Unit Test.
- Most Silverlight developers are not unit testing. If this is surprising to you then you need to get out and talk to more developers. I partially blame this on Microsoft. When you create a new ASP.NET MVC application, you simply put a check to create a Unit Test project. We need the same thing for Silverlight. We should steer the developer into the right direction.
Design patterns such as MVVM need to be easier to implement in Silverlight solutions.
- I’d go so far as to say that MVVM Light should ship with Visual Studio. With the project / item templates and code snippets, Laurent puts you into the right direction. This is the way that it should have been. Easy for the 9-5 developer to grasp. I believe the majority of developers use code behind because that’s what is in all the demos provided by Microsoft. They are not trying to write sucky code it is that they simply don’t know a better way.
The XAP Files should be obfuscated/unused references deleted by default when in “Release” mode.
- A better Silverlight experience starts with a smaller XAP file. The less that a user has to download is the better, even with the majority of people on broadband. I would also recommend built-in obfuscation by Microsoft. People are paranoid that they can rename the .zip and run it through reflector.
Get rid of the boring install experiences.
- Here is a great write up on what I’m talking about. The default “Install Silverlight” and “Loading screens” suck. They suck bad. We need a choice of templates that a professional designer has created.
Silverlight needs to supports more image formats.
- For example: it would be great to use .gif’s without converting them to .png.
Switching between Blend 4 and VS2010 to develop a Silverlight application is a pain.
- Probably one of the biggest issues that I can’t think of a good solution for. It would be nice if VS2012 had the best of both worlds and you never have to leave VS.
We need reporting controls with SSRS included with the Silverlight Toolkit.
- I can’t think of another control that we need built into the toolkit. It would also be helpful to have export to .xls, .pdf and .doc included with the control.

I hope that this post will at least get a few people talking. Who knows, Microsoft could be working on these things right now. Thanks for reading!

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bKf

Posted On Monday, January 17, 2011 6:34 AM | Feedback (19)

Create Custom Speech Bubbles in Silverlight.

I had a reader email me the following question:

“How do you create Speech Bubbles in Silverlight/WPF without adding any extra .dlls?

Right off the bat, I know at least two ways to create the speech bubbles that look just like the ones in comic books.

Using the Callout Shapes included with Blend 4.
Using the free 3rd party control named FreeBubbles (I used this before Blend 4).

Unfortunately, we cannot use either of these as they will both add extra .dll’s to the project.

So why wouldn’t you want to use one of those? I can think of a few reasons:

You do not want to increase the size of your .XAP by including extra .dll’s.
You do not have Expression Blend or the license to the use the .dll’s.
You want a custom Speech Bubble that is not included in the four “Callout” Controls with Blend.

Instead of using one of these methods, we will create a Speech Bubble in Blend 4 using Path element and a TextBlock.

Before we get started, lets look at the Callout Shapes included with Blend 4. Using Blend 4 you can simply drag/drop these controls onto your Silverlight application and you are ready to go.

We can create all of these Speech Bubbles and even some of the modern bubbles used in recent comic books. Lets get started.

Start up Expression Blend 4 and select the Pen Tool.

On the Art Board, start connecting the dots like I did below. You can add a color if you wish.

…keep going

…complete

Let’s go ahead and add some text to the Speech Bubble.

Drag a TextBlock from the Panel and put it directly inside the Speech Bubble.

Go ahead and set the TextAlignment to Center for the TextBlock. and give it some text.

At this point, you could go ahead and create a user control if you want to reuse the Speech Bubble you created. Select both the Path and the TextBlock by clicking then while holding down CTRL and then Right Click them.

Select Make Into User Control.

Give it a name and then Build your project.

Lets create another one using the Ellipse for the older comic book style of Speech Bubbles. Drag an Ellipse to the Artboard and give it a color. Now, grab the Pen and drag a triangle like I did below.

Simply drag it over a corner of the Ellipse.

Select Combine then Unite and you will have a Path.

At this point, you can go ahead and add a TextBlock like we did earlier.

Lets go ahead and create a rounded rectangle one by adding a Rectangle to the Artboard.

Go ahead and set the RadiuX and RadiusY to 25 to give it rounded edges.

Let’s create another path and drag it right on top of our rounded rectangle like we did earlier.

…looking good

Select Combine then Unite and you will have a Path.

At this point, you can go ahead and add a TextBlock like we did earlier.

So let’s look at what we’ve created today using the path element and TextBlock. As you can tell, it required more work but meets the requirements. This was actually fun to do and I encourage anyone that visits my blog to send in request like this.

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bJV

Posted On Tuesday, January 11, 2011 10:56 AM | Feedback (0)

Prevent your Silverlight XAP file from caching in your browser.

If you work with Silverlight daily then you have run into this problem. Your XAP file has been cached in your browser and you have to empty your browser cache to resolve it. If your using Google Chrome then you typically do the following:

Go to Options –> Clear Browsing History –> Empty the Cache and finally click Clear Browsing data.

As you can see, this is a lot of unnecessary steps. It is even worse when you have a customer that says, “I can’t see the new features you just implemented!” and you realize it’s a cached xap problem. I have been struggling with a way to prevent my XAP file from caching inside of a browser for a while now and decided to implement the following solution.

If the Visual Studio Debugger is attached then add a unique query string to the source param to force the XAP file to be refreshed.
If the Visual Studio Debugger is not attached then add the source param as Visual Studio generates it. This is also in case I forget to remove the above code in my production environment.
I want the ASP.NET code to be inline with my .ASPX page. (I do not want a separate code behind .cs page or .vb page attached to the .aspx page.)

Below is an example of the hosting code generated when you create a new Silverlight project. As a quick refresher, the hard coded param name = “source” specifies the location of your XAP file.

<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="ClientBin/SilverlightApplication2.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50826.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>

We are going to use a little bit of inline ASP.NET to generate the param name = source dynamically to prevent the XAP file from caching. Lets look at the completed solution:

<form id="form1" runat="server" style="height:100%">
   <div id="silverlightControlHost">
       <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
       <%
           string strSourceFile = @"ClientBin/SilverlightApplication2.xap";
           string param;    
           if (System.Diagnostics.Debugger.IsAttached)
               //Debugger Attached - Refresh the XAP file.
               param = "<param name=\"source\" value=\"" + strSourceFile + "?" + DateTime.Now.Ticks + "\" />";
           else
           {
               //Production Mode 
               param = "<param name=\"source\" value=\"" + strSourceFile + "\" />";
           }
           Response.Write(param);
        %> 
         <param name="onError" value="onSilverlightError" />
         <param name="background" value="white" />
         <param name="minRuntimeVersion" value="4.0.50826.0" />
         <param name="autoUpgrade" value="true" />
         <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
         </a>
       </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>

We add the location to our XAP file to strSourceFile and if the debugger is attached then it will append DateTime.Now.Ticks to the XAP file source and force the browser to download the .XAP. If you view the page source of your Silverlight Application then you can verify it worked properly by looking at the param name = “source” tag as shown below.

<param name="source" value="ClientBin/SilverlightApplication2.xap?634299001187160148" />

If the debugger is not attached then it will use the standard source tag as shown below.

<param name="source" value="ClientBin/SilverlightApplication2.xap"/>

At this point you may be asking, How do I prevent my XAP file from being cached on my production app? Well, you have two easy options:

1) I really don’t recommend this approach but you can force the XAP to be refreshed everytime with the following code snippet.

<param name="source" value="ClientBin/SilverlightApplication2.xap?<%=Guid.NewGuid().ToString() %>"/>

NOTE: You could also substitute the “Guid.NewGuid().ToString() for anything that create a random field. (I used DateTime.Now.Ticks earlier).

2) Another solution that I like even better involves checking the XAP Creation Date and appending it to the param name = source. This method was described by Lars Holm Jenson.

<%
    string strSourceFile = @"ClientBin/SilverlightApplication2.xap";
    string param;
    if (System.Diagnostics.Debugger.IsAttached)
        param = "<param name=\"source\" value=\"" + strSourceFile + "\" />";
    else
    {
        string xappath = HttpContext.Current.Server.MapPath(@"") + @"\" + strSourceFile;
        DateTime xapCreationDate = System.IO.File.GetLastWriteTime(xappath);
        param = "<param name=\"source\" value=\"" + strSourceFile + "?ignore="
                + xapCreationDate.ToString() + "\" />";
    }
    Response.Write(param);
%>

As you can see, this problem has been solved. It will work with all web browsers and stubborn proxy servers that are caching your .XAP. If you enjoyed this article then check out my blog for others like this. You may also want to subscribe to my blog or follow me on Twitter.

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bIM

Posted On Thursday, January 06, 2011 9:49 AM | Feedback (6)

A better way to organize your Silverlight Code Snippets.

I hate re-writing code. I also hate it when I find a great code snippet on the web and forget to bookmark it or it gets lost in my endless sea of bookmarks. So what do you do to get around this? This is the question that I was asking myself at the end of 2010. How can I get my Silverlight code organized?

My requirements for a snippet manager were:

Needs to be FREE.
An easy way to view XAML/C# code behind together in one “view”.
I wanted the ability to store the code snippets in cloud in case my HDD dies.
Searchable Keywords to quickly find code snippets.

I started looking for a snippet manager that would allow me to do just that and finally found Snippet Manager.

Before going any further, I think that one of the most important things to note here is that this software supports 37 languages. It’s not just for Silverlight developers nor C# only guys. The software supports Java, SQL and even COBOL.

Below is a screenshot of the Snippet Manager that shows my Silverlight code snippet. You will notice that I have highlighted two sections. The top part is my XAML and the bottom is my C# code behind.

I’ve included a sample below of my code snippets so that you can get an idea of how I organized it. Another thing that’s great about this software is that it supports plain text. I added some connection strings in the TEXT section below.

Once you have finished adding your code snippets, you can store them in the cloud. I created a FTP directory called “snippets” on my FTP Server and hit the upload button once I am finished adding my new codes snippets. This will allow me to use the code snippets on another computer with this application on my USB Key. See screenshots below:

Enter your FTP credentials below:

Hit the Uploads button on the Toolbar:

Another great feature of the Snippet Manager is that you can also integrate this into VS2010 by clicking Tools –> External Tools:

And setting up your External Screen to point to the Executable:

You can now launch it by going to Tools –> Snippet Manager. If you want you could also a shortcut to launch the program with HotKeys.

As you can see, this is a nice little program that includes everything needed to organize your code snippets very clean. I didn’t go over every feature but this is something that you might want to download and give it a shot.

Subscribe to my feed

Share This Post:
Short Url: http://wblo.gs/bHs

Posted On Tuesday, January 04, 2011 8:55 AM | Feedback (1)

What is the best book on Silverlight 4?

Silverlight/Expression 4 Books!

I recently stumbled upon a post asking, “What is the best book on Silverlight 4?” In the age of the internet, it can be hard for anyone searching for a good book to actually find it. I have read a few Silverlight 4/Expression books in 2010 and decided to post the “best of” collection. Instead of reading multiple books, you can cut your list down to whatever category that you fit in. With Silverlight 5 coming soon, now is the time to get up to speed with what Silverlight 4 can offer. Be sure to read the full review at the bottom of each section.

For the “Beginner” Silverlight Developer: Both of these books contains very simple applications and will get you started very fast.

and

Book Review: Microsoft Silverlight 4 Step by Step

For the guy/gal that wants to “Master” Expression Blend 4: This is a hands-on kind of book. Victor get you started early on with some sample application and quickly deep dives into Storyboard and other Animations. If you want to learn Blend 4 then this is the place to start.

Book Review: Foundation Expression Blend 4 by Victor Gaudioso

If you are aiming to learn more about the Business side of Silverlight then check out the following two books:

and

Finally, For the Silverlight 4 guy/gal that wants to “Master” Silverlight 4, it really boils down to the following two books:

and

Book Review: Silverlight 4 Unleashed by Laurent Bugnion

Book Review: Silverlight 4 in Action by Pete Brown

I can’t describe how much that I’ve actually learned from both of these books. I would also recommend you read these books if you are preparing for your Silverlight 4 Certification.

For a complete list of all Silverlight 4 books then check out http://www.silverlight.net/learn/books/ and don’t forget to subscribe to my blog.

Subscribe to my feed