WPF - 백그라운드 그라데이션(Background Gradient)

WPF 컴포넌트의 백그라운드에 그라데이션을 적용하는 XAML입니다.
LinearGradientBrush의 StartPoint와 EndPoint로 가로, 세로, 대각선으로 그라데이션을 적용할 수 있습니다.

 

1. 세로 그라데이션

<Grid>
	<Grid.Background>
		<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
			<LinearGradientBrush.GradientStops>
				<GradientStop Offset="0.0" Color="#ffffff" />
				<GradientStop Offset="1.0" Color="#00ff00" />
			</LinearGradientBrush.GradientStops>
		</LinearGradientBrush>
	</Grid.Background>
</Grid>

 

2. 가로 그라데이션

<Grid>
	<Grid.Background>
		<LinearGradientBrush StartPoint="0 0" EndPoint="1 0">
			<LinearGradientBrush.GradientStops>
				<GradientStop Offset="0.0" Color="#ffffff" />
				<GradientStop Offset="1.0" Color="#00ff00" />
			</LinearGradientBrush.GradientStops>
		</LinearGradientBrush>
	</Grid.Background>
</Grid>

 

 

3. 대각선(외쪽 상단에서 오늘쪽 하단) 그라데이션

<Grid>
	<Grid.Background>
		<LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
			<LinearGradientBrush.GradientStops>
				<GradientStop Offset="0.0" Color="#ffffff" />
				<GradientStop Offset="1.0" Color="#00ff00" />
			</LinearGradientBrush.GradientStops>
		</LinearGradientBrush>
	</Grid.Background>
</Grid>

 

4. 여러색 혼합 그라데이션
  - GradientStop 구간별로 색을 지정하여 여러색 그라데이션을 적용합니다.

<Grid>
	<Grid.Background>
		<LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
			<LinearGradientBrush.GradientStops>
				<GradientStop Offset="0.0" Color="#00ffff" />
				<GradientStop Offset="0.25" Color="#00ff00" />
				<GradientStop Offset="0.5" Color="#ffff00" />
				<GradientStop Offset="0.75" Color="#0000ff" />
				<GradientStop Offset="1.0" Color="#ff0000" />
			</LinearGradientBrush.GradientStops>
		</LinearGradientBrush>
	</Grid.Background>
</Grid>

 

※ 위의 예제는 Grid에 대한 것이지만 다른 컴포넌트에서도 쉽게 적용하시면 됩니다.
   아래의 예제는 버튼의 백그라운드에 그라데이션을 적용한 예입니다.

<Button Content="Button" HorizontalAlignment="Left" Margin="100,115,0,0" VerticalAlignment="Top" Width="75">
	<Button.Background>
		<LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
			<LinearGradientBrush.GradientStops>
				<GradientStop Offset="0.0" Color="#00ffff" />
				<GradientStop Offset="1.0" Color="#ff0000" />
			</LinearGradientBrush.GradientStops>
		</LinearGradientBrush>
	</Button.Background>
</Button>