WPF XAML 기본 구조

XAML(Extensible Application Markup Language)은 WPF 애플리케이션의 UI를 정의하는 XML 기반의 선언적 언어다.

디자인과 비즈니스 로직을 분리하여 관리할 수 있는 구조를 제공한다.

기본 문서 구조 및 네임스페이스

XAML 파일은 루트 요소(주로 WindowPage)와 XML 네임스페이스 선언으로 시작한다.

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="XAML Basic" Height="350" Width="500">

    <!-- UI 콘텐츠 배치 영역 -->
    <Grid>
        <StackPanel Margin="20">
            <TextBlock Text="Welcome to WPF" FontSize="24" HorizontalAlignment="Center"/>
            <Button x:Name="btnClick" Content="Click Me" Width="100" Height="30" Margin="0,20,0,0"/>
        </StackPanel>
    </Grid>
</Window>

레이아웃 시스템 (Panels)

XAML은 컨트롤을 배치하기 위해 다양한 패널을 제공한다.

  • Grid: 행(Row)과 열(Column)을 정의하여 유연한 배치를 수행한다.
  • StackPanel: 가로 또는 세로 방향으로 컨트롤을 순차적으로 쌓는다.
  • DockPanel: 컨트롤을 상, 하, 좌, 우 또는 중앙에 고정한다.
  • WrapPanel: 공간이 부족하면 다음 줄로 넘기며 배치한다.
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Header Grid.Row="0" />
    <Content Grid.Row="1" />
</Grid>

속성 설정 방식

  • 특성(Attribute) 방식: <Button Content="OK" />와 같이 태그 내부에 기술한다.
  • 속성 요소(Property Element) 방식: 복잡한 객체를 속성으로 설정할 때 사용한다.

    xml
    <Button>
    <Button.Background>
    <LinearGradientBrush>
    <GradientStop Color="Blue" Offset="0"/>
    <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
    </Button.Background>
    </Button>

P.S

XAML은 UI의 계층 구조와 속성을 시각적으로 파악하기 쉽게 표현한다.

마크업 확장을 통한 데이터 바인딩과 리소스 참조 기능을 활용하여 동적이고 화려한 UI를 효율적으로 구축할 수 있는 것 같다.

Author avatar

웨이호프

WordPress creator and blogger.

View all posts