본문 바로가기
Computer §/UX

[MSDN] silverlight brush

updownme 2009. 1. 17. 16:19

 

모든 플랫폼에서 가장 일반적으로 수행하는 작업 중 하나는 단색으로 영역을 그리는 것입니다. 이 작업을 수행하기 위해 Silverlight에서는 SolidColorBrush 클래스를 제공합니다. 다음 단원에서는 SolidColorBrush로 그릴 수 있는 여러 가지 방법을 설명합니다.

XAML에서 단색으로 영역을 그리려면 다음 옵션 중 하나를 사용합니다.

  • 이름별로 미리 정의된 SolidColorBrush를 선택합니다. 예를 들어 Rectangle의 Fill을 "Red" 또는 "MediumBlue"로 설정할 수 있습니다. 이 예제에서는 미리 정의된 SolidColorBrush의 이름을 사용하여 Rectangle의 Fill을 설정합니다.

    XAML
    코드 복사
    <StackPanel>
  <!-- This rectangle's fill is painted with a red SolidColorBrush,
    described using a named color. -->
  <Rectangle Width="100" Height="100" Fill="Red" />
</StackPanel>

  • 단색으로 조합할 빨간색, 녹색 및 파란색의 양을 지정하여 32비트 색상표에서 색을 선택합니다. 32비트 팔레트에서 색을 지정하는 형식은 #rrggbb입니다. 여기서 rr은 빨간색의 상대적인 양을 지정하는 2자리 16진수이며 gg는 녹색의 양을 지정하고 bb는 파란색의 양을 지정합니다. 색을 #aarrggbb로도 지정할 수 있습니다. 여기서 aa는 색의 알파 값 또는 투명도를 지정합니다. 이 방법을 사용하면 부분적으로 투명한 색을 만들 수 있습니다. 다음 예제에서 Rectangle의 Fill은 16진수 표기법을 사용하여 완전히 불투명한 빨간색으로 설정됩니다.

    XAML
    코드 복사
    <StackPanel>
  <!-- This rectangle's background is painted with a red SolidColorBrush,
    described using hexadecimal notation. -->
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

  • 속성 요소 구문을 사용하여 SolidColorBrush를 설명합니다. 보다 자세한 이 구문을 사용하면 브러시의 불투명도와 같은 추가 설정을 지정할 수 있습니다. 다음 예제에서 두 Rectangle 요소의 Fill 속성은 완전히 불투명한 빨간색으로 설정됩니다. 첫 번째 브러시의 색은 미리 정의된 색 이름을 사용하여 설명되고 두 번째 브러시의 색은 16진수 표기법을 사용하여 설명됩니다.

    XAML
    코드 복사
    <StackPanel>

  <!-- Both of these rectangles' fills are painted with red
    SolidColorBrush objects, described using object element
    syntax. -->
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <SolidColorBrush Color="Red" />
    </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <SolidColorBrush Color="#FFFF0000" />
    </Rectangle.Fill>
  </Rectangle>

</StackPanel>

 

그라데이션 브러시는 축을 따라 서로 혼합되는 여러 가지 색으로 영역을 그립니다. 이러한 브러시를 통해 명암 효과를 만들어 UI 요소에 3차원 느낌을 줄 수 있습니다. 또한 유리, 크롬, 물 및 기타 부드러운 표면을 시뮬레이션할 수도 있습니다. Silverlight에서는 두 가지 유형의 그라데이션 브러시(LinearGradientBrush 및 RadialGradientBrush)를 제공합니다.

LinearGradientBrush는 하나의 선, 즉 그라데이션 축을 따라 정의된 그라데이션으로 영역을 그립니다. GradientStop 개체를 사용하여 그라데이션 축을 따라 그라데이션의 색과 해당 위치를 지정합니다. 가로 및 세로 그라데이션을 만들고 그라데이션 방향을 반대로 바꿀 수 있도록 하는 그라데이션 축을 수정할 수도 있습니다. 그라데이션 축은 다음 단원에서 설명합니다. 기본적으로 대각선 그라데이션이 만들어집니다.

