Geek Answers Handbook

WPF design: how to make user controls with a rounded corner and shadow effect

We want to make the user interface control exactly as indicated in the image. This is a rounded corner, like a shadow effect and thin, and a colored line around the box. The size of the control must be the size of the parent. We tried using an example; nothing matches this design provided by the development team.

enter image description here

+7
source share
2 answers

You can use 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>
+3
source

Here is one way to achieve 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 made the colors darker and the roundness bigger to make it easier to see the demo:

Rounded with shadow

It scales to an accessible place, and the content goes abroad.

+5
source

More articles:


All Articles