The default orientation of a path is “Stretch” – this is not what you want in most cases.

Make sure that the alignment of both your Image (in this case) and your Path are set to ‘Left” and “Top”, otherwise your clipping mask will be offset.

This one stumped me for a while, so hopefully this saves someone else time.

You can quickly apply your clipping path to the item by selecting both the path and the item and then right clicking -> roll over PATH -> and select Make Clipping Path.

Software tools needed.
• Adobe Photoshop (or other photo manipulation program with the ability to switch color mode from RGB to Index)
• Windows or Mac OS

Have you ever had a client ask you to get a screen capture of some software, or a website, or anything that can appear on screen and then include that screen shot in a printed proposal? If you have, you have probably run into the following problem. When you create your screen capture and go to print it out the image become extremely pixelated and looks aweful. Here is the solution to that problem.

1. First of all you have to know how to make a screen capture. It’s easy on both a PC and Mac. On a PC you simply hit the Print Screen key on your keyboard. On a Mac you hit Shift-Ctrl-Open Apple-4and then drag the little target around the area you want to capture. Once you’ve done this the image data is stored on your clipboard.
2. Next, open up your image editing software (Photoshop, Photoshop Elements, MS Paint, etc).
3. Once the program is open you want to create a new blank canvas. File > New.
4. Once the new canvas is open hit ctrl-v or Edit > Paste and the image data you saved to your clipboard will show up in your image editing software.

At this point you can save the image but if you try to print it you’ll notice all the pixelation. The reason for this that screen resoltuion is 72dpi and Print is usually a minimum of 180dpi. That brings us to the solution. This is more of a graphics trick. What we’re going to do is trick the computer into giving us more pixel data than we actually have. It’s rather clever.

1. First, in Photoshop go the the Image menu and select Mode and change the image to Indexed Color. Image > Mode > Indexed Color as shown in figure 1.1

   
   Figure 1.1

2. Next, we’re going to blow up the image. Usually this will pixelate the image but because we’re working in indexed color mode the effects are not as severe. Go to Image > Image Size and increase the Resolution to 300. as shown in figure 1.2

   
   Figure 1.2

3. Finally we’re going to change the color mode back to RGB. Image > Mode > RGB and save the file. Now you have something you can work with for print.

In addition to the book there is a great Code Browser that you can install which will guide you through learning the XAML/C# techniques highlighted in the book. It was a great learning experience and I hope to be able to contribute more in the future.

1. Open the command prompt in windows through the start menu as shown in figures 1.1 and 1.2.
   
   figure 1.1

   
   figure 1.2

2. Type ‘telnet’ into the command prompt (see figure 1.3).

   
   figure 1.3

   Then login to your web server using the command ‘open’ and entering the Login and Password you set up when you created your account. (figure 1.4) If you don’t know this information contact your web host.
   
   figure 1.4

3. Once you’ve logged in open the MySQL command line by typing (see figure 1.5)

   %mysql -u -p
   Enter password:
   Welcome to the MySQL monitor.  Commands end with ; or \g.
   Your MySQL connection id is 17109 to server version: 4.1.18-log
   
   Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
   
   mysql>

   

And there you have it. You are connected to MySQL now have fun manipulating your database.

You start by click on the Wrench icon and going to About Google Chrome.  On there is a big button that says Update Now! You click on it and it starts installing right away. After it downloads and installs all the necessary files (in under 10 seconds by the way) it instructs you to close down all Chrome windows for the changes to take effect. That’s a GREAT EXPERIENCE. You installed all the stuff, but the update didn’t interrupt my current browsing session. You didn’t even force me to restart ANYTHING at that moment.  Then you finish what you’re doing and restart Chrome. Lets say you had 7 tabs open. Your start screen has a link to the 7 tabs you closed when you restarted so you can click on it and instantly be back where you were now running the latest version of Chrome. The whole process took under a minute for me.  That is a great user experience.

