Primary Journals for HCI
by 짱가 updownme 2009.03.10 14:02
[첫번째 예제 Color_1. 클릭을 할때마다 색이 변하는 상자]

[두번째 예제 color_2. slidBar를 이용한 색상 변환]

[세번째 예제 color_3. 색칠하기 놀이패러디_선택된 부분 색 바꿔주기]

[네번째 예제 color_4. 색이 다른 네모상자 배열하기]

[다섯번째 예제 color_5. HSB형태 색으로 네모상자 배열하기]

[여섯번째 예제 color_6. 무지개 빛깔 네모상자 배열하기]

by 짱가 updownme 2009.01.17 16:37

 

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

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

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

    <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는 색의 알파 값 또는 투명도를 지정합니다. 이 방법을 사용하면 부분적으로 투명한 색을 만들 수 있습니다. 다음 예제에서 RectangleFill은 16진수 표기법을 사용하여 완전히 불투명한 빨간색으로 설정됩니다.

    <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진수 표기법을 사용하여 설명됩니다.

    <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에서는 두 가지 유형의 그라데이션 브러시(LinearGradientBrushRadialGradientBrush)를 제공합니다.

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

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

<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에서 황록색을 지정합니다. 세 번째와 네 번째 그라데이션 중지점 사이의 지점은 점차적으로 파란색에서 황록색으로 변경됩니다.

그라데이션 축

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

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

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

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

<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

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

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

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

<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, RadiusXRadiusY 속성으로 정의합니다.

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

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

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

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

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

<Grid x:Name="LayoutRoot">
  <Grid.Background>
    <ImageBrush ImageSource="Forest.jpg" />
  </Grid.Background>
</Grid>

이 샘플을 실행합니다.

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

<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 개요를 참조하십시오.

 

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

by 짱가 updownme 2009.01.17 16:19

 은광초등학교 1월 14일 수요일 수업 2학기 두번째시간

 

안녕하세요, 은광초등학교 나름 막내?? 짱가입니다.^^

2학기를 맞이하여 처음으로 있는 수업에 간단한 피자 파티?를 하고!

교장선생님과 함께 색깔에대한 silverlight예제를 만들어 보기로 했어요.

 

사실 윗쪽여백은 TopProperty, 옆쪽 여백은 LeftProperty를 지정해줘야한다는 것을 알지만,

Color 는 어떤 값을 지정해야좋을지 알지 못하기 때문에!!

 

silverlight 의 기본적 그래픽요소들에 대해서 알아보도록 하겠습니다.

  첫째로, silverlight 에서 색을 지정할경우에 우리는 Brush 브러쉬를 사용하는데요!

여기서 사용될수있는 Brush의 종류에는 3가지가 있습니다.

1.     SolidColorBrush – 단색으로 채워주는 브러쉬

2.     LinearGradientBrushRadialGradientBrush- (선형, 원형)그라디언트로 채워주는 브러쉬

3.     VideoBrush – 비디오로 채워주는 브러쉬

(이렇게 3개의 브러쉬중에 오늘은 간단한 1SolidBrush를 사용하기로 하였습니다.)

 

두번째로, 색상의 표현 방법으로는

1.     기본적으로 지원하는 Colors 를 이용하여 미리 설정되어있는 색을 사용할수있습니다.

ex)  Colors.Black, Colors.White..

2.     ARGB( alpha, red, green, blue) 값으로 설정해줄수있습니다.

cf) Color.FromArgb(255,255,255,255)

+ RGB컬러가 아닐경우에 silverlight안에서 알고리즘 로직을 구현하여 RGB로 컨버팅 하여 사용하는 방법을 사용하시면 됩니다^^

(오늘 수업에서는 1, 2번 방법과, Ahsb 컬러에서 Argb컬러로 변환해서 사용하는 방법을 사용했습니다.)

 

세번째, 도형의 색상을 설정해줄수있는 속성  

1.     Fill - 도형 안의 색을 채워줄 경우

2.     Stroke – 도형의 테두리 색을 바꿔줄 경우

 

여기까지 색상에대한 기본적인 설정을 알아보았습니다

 (자세한내용은 MSDN에서 참조해주세요^^:;)

 

 

