c# - Microsoft.Expression.Controlsコントロールへのコールアウトポイントアンカー

Question

CalloutコントロールのPointAnchorをMicrosoft.Expression.ControlsWPFコントロールに設定する方法はありますか？

私は次のようなものを試しました

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

Answer 1

これを実現する方法はいくつかあります。1つは、すべてをaに配置し、コールアウトを隣に配置するコントロールのx/yキャンバス座標に基づいてCanvas移動することです。Callout

より柔軟な方法は、TransformToAncestorメソッドを使用して、コールアウトをアンカーするコントロールが配置されている場所を、いくつかの祖先要素に対して特定することです。この場合、配置するのに最適な要素はルート要素です。

実例は次のとおりです。

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>

コードビハインド

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 );
}

Answer 2

注：望ましい結果はコールアウト全体ではなくアンカーポイントを移動することであるというOPの再説明に基づいて、コールアウトを移動するため、必要に応じて最初の回答を他の人が使用できるように、別の回答を追加します。

---

画面上の別の要素に対してCalloutのAnchorPointを移動するための組み込みのフレームワークメソッドはないようです。

コールアウトのアンカーポイントは、コールアウトの上部と左隅の相対位置に基づいています。コールアウトと他の要素との間の距離を計算してAnchorPointを移動し、少し計算して相対的な位置を決めることができます。以下が機能するはずです。

XAML

<Window x:Class="so.ExpCallout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
        Title="Callout Anchor Point"
        Width="625"
        Height="350"
        WindowStartupLocation="CenterScreen">

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

        <Button x:Name="LeftButton"
                Width="100"
                Height="25"
                Margin="50,200,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click="OnLeftButtonClick"
                Content="Left" />

        <Button x:Name="RightButton"
                Width="100"
                Height="25"
                Margin="450,200,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click="OnRightButtonClick"
                Content="Right" />

    </Grid>

</Window>

コードビハインド

using System.Windows;
using System.Windows.Media;

namespace so.ExpCallout
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

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

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

        private void AdjustCalloutAnchor( FrameworkElement el )
        {
            // locate the positions of the callout and the element to point to
            Point calloutPoint = MyCallout.TransformToAncestor( LayoutRoot ).Transform( new Point( 0, 0 ) );
            Point elementPoint = el.TransformToAncestor( LayoutRoot ).Transform( new Point( 0, 0 ) );

            double vertOffset = calloutPoint.Y + MyCallout.ActualHeight;
            double horizOffset = elementPoint.X;
            if( calloutPoint.X > elementPoint.X )
            {
                // increase the horizontal offset if the callout 
                // is to the right of the element
                horizOffset += el.ActualWidth;
            }

            double vertDistance = ( elementPoint.Y + el.ActualHeight ) - vertOffset;
            double horizDistance = calloutPoint.X - horizOffset;

            // add some cushion between the element and the new AnchorPoint
            int pad = 5;

            // the AnchorPoint is a relative distance based on the actual height
            // and width of the callout.
            double x = ( horizDistance / ( MyCallout.ActualWidth + pad ) ) * -1;
            double y = ( vertDistance / ( MyCallout.ActualHeight + pad ) ) + 1;

            // set the new AnchorPoint location
            MyCallout.AnchorPoint = new Point( x, y );

            MyCallout.Content = string.Format( "I'm pointing at {0}", el.Name );
        }
    }
}