06.SilverLight3 - XAML 기본 모양 살펴보기

Silverlight

Godffs 2009. 11. 24. 11:48

XAML이란??
- Extensible Application Markup 뜻으로 실버라이트에 비주얼한 UI를 구성하기 위한 명령어(태그)
- XAML은 XML문법을 따름
- XAML요소는 .NET 개체와 1:1로 매핑

1. 새 프로젝트 추가 - 프로젝트 ( RiaXAML )

RixXAML

[그림 6-1]

새로 추가한 실버라이트 프로젝트 화면입니다.

2. XAML 디자인 코드 작업합니다.

기본 컨트롤 사용하기

[그림 6-2]

기본적으로 제공되는 컨트롤입니다.
여기서 TextBox, Lable, Button 컨트롤 사용합니다.

컨트롤 선택 후 디자인 영역에 드래그앤 드롭을 하면
디자인 영역에 해당 컨트롤이 표시가 되고,
XAML 코드에 자동으로 코드가 추가됩니다.

[그림 6-3]

컨트롤 추가 후 결과 화면입니다.
확인 후에 TextBlock 컨트롤 두개를 삭제 하고
Button, TextBox 컨트롤 만 남겨둡니다.

3. 버튼을 클릭시 텍스트 박스에 시간 날짜 출력하는 예제를 만들어 봅니다.

MainPage.xaml

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="117,112,0,0"

Name="btnOK" VerticalAlignment="Top" Width="75"/>

<TextBox Height="23" HorizontalAlignment="Left" Margin="90,59,0,0" Name="textBox1"

VerticalAlignment="Top" Width="120" />

</Grid>

☞ 디자인 영역에서 버튼(btnOK)을 더블클릭하여 클릭 이벤트를 추가시킵니다.

MainPage.xaml.cs

private void btnOK_Click(object sender, RoutedEventArgs e)

{

textBox1.Width = 300;

textBox1.Height = 100;

textBox1.FontSize = 20;

textBox1.Foreground = new SolidColorBrush(Colors.Red);

textBox1.Text = DateTime.Now.ToShortTimeString();

}

☞ XAML의 모든 요소들은 .NET 명령어로 접근 가능합니다. (WindowApplication 처럼)

결과화면

[그림 6-4]