surrealization.com Occasionally I come up with something worthwhile

The Expression Blend SDK has some interesting controls in it that you can easily miss if you’re not poking around the SDK namespaces. The one I’m going to talk about right now is called Callout. The Callout control is a content control that renders itself with an optional arrow anchored at a given point. What makes this control interesting (and fun) is it has an option for a displaying itself light a thought bubble and a word balloon.

   1: <UserControl x:Class="SilverlightApplication5.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

   5:     Height="300" Width="400">

   6:  

   7:     <Grid x:Name="LayoutRoot" Background="White">

   8:         <Image Source="bindispider.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"></Image>

   9:         <ed:Callout AnchorPoint="0,0" Width="150" Height="50" CalloutStyle="Oval" Stroke="Black" Fill="White">

  10:             <TextBlock Text="Me llamo Bindi"></TextBlock>

  11:         </ed:Callout>

  12:     </Grid>

  13: </UserControl>

The AnchorPoint property dictates where the optional arrow will be anchored on the callout. The CalloutStyle property has 4 options: Cloud, Oval, Rectangle, RoundedRectangle. The first two support arrows and the last two do not. To see this in action:

If I switch CalloutStyle to Cloud and move the anchor point to “0,1” (and move the Callout up a bit with a margin) I end up with this:

And a quick example of Rectangle and RoundedRectangle (which are much more boring without arrows):