This past week I had another need for some data in an HTML page as a data source, this time for a WPF application. Since I needed to make it work I did a quick search on on the internet for some HTML parsers. What I found was amazingly useful. The HtmlAgilityPack is a .NET library that gives all the tools to parse your HTML, retrieve the data you’re looking for. It supports Linq to Objects and has XPATH implementation to let you find what you need easily. PLUS, because it’s on codeplex it’s open-source and free! Fantastic!

Here is a little code snippet if you ever wanted to know how many Twitter Bird image results are in a Bing.com search. Note that I’m using the XPATH syntax to find the <span> tag with and ID value of ‘sw_ptc’ and then select the InnerText from that node. HtmlAgilityPack has lots of XPATH and XSLT options so you’ll be able to find whatever your looking for with minimal effort.

using System;
using System.IO;
using System.Net;
using System.Configuration;
using System.Xml.Linq;
using HtmlAgilityPack;
class BingCounter
    {
        private WebClient webClient;
        public BingCounter()
        {
            Uri _feedUri = new Uri("http://www.bing.com/images/search?q=twitter+bird");
            webClient = new WebClient();
            webClient.DownloadDataCompleted += new DownloadDataCompletedEventHandler(stringDataCompletedEvent);
            webClient.DownloadDataAsync(_feedUri);
        }
        private void stringDataCompletedEvent(object sender, DownloadDataCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                try
                {
                    byte[] xmlString = e.Result;
                    HtmlDocument doc = new HtmlDocument();
                    doc.Load(new StreamReader(new MemoryStream(xmlString)));
                    string results = "";
                    foreach (HtmlNode span in doc.DocumentNode.SelectNodes("//span[@id='sw_ptc']"))
                    {
                        results = span.InnerText;
                    }
                }
                catch (Exception exp)
                {
                    Console.Write(exp.Data);

                }
            }
        }

Have fun and happy coding.

I attended the MIX10 session – Windows Phone UI and Design Language which you can watch online: http://live.visitmix.com/MIX10/Sessions/CL14

List of Metro Principles:

• Clean, Light, Open, Fast
• Celebrate Typography
• Alive in Motion
• Content, Not Chrome
• Authentically Digital

Twtpoll: http://twtpoll.com/cco6xc – What words would you use to describe the new Metro UI design. ‘ Typography’ and ‘Content-Driven’ were my two.

The inspiration for Metro came from international mass transit, namely metropolitan train stations  and air ports in Europe and the United States. Microsoft created a neat little booklet that explains the Metro design aesthetic. Download the PDF. My big critic of Metro is that it claims to have drawn inspiration from international symbol design, however it seems to be extremely typographic heavy. They have done away with most of the symbols in favor of typography. And while it is very beautiful there is a level of concern in my mind with how well it will localize (translate into other languages). I can see a large German or Dutch word completely breaking the flow of a Metro UI. There are symbols still included in Metro, and they have been used to good effect as a sub-menu element.  I’m interested to see the future of Metro once Windows® Phone 7 goes international.

Here is a little interview with Albert Shum, Director of Mobile Experience Design at Microsoft. Listen direct from the source as he discusses the design inspiration for Windows® Phone 7.

First off I’ll answer the question of “WHY?”  Why I value internships and why you should too. Internships are great way to build your reputation and engage with schools and the community to get the best of the available talent pool. For some companies, internships are a way to leverage your reputation to get cheap/free labor. Forgive my obvious bias for a moment, I’ve had a few internship experiences and some were better than others. I worked as an intern for both a large media company (Fisher Compunctions) and a 10-person strong marketing agency (PBJS). During my internship experience, I learned a lot more, and received more professional benefits from the small company because I was a valuable member of the team, unlike the large company where I was cheap go-for. But I digress.

Internships can be hard to fill for many companies. Often time a internship proposal is like selling your company to prospective students. You want your company to stand out so that the best and the brightest students come to work at your company. Your reputation, client list and portfolio go a long way in this sales pitch.

