Silverlight StackPanel inside Border with rounded corners

Question

How is this normally handled? I have this xaml:

    <Border Grid.Column="1" HorizontalAlignment="Right" 
        VerticalAlignment="Top" Margin="10,25,10,0" Opacity="0.7" 
        BorderBrush="Black" BorderThickness="1" CornerRadius="5">
        <StackPanel>
            <StackPanel.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="LightGray" Offset="0.0" />
                    <GradientStop Color="Gray" Offset="1.0" />
                </LinearGradientBrush>
            </StackPanel.Background>

The top left and right corners of the StackPanel are LightGray, and appear to be on top of the Border, so that in the middle of the rounded Black corners is a LightGray pixel or two, breaking up the rounding. The bottom border is Gray instead of Black.

What I thought I would get with the code above is a StackPanel with rounded corners...

Shawn Kendrot Shawn Kendrot · Accepted Answer · 2012-09-06T16:26:39

I would suggest putting the background on the Border and not the Stackpanel

<Border Grid.Column="1" HorizontalAlignment="Right" 
    VerticalAlignment="Top" Margin="10,25,10,0" Opacity="0.7" 
    BorderBrush="Black" BorderThickness="1" CornerRadius="5">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="LightGray" Offset="0.0" />
            <GradientStop Color="Gray" Offset="1.0" />
        </LinearGradientBrush>
    </Border.Background>
    <StackPanel>
        <!-- Items here -->
    </StackPanel>
</Border>

Silverlight StackPanel inside Border with rounded corners

1 Answers