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

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

<Grid x:Name="LayoutRoot" Background="White">    <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 설ù©ø정¢´      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]

RiaXAML.zip