실버라이트2.0에서 ColorPicker만들기

실버라이트2.0 샘플예제로 제공되는 ColorPicker를 분석해보고 따라 해보고자 한다.
샘플예제는 아래 사이트를 방문하면, 받을수 있다.
http://silverlight.net/community/gallerydetail.aspx?cat=6&sort=1
샘플코드를 따라하게 되면 아래와 같은 결과물을 얻을수 있을 것이다.

ColorPicker.xaml 코드에서 위와 같은 구조의 색상 팔레트를 만들수 있다. 간략하게 소스를 살펴 보면,

<Rectangle Canvas.Left="0" Canvas.Top="0" Width="20" Height="180" >
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint ="0,0" EndPoint="0,1">
        <GradientStop Offset="0.00" Color="#ffff0000"/>
        <GradientStop Offset="0.17" Color="#ffffff00"/>
        <GradientStop Offset="0.33" Color="#ff00ff00"/>
        <GradientStop Offset="0.50" Color="#ff00ffff"/>
        <GradientStop Offset="0.66" Color="#ff0000ff"/>
        <GradientStop Offset="0.83" Color="#ffff00ff"/>
        <GradientStop Offset="1.00" Color="#ffff0000"/>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>

좌측의 색상 분포를 만들어 주는 코드이다. 폭 20 높이 180의 색상표를 만들기 위해 그레디언트에 옵셋
을 주어 색상의 분포를 표시해 줄수 있다.

<Canvas x:Name="HueSelector" Height="8" Canvas.Left="0" Canvas.Top="-4">
    <Path Width="5" Height="8" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " />
    <Path Width="5" Height="8" Canvas.Top="8" Canvas.Left="20" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z ">
      <Path.RenderTransform>
        <RotateTransform Angle="180" />
      </Path.RenderTransform>
    </Path>
  </Canvas>
이코드는 좌측 색상 표에서 양쪽에 있는 삼각형 모양의 색상 선택바를 Path 컨트롤에 의하여 그리는
코드이다. Path컨트롤은  선,곡선등이 연속적으로 연결되어 만들어진 도형을 말한다.Path컨트롤을
이용하면 보다 더 다양한 모양을 표현 할 수 있다. 첫번째 Path는 정방향 삼각형 두번째 Path를 통해
반대방향 삼각형 모양을 그릴 수 있게된다.
<Rectangle x:Name="rectHueMonitor" Canvas.Top="0" Canvas.Left="0" Fill="Transparent" Width="20" Height="180" />

  <Canvas Canvas.Top="0" Canvas.Left="20">
    <Rectangle x:Name="rectSample" Width="180" Height="180" Fill="Red"></Rectangle>
    <Rectangle x:Name="rectWhiteGradient" Width="180" Height="180">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" Color="#ffffffff"/>
          <GradientStop Offset="1" Color="#00ffffff"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle x:Name="rectBlackGradient" Width="180" Height="180">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">
          <GradientStop Offset="0" Color="#ff000000"/>
          <GradientStop Offset="1" Color="#00000000"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <Canvas x:Name="SampleSelector" Width="10" Height="10" Canvas.Left="100" Canvas.Top="96">
      <Ellipse Width="10" Height="10" StrokeThickness="3" Stroke="#FFFFFFFF"/>
      <Ellipse Width="10" Height="10" StrokeThickness="1" Stroke="#FF000000"/>
    </Canvas>
    <Rectangle x:Name="rectSampleMonitor" Fill="Transparent" Width="180" Height="180" />
  </Canvas>

  <Canvas Canvas.Top="180" Canvas.Left="0">
    <Rectangle x:Name="SelectedColor" Width="200" Height="20" Fill="Black" />
    <Rectangle Width="60" Height="20" Fill="Black" />
    <TextBlock x:Name="HexValue" Foreground="White" Width="100" Text="#FF0000" FontFamily="Arial" FontSize="11" Canvas.Top="4" Canvas.Left="5"  Height="10" />
  </Canvas>
</Canvas>
나머지 우측에 큰 네모 색상 표 와 동그란 선택 점, 밑에 색상 코드 값과 색을 출력 해주는 코드이다.