When I first started writing up an internship program I was doing so with one simple goal: create an experience that was as good as or better than my own experience. That’s sounds a lot easier than it is for a few reasons. First of all, all school programs have different criteria for their students. It behooves you to do a little research through the internship coordinators and be sure to pinpoint those requirements so your interns can receive credit for their time as your intern. Some schools won’t even allow your internship in their program if you don’t. I’ll talk more about school requirements in a moment. Second, make sure you have enough time to have an intern. I know that sounds a little counter-intuitive but the reality is that interns (even the best ones) require your time and attention in some form. If you are a mentor, then that is your responsibility to engage with your intern. If you fill your 40 hours a week with work, your poor intern will end up being left to find things to keep themselves busy or end up getting bored and doing nothing their whole time. That doesn’t benefit either of you. Finally, make sure you have something for them to do. Not only do you have to manage your intern, but it’s your job to make sure they have work. Your management could be a simple as starting each day off telling your intern to, “walk around the office asking if people need help.”  Be warned, this only works with he right type of intern. Realize that without a clear work plan, having an intern is likely going to end up costing you productivity.

What are the pieces of an Internship Proposal? Typically, you are writing an internship proposal for a particular school. Sometimes those schools will have a desired format for your internship proposal. Obviously you will need to include all requirements laid out by the school. However, if the school doesn’t have a required format or your reaching out for interns outside of academia below are some sections to get your proposal started.

A description of the internship and of the company - A brief paragraph that talks about your company, what it does and how the internship will support that process. This is where you want to sell the position to prospective students. Set your internship apart from the rest by highlighting big name clients and projects, workflows, or well known professionals within your company. If your office wears rock-band t-shirts or suit coats, this is a good place to call that out as well.

List of goals and measurements for all interns in the program – List all of the goals for your intern. This is where you call out the requirements from the school. Be sure to include any company policies around attendance, sick time, start and stop times, etc.

What your company will provide – Share what the intern will be able to use being part of your company. Talk about access to technology (computers, software),  work flow process, mentoring, clients and compensation if applicable.

Requirements of the intern – List out the complete list of skills both required and desired for the position. Try to keep your required skills to a minimum after all your intern is there to learn, but they are interning for your company in your field so they should know something about what you do before coming in.

Schedule or time commitment for the position – If you need your intern there from 9-5 3 days a week, put it here. If the school requires a minimum of 30 hours per week and you don’t have a set timeline, put that here as well. Just make sure you have the cycles available to meet whatever requirements you set up in this section.

Measurements for success – This is the great place to highlight what you, as a company, value in the internship process and among your employees. Here is another place you can sell the position. If you value creativity and self-motivation, make those requirements in this section. Also be aware if your require any rights to the work done by an intern. You can call out those aspects in this section as well.

You can download my Internship Proposal Sample to help get you started

Once you have your proposal written up typically all you have to do is submit it to the internship coordinator at the school or post it on your local work bulletin board. I was surprised at first at how many people were applying for the internship I created. It was much less than I was anticipating, but after having 3 successful interns finish the program and go on to some great careers in the industry I’ve seen a steady increase in interest in the program.

Hopefully if you’re reading this you already see the benefits of creating an internship program at your company. I had an amazing internship experience that was so successful it inspired me to start my own. I hope that this information can help you learn more about what it takes to get your internship proposal written.

Following Jobs posting there were numerous responses, a great one coming from Adam Banks in a post titled Thoughts on Thoughts on Flash. After reading it, I actually had mixed feelings on an issue where I have been pretty black and white to this point. Color me intrigued. I still feel after having used HTML5 on some small projects that as a cost effective mass market consumer ready technology, HTML5 is a ways off (2-3 years). It’ll be interesting to see how this plays out from a consumer perspective. As a developer this just means I have another technology to learn (w00t for me) and another content delivery mechanism to develop for.

Personally I enjoy the challenge of learning new technology, but it definitely isn’t the most efficient way to do business. I learned this when I made a switch from Flash to Silverlight. A project that I could quickly and accurately budget out resource wise became a shot in the dark. I would grossly under or over estimate the time needed because I wasn’t familiar with the technology. That’s what companies, like PBJS, will have to do if they want to adopt HTML5 in favor of proprietary, but familiar, plugins (Flash/Silverlight).  That also means that developers will have to support that choice both with time invested in learning it, and optimizing it to create the best possible user experience.

Content is still king. If your content generates the traffic you can easily justify any expense to make the user experience better whether that is open standards (HTML5), mobile apps (iPhone), or web plugin. It’s when you are building your business that these multiple distribution technologies can hinder progress. Delivering your content via HTML5 right now you won’t have the same rich experience that it would inside a plugin. Also, I’d be surprised if your agency has HTML5 experts on staff. Plus, they can be hard to find in the freelance market. Today the question is; do you deliver your content using a more costly (resources & time) and a sub-standard user experience using the technology “of the future” or do you choose the “dead technology” that can provide a cost effective and engaging user experience?

Apple may be forward thinking, but not everyone has pockets as deep as Apple. I’ll continue to look into techniques using HTML5/CSS3/JavaScript but it’s likely that I’ll continue to get paid to create plugin based experiences, at least for another year. As for those clients that want to do it the Apple way, I’ll get paid double for developing using two different workflows. Looks like I’ll be busy.

The get_url_contents($url) function was added to overcome a security problem on IIS where file_get_contents() is not allowed. The other issues to is to make sure you grant write permission to PHP so it can write to your twittercache.xml file. These two changes make for a very clean twitter readout that can easily be styled using CSS.

<?php

function get_url_contents($url){
        $crl = curl_init();
        $timeout = 5;
        curl_setopt ($crl, CURLOPT_URL,$url);
        curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
        $ret = curl_exec($crl);
        curl_close($crl);
        return $ret;
}

function generatetwitter($twittername){

	$username = $twittername; // Your twitter username.
	if ($username == ""){
		$username = "discorax";
	}
	$limit = "15"; // Number of tweets to pull in.
	/* These prefixes and suffixes will display before and after the entire block of tweets. */
	$prefix = ""; // Prefix - some text you want displayed before all your tweets.
	$suffix = ""; // Suffix - some text you want displayed after all your tweets.
	$tweetprefix = "<li>"; // Tweet Prefix - some text you want displayed before each tweet.
	$tweetsuffix = "</li> \r"; // Tweet Suffix - some text you want displayed after each tweet.
	$feed_string = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=" . $limit;  

 function parse_feed($feed, $prefix, $tweetprefix, $tweetsuffix, $suffix, $username) {
		$feed = str_replace("<", "<", $feed);   		$feed = str_replace(">", ">", $feed);
		$clean = explode("<content type=\"html\">", $feed);
		$link = explode("search.twitter.com,2005:", $feed);
		$amount = count($clean) - 1;
		echo $prefix;
			for ($i = 1; $i <= $amount; $i++) {   				$cleaner = explode("</content>", $clean[$i]);
				$linker = explode("</id>", $link[$i+1]);
				$this_tweets = str_replace("&apos;", "'", $cleaner[0]);
				$this_tweets = str_replace("&gt;", ">", $this_tweets);
				$this_tweets = preg_replace('!<a href.*?>!', '', $this_tweets);
				$this_tweets = preg_replace('!</a>!', '', $this_tweets);
				echo $tweetprefix.'<a href="http://twitter.com/'.$username.'/status/';
				echo $linker[0];
				echo '" target="_blank">'.$this_tweets.'</a>';
				echo $tweetsuffix;
			}
		echo $suffix;
	}

	$twitter_cache_file = 'twittercache.xml';

	$mtime= null;

	if($mtime== null ||(time()-$mtime)>(9*60)){// 9 minutes or older?
		$content=get_url_contents($feed_string);
		if(strlen($content)>0){
			$cache_static=fopen($twitter_cache_file,'w+');
			fwrite($cache_static,$content);
			fclose($cache_static);
		}
	}else{
		$mtime=filemtime($twitter_cache_file);
		}

	if (!@file_get_contents($twitter_cache_file)){
		  echo __('Oops, something went wrong. Did you rename the cache folder? The cache file? You shouldn\'t have done that...', 'jfr_theme');
	}else {
		  $twitterFeed = file_get_contents($twitter_cache_file);
	}

	parse_feed($twitterFeed, $prefix, $tweetprefix, $tweetsuffix, $suffix, $username);  

}
?>