다음 예제에서는 네 가지 색으로 선형 그라데이션을 만들고 선형 그라데이션을 사용하여 Rectangle을 그립니다.

XAML
코드 복사
<StackPanel>
  <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

아래 그림에 생성된 그라데이션이 나와 있습니다.

대각선 선형 그라데이션
Cc189003.JOLT_local_606209841_wcpsdk_graphicsmm_diaglgradient_nolabel(ko-kr,VS.95).jpg

GradientStop은 그라데이션 브러시의 기본 빌딩 블록입니다. 그라데이션 중지점은 Offset에서 그라데이션 축을 따라 Color를 지정합니다.

  • 그라데이션 중지점의 Color 속성은 그라데이션 중지점의 색을 지정합니다. 미리 정의된 색을 사용하거나 ScRGB 또는 16진수 ARGB 값을 지정하여 색을 설정할 수 있습니다.

  • 그라데이션 중지점의 Offset 속성은 그라데이션 축에서 그라데이션 중지점 색의 위치를 지정합니다. 오프셋은 0-1 범위의 Double입니다. 그라데이션 중지점의 오프셋 값이 0에 가까울수록 색이 그라데이션의 시작 부분에 가까워집니다. 또한 그라데이션의 오프셋 값이 1에 가까울수록 색이 그라데이션의 끝 부분에 가까워집니다.

그라데이션 중지점 사이에 있는 각 지점의 색은 두 경계 그라데이션 중지점으로 지정한 색의 조합으로 선형 보간됩니다. 다음 그림에서는 앞의 예제의 그라데이션 중지점을 강조 표시합니다. 원은 그라데이션 중지점의 위치를 표시하고 파선은 그라데이션 축을 표시합니다.

선형 그라데이션의 그라데이션 중지점
Cc189003.JOLT_local_1860545327_wcpsdk_graphicsmm_4gradientstops(ko-kr,VS.95).png

첫 번째 그라데이션 중지점은 오프셋 0.0에서 노란색을 지정합니다. 두 번째 그라데이션 중지점은 오프셋 0.25에서 빨간색을 지정합니다. 이러한 두 중지점 사이의 지점은 그라데이션 축을 따라 왼쪽에서 오른쪽으로 이동하면서 점차적으로 노란색에서 빨간색으로 변경됩니다. 세 번째 그라데이션 중지점은 오프셋 0.75에서 파란색을 지정합니다. 두 번째와 세 번째 그라데이션 중지점 사이의 지점은 점차적으로 빨간색에서 파란색으로 변경됩니다. 네 번째 그라데이션 중지점은 오프셋 1.0에서 황록색을 지정합니다. 세 번째와 네 번째 그라데이션 중지점 사이의 지점은 점차적으로 파란색에서 황록색으로 변경됩니다.

그라데이션 축

앞에서도 언급했듯이 선형 그라데이션 브러시의 그라데이션 중지점은 하나의 선, 즉 그라데이션 축을 따라 배치됩니다. 브러시의 StartPoint 및 EndPoint 속성을 사용하여 선의 방향과 크기를 변경할 수 있습니다. 브러시의 StartPoint 및 EndPoint를 조작하면 가로 및 세로 그라데이션을 만들고, 그라데이션 방향을 반대로 바꾸고, 그라데이션 범위를 압축하는 등의 작업을 수행할 수 있습니다.

