WPF自定义Gantt控件右侧溢出40px，滚动按钮显示不全

我在WPF应用中自定义了一个Gantt控件，目前遇到的问题是：控件右侧存在约40px的溢出区域，导致滚动条右侧按钮无法显示，顶部右侧按钮区域也缺失约40px。经调试发现，Gantt、Canvas和Grid的ActualWidth属性值完全一致，请问问题出在哪里？

主窗口InitializeUI方法代码 #

private void InitializeUI() {
    canvas = new Canvas
    {
        Background = Brushes.White,
    };

    // Bind canvas width and height to the width and height of the window
    BindingOperations.SetBinding(canvas, Canvas.WidthProperty, new Binding("ActualWidth") { Source = this });
    BindingOperations.SetBinding(canvas, Canvas.HeightProperty, new Binding("ActualHeight") { Source = this });

    // Set the Border as the content of the window
    Content = canvas;

    Gantt gantt = new Gantt();
    canvas.Children.Add(gantt);

    BindingOperations.SetBinding(gantt, Gantt.WidthProperty, new Binding("ActualWidth") { Source = canvas });
    BindingOperations.SetBinding(gantt, Gantt.HeightProperty, new Binding("ActualHeight") { Source = canvas });
}

Gantt控件createTreeView布局方法代码 #

private void createTreeView()
{
    this.treeView = new TreeView();
    this.treeView.BorderThickness = new Thickness(0);
    this.treeView.Margin = new Thickness(0);
    this.gantt_toolbox = new Gantt_Toolbox();


    this.grid = new Grid();
    // Define column definitions
    this.grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });

    // Define row definitions
    this.grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
    this.grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
    this.grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

    this.grid.VerticalAlignment = VerticalAlignment.Stretch;
    this.grid.HorizontalAlignment = HorizontalAlignment.Stretch;

    Grid.SetRow(this.gantt_toolbox, 0);
    Grid.SetColumn(this.gantt_toolbox, 0);

    Grid.SetRow(this.treeView, 1);
    Grid.SetColumn(this.treeView, 0);

    Grid.SetRow(this.mainTimeScrollbar, 2);
    Grid.SetColumn(this.mainTimeScrollbar, 0);

    this.grid.Children.Add(this.gantt_toolbox);
    this.grid.Children.Add(this.treeView);
    this.grid.Children.Add(this.mainTimeScrollbar);

    this.Content = this.grid;
}

问题排查与解决方案 #

核心原因分析 #

1. 窗口边框/内边距未排除：Window的ActualWidth包含了窗口边框、标题栏的宽度，而你直接将Canvas宽高绑定到这个值，导致实际可用的内容区域被压缩，控件被迫溢出。
2. Canvas布局特性限制：Canvas是绝对布局容器，不会自动裁剪超出自身范围的子元素，即使子元素尺寸和Canvas一致，内部控件的布局偏差也会直接暴露为溢出。
3. 内部控件隐性布局约束：gantt_toolbox、mainTimeScrollbar或其内部控件可能存在未显式设置的Margin、Padding，或者固定宽度超出了Grid的可用空间。

具体修复步骤 #

1. 替换绑定源为内容区域尺寸：将Canvas的宽高绑定从ActualWidth/ActualHeight改为ContentRenderedWidth/ContentRenderedHeight，这个值是窗口去除边框后的实际可用内容宽度：

   BindingOperations.SetBinding(canvas, Canvas.WidthProperty, new Binding("ContentRenderedWidth") { Source = this });
   BindingOperations.SetBinding(canvas, Canvas.HeightProperty, new Binding("ContentRenderedHeight") { Source = this });
   

2. 移除冗余Canvas容器：直接将Gantt作为Window的Content，避免Canvas带来的布局不确定性：

   private void InitializeUI() {
       Gantt gantt = new Gantt();
       BindingOperations.SetBinding(gantt, FrameworkElement.WidthProperty, new Binding("ContentRenderedWidth") { Source = this });
       BindingOperations.SetBinding(gantt, FrameworkElement.HeightProperty, new Binding("ContentRenderedHeight") { Source = this });
       Content = gantt;
   }
   

3. 检查内部控件布局参数：给Gantt内的Grid添加ClipToBounds="True"临时测试，确认是否是内部控件溢出导致；同时排查gantt_toolbox、mainTimeScrollbar的Margin、Padding设置，确保没有隐性的偏移。
4. 验证窗口布局属性：确保Window的SizeToContent设为Manual，ResizeMode符合需求，避免自动布局引发的冲突。

内容的提问来源于stack exchange，提问作者Lukas Fürst