Scott Hanselman

NOTE: If you haven't read the first post in this series, I would encourage you do to that first, or check out the BabySmash category. Also check out http://windowsclient.net/ for more developer info on WPF.

BACKGROUND: This is one of a series of posts on learning WPF. I wrote an application for my 2 year old using WPF, but as I'm a Win32-minded programmer, my working app is full of Win32-isms. It's not a good example of a WPF application even though it uses the technology. I'm calling on community (that's you, Dear Reader) to blog about your solutions to different (horrible) selections of my code. You can get the code http://www.codeplex.com/babysmash. Post your solutions on your blog, in the comments, or in the Feedback and we'll all learn WPF together. Pick a single line, a section, or subsystem or the whole app!

Someone wanted the BabySmash Window to have the option to be transparent. I figured, hey, WPF must be good at that, transparency at all. I bet it'll be like one line of code.

I went into my MainWindow.xaml and added these attributes:

Background="Transparent" AllowsTransparency="True" WindowStyle="None" 

Bam! Right? Well, kind of. This made the Window Transparent, but "hollow" in that I couldn't click on it. It was totally invisble, except for my little bit of text at the top. I could "click through" the application to the desktop below.

Well, here's why, and if I'd read 4 chapters into Chris Sell's book, I'd have figured this out. ;)

Per Dwayne Need on the WPF Team:

"Windows treats fully transparent layered-windows windows as hollow."

This was interesting because everywhere else in WPF if you have a Brush that is null, that's "hollow" and Transparent is solid. Again, Dwayne:

"This is because a layered window is represented to the OS as a bitmap, so all it can do is look at the pixel values.  It [Windows] cannot differentiate between null and Transparent."

Ah, makes sense. This is where WPF meets the rest of Windows. Ok, but I have complete control over my Brushes and their colors. I can make a Brush that is not just #000000 (Black) but also #01000000 (really really transparent black. Like 1/255th transparent). You've got not just RGB, you've got an Alpha Channel PLUS RGB.

Now if I set my Window's background to this Brush:

new SolidColorBrush(Color.FromArgb(1,0,0,0))

I get the look of transparency, except the Window is still there and I can click on it.

"Your almost-transparent brush fails the Windows transparency test, so windows delivers events to it. If something is 100% transparent then hit testing is bypassed.  If you want transparency and hit testing, define a color with minimal alpha just as you have done.

This was an interesting edge class where WPF's definition of Transparent didn't quite line up with Window's definition.

Once you've created a Window that is transparent like my funky full-screen one,,,

MainWindow m = new MainWindow(this)
                   {
                      WindowStartupLocation = WindowStartupLocation.Manual,
                      Left = s.WorkingArea.Left,
                      Top = s.WorkingArea.Top,
                      Width = s.WorkingArea.Width,
                      Height = s.WorkingArea.Height,
                      WindowStyle = WindowStyle.None,
                      Topmost = true,
                      AllowsTransparency = Settings.Default.TransparentBackground,
                      Background = (Settings.Default.TransparentBackground ? new SolidColorBrush(Color.FromArgb(1,0,0,0)) : Brushes.WhiteSmoke)
                   };

...you can't change the Transparency after you've shown it...or else...

Chris Sells suggested I set my Window to AllowsTransparency = True all the time, then make a Canvas over the top of it that had an opaque Brush with color and transparency I could change as I liked as it'd be "inside" WPF world and not have to deal with any underlying limitations in Win32.

For now, my not-quite-transparent brush got me the feature I wanted - BabySmash over an existing desktop.

Cool.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

NOTE: If you haven't read the first post in this series, I would encourage you do to that first, or check out the BabySmash category. Also check out http://windowsclient.net/ for more developer info on WPF.

BACKGROUND: This is one of a series of posts on learning WPF. I wrote an application for my 2 year old using WPF, but as I'm a Win32-minded programmer, my working app is full of Win32-isms. It's not a good example of a WPF application even though it uses the technology. I'm calling on community (that's you, Dear Reader) to blog about your solutions to different (horrible) selections of my code. You can get the code http://www.codeplex.com/babysmash. Post your solutions on your blog, in the comments, or in the Feedback and we'll all learn WPF together. Pick a single line, a section, or subsystem or the whole app!