그럼 이제 이 속성들을 변경해가면서 오늘의 예제들을 진행해 보도록 하겠습니다.

 

[첫번째 예제  Color_1. 클릭을 할때마다 색이 변하는 상자]

[두번째 예제  color_2. slidBar를 이용한 색상 변환]

[세번째 예제  color_3. 색칠하기 놀이패러디_선택된 부분 색 바꿔주기]

 

[네번째 예제  color_4. 색이 다른 네모상자 배열하기]

[다섯번째 예제  color_5. HSB형태 색으로 네모상자 배열하기]

[여섯번째 예제  color_6. 무지개 빛깔 네모상자 배열하기]

 

(각 예제들은 연속되어 있으므루 차례 차례 해보시기를 권장합니다^^;;)

 

 

[첫번째 예제  Color_1. 클릭을 할때마다 색이 변하는 상자]

       1.     silverlight application 프로젝트를 하나 만들고, Page.xaml파일에 UserControlLoaded설정과GridCanvas로 변환하여 줍니다.

2.     Blend에서 자신이 원하는 색으로 네모상자를 하나 만들어주고 이름을 myRect라고 붙혀줍니다.

3.     Page.xaml.cs코드에 넘어와서 myRect에 마우스 왼쪽버튼 이벤트를 받아들이는 핸들러를 생성하여줍니다.

4.     생성된 핸들러안에서 myRect의 색을 랜덤한 값으로 변경하여줍니다.

ARGB 색의 각 속성은 0~255의 값을 갖으므로 random 함수를 사용해서 생성시켜주고,

fromArgb은 인자값으로 byte를 받아오기 떄문에 byte형으로 타입을 변환시켜줍니다. 

5.    이제 상자에 마우스왼족버튼클릭하면 색이바꾸게 설정해주시면 됩니다^^

 


(이하 다른 예제들은 주석처리 해놨으므로 실행해보면 다 알수있으실꺼에요^^)
열공하세요^^

 

 

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

by 짱가 updownme 2009.01.17 15:18