기본적으로 선형 그라데이션 브러시의 StartPoint 및 EndPoint는 그리는 영역에 상대적입니다. (0, 0) 지점은 그리는 영역의 왼쪽 위 모퉁이를 나타내고 (1, 1)은 그리는 영역의 오른쪽 아래 모퉁이를 나타냅니다. LinearGradientBrush의 기본 StartPoint는 (0,0)이고 기본 EndPoint는 (1,1)입니다. 이 경우 왼쪽 위 모퉁이에서 시작하여 그리는 영역의 오른쪽 아래 모퉁이로 확장되는 대각선 그라데이션이 만들어집니다. 다음 그림에서는 기본 StartPoint 및 EndPoint를 사용하여 선형 그라데이션 브러시의 그라데이션 축을 보여 줍니다.

대각선 선형 그라데이션의 그라데이션 축
Cc189003.JOLT_local_843203018_wcpsdk_graphicsmm_diagonalgradientaxis(ko-kr,VS.95).png

다음 예제에서는 브러시의 StartPoint 및 EndPoint를 지정하여 가로 그라데이션을 만드는 방법을 보여 줍니다. 그라데이션 중지점은 이전 예제의 그라데이션 중지점과 같습니다. 여기서는 StartPoint 및 EndPoint만 변경하여 그라데이션을 대각선에서 가로로 변경했습니다.

XAML
코드 복사
<StackPanel>
  <!-- This rectangle is painted with a horizontal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

아래 그림에 생성된 그라데이션이 나와 있습니다. 그라데이션 축은 파선으로 표시되고 그라데이션 중지점은 원으로 표시됩니다.

가로 선형 그라데이션의 그라데이션 축
Cc189003.JOLT_local_-289331312_wcpsdk_graphicsmm_horizontalgradient(ko-kr,VS.95).png

다음 예제에서는 세로 그라데이션을 만드는 방법을 보여 줍니다.

XAML
코드 복사
<StackPanel>
  <!-- This rectangle is painted with a vertical linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

아래 그림에 생성된 그라데이션이 나와 있습니다. 그라데이션 축은 파선으로 표시되고 그라데이션 중지점은 원으로 표시됩니다.

세로 그라데이션의 그라데이션 축
선형 그라데이션의 그라데이션 중지

LinearGradientBrush처럼 RadialGradientBrush는 축을 따라 함께 혼합되는 색으로 영역을 그립니다. 이전 예제에서는 선형 그라데이션 브러시의 축이 직선임을 보여 주었습니다. 그러나 방사형 그라데이션 브러시의 축은 원으로 정의되며 해당 색이 원점에서 바깥쪽으로 방사합니다.

다음 예제에서는 방사형 그라데이션 브러시를 사용하여 사각형의 내부를 그립니다.

XAML
코드 복사
<StackPanel>
  <!-- This rectangle is painted with a radial gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
        RadiusX="0.5" RadiusY="0.5">
        <GradientStop Color="Yellow" Offset="0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

다음 그림에서는 앞의 예제에서 만든 그라데이션을 보여 줍니다. 브러시의 그라데이션 중지점이 강조 표시되었습니다. 결과는 다르지만 이 예제의 그라데이션 중지점은 이전 선형 그라데이션 브러시 예제의 그라데이션 중지점과 같습니다.

방사형 그라데이션의 그라데이션 중지점
Cc189003.JOLT_local_1928132635_wcpsdk_graphicsmm_4gradientstops_rg(ko-kr,VS.95).png

GradientOrigin은 방사형 그라데이션 브러시의 그라데이션 축에 대한 시작점을 지정합니다. 그라데이션 축은 그라데이션 원점에서 그라데이션 원으로 방사합니다. 브러시의 그라데이션 원은 해당 Center, RadiusX 및 RadiusY 속성으로 정의합니다.

다음 그림에서는 다양한 GradientOrigin, Center, RadiusX 및 RadiusY 설정이 지정된 여러 가지 방사형 그라데이션을 보여 줍니다.

RadialGradientBrush 설정
Cc189003.JOLT_local_276338898_wcpsdk_graphicsmm_originscirclesandradii(ko-kr,VS.95).png

