WPF 40 px are always overflowing the window on the right

Question

in my WPF Application, i have a own created widget (Gantt).

Here is the InitializeUI() in the main Window of Gantt:

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

Here is the layout routine of Gantt:

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

My problem is that on the right,there is a difference of like 40 px, because the right button of the scrollbar is not visible. Also the buttons at the top, at the right one, there is a missing area like 40 px.

I checked with debug and Gantt, Canvas and Grid have all the same ActualWidth property.

What is my fault?

Answer 1

By default, a window is composed of two overlapping rectangles. The inner rectangle is the client area where the content of application is drawn. The outer rectangle is the non-client area which consists of title bar and borders and it surrounds the client area. See Standard Windows

The Window.Width and Window.ActualWidth indicate the non-client area's width and as there are gaps between the two rectangles, they are larger than the client area's width. The non-client area's borders have gone as of Windows 10 and the outer and inner rectangles seemingly match except the title bar and thin oultine but in fact, the gaps still remain.

Having said that, you shouldn't need to set binding to make the Canvas's width match to the client area's width because the default value of Canvas.HorizontalAlignment is Stretch.