Callout Balloon in Silverlight

2. June 2009 17:12
So since I'm not a designer by any means, I needed a way to create a balloon callout for my silverlight application.  This XAML below will work in Expression Blend 2 or Expression Blend 3 Preview to create a callout balloon in Silverlight. The main concept is as follows:

1. Use a canvas as the container for the callout balloon
2. Use a rounded rectangle for the main area to hold content in the balloon callout
3. Use a path to create the triangle portion of the callout
4. Use a line to cover the border of the rectangle where it overlays the triangle created by the path


The image below is what results from the code.


<Canvas Margin="95.5,112,169,88" x:Name="canPopOutDesc">
            <Path Height="44.314" Width="35.571" Canvas.Left="2.726" Canvas.Top="92.137" Stretch="Fill" Stroke="#FF000000" StrokeThickness="1" Opacity="0.595" Data="M97.22541,215.14671 L131.79651,171.83289 L130.92891,209.81383 z" x:Name="pathPopOutTriag">
                <Path.Fill>
                    <LinearGradientBrush EndPoint="-0.566,0.528" StartPoint="1.502,0.523">
                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                        <GradientStop Color="#FFCAC2C2" Offset="0.364"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Rectangle Height="200" Width="100" Canvas.Left="33" RadiusX="10" RadiusY="10" Stroke="#FF000000" StrokeThickness="0.5" Opacity="1" x:Name="rectPopoutDescHolder">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="-0.566,0.528" StartPoint="1.502,0.523">
                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                        <GradientStop Color="#FFCAC2C2" Offset="1"/>
                        <GradientStop Color="#FFFFFAFA" Offset="0.467"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <TextBlock Text="this is some text people for a description of some sort" TextWrapping="Wrap" FontSize="9" x:Name="txtPopupVidDescription" Width="86" Height="185" Canvas.Top="7" Canvas.Left="40"/>
            <Path HorizontalAlignment="Left" Width="1" Stretch="Fill" StrokeThickness="1" Data="M129,174.5 L129,205.52274" Fill="{x:Null}" x:Name="pathPopOutLine" VerticalAlignment="Bottom" Height="33" Canvas.Top="99" Canvas.Left="33">
                <Path.Stroke>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFE5DFDF" Offset="0"/>
                        <GradientStop Color="#FFE0DCDC" Offset="1"/>
                        <GradientStop Color="#FFE0DCDC" Offset="0.764"/>
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
        </Canvas>



Now there may be an easier way to accomplish this, but then again I'm not a designer so please let me know if there is so I know for the future :)

Tags:

Silverlight

blog comments powered by Disqus



My Random Thought

I think the OCW is a great thing to have available to those who are in school, just finished school or just want to educate themself

http://ocwconsortium.org/

John On Twitter

Discounts