WPF设计:如何使用圆角和阴影效果进行用户控制

Question

我们希望完全按照图像中提到的方式进行UI控制.它是圆角,像阴影效果和薄而框周围的颜色线.控件的大小应为父级的大小.我们尝试使用示例,没有任何设计团队给出的设计.

Answer 1

这是实现效果的一种方法:

<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>

我使颜色更暗,圆度更大,因此更容易看到演示:

这会缩放到可用空间,内容会进入边框内.

Answer 2

您可以使用 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>