라는 에러창이 떠나 깜짝 놀라 보신적이 있나요?

실버라이트가 디버깅이 안된다... (그냥 구글링을 하면 될것을...)
 
저는 '스스로 어른'이므로 혼자 프로젝트 속성에서 실버라이트, 디버그, 빌드 등에서 잘못된것은 아닌지 혼자

쪼물딱거리고 좌절하기를 장장 5분... (50분 절대 아닙니다.)


그냥 구글링했습니다. (정신 건강을 위해서 구글링 강추~)

다 필요없구요. 해결책(?)은 아래와 같습니다.

1. Microsoft® Silverlight™ 3 Tools for Visual Studio 2008 SP1 (이것일 확률 99.1 %)
2. 브라우저가 IE(되도록이면 8이상 버전 추천, 32bit)여야 한다고 합니다. (확률 0.9%)

또는 3. Microsoft® Silverlight™ 3 SDK 도 한번 다시 깔아보세요.

1번이나 3번을 구하는 방법은 다들 아시겠지만...

http://www.microsoft.com/downloads/en/results.aspx?freetext=silverlight+3&displaylang=en&stype=s_basic

뭐 이런걸 검색하셔서요.
 
Silverlight 3 Tools 나 Microsoft® Silverlight™ 3 Software Development Kit 를 다운 받으시면 됩니다.


===========================
"사장님! 사족 하나 추가요~!!"
===========================

http://silverlight.codeplex.com/releases/view/36060 

여기서 구할수 있는 Silverlight 3 Toolkit 과 위에서 말하는 Silverlight 3 Tools 은 다른거예요.

 Silverlight 3 Toolkit : 코드플렉스에 공개되어 있는 '님 좀 짱'인 컨트롤들.
 Silverlight 3 Tools : Visual Studio에서 Silverlight를 개발할 수 있게 하는 툴.

다들 이런건 아시잖아요. 이런것도 모르면 개발자가 아니잖아요. 피씨방 알바지. ^^;;;

실버라이트에서 미디어를 재생하는데 가장 많인 쓰이는 컨트롤로 MediaElement 가 있습니다.

MediaElement의 기본 속성으로 AutoPlay가 있어서 Source부분에 경로를 선언해주거나 바인딩해주면 1회 재생에는

문제가 없이 깔끔하게 동작을 합니다.


문제는 고객들의 요구사항이 1회만으로 만족을 못 하고 반복재생을 요구할 때도 있다는 것입니다.

그래서 "StoryBoard처럼 RepeatBehavior 를 new RepeatBehavior(횟수); 하면 되겠구나. 룰루랄라~!!!"

뜨억!!! 없습니다. 


아니! 왜? '미디어엘리먼트'는 반복재생이 안되는거냐구.

그냥 수고스러우시겠지만 Xaml단에서 미디어 엘린먼트를 선언해 주시고 아래의 코드를 작성하시면 무한도전(?)

아니 무한재생 모드에 들어갑니다. 


그래서 쪼금 업그레이드를 해 봤습니다.

MediaRepeat이 재생을 원하는 횟수겠구요. (지금 '3'으로 표시된곳에 함수를 선언하시면 동적으로 되겠죵?)


다들 아시겠지만 사족을 좀 달자면.....

MediaElement.MediaEnded 는 단순히 미디어가 재생완료된 시점 (10초짜리 미디어이면 10초인 부분)
MediaElement.Stop(); 은 미디어를 종료시킴과 동시에 미디어 처음으로 돌립니다. (0초인 부분)
MediaElement.Position 은 위에서 10초인 부분과 0초인 부분 같이 현재 미디어의 재생 포커스 위치입니다.
그걸 다시 TimeSpan을 써서 '0'으로 이동시킨 것이구요,

따라서. this.MediaElement.Stop() 또는 MediaElement.Position = TimeSpan.FromSeconds(0); 둘 중
하나만 쓰셔도 동작하는데 전혀 문제는 없습니다.

감사합니다.

Grid는 Silverlight에서 제공하는 가장 유연하고 강력한 컨테이너 개체입니다. Grid는 열과 행으로 구성된 유연한 표 영역을 정의합니다. 각각 ColumnDefinition 및 RowDefinition을 사용하여 Grid의 열과 행을 정의합니다. 기본적으로 표의 자식은 첫 번째 행과 첫 번째 열에 배치됩니다. Grid..::.Column 및 Grid..::.Row 연결 속성을 설정하여 Grid의 특정 셀에 개체를 배치할 수 있습니다. 다음 예제에서는 Grid를 사용하여 Grid 내에 TextBlock 개체 몇 개, Button 및 Rectangle 개체 각각 한 개를 배치하는 방법을 보여 줍니다. 

<Grid Background="#DCDCDC"

