Microsoft.Expression.Controls Callout pointanchor to a control

Question

Is there a way to set the PointAnchor of a Callout control Microsoft.Expression.Controls to a WPF Control ,

i've tried something like

public static void PointMe(this Callout me,UIElement ui)
{
         Me.AnchorPoint = ????? // don't know how to get the ui coordinates
}

Answer 1

There are a few ways this could be accomplished. One would be to place everything in a Canvas and move the Callout based on the x/y canvas coordinates of the control you want to position the callout next to.

A more flexible method would be to use the TransformToAncestor method to locate where the control you want to anchor the callout to is positioned, relative to some ancestor element. In this case, the best element to position against is the root element.

Here is a working example:

XAML

<Grid x:Name="LayoutRoot">
    <ed:Callout x:Name="MyCallout"
                Width="200"
                Height="100"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                AnchorPoint="0,1.5"
                CalloutStyle="Rectangle"
                Content="Callout"
                Stroke="Black" />

    <Button x:Name="LeftButton"
            Width="75"
            Margin="100,0,0,150"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            Click="OnLeftButtonClick"
            Content="Left" />

    <Button x:Name="RightButton"
            Width="75"
            Margin="300,0,0,150"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            Click="OnRightButtonClick"
            Content="Right" />

</Grid>

Code Behind

private void OnLeftButtonClick( object sender, RoutedEventArgs e )
{
    MoveCallout( LeftButton );
    e.Handled = true;
}


private void OnRightButtonClick( object sender, RoutedEventArgs e )
{
    MoveCallout( RightButton );
    e.Handled = true;
}

private void MoveCallout( FrameworkElement element )
{
    // find the position of the element to anchor against relative to the root object
    Point point = element.TransformToAncestor( LayoutRoot ).Transform( new Point( 0, 0 ) );

    // take into account the width of the anchor element
    double x = point.X + element.ActualWidth;

    // take into account the height of the anchor element and the callout
    // add a little wiggle room as well
    double y = point.Y - element.ActualHeight - MyCallout.ActualHeight - 10;

    MyCallout.Content = element.Name;

    // Move the callout to the new coordinates
    MyCallout.RenderTransform = new TranslateTransform( x, y );
}