Setup is easy. You simply need to call the generatetwitter() function like so.

<php
echo "<div>";
echo "<ul>";
generatetwitter("discorax");
echo "</ul></div>";
?>

When you’re uploading the files to your server make sure to include a blank twittercache.xml file in the same directory as the script. You can change this location by changing the value of the $twitter_cache_file variable (line 48 above) to a path where you keep the twittercache.xml file (make sure you grant write permission to that folder).

That’s it. It’s a clean little code snippit for pulling a user’s twitter feed which you can easily extend using a simple form to select your twitter account. Happy coding.

iPhone 3Gs and HTC Tilt2

I recently received an offer from AT&T; inviting me to trade-in my old Smart Phone. I would bring in my old Blackjack II and get $100 rebate on a new HTC Tilt2. From a marketing perspective this was a timely email. I am in the market for a new Smart Phone for two reasons my current phone (Blackjack II) is getting a little warn out AND I will be attending MIX10 this year in Las Vegas and I will be tweeting, blogging, networking with my mobile device so I need something that can keep up with me.

There are a few factors that I am considering before buying my new Smart Phone.

1. Price

The HTC Tilt2 is $250 w/ 2 year contract + $50 mail in rebate + $100 email discount for trading in my old Smart Phone. Data plan is $30/mo and talk is part of my family plan.

The iPhone 3Gs 16 GB is $199 w/2 year contract and no rebates. Data plan is also $30/mo and talk is again part of my family plan.

2. Speed

I played with both devices at the store and the Tilt2 is noticeably faster than my Blackjack II but also noticeably slower than the iPhone 3Gs, which just plain smokes. The touch interface on the Tilt2 is clunky running Windows Mobile 6.5 and the iPhone is “zippy-zoom” responsive.

3. Features

Applications – everyone knows about the iPhone App store. The Windows Mobile app store has a few useful apps that I currently have installed on my Blackjack II. No games to speak of on the Tilt right now.

Keyboard – I have an iPod Touch and I have used the screen keyboard on it. It’s clunky and makes for lots of typos, but it’s not overly horrible. The Tilt2 has a slide out QWERTY keyboard in addition to the touch screen keyboard. The slide out keyboard feels amazing. The keys are a perfect size for my fingers, the buttons are easy to locate and the device sits effortlessly in my hand while I type. This is a HUGE plus for the Tilt2.

Media – iPhone offers the same features of my iPod Touch (which I love except for the lack of HD Radio). An iPod is a WAY BETTER media device than a Tilt2 especially with iTunes attached to it. Plus all my music/media is already in iTunes.

Storage – Tilt2 has built in 512MB but expandable to 32GB with a microSD card (~$50). The iPod at my price point has 16GB and isn’t expandable unless I get the next level up which is 32GB for an additional $100.

Screen Size – I believe both devices have the same screen size. The iPhone UI makes better use of the space with their app layout design.

Battery Life – Tilt2 up to 6.5 hours iPhone up to 5 hours.

E-mail – iPhone and Tilt2 both have full Office Exchange support so this is a wash.

So I guess the final question; is $100 less (via rebate) and a much more usable slide out QWERTY keyboard on the Tilt2 worth more than the iPhone dominating in every other category?

On a side note, I was considering getting a Zune HD just because it can listen to HD radio. There are rumors that Windows Mobile 7 or “7″ will be out later next year about the time I’m ready for another upgrade, so maybe sticking with (or suffering through) windows mobile is what I’ll do. So many choices.

Last year, there was a lot of hype about Blend/SketchFlow, Silverlight, Azure, and IE8. Some products lived up to the hype, others not so much. Regardless, the message was pretty one sided, Microsoft has some great new tools to help the designer/developer work flow improve and deliver outstanding content to users.

