WPF畫布和網格覆蓋

Question

我有一個Grid它代表一些數據，我需要一個Canvas覆蓋它的頂部來佈局一些行。 Canvas是它自己的UserControl。

問題是，當Grid調整寬度和高度時，Canvas及其內容應自動調整大小。

我在ViewBox的內部添加了Canvas，但它沒有成功。當Grid調整大小時，Canvas不會。 Canvas的目的是覆蓋網格頂部的標尺功能。

期待您的解決方案。

編輯

我不能用一種風格的網格來代替畫布，因爲網格顯示出比在畫布上做不同的信息。把它看成是圖，其中可以有不同大小的條列（在我的情況下，網格）和天都在覆蓋線（就像甘特圖）

我的代碼：

taxCanvas = new TimeAxis(); 
    Grid.SetRowSpan(taxCanvas, GRightMain.RowDefinitions.Count); 
    Grid.SetColumnSpan(taxCanvas, GRightMain.ColumnDefinitions.Count); 

    Grid.SetColumn(taxCanvas, 0); 
    Grid.SetRow(taxCanvas, 0); 


    Grid.SetZIndex(taxCanvas, -1); 

    taxCanvas.Height = GRight.ActualHeight; 
    taxCanvas.Width = GRight.ActualWidth; 

    GRightMain.Children.Add(taxCanvas); 

TimeAxis是我的畫布用戶控件，GRightMain是一個網格，它將我的畫布和網格與內容（Gright）放在同一行和列中。

希望這有助於

Answer 1

你可以用結合「綁定」的Canvas的大小和Grid的大小對方。所以當Grid調整大小時，Canvas也會自動執行。

你也可以使用Converter作爲綁定你必須計算和偏移距離邊界的距離。

在WPF中綁定總是一個好主意，所以確保你知道它是如何工作的基礎知識。

無論如何，你總是可以在大小事件中的代碼背後（C＃/ VB）中完成它。只需確定一個控件的大小並將其設置爲另一個控件。就像獲取網格的actualHeight屬性並將其設置爲畫布的高度屬性。

也許這會給你一個想法： http://blogs.msdn.com/bencon/archive/2006/05/10/594886.aspx 或 http://www.switchonthecode.com/tutorials/wpf-tutorial-binding-converters

Answer 2

它是什麼，你正在試圖做的？如果您只想將網格線添加到整個網格中，則可以通過設置樣式like this來完成。或者，您可以使用Adorner s。他們在那裏在單獨的圖層上裝飾/裝飾元素。裝飾者的好處是，儘管他們在一個單獨的層面上，但他們與他們所裝飾的元素保持同步（大小，位置，變換）。

Answer 3

在我看來，畫布絕對是錯誤的方法。

我強烈建議查找裝飾者。您可以創建一個自定義裝飾器來完成此操作。

Adorner基本上是一個「非交互式窗口」，位於所有UIElements之上。它允許你做任何你想要的東西（創建控件，繪製東西等等），它將出現在控件本身之上。

用一塊透明玻璃在上面畫一張木製咖啡桌。如果您在透明玻璃上畫畫，您仍然可以看到茶几。唯一的區別是，你實際上可以直接通過咖啡桌上的透明玻璃並觸摸木材本身。

我討厭發佈MSDN鏈接......但是......呃。在這種情況下，這將是一個良好的開端：

http://msdn.microsoft.com/en-us/library/ms743737.aspx

編輯：

我趕緊一起扔東西。希望這有助於？

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:loc="clr-namespace:WpfApplication1" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
    <loc:GridWithRulerxaml></loc:GridWithRulerxaml> 
    <Button Height="20" Width="50" >Click me</Button> 
    <TextBox Width="150" Height="25" HorizontalAlignment="Left">This is a text box</TextBox> 
    </Grid> 
</Window> 

用戶控件：

<UserControl x:Class="WpfApplication1.GridWithRulerxaml" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 

    </Grid> 
</UserControl> 

用戶控件的代碼隱藏：

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 

namespace WpfApplication1 
{ 
    /// <summary> 
    /// Interaction logic for GridWithRulerxaml.xaml 
    /// </summary> 
    public partial class GridWithRulerxaml : UserControl 
    { 
    public GridWithRulerxaml() 
    { 
     InitializeComponent(); 

     //Loaded event is necessary as Adorner is null until control is shown. 
     Loaded += GridWithRulerxaml_Loaded; 

    } 

    void GridWithRulerxaml_Loaded(object sender, RoutedEventArgs e) 
    { 
     var adornerLayer = AdornerLayer.GetAdornerLayer(this); 
     var rulerAdorner = new RulerAdorner(this); 
     adornerLayer.Add(rulerAdorner); 
    } 
    } 
} 

最後裝飾器本身：

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

namespace WpfApplication1 
{ 
    public class RulerAdorner : Adorner 
    { 
    private FrameworkElement element; 
    public RulerAdorner(UIElement el) : base(el) 
    { 
     element = el as FrameworkElement; 
    } 

    protected override void OnRender(System.Windows.Media.DrawingContext drawingContext) 
    { 
     base.OnRender(drawingContext); 

     double height = element.ActualHeight; 
     double width = element.ActualWidth; 

     double linesHorizontal = height/50; 
     double linesVertical = width/50; 

     var pen = new Pen(Brushes.RoyalBlue, 2) { StartLineCap = PenLineCap.Triangle, EndLineCap = PenLineCap.Triangle }; 

     int offset = 0; 

     for (int i = 0; i <= linesVertical; ++i) 
     { 
     offset = offset + 50; 
     drawingContext.DrawLine(pen, new Point(offset, 0), new Point(offset, height)); 
     } 

     offset = 0; 

     for (int i = 0; i <= linesHorizontal; ++i) 
     { 
     offset = offset + 50; 
     drawingContext.DrawLine(pen, new Point(0, offset), new Point(width, offset)); 
     } 
    } 
    } 
} 

如果你想我更詳細地說明代碼本身讓我知道。

我確認這會在您的主頁上繪製一個網格。你仍然應該能夠與下面的內容進行交互。