WPF在容器中繪製邊框

Question

我想在容器內繪製區域。爲此我想到了使用自定義控件。

我的問題是，畫布不佔用所有給定的空間。如何強行使用使用所有可用空間？

我所做的是從畫布繼承和創建邊框元素裏面：

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

，爲View：

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

我想是這樣的：

Answer 1

什麼我想要做的是創建這個控件來啓用在UI上的選擇。

爲此，我需要一個邊界/矩形，將僅跨越寬度，並使用了所有的高度它得到

我結束了與此：

查看：

<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> 

DrawableCanvas.cs：

public class DrawableCanvas : Canvas 
{ 
    private Border border; 

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

    // when selection is done expose event to notify the user of selection change 

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

     this.Children.Add(border); 
     this.Background = new SolidColorBrush(Colors.Transparent); 

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

     this.SizeChanged += DrawableCanvas_SizeChanged; 
    } 

    private void DrawableCanvas_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     border.Height = e.NewSize.Height; 
    } 

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

     // release mouse 
     Mouse.Capture(null); 

     border.Width = 0; 

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