CODEWITHSUNDEEP
wpfxaml
Marco
Marco

Reputation: 2235

WPF: Rectangle in Grid ignores margin

In a user control, which I'm embedding in my main view, I've defined the following layout:

<Grid x:Name="RootGrid"  Margin="0,10,0,0" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="20*" />
            <ColumnDefinition Width="20*" />
            <ColumnDefinition Width="30*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Rectangle Margin="5,0,5,0"
                   Grid.RowSpan="5"
                   Grid.ColumnSpan="4"            
                   Panel.ZIndex="-1"
                   Stroke="Blue"
                   Fill ="Black"
                   StrokeThickness="2"
                  />

In the preview in Visual Studio, it looks like expected: - that is the margin 5(for right adjustment) is taken into account.

Unfortunately, during runtime it is another story. I can set the right adjustment (margin) as high as I want, the right border of the rectangle is missing.

Can somebody tell me, what I am doing wrong here? I do not want to work with absolute width for the rectangle (that's working).

Update:

According to the proposal of Erno, I've used a border (and this is indeed much simpler):

<Border HorizontalAlignment="Stretch" Margin="10,0,10,0" Style="{StaticResource StatusPanelBorder}">
        <Grid x:Name="RootGrid" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="20*" />
                <ColumnDefinition Width="20*" />
                <ColumnDefinition Width="30*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

But the issue is still the same. I'm embedding this view in a main view, which has the following layout:

<Grid Width="1600" Height="Auto" HorizontalAlignment="Stretch" Background="{StaticResource NoiseBackground}">
        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="90*" />
            <ColumnDefinition Width="40*" />

        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="600" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>

The subview is embedded into the last column of the grid. If I do not use the 'Stretch' alignment it works, but I want to 'stretch' the UI elements.

Second Update: The issue was just that the shell view had a smaller width. Problem solved!

Upvotes: 0

Views: 625

Answers (1)

Emond
Emond

Reputation: 50672

The best way to add a border to a grid is to take a border and nest a grid inside of it: 

<Border>
    <Grid>
       ...
    </Grid>
</Border>

This way the grid and the border will resize the way you probably want, you can control the margins and you do not have to keep the textblocks' margins in sync with the rectangle's border.

EDIT Looking at the xaml you added to the question I guess you set the width of the window to 1600. If so, the width of the Grid that you also set to 1600 doesn't fit because the width of the window INCLUDES the left and right borders. So forcing the grid's width to 1600 will cut it off at the right.

My advice: do not use hard-coded sizes, use star-sizes for columns and rows and use maximized for windows; Grids will stretch their contents automatically.

Upvotes: 2

Related Questions