August, 2009

  • DaveDev

    How to install cool, custom fonts (like PDC09) into Windows and use it in your Silverlight application (or even Microsoft Word)

    • 0 Comments

    Whether you are someone who leans more towards design or coding you have probably come across the need for some interesting fonts.  Typography is a fascinating area with a long history dating back to the origins of print.  When we look at creating an engaging user experience today we are often trying to make a connection with our audience.  We “empathize” with our users needs and look to invoke certain feelings.  Fonts can do that in amazing ways and its pretty easy to add them to your own applications.

    PDC09Font

    The Microsoft Professional Developers Conference (PDC) site has a great art section where you can download wallpapers, blog bling and the font that they used.  Maybe its because I’m such a video gamer but the font really connected with me and brought back memories of playing Wipeout and Star Trek.

     

    Installing the Font into Windows

    I keep a local folder in my documents directory of all the fonts I have found intriguing.  Most of these go into my applications or demos I do for that extra sparkle.  You can keep them anywhere you would like however I just find this method the easiest to use.  That way I can zip up all my fonts if I need to use them on a different machine.

    Fonts

    Adding a font to Windows is as easy as double clicking on the filename.  The Font Manager window will them pop up (Windows 7 is pictured) and you will be given some typography information as well as samples of the font at different sizes.  Just click the install button and windows will register the font for use.

    FontsInstall

    This means ALL windows programs will now have access to that font such as Microsoft Word.  Keep in mind that custom fonts are not required to include both uppercase and lowercase. The PDC09 font (it’s official name is Squared) only includes lowercase for example.  So don’t scratch your head when word tries to capitalize at the beginning of a sentence and you see invisible letters.

    WordFont

     

    Using the new font in your Silverlight application

    Now that we have made sure the font installed correctly it is time to add it to a Silverlight Application.  In this example I am opening up Expression Blend 3, adding a simple gradient to the default grid layout and creating a TextBlock control.  I then selected the newly installed squared font from the textbox text properties and added some colors I thought to be pleasing.

    Font-SL

    Keep in mind one of the amazing things about Blend is we are seeing in real time what our application looks like.  This means for Silverlight the artboard is being rendered in Silverlight.  While we are in design time it understands the selected fonts and displays them correctly.  However if we run the application you will notice something happens.

    SLFontEmbedding

    This is where a lot of people get tripped up.  The application compiled, the browser opened up and it looks nothing like what it did in my Blend design surface.  So what is up?

     

    Font Embedding - it’s all about the download size!

    It is important to remember one of the core design principles of Silverlight is a small download size.  Every time you add a resource such as an image, a font, or a video the initial the size of your application will increase.

    Luckily, Silverlight is really smart about this.  It gives you the choice of not only which Fonts you wish to include in your application but also which parts of those fonts (Uppercase, Lowercase, etc.) giving you even more control over the size of your downloads. To bring up this menu simply click on the Font Manager button in the TextBlock text properties.  As mentioned above the squared font doesn’t use any uppercase which is why you will see the “S” missing.  Blend tries to capitalize the first letter of all the fonts being listed. 

    SLFontSize

    You can see both the Font Manager button and the Embed checkbox (I circled it in red) in the artboard screenshot above.  Keep in mind you do not have to select which pieces of the font to use Blend will automatically include all subsets of that font for you.  It is only necessary to check off the Embed checkbox for the font to be included in your application.

    Once you click the checkbox two things will happen.  A new Fonts directory will be created in your application and the selected Font source file will be copied into it for you.

    SLFontsFolder

    Blend will then modify the XAML source for your TextBlock to point to the newly installed Font resources in your project.

    FontEmbedding2

     

    Looking cool with just a TextBlock thanks to Fonts!

    We are now ready to show off our finished product.  Running the application will now show a correctly displaying TextBlock with the selected square font.  Amazing how much of a difference fonts can make even on a plain piece of text.

    TheFinishedProduct

    This is a trick you can use in all of your applications moving forward whether it is WPF or Silverlight based Blend and Fonts have got your back.

    Want more information like this?  The Microsoft Professional Developers Conference is coming up in less than 3 months! 

    PDC09Register

    If you register by September 15th you can also save $500 bringing the cost of a ticket down to only $1,595.  Be sure to check out the PDC site here for more details.

    Bookmark and Share

  • DaveDev

    Windows7 was just released for MSDN and TechNet Subscribers. Oh happy fresh, Windows install day!

    • 2 Comments

    The downloads just went live a few minutes ago!  If you are an MSDN or TechNet Subscriber you can download Windows7 now.

    Windows7IsOnMSDN

    The downloads include both the 32-bit and 64-bit versions as well as Ultimate.  I can’t help but feel such excitement downloading a fresh new operating system and installing it across my machines.  Brings back memories of Windows 2000 getting released over MSDN and installing Server for the first time on my then current laptop. Wasn’t long after that I got an e-mail from the network admins telling me I had put up a server in the official production domain and needed to take it down.  Then off I went to MSDN to download Windows 2000 Workstation to comply with network policy only to be struck with a limited number of IIS concurrent users which I couldn’t test against.  Well it still beat using Personal Web Server.  Ahh the memories of being an enterprise developer. =)

    The days of having a separate IIS base between the client and server operating systems changed with Vista’s release and we can now use our base dev boxes for running most of the server components.  Funny when I think about how I’m running SQL Server 2008, the entire SQL Server BI Stack, IIS, Visual Studio and now Expression Studio on my little laptop. 

    I might just have to go for a bit more ram (all my laptops are still running 4 gigs) on the next upgrade.  But then again as any dev knows nothing beats the raw power of a custom built desktop.  I just happen to be running a freshly download Windows 7 Ultimate 64-bit on mine -Woot!

    Win7UltimateRTM

    Don’t forget while you’re downloading the bits to stop on by the Windows Developers Center.  Lots of details, documentation and examples on developing for Windows 7.

    Windows7 Dev Resources

    -Dave

    Bookmark and Share

  • DaveDev

    How much will I REALLY save on Cloud Computing?

    • 3 Comments

    At the Philly Cloud Computing usergroup last night Chris Rolon, a local Azure wiz, showed off a new application from Neudesic called Azure ROI.  This freely available application takes the currently announced Azure pricing and allows you to play with numbers around what your usage would be.  Want to see what it would be like if you added more (or less) storage, messages, etc?  Now you can easily change configurations around and see what your costs would be per day, month or year.

    AzureCosts

    The calculator also offers a Migration Costs and ROI tab that will allow you to see your break even point as well as your up front costs for migrating to the cloud.

    AzureROI

    The application is written entirely in Silverlight and uses Azure as its back end.  They will be making the source code freely available soon  up on Codeplex for people to download.  They’ve already got a few popular Silverlight/Azure apps up there right now including an Azure Storage Explorer that is worth checking out.

    You can check out the Azure ROI Calculator here.

    Bookmark and Share

  • DaveDev

    PhillyNJ.Net – Hands on with Silverlight 3 and Expression 3 Studio presentation and code available

    • 0 Comments

    Silverlight and Expression make programming fun again!

    I had a great time meeting everyone at PhillyNJ.Net.  Lots of interest around Silverlight and Expression especially when it comes to Line of Business Applications.  As promised you can now download my slides and code.  The deck is a bunch of custom slides I put together that takes you from the ground up.  Why should I care about UX as a Developer?  What impact does it have on the Enterprise?  What’s XAML?  Why Expression Studio?  Even more importantly it shows you some real examples you can start using today!  You can grab that deck here.

    Creating a Custom Control in XAML is easy!

    The first area we covered was basic templating in Blend and created some custom controls.  We also showed off some transforms and animation such as the new perspective 3d transform in Silverlight 3.  You can grab the project here.

    Databinding is one of the hardest concepts to get your head around.  XAML Markup just seems to throw off a lot of people.  One of the new features in Blend 3 is the ability to create design time data and then bind your controls to it when running your application.  This becomes extremely useful for not only designers but developers as well.  It is often we find ourselves with a database but no services wrapped up to it yet to bring that data into our presentation tier.

    Blend 3 will allow you to simulate what the collections will look like (remember you can bind to almost anything in XAML as long as you implement IEnumerable or its child IList).  Not only will Blend generate the XAML Markup for you it will also allow you to drag other elements from the same collection onto your artboard and wire them up.  The example I showed was binding a datagrid (seems this is the very first thing we want to do as a Developer) to the generated collection and then have a Listbox that would show the selected item as we enumerated through the grid.

    Ahh - Databinding! I get it now!

    Sounds complex?  It’s really not and once you look at the generated XAML you begin to see the power of it.  Blend simply told the Grid I had a static resource collection and set it to the DataContext for me.  It then took each item in the collection and bound it to the appropriate elements.  You can even edit the generated layout like you would with any other control.  You can grab that project here.

    Don’t forget I’ll be hitting the road in a few weeks and bringing these sessions into your own backyard.  Be sure to check out the Mid Atlantic MSDN Roadshow for more details. 

    All slides and code here is licensed under a Creative Commons Attribution license.

    Bookmark and Share

Page 1 of 1 (4 items)