One thing I am seeing this year both from Microsoft as a company AND in some sessions is a real commitment to Open-Source and alternative technologies (JQuery, HTML5, PHP, MySQL, Ruby, Python to name a few). Seeing Microsoft include these technologies in the box with their software makes me smile. Windows Platform Installer will install and configure these technologies for you automatically. That’s a far cry from the nightmare it was to get PHP/MySQL running on an IIS server in the (recent) past. It now takes minutes. I also love seeing the Mix lab work with projects like Oxite, Gestald, and WordPress. I’m also seeing more session content revolving around these technologies. That’s a good thing.

I attended an event in Seattle put on by Interact Seattle a few months ago where two software evangelists Adam Kinney (Microsoft) and Ryan Stewart (Adobe) showcased their respective products Blend & Flash Catalyst side by side. This session created an amazingly interesting dynamic. It wasn’t about which features were better, it was about how tools could help execute and ultimately realize ideas. There was some great dialog during and after the presentations.

Seeing Open-Source technologies being talked about and used at MIX is a great step forward as far as breaking out of the “Marketing Marketing blah blah” of vendor conferences. I am hopeful that today, when the Open Call sessions are announced more of these alternative technologies will be showcased.

Finally, the part of MIX10 I’m looking forward to the most is getting a chance to talk with other industry professionals, most of which use Microsoft technologies, but not exclusively. It’s those conversations that I find the real value of a conference regardless of who is footing the bill.

See you in Vegas!

Cody Lindley [@codylindley] gave a great intro and exploration of what jQuery is all about!

Sure there was lots of great ideas for how to use this technology bubbling in my head after Cody introduced feature after feature of jQuery. The best part was his ‘How to build your own jQuery plug-in in 6 Steps’ starting on slide 82. I can’t tell you how many times I’ve wanted to extend a library but the documentation doesn’t clearly outline best practices for building new classes or plug-ins. It’s a lot of trial and error, not to mention headaches. This presentation was so valuable I just have to share it!

You can also check out Cody’s PDF book jQuery Enlightenment for just $15. It is a collection of useful code and samples which can rapidly get you up and running with all the power of jQuery.

jQuery: The Write Less, Do More JavaScript Libary!

P.S. Microsoft was at Dev Days Seattle giving FREE RAM upgrades to every computer that wasn’t already maxed out. Unfortunately, my laptop was maxed so I couldn’t take advantage, but what a cool way to engage this audience.

P.P.S. You have to check out this video of the guys who brought you Photosynth. Steve Seitz talked about how their team has taken the ideas behind Photosynth further and this technology is seriously impressive. Their goal: Re-Build Rome in a day! http://grail.cs.washington.edu/rome/

If you have, and are curious about your Twitter usage, take a trip to Tweetstats and enter your account name. The service will go and fetch all tweets and build some fun Flash graphs to illustrate how you use Twitter. For instance you’ll notice that March of this year was a particularly busy tweeting month of me. I was attending MIX and letting everyone know all the cool things I was learning. You’ll also notice that I pretty much only tweet during the day. Mostly in the morning as I review all the cool stuff from the previous day.

Curious, here are my results:

There is also my TweetCloud featuring the words I tweet the most.

any my HashCloud featuring the words I hash the most.

My TweetStats give a glimpse into how I use Twitter. What will TweetStats say about you? Also, if all this Twitter Speak hash tags and @mentions is confusing you, check out Twitter Speak – A Beginners Guide to learn the basics! Happy Tweeting!

Personally, I think it is a brilliant program that finally shows a desire from Microsoft to embrace a culture of open-source without having to sacrifice their business model of making software to sell to people. If you let someone use your technologies for free, support them making something amazing with it and add that to your portfolio of successful projects, it just fosters positive connection to the community that ultimately will drive success in the future.

Microsoft products can be extremely pricey. A windows server license alone can cost near $1000 per processor. With this program you get 4 licenses for free for 3 years. Talk about offsetting the start up costs. You can have a solid, supported, industry standard technology in place while you build your business.

The WebsiteSpark program joins the other two successful “Spark” programs previously launched – BizSpark for startups, and DreamSpark for students.