ShowGridLines="True">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="*" />

        <ColumnDefinition Width="*" />

        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

        <RowDefinition Height="*" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <TextBlock Margin="2" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"

           TextWrapping="Wrap">

    This TextBlock is positioned in the first column and the

    first row (column 0, row 0) and spans across all three columns (ColumnSpan 3).

    </TextBlock>

    <TextBlock Grid.Column="0" Grid.Row="1" Margin="5" FontWeight="Bold">Rectangle:</TextBlock>

    <Rectangle Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Left" Fill="Red"

           Width="200" Height="50"/>

    <Button Grid.Column="0" Grid.Row="2" Content="Stretched Button" />

    <Border Background="White" BorderThickness="5" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" >

    <TextBlock TextWrapping="Wrap">

        This TextBlock spans across two rows.

    </TextBlock>

    </Border>

    <TextBlock Margin="5" Grid.Row="3" Grid.Column="0">1st Column, 4th Row</TextBlock>

    <TextBlock Margin="5" Grid.Row="3" Grid.Column="2">3rd Column, 4th Row</TextBlock>

</Grid>

다음 그림에서는 이 코드가 렌더링되는 방식을 보여 줍니다. 여기서는 Grid의 선이 표시되도록 Grid의 ShowGridLines 속성이 true로 설정되었습니다. ShowGridLines는 Grid 셀 위치를 시각화하는 데 유용하지만, 모눈선은 스타일을 지정하거나 사용자 지정할 수 없으므로 레이아웃 디자인을 마친 후에는 일반적으로 모눈선이 제거됩니다.

앞의 예제에서는 Star 크기 조정을 사용하여 공간을 비례적으로 배분합니다. 기본적으로 Star는 행이나 열의 높이 또는 너비이므로 사용 가능한 공간의 가중 비율이 해당 열이나 행에 할당됩니다. 이 예제에서는 각각 단일 별표 크기를 사용하는 세 개의 열이 있으므로 표에 사용할 수 있는 너비의 1/3이 각 열에 할당됩니다.

참고:
Star 크기 조정이 제대로 작동하려면 모눈의 크기를 제한해야 합니다. Height 및 Width 속성을 명시적으로 설정하거나 Grid에서 HorizontalAlignment 및 VerticalAlignment 값을 Stretch 로 설정하여 모눈 크기를 제한할 수 있습니다.
 

행과 열은 Auto 크기 조정을 사용할 수도 있습니다. 이 경우 열이나 행에 들어 있는 내용의 크기에 따라 공간이 균등하게 배분됩니다. 행과 열은 해당 행 또는 열의 모든 셀에 들어 있는 내용 중 가장 긴 내용을 수용할 수 있는 최소한의 공간만 차지합니다. Grid에 공간이 부족하여 모든 내용을 포함할 수 없는 경우 오른쪽 아래에서 시작하여 내용이 잘립니다. 이 예제에서 첫 번째 행과 마지막 행은 Auto 크기 조정을 사용하며 텍스트를 포함하도록 크기가 조정됩니다.

Star 크기 조정과 HorizontalAlignment 및 VerticalAlignment 값 Stretch와 함께 사용하면 화면 공간 비율을 기준으로 레이아웃 공간을 분할할 수 있습니다. Grid는 이러한 방식으로 공간을 배분할 수 있는 유일한 레이아웃 패널입니다. 이러한 속성에 대한 자세한 내용은 이 항목의 뒷부분에 있는 여백 및 맞춤 속성을 참조하십시오. 

StackPanel은 가로 또는 세로 방향으로 추가되는 컨트롤 들을 순서대로 정렬하는 레이아웃 패널입니다.

아래의 예제에서는 StackPanel의 구조와 설정 방법을 보여 줍니다.

<!-- StackPanel 기본 구조 -->
<StackPanel Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>  

다음 그림에서는 이 코드가 렌더링되는 방식을 보여 줍니다.

다음 예제와 같이 Orientation 속성을 Horizontal로 설정하여 StackPanel에 가로 항목 목록을 만들 수도 있습니다. 

<!-- StackPanel 가로 정렬 -->
<StackPanel Orientation="Horizontal" Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>

다음 그림에서는 이 코드가 렌더링되는 방식을 보여 줍니다. 

Canvas는 미술 시간이나유행가 가사에 나오는 그 캔버스와 같습니다. 차이가 있다면 미술에서는 캔버스라는 종이위에 그림을 그림을 그리지만 실버라이트에서는 캔버스라는 레이아웃 패널 위에 컨트롤을 배치한다는 점이 다르다고 할 수 있습니다.

이처럼 캔버스는 StackPanel이나 Grid와는 다르게 순서나 선언되어 있는 특정 위치가 아닌 페널 위의 임의의 장소에 배치 할 수 있고,

배치를 하는 방법은 캔버스 레이아웃의 좌측 상단의 점을 기준으로 컨트롤의 좌측 상단 꼭지점의 위치를 지정하면 됩니다.

 

다음 예제에서는 Canvas 왼쪽에서 30픽셀, 위쪽에서 30픽셀 떨어진 위치에 사각형을 배치하는 방법을 보여 줍니다.

1. 1:   <Canvas Width="640" Height="480" Background="White">
   2:      <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200" />
   3:   </Canvas>  

소스 설명

