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.
Tuesday, January 6, 2009 at 3:14:00 PM PST
ಯತೀಶ್ said…
What if i want by balloon tip to be randomly placed depending on the placement of my control.?
Wednesday, February 25, 2009 at 4:27:00 AM PST
Post a Comment

Popular posts from this blog

Time Picker User Control

The easiest way to create a WPF TimePicker control is to make a user control wrapped for TimeSpan CLR object. Here is a very simple sample which does that. Basically TimeControl is having 4 DPs one for the entire Value (Which is a TimeSpan) and individual Hours, Minutes and Seconds. (We can optionally add Days and Milliseconds also to make the control rich). Here is a C# class TimeControl.xaml.cs public partial class TimeControl : UserControl { public TimeControl() { InitializeComponent(); } public TimeSpan Value { get { return ( TimeSpan )GetValue(ValueProperty); } set { SetValue(ValueProperty, value ); } } public static readonly DependencyProperty ValueProperty = DependencyProperty .Register( "Value" , typeof ( TimeSpan ), typeof ( TimeControl ), new UIPropertyMetadata ( DateTime .Now.TimeOfDay, new PropertyChangedCallback (OnValueChanged)));
Read more

A simple Multiselect ComboBox using expression Blend

Image
I have often seen requirements to have a combobox with multiple selection enabled. We know thatWPF ListBox control is having two special properties, which enables the multiple selection but the combobox doesnt have those public IList SelectedItems { get; } public SelectionMode SelectionMode { get; set; } There are many ways we can make a multiselect combo box 1)Create a custom control from the scratch and have a Listbox in the dropdown 2)Extend the combobox and add the above properties to it 3)Edit the Combobox control template to add necessary controls and binding. I am going to describe the 3rd idea from the above list, which is a total Expression Blend work, so no need of VS2008 to make a multiselect combobox from a simple combobox. Place a combobox in to the editing area and right click on the control to create an copy of the Control template. Now you can see the Control's tree on the left side of Expression Blend The ItemPresenter inside the scrollviewer is actually the
Read more

A Simple Radial Panel for WPF and SilverLight

Image
Geometry was one of the coolest topics in school for me. Probably because it uses a lot of figures to convey the concepts. Here I am trying to explain how we can leverage the Layout system in WPF and Silver light by taking an example of creating a Radial Panel. A RadialPanel lays out its children in a circular fasion. So before going in to the technical details, let us see how this problem get solved algorithmically.If you are asked to arrange a bunch of items in a circular path, what all things would you consider?. 1) How much space do I have? – Say X * Y rectangular area is the available size. 2) I will draw an approximate Circle (Or ellipse) inside the X*Y space. Assuming that the Radii are ‘Rx and Ry' 3) How many items are there to arrange? Say N – number 4) I know that 360 degrees are the total angular space for a circle. So angular distance between each item will be 360/N degrees. 6) I can calculate the coordinate point to which an item should be placed. That is by doing the
Read more