Thiết kế WPF: Cách thực hiện Điều khiển người dùng với góc tròn và hiệu ứng đổ bóng

Question

Chúng tôi muốn kiểm soát giao diện người dùng chính xác như được đề cập trong hình ảnh. Đó là góc tròn, như hiệu ứng đổ bóng và đường mảnh màu mỏng xung quanh hộp. Kích thước của điều khiển sẽ là kích thước của phụ huynh. Chúng tôi đã thử sử dụng ví dụ, không có gì phù hợp với thiết kế này do nhóm thiết kế đưa ra.

Answer 1

Bạn có thể sử dụng 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> 

Answer 2

Dưới đây là một cách để đạt được hiệu quả:

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

tôi đã thực hiện các gam màu sẫm và các cạnh tròn lớn hơn vì vậy nó dễ dàng hơn để xem cho bản demo:

Tỷ lệ này với không gian và nội dung có sẵn sẽ nằm trong biên giới.