I hung out with Chris Sells at the Mall Food Court today. He had trouble finding a parking spot and I felt bad. But I didn't REALLY start feeling bad until I started showing him the code for BabySmash.

He had a number of ideas for ways to make BabySmash better, but what was interesting was that he was using his own book as reference. He'd say, "oh, we did that in Chapter 4" and "ya, that does suck, check out this call out where I explain why." After this happened about four or five times he said (I think in jest, but you can never tell with famous dudes. ;) )

"Did you invite me here to read my book to you?"

After I picked my ego off the ground, unfolded it, dusted it off, and smoothed it out, I said, "I don't think so."

Chris had a really good point. It turned out that even though I have a three WPF books at my house, I haven't read them all deeply and thoughtfully. I hadn't even made it though the first few chapters. Mostly I skipped around, looking for answers to my specific questions.

Through my questioning, Chris noticed that I had some fundamental misunderstandings about some the basics of WPF. Things I thought worked one way, worked another or in reverse. Some concepts that were WPF 101 I had overlooked completely because I hadn't least made it through ~5 chapters and cemented the fundamentals.

I am not saying that we need to read every book all the way through, but I did learn a useful lesson. Don't assume you know how it works. Just a few hours of covering the fundamentals would have saved me a lot of time.

In the last post I said I was starting to grok WPF. Looks like less than I thought. I had left pretty significant gaps in my understanding by skipping around and assuming "oh, this works like that."  Those gaps in my knowledge led to some interesting directions in BabySmash. I'll post about some of those things I learned from Chris soon, but suffice it to say, I completely misunderstood how events moved around a WPF application.

Thanks Chris for setting me straight! Sorry about the parking!

OK, page one, "Hello, WPF."

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

NOTE: If you haven't read the first post in this series, I would encourage you do to that first, or check out the BabySmash category. Also check out http://windowsclient.net/ for more developer info on WPF.

BACKGROUND: This is one of a series of posts on learning WPF. I wrote an application for my 2 year old using WPF, but as I'm a Win32-minded programmer, my working app is full of Win32-isms. It's not a good example of a WPF application even though it uses the technology. I'm calling on community (that's you, Dear Reader) to blog about your solutions to different (horrible) selections of my code. You can get the code http://www.codeplex.com/babysmash. Post your solutions on your blog, in the comments, or in the Issue Tracker and we'll all learn WPF together. Pick a single line, a section, or subsystem or the whole app!

When I decided I was running out of ideas for BabySmash! I decided that I needed to get some customer feedback. The babies had less to say that expected, but there are many videos of babies testing the application popping up on Flickr and YouTube, so I'll call that End User Testing.

I found a site called UserVoice.com (another similar one is GetSatisfaction.com) that is basically a hosted instant customer feedback site. Poof. UserVoice.com even supports a few widgets via Javascript like this one for embedding on your site.

It also supports DNS CName aliasing, so http://feedback.babysmash.com looks like it's hosted by me at http://www.babysmash.com, but instead it's at UserVoice. It's really professional and takes literally minutes. I had the whole thing installed an integrated in under 15 minutes, including color customization and logo.

After I put the site up and inserted links to BabySmash Feedback on the site, there were two ideas that didn't get many votes but had great potential and I figured would be fun to do. One person suggested using Wingdigs (the silly font) to use letter keystrokes to show the fun pictures embedded in the font, while the other suggestion was just to allow a custom font.

When I make the Letters, I create a single object of FormattedText and had hardcoded "Arial," then I call BuildGeometry() on that which basically creates a Path or Outline of the letter that I can mess with. I fill it, and outline it and sent it on its way. I hadn't even given alternative fonts a second thought.

private static Geometry MakeCharacterGeometry(string t)
{
   var fText = new FormattedText(
       t,
       CultureInfo.CurrentCulture,
       FlowDirection.LeftToRight,
       new Typeface(
           new FontFamily(Properties.Settings.Default.FontFamily),
           FontStyles.Normal,
           FontWeights.Heavy,
           FontStretches.Normal),
       300,
       Brushes.Black
       );
   return fText.BuildGeometry(new Point(0, 0)).GetAsFrozen() as Geometry;
}

So armed with this idea, I added FontFamily as an option in Visual Studio Settings for this project. Remember that I refactored the Options Dialog a few weeks back using Jason Kemp's code. This made it easy to just add one additional ComboBox. I'm getting good enough that I added the XAML in the Text Editor pane in Visual Studio rather than the designer.