While I was in school back in 2005, the only technologies we learned and used were open-source because we couldn’t afford to use anything Microsoft. I can only imagine how many fun, off the wall, projects I could have created in school with access to some of the products available in these programs.

I’m sure a lot of this sounds like I’m spitting cool-aid out all over the place, but I honestly believe that this program is a good thing for everyone. Microsoft got this one right, and I’m giving credit where credit is due.

Now go out and bring your ideas to life!

There are plenty of cool ways to extend this project including some cool transition and other code based animations. Just let your imagination go wild!

First, create a new WPF Application in Visual Studio or [download a sample project]. In your Window1.xaml give the Grid an x:Name value. You’ll use this to add your elements later on.

<br  /><grid x:Name="VisualRoot"></grid><br />

Now lets add a new Page to our project. We’re going to alter the Page to extend a Canvas rather than a Page for no other reason then when I’m creating animations I prefer to work with a Canvas. We are going to put some visuals onto our canvas. In the sample it’s a blue square with a red circle next to it and a little bit of text below it. It could be any UIElement including another Canvas/Grid, Images, Text anything.

In our Window1.xaml code behind we’re going to create an instance of our Canvas1 and call the methods to have WPF Measure, Arrange, and UpdateLayout in memory. We need to call these methods in order for WPF to figure out where all the pixels are positioned in our visual to return accurate Bitmap Data. These methods are called automatically when you add a Visual to WPF using the Visual.Children.Add() method.

The CreateBitmapSourceFromVisual function was taken from a project on CodePlex, unfortunately I can’t recall the link. I’ll add it here if I run across it again. That function takes a Visual and returns a BitmapSource object with the pixel data. It automatically updates the dots per inch (DPI) to 96, which is required for WPF to render properly).

Here is the code behind from our root Window.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BitmapFromVisualSample
{
    ///

    /// Interaction logic for Window1.xaml
    /// 

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            Canvas1 myVisualElement = new Canvas1();
            myVisualElement.Measure(new System.Windows.Size(0, 0));
            myVisualElement.Arrange(new Rect(new System.Windows.Size(0, 0)));
            myVisualElement.UpdateLayout();
            // Note the myVisualElement is never added

            // Use myVisualElement to get our Bitmap Source Data.
            BitmapSource myVisualElementBitmapData = CreateBitmapSourceFromVisual(300, 500, myVisualElement, false);
            // Create an Image for your Bitmap Source
            Image myImage = new Image();
            // use our Bitmap Data
            myImage.Source = myVisualElementBitmapData;

            // Add our Image to the Grid
            VisualRoot.Children.Add(myImage);
        }
        public BitmapSource CreateBitmapSourceFromVisual(Double width, Double height, Visual visualToRender, Boolean undoTransformation)
        {
            if (visualToRender == null)
            {
                return null;
            }
            RenderTargetBitmap bmp = new RenderTargetBitmap(
                                            (Int32)Math.Ceiling(width),
                                            (Int32)Math.Ceiling(height),
                                            96,
                                            96,
                                            PixelFormats.Pbgra32);
            if (undoTransformation)
            {
                DrawingVisual dv = new DrawingVisual();
                using (DrawingContext dc = dv.RenderOpen())
                {
                    VisualBrush vb = new VisualBrush(visualToRender);
                    System.Windows.Point myPoint = new System.Windows.Point();
                    dc.DrawRectangle(vb, null, new Rect(myPoint, new System.Windows.Size(width, height)));
                }
                bmp.Render(dv);
            }
            else
            {
                bmp.Render(visualToRender);
            }
            return bmp;

        }
    }
}

You can run the sample project and you will see the visual we created in Canvas1. We used the BitmapSource object of the Canvas1 as the Source of our Image. Note: we never added Canvas1 to the root visual, we simply created it in the code behind and retrieved the pixel data from that visual to use as on our Image. I leave it to you to play with this technology to create cool WPF/Silverlight animations.

[Download Source Code] as Visual Studio Project.