기술문서 [21기 김종현] Silverlight 응용 프로그램 만들기

[21기 김종현]

  

Silverlight 프로젝트 만들기
▶ 첫 단계에서는 Silverlight 프로젝트를 만듭니다.
1. 임의의 이름으로 새 Silverlight 응용 프로그램 프로젝트를 만듭니다. 2. 새 웹 사이트에서 Silverlight 응용 프로그램 호스팅 확인란의 선택을 취소합니다. 3. 솔루션 탐색기를 열고 App.xaml 및 MainPage.xaml 파일이 있는지 확인합니다. 4. App.xaml에는 전체 응용 프로그램에 적용되는 리소스와 코드를 지정하고, MainPage.xaml에는 웹 사이트의 페이지와 유사한 페이지를 정의할 수 있습니다. 5. 솔루션 탐색기에서 MainPage.xaml 노드를 확장합니다. 6. MainPage.xaml.cs는 관리 코드를 작성하는 코드 숨김 파일입니다. 이 모델은 ASP.NET에 사용되는 모델과 유사합니다. 7. MainPage.xaml이 열려 있지 않으면 솔루션 탐색기에서 해당 파일을 두 번 클릭합니다. 8. Visual Studio의 중앙에는 흰색 사각형 영역을 디자인 뷰라고 합니다. 9. 도구 상자에서 컨트롤을 끌어 놓고 요소를 배치하여 레이아웃을 만들 수 있습니다. 10. XAML 뷰에서는 XAML코드를 추가하여 레이아웃과 디자인을 만들 수 있습니다. 11. XAML 뷰를 변경하면 디자인 뷰가 자동으로 업데이트되고, 작업할 수 있도록 IntelliSense가 표시되고 오류를 나타내는 물결선이 나타납니다.
MSDN에서 제공하는 화면	실제 기본적인 작업이 이뤄진 사진

표 레이아웃 정의
▶ 기본적으로 Silverlight에는 Grid가 포함됩니다. Gid를 사용하면 HTML 표와 유사한 표 형식 레이아웃을 만들 수 있습니다.
1. XAML 뷰에서 Grid 요소를 찾습니다. 2. Grid 시작 태그에서 Backgroud 색을 변경합니다. 3. 입력 작업 시 선택할 색 목록이 있는 IntelliSense 창이 표시됩니다. 4. Grid 시작 태그에서 다음 XAML과 같이 ShowGuideLines 속성을 추가하고 True로 설정합니다.      5. 이 속성은 Grid의 행과 열을 식별하기 위해 선을 추가하는 것인데 유용한 디버깅 기능입니다.
<Grid x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">         <Grid.RowDefinitions>             <RowDefinition Height="40"/>             <RowDefinition Height="220"/>             <RowDefinition Height="40"/>         </Grid.RowDefinitions>         <Grid.ColumnDefinitions>             <ColumnDefinition Width="75"/>             <ColumnDefinition Width="325"/>         </Grid.ColumnDefinitions>                </Grid>
	XAML에 위의 코드를 추가한 후에 실행하면 왼쪽과 같은 화면을 확인 할 수 있습니다. ShowGridLines에 True값을 줬기 때문에 눈으로 Row와 Column의 상 태를 확인 할 수 있습니다.

컨트롤 추가

▶ Silverlight에는 데이터를 표시하고 사용자 입력을 가져올 수 있는 여러 가지 컨트롤 목록이 있습니다. 아래에는TextBlock, TextBox, StackPanel, Calendar 및 Button 컨트롤을 Grid 레이아웃에 추가하는 방법에 대해 설명하겠습니다.

<TextBlock Text="Name:" Grid.Row="0" Grid.Column="0"></TextBlock>

<TextBlock Text="Date:" Grid.Row="1" Grid.Column="0"></TextBlock>

<TextBlock Text="Message:" Grid.Row="2" Grid.Column="0"></TextBlock>

<TextBox Text="Your Name" Width="150" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1"></TextBox>  <StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical">

<sdk:Calendar SelectionMode="SingleDate" HorizontalAlignment="Left"></sdk:Calendar>

<Button Width="75" Height="25" HorizontalAlignment="Left" Content="OK">

</Button>

</StackPanel>

Textblock, Textbox, StackPanel, Button 등을 사용해서 이름, 크기, 위치를 정한 뒤에 실행시킨 화면입니

다. 아무런 기능도 없이 단순히 디자인만 완성한 화면입니다. 다음에는 코드를 추가해 보도록 하겠습니다.

코드 추가

▶ 코드 숨김 파일에서는 XAML로 정의된 요소에 논리를 추가할 수 있습니다. 컨트롤 및 기타 요소에 프로그래밍 방식으로 액세스하려면 요소에 이름을 지정해야 합니다. XAML의 요소에 이름을 지정하고 이벤트 처리기를 추가하며 코드 숨김 파일에 논리를 추가하는 방법입니다.

TextBox, TextBlock, Button 등에 이름 속성을 추가합니다. x:Name 특성은 요소를 고유하게 식별하게 합니다. 실수 없이 제대로 추가합니다. 그리고 Click을 입력하고 Tab 키를 누르면 새 이벤트 처리기를 추가할 수 있습니다. 그 다음에 추가된 이벤트 이름에서 마우스 오른쪽 버튼을 클릭하면 이벤트 처리기 탐색이 있는 것을 확인 할 수 있습니다. 그것을 클릭해서 코드를 추가할 부분으로 이동합니다. 그리고 아래의 코드를 추가합니다. 그러면 그림과 같은 결과창을 확인 할 수 있습니다.

private void okButton_Click(object sender, RoutedEventArgs e)

{

string dateString;

if (cal1.SelectedDate == null)

{

dateString =  "date not selected";

}

else

{

dateString = cal1.SelectedDate.ToString();

}

message1.Text = "Hi " + name1.Text + "\n" + "Selected Date: " + dateString;

}

동적 레이아웃 만들기

▶ 지금까지 만들어 본 예제들은 레이아웃은 고정되어 있습니다. 크기를 줄이면 작아진 만큼 잘 보이지 않은 현상이 발생했습니다. Silverlight에서는 이와 같은 현상을 방지하기 위해서 동적 레이아웃을 만들 수 있는 다양한 옵션을 제공합니다.

TextBox, TextBlock,Button에 Margin과 각 Row와 Column에 사이즈를 Auto로 추가합니다. Fontsize를 바꿔주고 동적 레이아웃을 설정했기 때문에 Windows 창 사이즈에 상관없이 한 눈에 확인 할 수 있는 것을 알 수 있습니다.

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*" MinHeight="220"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>