그라데이션 중지점은 불투명도 속성을 제공하지 않으므로 ARGB 16진수 표기법이나 ScRGB 표기법으로 색의 알파 채널을 지정하여 투명하거나 부분적으로 투명한 그라데이션 중지점을 만들어야 합니다. 다음 단원에서는 XAML 및 코드에서 부분적으로 투명한 그라데이션 중지점을 만드는 방법에 대해 설명합니다.

XAML에서 색 불투명도 지정

XAML에서 색의 불투명도를 지정하는 한 가지 방법은 ARGB 16진수 표기법을 사용하는 것입니다. ARGB 16진수 표기법에는 다음 구문이 사용됩니다.

#aarrggbb

위 줄에서 aa는 색의 불투명도를 지정하는 데 사용되는 2자리 16진수 값을 나타냅니다. rr, gg 및 bb는 색에서 빨간색, 녹색 및 파란색의 양을 지정하는 2자리 16진수 값을 나타냅니다. 각 16진수 자리에는 0과 9 사이의 값이나 A와 F 사이의 값이 들어갈 수 있습니다. 0이 가장 작은 값이고 F가 가장 큰 값입니다. 알파 값이 00이면 색이 완전히 투명해지고 알파 값이 FF이면 색이 완전히 불투명해집니다. 다음 예제에서는 16진수 ARGB 표기법을 사용하여 두 색을 지정합니다. 첫 번째는 부분적으로 투명(알파 값: x20)하고 두 번째는 완전히 불투명합니다.

XAML
코드 복사
<StackPanel>

  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0">

        <!-- This gradient stop is partially transparent. -->
        <GradientStop Color="#200000FF" Offset="0.0" />

        <!-- This gradient stop is fully opaque. -->
        <GradientStop Color="#FF0000FF" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

이 샘플을 실행합니다.

ImageBrush 클래스를 통해 이미지를 채우기, 배경 및 윤곽선으로 사용할 수 있습니다. ImageBrush는 ImageSource 속성에서 지정한 JPEG 또는 PNG 이미지로 영역을 그립니다. ImageSource 속성을 로드할 이미지의 경로로 설정합니다.

기본적으로 ImageBrush는 그리고 있는 영역을 완전히 채우도록 이미지를 늘이므로 그려지는 영역의 가로 세로 비율이 이미지와 다른 경우 이미지가 왜곡될 수 있습니다. Stretch 속성을 기본값인 Fill에서 None, Uniform 또는 UniformToFill로 변경하여 이 동작을 변경할 수 있습니다.

다음 예제에서는 ImageBrush를 사용하여 Canvas의 Background를 그립니다.

XAML
코드 복사
<Grid x:Name="LayoutRoot">
  <Grid.Background>
    <ImageBrush ImageSource="Forest.jpg" />
  </Grid.Background>
</Grid>

이 샘플을 실행합니다.

VideoBrush 클래스를 사용하여 비디오로 영역을 그릴 수 있습니다. 다음 예제에서는 VideoBrush를 사용하여 TextBlock의 Foreground를 그립니다.

XAML
코드 복사
<Grid x:Name="LayoutRoot" Background="White">

  <MediaElement 
    x:Name="butterflyMediaElement" 
    Source="Butterfly.wmv" IsMuted="True"
    Opacity="0.0" IsHitTestVisible="False" />

  <TextBlock Canvas.Left="5" Canvas.Top="30"  
    FontFamily="Verdana" FontSize="120" 
    FontWeight="Bold" TextWrapping="Wrap"
    Text="Video">

    <!-- Paint the text with video. -->
    <TextBlock.Foreground>
      <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
    </TextBlock.Foreground>
  </TextBlock>

</Grid>

이 샘플을 실행합니다.

VideoBrush 사용에 대한 자세한 내용은 VideoBrush 개요를 참조하십시오.

 

이 글은 스프링노트에서 작성되었습니다.

'Computer §/UX' Related Articles

티스토리툴바