이글은 프로젝트로제타 4번째 강의 번역한 글입니다^^( http://channel9.msdn.com/continuum/tutorials/Dragging/)

 

Dragging, Easing & Inertia

 

이제부터 래스터(점방식) 이미지를 갖고 작업하는 더 큰 샘플에 대해서 함께 배워보도록 하겠습니다.

여기 플래쉬 무비가 있습니다. 우리는 이제 실버라이트로 재 편성 할 것입니다.

 

우리는 이 예제를 액션스크립트1.0으로 작 성하였고, 모든 수준의 플래쉬 디자이너들을 위하여 간단하고 가볍게 만들었습니다.

좀더 수준높은 플래쉬 프로그래머들은 로직을 몇몇의 클래스로 캡슐화시키는 선택에대해 의심할 여지가 없을 것입니다.

우리가 실버라이트 예제에서 후에 다시 만들 것처럼말입니다.

 

여기 패널들과 이미지들을 동적으로 올리는 액션스크립트 1.0 코드가 있습니다:

 

 

 

 

첫번째 줄의 변수는 어떤 패널이 현재 드래그 되어질 것인지를 사용하기위한 레퍼런스값을 갖고있을 용도로 생성됩니다.

9번째줄에서는 드래그될 오브젝트가 어디로 가야하는지 결정하게 될 onMouseMove() 핸들러가 스테이지에 더해지게되고, 30 ~ 32번째 줄까지는 각각의 패널에대한 이벤트 핸들러들이 더해지게 됩니다.

 

우리가 drag를 이용한 좀 더 쉬운 행동을 원할 뿐만아니라, 원한다면 그림 타일들을 throw할수 있게 하기 위해서

일반적인 startDrag() 호출을 원하지 않는다는 것에 대해서도 주목해야 할 것입니다.

 

그러므로, 우리는 우리만의 drag와 throw로직을 만들어야 합니다.

 

뒤에 코드에는 핸들에대한 정의 와 우리 script의 마지막부분이있습니다.:

 

코드에서  쉽게 조작할수있는 70~71행에 해당하는 두줄과 알고리즘은 이중에서 가장 유용한 것들중에 하나입니다.

" where you want to be minus where you are times a percentage "

 

이 결과를 현재 당신이 위치한 곳에 더하고 매 프래임마다 이를 반박합니다.

당신은 다음의 몇몇 강의를 통해서 이처럼 속성들의 모든타입을 위한 다양한 폼의 알고리즘들을 볼수 있게 될것입니다. 그리고 이것은 toolbox에서 가장 많이 사용된 알고리즘 중에 하나입니다.

비록 드래그를 위하여 필요한것은 아니지만, 76~79행은 만약 사용자들이 그것을 단순한 drag 하기보단 throw하기로 결정했다면 패널을 움직이는데 있어서 속력과 마찰을 더해줍니다.

Although not necessary for drag, Lines 76 through 79 add velocity and friction to keep the panel moving if the user decides to throw it instead of simply dragging it.

 

Rebuilding the Project in Silverlight 실버라이트로 프로젝트를 다시 만들어 봅시다

우리가 Silverlight project를 만들고, Page.xaml에있는 LayoutRoot 태그를 Canvas로 바꾸고난 후에, 원하는 배경을 디자인하고, User Control 태그를 위해서 Loaded handler를 더합니다.

 

 이러한 프로젝트를 위하여, 우리는 또한 새로운 User Control를 Panel.xaml이라 불리는 solution에 더하고 그것에대한 수정도 합니다.

 

여기 우리가 작업을 다하고 나서 볼것과 유사한 두개의 XAML파일이 있습니다.:

 

 

 

작성하는데 있어서 가장 중요한것은 우리가 Image태그를 Panel.xaml의 8번째 줄에 image라는 이름으로 삽입 했다는 것입니다.

 

우리는 이미 이 프로젝트에 사용하게 될 사진들의 사이즈를 알고있기 때문에, 왼쪽 위에있는 registration point of this User Control주위로 이지미 홀더의 중심을 위치시킬수 있습니다.

 

Page.xaml.cs는 각 Panel.xaml의 user control를 동적으로 로딩 관리할 뿐만아니라, 드래깅을 위한 그들이 마우스를 누르거나 놓는 행위를 관리(hook up)할수 있습니다.

 

여기있는 파일이 Page.xaml.cs 라는 code behind file 입니다 :

 

각각의 Panel.xaml은 그것 자신의 image태그를 가지고 있기 떄문에, 각 User Control이 그것 자산의 그래픽을 다룰 수 있게 됩니다.

Panel.xaml은 또한 드래깅하는동안 Page.xamltargetX 과 targetY값을통해서 그것을 쉽게 다룰수 있는 그것 자신만의 스토리보드 객체를 가지게 됩니다.

또한 우리가 이미지들을 다루기 때문에, 12행에서  using 참조를 사용해서 System.Windows.Media.Imaging 를 더해줄 필요가 있습니다.

아래는 다 하고 난 뒤의  Panel.xaml.cs 의 모습입니다:

 실제적인 이미지를 불러와 다루는 코드는 53행의 코드입니다.

이것이 실행되기 위해서는, (orchid0.png through orchid5.png) 이미지들이 실버라이트 프로젝트에 default로 더해야하고, 속성창의 Build Action 속성을 Resource로 맞춰줘야합니다.(아래그림)

이것은 그림들을 Lesson04_a.xap로 복사해오게 된다, 그래서 만약 ClientBin에서 그것들을 찾기 원한다면 그것들을 찾을수 었을것입니다.

그러나, 당신은 여전히 그것들을 상대적인 url로 이름을통해서 53행에 보여지는 것처럼 참조할수있습니다.

 

 

그리고, 마지막으로 여기 우리가 실버라잇으로 다시만든 것이 있습니다 :

 

 

 

이번 강의에서는, 실버라이트 프로젝트가 이미지를 동적으로 불러들였지만, 이미지들은 이미 XAP파일안에 있었습니다.

하지만, 만약 우리가 다른 URL로부터 이미지를 얻어오기를 원한다면?  우리는 이것을 다음시간에 배울것입니다.

 

 

 

 

by 짱가 updownme 2009.01.13 17:59

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

| 1 |