WPFデザイン：丸みのあるコーナーとシャドー効果を使用してユーザーコントロールを作成する方法

Question

UIコントロールをイメージのとおりに正確に作成したいと考えています。丸みを帯びたコーナーで、影の効果のように薄く、ボックスの周りには色の線があります。コントロールのサイズは、親のサイズとする。私たちは例を使ってみましたが、デザインチームによって与えられたこのデザインとは何も一致しません。

Answer 1

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

ここで効果を達成する一つの方法です：

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

それはデモを参照する方が簡単ですので、私の方が大きい色が濃く丸み作りました：

これは、利用可能なスペースに比例し、コンテンツは境界内に入ります。