WPF Design: How to make User control with rounded corner and shadow effect

Question

We want to make the UI control exactly as mentioned in the image. It is rounded corner, like shadow effect and thin while color line around the box. The size of the control shall be size of the parent. We tried using example, nothing matches this design given by design team.

Answer 1

Here's one way to accomplish the effect:

<Grid>
    <Grid Background="LightGray">
        <Rectangle Margin="10,10,0,0" Fill="DarkGray" RadiusX="8" RadiusY="8"/>
        <Border Margin="4" BorderBrush="White" Background="LightGray" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
            <TextBlock Margin="10" Text="Hello, world!" FontSize="24" FontWeight="Bold"/>
        </Border>
    </Grid>
</Grid>

I've made the colors darker and the roundedness larger so it's easier to see for the demo:

This scales to the available space and content goes inside the border.

Answer 2

You could use the DropShadowEffect.

<Grid>
    <Grid Background="LightGray">
        <Border Margin="4"
                BorderBrush="White"
                Background="LightGray"
                BorderThickness="1,1,1,1"
                CornerRadius="8,8,8,8">
            <TextBlock Margin="10"
                        Text="Hello, world!"
                        FontSize="24"
                        FontWeight="Bold" />
            <Border.Effect>
                <DropShadowEffect Color="Gray" Opacity="0.5" />
            </Border.Effect>
        </Border>
    </Grid>
</Grid>