Update width of the rectangle when changing the width of the grid

Question

hello I have the following problem: I want to draw a rectangle on the canvas with methods Canvas.SetLeft() and Canvas.SetTop().

I use the method UserControl_Loaded() and everything works. the problem is that having ActualWidth when resizing the window and therefore the grid, the value does not change and I left with the values no longer accurate.

     private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
         Rectangle rett = new Rectangle();
        rett.Height = grid1.ActualHeight-10;
        rett.Width = grid1.ActualWidth -10;
        rett.Fill = new SolidColorBrush(Colors.LightBlue);
        canv.Children.Add(rett);
        Canvas.SetLeft(rett, 10);
        Canvas.SetTop(rett, 10);
    }

this is the xaml:

<Grid x:Name="grid1">
        <Canvas x:Name="canv" Height="auto" Width="auto"></Canvas>
</Grid>

in the first picture it is fine when not resize the window.

the second when I resize the grid remains the previous width.

I want the width of the rectangle was updated when changing the width of the grid. Thank you.

Peter Duniho Peter Duniho · Accepted Answer · 2015-10-16T01:37:04

Without a good, minimal, complete code example that clearly illustrates your question, along with a detailed explanation of what you're actually trying to accomplish (especially in a broader sense), it is impossible to know for sure what the best answer in your case would be.

Taking your question literally, it seems one possible approach would be to bind the Rectangle dimensions to the Grid's dimensions, so that they are updated as the Grid changes size. You can use IValueConverter to subtract the appropriate amount from the actual dimensions.

But that's a fairly complicated solution for what would otherwise be a reasonably simple problem, and especially so given that you seem to be doing this in code-behind for some reason (not ideal in the first place, and setting up bindings in code-behind is particularly tedious).

Idiomatically, what you should probably be doing is not putting the Rectangle in the Canvas at all, but rather making it a child of the Grid directly. Then you can set its alignments to Stretch so that it will fill the grid cell it's in. Finally, you can set its margins so that you have the 10 pixel gap on the top and left, and no gap on the right and bottom.

For example:

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    Rectangle rett = new Rectangle();
    rett.Fill = new SolidColorBrush(Colors.LightBlue);

    // NOTE: technically don't need to set these, as Stretch is the default value!
    rett.HorizontalAlignment = HorizontalAlignment.Stretch;
    rett.VerticalAlignment = VerticalAlignment .Stretch;

    // 10 pixels of margin on top and left, none on right and bottom
    rett.Margin = new Thickness(10, 10, 0, 0);

    grid1.Children.Add(rett);
}

Doing it as above allows the XAML layout engine to automatically handle the resizing behavior you are looking for.

All that said, I would definitely encourage you to implement this in XAML instead of code-behind. There are a lot of things code-behind is good at, but frankly XAML is much better at any of the things directly related to the configuration of your GUI object graph.

Update width of the rectangle when changing the width of the grid

1 Answers