Canvas overlaps parent border

Question

I'm struggling with a layout problem. My usercontrol contains a border, with a canvas as a child. This canvas contains a grid, and that grid contains 2 canvas (1 column and 2 rows with different colors).

My problem is that the grid overlaps the border on his right side, and I don't know why. I tried to set the ClipToBounds property of my main canvas to "True", but with no effect.

Can you help me ?

Here is the problem :

And here is the code :

<Border Name="MainBorder" BorderBrush="Black" BorderThickness="1">
   <Canvas Name="MainCanvas" Height="30" ClipToBounds="True">
      <Grid Width="{Binding ElementName=MainCanvas, Path=ActualWidth}">
          <Grid.RowDefinitions>
              <RowDefinition Height="5" />
              <RowDefinition Height="5" />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
              <ColumnDefinition />
          </Grid.ColumnDefinitions>

          <Canvas Name="CanvasTop" Grid.Row="1" Grid.Column="0" Background="Beige" />
          <Canvas Name="CanvasBottom" Grid.Row="0" Grid.Column="0" Background="LightGray" />
      </Grid>
   </Canvas>
</Border>

Thank you for your help.

Answer 1

Problem solved, there was a function in the code-behind that resized the control the wrong way :

public void SetMainCanvasWidth(double size)
{
    Width = Math.Max(2, size); // that line was evil. removed it and it runs
    MainCanvas.Width = Math.Max(2, size);
}

Thank you for your help.

Answer 2

I think it is your Width="{Binding ElementName=MainCanvas, Path=ActualWidth}" line which is causing that.

Instead of the width property can you try HorizontalAlignment="Stretch" ?? this will make sure that it uses the whole width