Sony Arouje

a programmer's log

Callouts in Silverlight

with 4 comments

As per the project requirement I have to show some Callouts. I was thinking of creating it using paths and curves. It would have been a lot of work. But blend saved my time. Blend provides callouts and other shapes in toolbar, VS editor wont provide it in toolbar. Below xaml shows a callout with an Oval textbox (Oval textbox I mentioned in my earlier post).

Name Space: System.Windows.Shapes

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    xmlns:we="clr-namespace:Designer.Controls"
    mc:Ignorable="d"
    x:Class="Designer.Controls.CallOutOval"
    d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
        <ed:Callout AnchorPoint="0,1.25" CalloutStyle="Oval" Fill="#FFF4F4F5" FontSize="14.666999816894531" Stroke="Black" HorizontalAlignment="Left" VerticalAlignment="Top">
            <ContentControl>
                <we:OvalTextBox Text="Your Text here" CornerRadius="50" BorderThickness="0" Background="Transparent"></we:OvalTextBox>
            </ContentControl>
        </ed:Callout>
    </Grid>
</UserControl>

Blend provides different callouts like Oval, Rectangle and Cloud. We are done with the Callout user control.

Advertisements

Written by Sony Arouje

August 30, 2010 at 5:38 pm

4 Responses

Subscribe to comments with RSS.

  1. Yes, but how to you actually use the callout so that it behaves like a tooltip?

    Jordan

    January 8, 2011 at 1:46 am

    • I use callout to enter some comments. I add a adorner to callout so that user can drag to any location and enter their comments.

      sonyarouje

      January 9, 2011 at 12:25 pm

  2. Actually the Popup control is ideal if you want the callout to be above all the other windows irregardless of how deeply nested it is. Took me a while to figure it out. But in fact all you have to do is wrap a Callout with Popup.

    Jordan

    January 11, 2011 at 1:35 am

    • Hi Jordan,
      The callout I mentioned is not above any window. it’s like bubbles in bingmap. I used callouts to add comments to an image displayed in image control.

      sonyarouje

      January 11, 2011 at 10:32 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: