1. XAML의 정의
- XAML(Extensible Application Markup Language)은 선언적 언어로 XAML태그를 이용하여 시각적인 사용자 인터페이스 요소를
만들 수 있습니다. 별도의 코드숨김 파일을 가지고 있어서 이벤트를 처리하거나 선언된 개체들을 조작할 수 있죠.
여기서는 실버라이트에서 쓰이는 XAML을 기본으로 진행 하겠습니다.
- 실버라이트 프로젝트 생성시 초기 XAML코드
- XAML은 XML에 기반을 두고 있으며, 대/소문자를 구분합니다.
2. 개체 선언
- 여는 태그와 닫는 태그를 이용한 선언
<objectName> </objectName>
예제
위처럼 개체 요소 구문을 사용하여 선언하며, 일부 개체는 다른 개체를 포함시킬 수도 있습니다.
그리고 편의상 개체가 다른 개체를 포함하지 않을 경우에 <Rectangle /> 처럼 자체적으로 닫는 태그를 바로 사용할 수 있습니다.
3. 개체 속성
- 특성 구문을 사용
<objectName propertyName="propertyValue" .../>
예제
- 속성 구문을 사용
<object>
<object.Property>
PropertyValueAsObjectElement
</object.Property>
</object>
예제
- 컨텐츠 요소 구문을 사용
일부 실버라이트 개체는 속성 이름을 생략하고 단순히 소유하는 형식의 개체 요소 태그내에 값을 제공하여 속성을 설정 할 수 있습니다.
예제
* 위의 경우 Text속성을 명시적으로 지정하지 않고 TextBlock의 Text속성을 설정하였다.
- 컬렉션 구문을 사용
예제
컬렉션 구문과 콘텐츠 구문의 조합은 패널과 같은 컨트롤 합성에 광범위하게 사용되는 클래스에서 흔히 볼 수 있습니다.
다음 예제는 특성 구문을 사용하여 Rectangle의 채우기를 설정합니다. Fill속성은 SolidColorBrush를 사용하여 속성을 설정하는데
특성구문을 사용할 수 있도록 합니다.
예제
*Brush형식 변환기때문에 SolidColorBrush는 리소스 참조나 바인딩을 사용하지 않고 새 Fill 값을 만드는 데 속성 요수 구문이나
특성 구문중 하나를 선택할 수 있습니다. 아래 예제처럼 다른 Brush형식의 경우에는 Fill에 대한 속성 요소 구문을 사용하고
ImageBrush를 개체 요소로 선언하여 속성값을 제공하거나, 태그확장을 사용해야 합니다.
4. 태그 확장
중괄호 ( { 와 } )는 태그확장 사용을 의미하며 실버라이트 XAML 구현에서 주로 사용되는 개념입니다.
형식에 변환기가 없고 참조 형식 값을 사용하는 속성에는 항상 새 인스턴스를 만드는 속성 요소 구문 또는 태그 확장을 통한
개체 참조가 필요합니다.(실버라이트 태그확장은 기존 인스턴스를 반환)
- Binding : 데이터 바인딩 제공
- StaticResource : 정의된 리소스 참조하며 모든 XAML 속성 특성에 대한 값 제공
- ResourceDictionary : 실버라이트 기반 응용프로그램의 구성요소에 사용되는 키가 지정된 리소스 사전 제공
- TemplateBinding : XAML에서 템플릿 개체의 코드 속성과 상호 작용할 수 있는 컨트롤 템플릿 제공
예제
5. 이벤트
XAML은 개체 및 개체 속성을 선언하는 것 이외에도 개체에 이벤트 처리기를 연결하는 구문도 제공합니다.
특성이름은 이벤트 이름을 지정하고, 특성값으로는 코드에서 정의하는 이벤트 처리기 함수의 이름을 지정합니다.
XAML 루트 요소에 x:Class 특성이 있을 경우 페이지에 관리되는 API를 사용하는 것이고 없으면 JavaScript API를 사용하게 됩니다.
페이지에서 관리되는 API의 경우 코드 숨김 파일에 이벤트 처리기 함수가 작성되어 있어야 합니다.
예제
Page.xaml
Page.xaml.cs
* 코드숨김 파일은 XAML파일이 컴파일될때 네임스페이스와 클래스를 XAML페이지 루트 요소의 x:Class 특성으로 지정하여 식별합니다.
6. XAML 루트 요소 및 xmlns
XAML 파일에는 하나의 루트 요소만 있어야 합니다.
루트 요소에는 특성 xmlns 및 xmlns:x 도 포함이 됩니다. 이러한 특성은 태그가 참조하는 요소의 정의가 포함된 XML 네임스페이스를 XAML 프로세스에 알려줍니다.
기본 XML 네임스페이스는 거의 항상 실버라이트 클라이언트 네임스페이스(http://schemas.microsoft.com/client/2007)에 매핑이 됩니다. 아래와 같이 표기합니다.
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x 특성은 추가적인 XML 네임스페이스를 나타내며 이 맵핑에 있는 파일의 태그에서 참조될때 구성 요소 앞에는 x:가 접두사로 붙습니다. 이 x: 접두사는 실버라이트 기반 프로젝트용 템플릿, 예제 및 설명서 전체에서 XAML 네임스페이스를 매핑 하는데 사용됩니다.아래와 같이 표기합니다.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
다음은 가장 많이 사용하게 될 x: 접두사/XAML 네임스페이스 프로그래밍 구문입니다.
- x:Key : ResourceDictionary 의 각 리소스에 대한 고유키 설정
- x:Class : XAML 페이지에 대한 코드 숨김을 제공하는 클래스에 대한 CLR 네임스페이스 및 클래스 이름을 지정
- x:Name : XAML에 정의된 개체 요소가 처리된 후 런타임 코드에 있는 인스턴스에 대한 런타임 개체 이름 지정
만들 수 있습니다. 별도의 코드숨김 파일을 가지고 있어서 이벤트를 처리하거나 선언된 개체들을 조작할 수 있죠.
여기서는 실버라이트에서 쓰이는 XAML을 기본으로 진행 하겠습니다.
- 실버라이트 프로젝트 생성시 초기 XAML코드
<UserControl x:Class="SilverlightApplication3.Page" </Grid> |
- XAML은 XML에 기반을 두고 있으며, 대/소문자를 구분합니다.
2. 개체 선언
- 여는 태그와 닫는 태그를 이용한 선언
<objectName> </objectName>
예제
<Canvas> <Rectangle /> </Canvas> |
그리고 편의상 개체가 다른 개체를 포함하지 않을 경우에 <Rectangle /> 처럼 자체적으로 닫는 태그를 바로 사용할 수 있습니다.
3. 개체 속성
- 특성 구문을 사용
<objectName propertyName="propertyValue" .../>
예제
<Rectangle Width="100" Height="100" Fill="Blue" /> |
- 속성 구문을 사용
<object>
<object.Property>
PropertyValueAsObjectElement
</object.Property>
</object>
예제
<Rectangle Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> </Rectangle> |
- 컨텐츠 요소 구문을 사용
일부 실버라이트 개체는 속성 이름을 생략하고 단순히 소유하는 형식의 개체 요소 태그내에 값을 제공하여 속성을 설정 할 수 있습니다.
예제
<TextBlock> Hello! </TextBlock> |
- 컬렉션 구문을 사용
예제
<StackPanel> <!-- 수직 그라디언트로 칠해진 사각형 --> <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> |
|
컬렉션 구문과 콘텐츠 구문의 조합은 패널과 같은 컨트롤 합성에 광범위하게 사용되는 클래스에서 흔히 볼 수 있습니다.
다음 예제는 특성 구문을 사용하여 Rectangle의 채우기를 설정합니다. Fill속성은 SolidColorBrush를 사용하여 속성을 설정하는데
특성구문을 사용할 수 있도록 합니다.
예제
<Rectangle Width="100" Height="100" Fill="Blue" /> |
<Rectangle Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> </Rectangle> |
*Brush형식 변환기때문에 SolidColorBrush는 리소스 참조나 바인딩을 사용하지 않고 새 Fill 값을 만드는 데 속성 요수 구문이나
특성 구문중 하나를 선택할 수 있습니다. 아래 예제처럼 다른 Brush형식의 경우에는 Fill에 대한 속성 요소 구문을 사용하고
ImageBrush를 개체 요소로 선언하여 속성값을 제공하거나, 태그확장을 사용해야 합니다.
<Rectangle Width="100" Height="100"> <Rectangle.Fill> <ImageBrush ImageSource="forest.jpg"/> </Rectangle.Fill> </Rectangle> |
4. 태그 확장
중괄호 ( { 와 } )는 태그확장 사용을 의미하며 실버라이트 XAML 구현에서 주로 사용되는 개념입니다.
형식에 변환기가 없고 참조 형식 값을 사용하는 속성에는 항상 새 인스턴스를 만드는 속성 요소 구문 또는 태그 확장을 통한
개체 참조가 필요합니다.(실버라이트 태그확장은 기존 인스턴스를 반환)
- Binding : 데이터 바인딩 제공
- StaticResource : 정의된 리소스 참조하며 모든 XAML 속성 특성에 대한 값 제공
- ResourceDictionary : 실버라이트 기반 응용프로그램의 구성요소에 사용되는 키가 지정된 리소스 사전 제공
- TemplateBinding : XAML에서 템플릿 개체의 코드 속성과 상호 작용할 수 있는 컨트롤 템플릿 제공
예제
<Canvas.Resources> <Style TargetType="Border" x:Key="PageBackground"> <Setter Property="BorderBrush" Value="Blue"/> <Setter Property="BorderThickness" Value="5"/> </Style> </Canvas.Resources> ... <Border Style="{StaticResource PageBackground}"> ... </Border> |
5. 이벤트
특성이름은 이벤트 이름을 지정하고, 특성값으로는 코드에서 정의하는 이벤트 처리기 함수의 이름을 지정합니다.
XAML 루트 요소에 x:Class 특성이 있을 경우 페이지에 관리되는 API를 사용하는 것이고 없으면 JavaScript API를 사용하게 됩니다.
페이지에서 관리되는 API의 경우 코드 숨김 파일에 이벤트 처리기 함수가 작성되어 있어야 합니다.
예제
Page.xaml
<StackPanel x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="Text1" Text="버튼을 클릭하세요." /> <Button Content="클릭" Width="100" Height="50" Click="Button_Click"/> </StackPanel> |
private void Button_Click(object sender, RoutedEventArgs e) { Text1.Text = "버튼이 클릭되었습니다."; } |
* 코드숨김 파일은 XAML파일이 컴파일될때 네임스페이스와 클래스를 XAML페이지 루트 요소의 x:Class 특성으로 지정하여 식별합니다.
6. XAML 루트 요소 및 xmlns
루트 요소에는 특성 xmlns 및 xmlns:x 도 포함이 됩니다. 이러한 특성은 태그가 참조하는 요소의 정의가 포함된 XML 네임스페이스를 XAML 프로세스에 알려줍니다.
기본 XML 네임스페이스는 거의 항상 실버라이트 클라이언트 네임스페이스(http://schemas.microsoft.com/client/2007)에 매핑이 됩니다. 아래와 같이 표기합니다.
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x 특성은 추가적인 XML 네임스페이스를 나타내며 이 맵핑에 있는 파일의 태그에서 참조될때 구성 요소 앞에는 x:가 접두사로 붙습니다. 이 x: 접두사는 실버라이트 기반 프로젝트용 템플릿, 예제 및 설명서 전체에서 XAML 네임스페이스를 매핑 하는데 사용됩니다.아래와 같이 표기합니다.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
다음은 가장 많이 사용하게 될 x: 접두사/XAML 네임스페이스 프로그래밍 구문입니다.
- x:Key : ResourceDictionary 의 각 리소스에 대한 고유키 설정
- x:Class : XAML 페이지에 대한 코드 숨김을 제공하는 클래스에 대한 CLR 네임스페이스 및 클래스 이름을 지정
- x:Name : XAML에 정의된 개체 요소가 처리된 후 런타임 코드에 있는 인스턴스에 대한 런타임 개체 이름 지정
'백엔드기술 > 개발언어' 카테고리의 다른 글
데이터 바인딩 정복 1 (0) | 2008.12.11 |
---|---|
[예제] 객체 끌어 놓기 (0) | 2008.12.01 |
Silverlight 2 Developer Reference (0) | 2008.11.23 |