UWP 无论如何要实现调整大小的控制，并在 Canvas 中移动文本框?

问题描述

我是 UWP 画布元素的新手.从那一刻起，我就一直在寻找实现它的方法.我找到了这个链接

I'm new to UWP canvas element. From the moment I have been finding the way to implement it. I have found this link this link which implementing the control that I want. However I follow the class that define in it. I can't inherit the Thumb control which showing it is Sealed type. Is there anyone know how to find a way out to implement this?

public class MoveThumb : Thumb
{

    public MoveThumb(Control dataContext, DragDeltaEventHandler dragDelta)
    {
        DataContext = dataContext;
        DragDelta = dragDelta;
    }

    public Control DataContext { get; private set; }
    public DragDeltaEventHandler DragDelta { get; }

    private void MoveThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        Control designerItem = this.DataContext as Control;

        if (designerItem != null)
        {
            double left = Canvas.GetLeft(designerItem);
            double top = Canvas.GetTop(designerItem);

            Canvas.SetLeft(designerItem, left + e.HorizontalChange);
            Canvas.SetTop(designerItem, top + e.VerticalChange);
        }
    }
}

解决方案

I've got some sample. Think you'll get the idea. Here's UserControl XAML:

Width="256"
Height="128">

<Grid x:Name="ContainerGrid" Background="Transparent"
      ManipulationMode="TranslateX,TranslateY"
      ManipulationStarted="Manipulator_OnManipulationStarted"
      ManipulationDelta="Manipulator_OnManipulationDelta">

    <Viewbox IsHitTestVisible="False">
        <TextBlock Text="Text" Foreground="Lime"/>
    </Viewbox>

    <Rectangle x:Name="ResizeRectangle" IsHitTestVisible="False"
               Width="16" Height="16" Fill="Orange"
               VerticalAlignment="Bottom" HorizontalAlignment="Right"/>

    <Rectangle Stretch="Fill" Stroke="DeepPink" StrokeThickness="2"
               IsHitTestVisible="False"/>
</Grid>

And a code behind:

    private bool _isResizing;

    public Manipulator()
    {
        InitializeComponent();
    }

    private void Manipulator_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        if (e.Position.X > Width - ResizeRectangle.Width && e.Position.Y > Height - ResizeRectangle.Height) _isResizing = true;
        else _isResizing = false;
    }

    private void Manipulator_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        if (_isResizing)
        {
            Width += e.Delta.Translation.X;
            Height += e.Delta.Translation.Y;
        }
        else
        {
            Canvas.SetLeft(this, Canvas.GetLeft(this) + e.Delta.Translation.X);
            Canvas.SetTop(this, Canvas.GetTop(this) + e.Delta.Translation.Y);
        }
    }

After creating this UserControl just place it into your Canvas:

<Canvas>
    <local:Manipulator/>
</Canvas>

I called it Manipuilator.

And here's how it looks like:

这篇关于UWP 无论如何要实现调整大小的控制，并在 Canvas 中移动文本框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！