[WPF/C#] 그림자 효과 입체감 주기 - ShadowDepth, BlurRadius

안녕하세요. 이번에는 WPF(C#)의 Border 또는 Button의 입체감을 주는 방법에 대하여 알아보도록 하겠습니다. 기존 컨트롤의 경우 단조롭다는 느낌이 강하게 드는 반면, 그림자 효과를 추가하여 화면이 더욱 입체감이 있게 보일 수 있습니다.

---

WPF/C# 그림자 효과 (ShadowDepth, BlurRadius)

Border와 Button 모두 Effect의 DropShadowEffect 개체를 사용하므로 사용법은 동일합니다. 밑의 예제는 버튼에 적용하여 알아보도록 하겠습니다.

 

1. 기존 버튼

// .xaml 코드
<Grid>
	<Button x:Name="Btn_Test" Content="Test버튼" Width="100" Height="60"/>
</Grid>

 

기본 버튼 모양

기본 버튼

 

위 버튼이 가장 기본적은 버튼(Button)을 생성하였을 때 모습입니다.

 

2. 그림자 효과 버튼

버튼에 입체감을 주기 위해 그림자 효과를 적용하기 위해서는 Button의 Effect의 DropShadowEffect라는 개체를 사용해야 합니다. 아래 코드를 통하여 ShadowDepth와 BlurRadius 속성에 대하여 알아보도록 하겠습니다.

 

2.1. ShadowDepth 속성

// .xaml 코드
<Grid>
	<Button x:Name="Btn_Test" Content="Test버튼" Width="100" Height="60">
		<Button.Effect>
			<DropShadowEffect ShadowDepth="5"/>
		</Button.Effect>
	</Button>
</Grid>

 

ShadowDepth는 그림자의 깊이(거리)라고 생각하시면 됩니다. 속성값을 증가하는 만큼 더 깊은 그림자가 생기며, 감소하면 그림자의 거리가 줄어듭니다. ShadowDepth를 설정하면 자동으로 BlurRadius(흐림효과)의 값이 Default로 5정도로 설정되어 적용됩니다.

ShadowDepth 속성을 추가한 모양 (순차적으로 속성값이 5, 10, 20으로 설정된 버튼)

ShadowDepth 속성값 5

ShadowDepth 속성값 10

ShadowDepth 속성값 20

 

2.2. BlurRadius 속성 

// .xaml 코드
<Grid>
	<Button x:Name="Btn_Test" Content="Test버튼" Width="100" Height="60">
		<Button.Effect>
			<DropShadowEffect BlurRadius="0"/>
		</Button.Effect>
	</Button>
</Grid>

 

BlurRadius 속성은 그림자 효과에서 흐림의 정도를 설정합니다. 속성값이 낮을수록 그림자가 더욱 진하게 표현되며, 높을수록 더 퍼지는 그림자 효과를 낼 수 있습니다.

BlurRadius 속성을 추가한 모양 (순차적으로 속성값이 0, 5, 10으로 설정된 버튼)

BlurRadius 속성값 0

BlurRadius 속성값 5

BlurRadius 속성값 10

 

이상으로 WPF(C#)에서 Border Control의 DropShadoweffect 개체 속성인 ShadowDepth와 BlurRadius를 이용하여 그림자 효과로 화면을 한층 더 입체감 있게 표현하는 방법에 대하여 알아보았습니다. 여러분의 화면도 다양한 형태로 한번 꾸며보시기 바랍니다.

---

C# / WPF 도움이 되는 글

[WPF/C#] 다른 응용 프로그램 또는 파일 실행 방법 및 예제

[C#/WPF] ComboBox(콤보박스) 생성 및 사용 방법

[C#/WPF] DateTime 특정 요일 구하기(DayOfWeek)