WPF在容器中绘制边框

Question

我想在容器内绘制区域。为此我想到了使用自定义控件。

我的问题是Canvas没有占用它获得的所有给定空间。如何强制它使用所有可用空间？

我所做的是继承自Canvas并在其中创建了border元素：

public class DrawableCanvas : Canvas
{
    private Border border;

    static DrawableCanvas()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(DrawableCanvas), new FrameworkPropertyMetadata(typeof(DrawableCanvas)));
    }

    public DrawableCanvas()
    {
        this.border = new Border();
        border.Background = new SolidColorBrush(Colors.Blue);
        border.BorderThickness = new Thickness(1);
        border.Width = 0;
        border.Visibility = Visibility.Hidden;
        border.Opacity = 0.3;

        this.Children.Add(border);

        this.MouseLeftButtonDown += DrawableCanvas_MouseLeftButtonDown;
        this.MouseLeftButtonUp += DrawableCanvas_MouseLeftButtonUp;
        this.MouseMove += DrawableCanvas_MouseMove;
    }

    private void DrawableCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Debug.WriteLine("Left mouse up");

        // release mouse
        Mouse.Capture(null);

        border.Width = 0;
        border.Height = 100;

        startPosition = 0;
    }

    double startPosition = 0;
    private void DrawableCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Debug.WriteLine("Left mouse down");

        border.Visibility = Visibility.Visible;

        // capture mouse
        Mouse.Capture(this);

        var point = e.GetPosition(this);
        startPosition = point.X;

        SetLeft(border, point.X);
    }

    private void DrawableCanvas_MouseMove(object sender, MouseEventArgs e)
    {
        if(this.IsMouseCaptured)
        {
            var point = e.GetPosition(this);

            Debug.WriteLine("Mouse move");

            // set the position to far left
            SetLeft(border, Math.Min(startPosition, point.X));

            // width is the difference between two points
            border.Width = Math.Abs(startPosition - point.X);

            Debug.WriteLine(Math.Min(startPosition, point.X));
            Debug.WriteLine(border.Width);
        }
    }
}

观点：

<DockPanel>
    <local:DrawableCanvas>
        <Rectangle Height="500" Width="500" Fill="Transparent" />
    </local:DrawableCanvas>
</DockPanel>

我想要这样的事情：

Answer 1

我想要做的是创建此控件以启用ui上的选择。

为此，我需要一个仅在宽度上跨越的边框/矩形并用尽所有高度

我最终得到了这个：

查看：

>> beamSuperposition([1,2,5],10,[6,5,3],[10,15,20],1)

ans =

   1.0e-05 *

    0.0583    0.1097    0.1650

<强> DrawableCanvas.cs：

<Window x:Class="Wpf.Test01.Stack_43281567"
        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:local="clr-namespace:Wpf.Test01.Controls"
        mc:Ignorable="d"
        Title="Stack_43281567" Height="300" Width="300">
    <Grid>
        <local:DrawableCanvas />
    </Grid>
</Window>