Get Microsoft Silverlight

Wednesday, December 03, 2008

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"/>


            <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"/>


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"

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.





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.?

Anonymous said...

Your blog is wonderful, I like it very much, thank you!
By the way, do you like Burberry Polos, which are very chic, especially the Ralph Lauren Polo Shirts, I love them very much. I also like playing sports, it can keep healthy, what do you like to do?
We are the outlet of Wholesale Polo Shirt, Polo Ralph Lauren shirts on sale,these products are best-seller in our store cheap polo shirts Cheap Polo ShirtsToday is Christmas, and our products also have a corresponding discount activitiesWholesale Polo Shirts -50% OFF,cheap polo shirts Cheap Polo ShirtsSo if you love these, you should not miss our store, we can meet what you want, and you can find many surprise in our store

Unknown said...

Good day. I was impressed with your article. Keep it up . You can also visit my site if you have time. Thank you and Bless you always.