1 라인 : Canvas를 선언하고 시작합니다. | Width="640" Height="480" : 캔버스의 가로와 세로 크기를 지정합니다. | Background="White" : 배경색을 "White"로 지정합니다.
2 라인 : 캔버스의 연결속성을 가지는 사각형을 하나 선언합니다.
3 라인 : Canvas를 종료합니다

 Canvas 내에 사각형 배치

 참고:
HTML 페이지에 포함된 Silverlight 기반 응용 프로그램에서 Silverlight 플러그 인을 호스팅하는 HTML 요소는 특정 너비와 높이를 갖는 경우가 많습니다. 이로 인해 개체가 보기에서 벗어난 위치에 배치될 수 있습니다. 예를 들어, 호스트 HTML 요소의 너비가 300픽셀인데 Silverlight 기반 응용 프로그램에서 400픽셀 오른쪽에 개체를 배치하면 사용자가 해당 개체를 볼 수 없습니다.
 테두리 사용
앞의 예제에서 중첩된 Canvas를 사용하면 파랑 사각형 테두리가 있는 빨강 사각형의 효과가 만들어집니다. 이 작업을 수행하는 보다 간단하고 강력한 방법은 Border 개체를 사용하는 것입니다. 다음 예제에서는 일부 텍스트 주위에 Border를 만드는 방법을 보여 줍니다.
XAML   코드 복사
<Border Background="Coral" Width="300" Padding="10" CornerRadius="20">
    <TextBlock FontSize="16">Text Surrounded by a Border</TextBlock>
</Border>

다음 그림에서는 이 코드가 렌더링되는 방식을 보여 줍니다.
 
Width, Height, BorderThickness 및 Background 색을 설정하여 Border의 기본 속성을 지정할 수 있습니다. 또한 CornerRadius 속성을 설정하여 테두리 모퉁이를 둥글게 할 수 있으며, Padding 속성을 설정하여 Border 내에 개체를 배치할 수 있습니다.
 참고:
Border는 한 개의 직계 자식 개체만 가질 수 있습니다. 따라서 예를 들어, Border 내에 개체를 여러 개 배치하려는 경우 Border 내에 컨테이너 개체(예: Canvas 또는 StackPanel)를 배치한 다음 컨테이너 개체 내에 개체를 여러 개 배치해야 합니다.

안녕하세요. 깜디입니다.

WPF 레이아웃에 이어서 실버라이트 레이아웃에 대해서 설명해 드리겠습니다.

실버라이트로 멋진 컨트롤과 화려한 애니메이션을 기획한 여러분들은 실버라이트 프로젝트를 이제 시작하실 수 있습니다.
(설계도가 나왔으니 이제 집을 짓는 일만 남았는데요.)

아무리 화려한 건물을 설계하였더라도 허공에서부터 시작하여 건물을 지을수는 없습니다.

그것처럼 실버라이트 프로젝트도 그냥 여기저기 손으로 콕 찍어서 컨트롤을 배치할 수는 없는데요.

웹브라우저에서 보여질 실버라이트 공간(?)을 지정하셔야 그 공간안에서 여러분의 생각을 마음껏 표현하실 수 있는데 그 부분을 지정하는 것이 레이아웃 패널입니다.

그럼 이제 레이아웃이 무엇이고 무슨일을 하는지는 대해서는 알아보셨으니 실버라이트가 지원하는 레이아웃 패널에 대해서 알아 보겠습니다.

실버라이트 레이아웃 패널은 크게 3가지 기본 컨트롤과 사용자가 직접 편집해서 사용할 수 있는 커스텀 컨트롤로 구분 할 수 있습니다.

우선 그럼 먼저 실버라이트에서 기본 제공하는 레이아웃 패넝에 대해서 알아 보겠습니다.

Canvas : 컨트롤의 위치를 직접 지정하여 배치할 수 있는 레이아웃 컨트롤
StackPanel : 수직 또는 수평으로 순서대로 나열하는 간단한 레이아웃 컨트롤
Grid : HTML의 Table태그와 같은 표 형태의 레이아웃을 제공하는 컨트롤로 가장 강력하고 기본이 레이아웃 컨트롤입니다.

패널 이름	설명
Canvas	Canvas 영역에 상대적인 좌표를 사용하여 자식 요소를 명시적으로 배치할 수 있는 영역을 정의합니다.
Grid	열과 행으로 구성되는 유연한 표 영역을 정의합니다. Visual Studio 프로젝트 템플릿은 Grid를 기본 레이아웃 루트로 사용합니다.
StackPanel	가로 또는 세로 방향으로 지정할 수 있는 한 줄에 자식 요소를 정렬합니다.

 뒤에서 설명드리겠지만 위에 각 레이아웃 패널들은 서로의 안에 자식 컨트롤의 형태로 사용이 가능합니다.

 그럼 각 레이아웃 컨트롤들의 특징과 사용법에 대해서 알아보도록 하겠습니다.

MIX 08에서 실버라이트 2.0이 그 얼굴을 나타냈습니다.

http://www.microsoft.com/events/executives/webcasts.mspx

새벽 밤을 세우면서 Keynote를 본 뿌듯함이 느껴집니다. ㅎㅎ

Silverlight 2.0 Beta 1 Is Available For Download