How to make a border around a stackpanel which stops at the last element inside it?

82 views Asked by At

Currently I have a stackpanel with 2 buttons which I have placed in a single row whithin my grid. I want to draw a border around the stackpanel, but the stackpanel is filling the whole row, it doesnt stop at the last button (as expected I suppose):

Image of border around stackpanel

How can I modify this so the stackpanel or border stops at the last element without hardcoding or dynamically calculating a bottom margin?

<Border Background="#FF303841"
                Margin="5"
                CornerRadius="3"
                Grid.Row="2"
                Grid.Column="4">
            <StackPanel>
                <TextBlock Text="OTHER"
                           Foreground="White"
                           FontWeight="Medium"
                           FontFamily="Poppins"
                           FontSize="16"
                           HorizontalAlignment="Left"
                           Margin="5,5,0,0"/>
                
                <Button Style="{StaticResource linkBtn}">TEST1</Button>
                <Button Style="{StaticResource linkBtn}">TEST2</Button>

            </StackPanel>
        </Border>
1

There are 1 answers

0
ArcFlash On

As per emoacht's comment above, the solution was to simply add VerticalAlignment="Top" to the border. That made it stop filling the parent which was the grid row.

The cause of this behavior is that the default parameter for VerticalAlignment is stretch, so it needs to be overridden.