XAML Balloon Comments - Expression Blend Tip

It is often a requirement in Silverlight and WPF that to create Balloon kind of UI for Toolip popups. It can be done in many ways. I am listing out few of the common Balloons you might be interested in.




  <Grid            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="30"/>

            </Grid.RowDefinitions>

            <Rectangle RadiusX="10" RadiusY="10" Stroke="#FF000000"/>

            <Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="20" Grid.Row="1"

                Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>

            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Text="Hello World" TextWrapping="Wrap" FontWeight="Bold"/>

        </Grid>




This Balloon doesnt change its corner Radius when you resize. And also doesn't change the size of the Tip when you resize. The Tip has its height always be 30 since the Grid Row height is 30. You can tweak the constants in the XAML apporpriately to make it looks proper for your scenarios.




<Path Stretch="Fill"="2" Data="M10.5,0.5
L108.60157,0.5 C109.98227,0.5 111.29763,0.77982046 112.49402,1.2858505
114.88678,2.297905 116.80367,4.2147827 117.81572,6.6075516 118.32175,7.8039356
118.60157,9.1192895 118.60157,10.5 L118.60157,51.442939 C118.60157,52.823647
118.32175,54.139003 117.81572,55.33539 116.80367,57.728154 114.88678,59.645032
112.49402,60.657088 111.29763,61.163118 109.98227,61.442938 108.60157,61.442937
L22.30129,61.681242 11.674737,79.949581 10.48383,61.465811 10.209005,61.465811
C8.8282947,61.465812 7.8039303,61.163115 6.6075497,60.657088 4.2147805,59.645032
2.2979068,57.728154 1.2858486,55.33539 0.77982051,54.139003 0.5,52.823647
0.5,51.442939 L0.5,10.5 C0.5,9.1192895 0.77981997,7.8039356 1.2858486,6.6075516
2.2979069,4.2147827 4.2147808,2.297905 6.6075497,1.2858505 7.8039303,0.7798233
9.1192894,0.5 10.5,0.5 z"
Stroke="#FF000000"/>





If you combine the Rectangle and Path in the above Balloon you will get a single Path. But the issue here is that when you resize this Path along with  your contents the corners and the Tip wont look exactly the same, both will  get stretched on the direction of resize. But this can be useful in many scenarios.

 

 

 

Comments

Anonymous said…
This comment has been removed by a blog administrator.
ಯತೀಶ್ said…
What if i want by balloon tip to be randomly placed depending on the placement of my control.?

Popular posts from this blog

Time Picker User Control

A simple Multiselect ComboBox using expression Blend

A Simple Radial Panel for WPF and SilverLight