在 WinRT 中获取 UIElement 的大小答案

【问题标题】：Get Size of UIElement in WinRT在 WinRT 中获取 UIElement 的大小
【发布时间】：2016-01-17 19:15:54
【问题描述】：

我有一个画布。当我单击它时，我得到了鼠标的坐标，并且向上（添加了一个孩子）在那里有 custum 控制（一个带有简单圆圈的拇指）。在屏幕上，从逻辑上讲，添加时以左上角为参考。我希望将拇指的中心准确地放在我点击的地方（见图。红星 = 我点击的地方）。

要做什么，我需要得到拇指的实际宽度和高度，然后计算精确的坐标以将拇指的中心放置在用户单击的位置。有没有更好的办法？在 WPF 中，我使用了此代码，但它在 WinRT 中不起作用。

 //Circle in thumb
 Ellipse Bdr = this.GetTemplateChild("Forme") as Ellipse;
 DependencyObject dobj = VisualTreeHelper.GetParent(Bdr);
 Vector ParentPosition = VisualTreeHelper.GetOffset((Visual)VisualTreeHelper.GetParent(dobj));
 Vector BdrPosition = VisualTreeHelper.GetOffset((Visual)dobj);
 return new Point((Position.X+BdrPosition.X) + Bdr.ActualWidth /2,(Position.Y+ ParentPosition.Y) + Bdr.ActualHeight / 2);

你能帮帮我吗？谢谢！

【问题讨论】：

标签： windows-runtime size center uielement

【解决方案1】：

ActualHeight 和 ActualWidth 属性保持为 0，直到未加载 FrameworkElement。另一方面，如果您在ControlTemplate 中设置了Ellipse 的大小，则可以在OnApplyTemplate() 上获取它的大小。您可以使用委托将高度和宽度传递给容器Page。即

ThumbControl

public class ThumbControl : Control
{
    public IThumbSize thumbSize;
    public ThumbControl()
    {
        this.DefaultStyleKey = typeof(ThumbControl);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        Ellipse child = this.GetTemplateChild("circle") as Ellipse;
        if (thumbSize != null)
            thumbSize.SizeMeasured(child.Width, child.Height);
    }
}

ThumbControl 的样式

 <Style TargetType="local:ThumbControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ThumbControl">
                    <Ellipse x:Name="circle"
                             Fill="Blue"
                             Height="50"
                             Width="50"></Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
  </Style>

IThumb 界面

public interface IThumbSize
{
    void SizeMeasured(double width, double height);
}

ContainerPage.xaml

<Grid Background="Black">
    <Canvas x:Name="rootCanvas"
            Background="Transparent"
            PointerReleased="rootCanvas_PointerReleased"></Canvas>
</Grid>

ContainerPage.xaml.cs

public sealed partial class ContainerPage: Page, IThumbSize
{
    ThumbControl thumbControl = new ThumbControl();
    Point touchPoint = new Point();
    public ContainerPage()
    {
        this.InitializeComponent();
        thumbControl.thumbSize = this;
    }

    private void rootCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        PointerPoint pt = e.GetCurrentPoint(rootCanvas);
        touchPoint.X = pt.Position.X;
        touchPoint.Y = pt.Position.Y;
        if (!rootCanvas.Children.Contains(thumbControl))
            rootCanvas.Children.Add(thumbControl);
        Canvas.SetLeft(thumbControl, touchPoint.X - (thumbControl.ActualWidth / 2));
        Canvas.SetTop(thumbControl, touchPoint.Y - (thumbControl.ActualHeight / 2));
    }

    public void SizeMeasured(double width, double height)
    {
        Canvas.SetLeft(thumbControl, touchPoint.X - (width / 2));
        Canvas.SetTop(thumbControl, touchPoint.Y - (height / 2));
    }
}

希望对您有所帮助。

【讨论】：