I figured, since this WPF, can't I make that ComboBox more interesting than just a bunch of strings? Why not have the FontNames show up in the style of the Font like in Word? Well, System.Windows.Media.Fonts.SystemFontFamilies has the list of the fonts on the machine. I searched around and found part of what I needed at Norbert Eder's WPF blog. (BTW, congrats on being a newly minted MVP!)

<Window.Resources>
    <local:Settings x:Key="settings" />
    <CollectionViewSource Source="{Binding Source={x:Static Fonts.SystemFontFamilies}}" x:Key="myFonts"/>
</Window.Resources>

I can make a CollectionViewSource and make it a resource that is available to the Window, as seen above. The source is the collection of FontFamilies. Next, I make a regular ComboBox, which usually looks like this if you are just holding strings:

<Label Height="23" Grid.Row="2" Margin="10">Cursor</Label>
<ComboBox 
    SelectedValue="{Binding Path=Default.CursorType}" 
    SelectedValuePath="Content" Grid.Row="2" Height="23" Margin="70,10,7,0" Grid.ColumnSpan="2" VerticalAlignment="Top">
    <ComboBoxItem>Hand</ComboBoxItem>
    <ComboBoxItem>Arrow</ComboBoxItem>
</ComboBox>

<ComboBox x:Name="FontChooser" Grid.Row="3" Margin="70,10,7,0" 
  ItemsSource="{Binding Source={StaticResource myFonts}}" 
  SelectedValue="{Binding Path=Default.FontFamily}" SelectedValuePath="Source" Height="23" VerticalAlignment="Top" Grid.ColumnSpan="2">
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontFamily="{Binding}" Height="20"/>
         </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

The Data Template is what each item looks like, which is just the name of the font and setting the FontFamily to that item's FontFamily! Hard to write until you've done it once, then you start thinking of other cool stuff you can do with this knowledge elsewhere in your app.

The one thing that it flummox me for a half-hour was that I was binding the ComboBox to the list of Fonts from my Resources, but I wanted the SelectedValue (the item that is selected in the ComboBox) to be bound like all the other controls in my options dialog, to my application's Settings. That's where these attributes came in:

SelectedValue="{Binding Path=Default.FontFamily}" SelectedValuePath="Source" 

There the SelectedValue the FontFamily string from my Settings class (just like the Default.CursorType and others in the dialog) and the SelectedValuePath shows how to dig into that value. In this case, the Source property had the name (string) of the FontFamily.

The result looks like this:

I'm starting to "grok" WPF more each evening I code on BabySmash. I know I'm still just barely scratching the surface. I'm looking forward to implementing (with your help) more of the BabySmash Feedback Items.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

I wanted a custom cursor for BabySmash! My son was having trouble associating the mouse cursor on the screen and the movement of the mouse. Clearly a shiny new Kids Cursor was in order.

I went into Expression Blend and drew this hand cursor. I drew it with the spliney-liney pully-thing-tool. (That's the official name for it, I'm sure.

I was feeling pretty good about this cursor. It had a gradient and everything. I put it up, but mentioned to Felix The Designer that maybe he wanted to have a go at making a cursor. Seven minutes later I received this. If you want to understand what real design talent is like, read about Felix's thought process as he redesigned the Mix site.

At this point I declared, in the style of American Comedian Larry Miller:

"The difference between a Designer and Developer, when it comes to design skills, is the difference between shooting a bullet and throwing it." - Scott Hanselman with apologies to Larry Miller

More on the Designer/Developer relationship later, but for now, thanks to Felix and Conchango, BabySmash is looking pretty professional, IMHO.

Developer != Designer. Sigh.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

Subscribe:

• Download: MP3 Full Show
• Torrent: Download via µtorrent
• ACTION: Please vote for us on Podcast Alley! Digg us at Digg Podcasts!

If you have trouble downloading, or your download is slow, do try the torrent with µtorrent or another BitTorrent Downloader.

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is our sponsor for this show.

Telerik's new stuff is pretty sweet, check out the ONLINE DEMO of their new ASP.NET AJAX suite. RadGrid handles sorting, filtering, and paging of hundreds of thousands of records in milliseconds, and the RadEditor loads up to 4 times faster and the navigation controls now support binding to web services on the client.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By