[세티의 WPF] 1. Windows Presentation Foundation 시작하기(2) Silverlight2008/03/16 02:00
작성자: 세티
작성일: 2008년 03월 15일 토요일
지난 시간에 만든 어플리케이션에 레이아웃을 추가하는 작업을 해보도록 하겠습니다.
레이아웃은 UI가 리사이즈 될 때 레이아웃의 크기정보와 위치정보가 엘리먼트에 표시됩니다. 위치를 잡아주는 레이아웃 컨트롤이 있는데 일반적으로 다음의 레이아웃 컨트롤 중의 하나를 UI의 레이아웃에 추가합니다.
- Canvas
- DockPanel
- Grid
- StackPanel
- VirtualizingStackPanel
- WrapPanel
이들 각각의 컨트롤들은 자식 엘리먼트(자식 레이아웃)를 위한 레이아웃의 일반적인 타입을 지원합니다. ExpenseIt 페이지를 리사이즈 하면 사용자에 의해 조정된 수평 그리고 수직인 엘리먼트를 가지게 됩니다. 아래의 코드에 그리드를 추가했는데 그리드는 어플리케이션을 위한 전형적인 레이아웃 엘리먼트임을 알 수 있습니다.
아래의 코드는 HomePage.xaml에 XAML 마크업 언어인데 하나의 컬럼, 3줄의 행을 가지고 10px margin을 가지는 테이블을 그리드에 추가 하는 예제 입니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExpenseIt.HomePage"
WindowTitle="ExpenseIt"
Title="ExpenseIt - Home"
WindowWidth="550" WindowHeight="380">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
</Page>
home page UI는 person을 선택할 때 사람의 목록이 업데이트 되는 것을 보여줍니다.
이 UI를 생성하기 위해 HomePage.xaml 페이지에 다음의 엘리먼트를 추가 합니다.
- ListBox(사람들의 리스트)
- Label(리스트 헤더)
- Button(리스트 내에서 선택된 사람들의 경비보고서를 보기 위한 클릭)
HomePage.xaml을 업데이트하기 위해 다음의 절차를 따라 합니다.
1. HomePage.xaml 페이지에 다음의 코드를 추가한다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExpenseIt.HomePage"
WindowTitle="ExpenseIt"
Title="ExpenseIt - Home"
WindowWidth="550" WindowHeight="380">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- People list -->
<Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
<Label VerticalAlignment="Center" Foreground="White">Names</Label>
</Border>
<ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
<ListBoxItem>Mike</ListBoxItem>
<ListBoxItem>Lisa</ListBoxItem>
<ListBoxItem>John</ListBoxItem>
<ListBoxItem>Mary</ListBoxItem>
</ListBox>
<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>
</Grid>
</Page>
2. 위의 예제를 컴파일 하고 실행한다. 실행된 결과 화면은 아래의 그림과 같습니다.
이제 이미지와 페이지 타이틀을 추가해 보겠습니다.
<Page x:Class="WPFApp01.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ExpenseIt - Home" Width="550" Height="380" WindowTitle="ExpenseIt">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
<Canvas DockPanel.Dock="Left" Width="230" Height="100">
<Image Source="/WPFApp01;component/Resources/DSC00613.JPG"></Image>
</Canvas>
<Label VerticalAlignment="Center" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="18" Foreground="#0066cc" HorizontalAlignment="Left">지출 보고서</Label>
</DockPanel>
<Grid Margin="10" Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- People list -->
<Border Padding="5" Background="#4E87D4" HorizontalAlignment="Left" Width="300">
<Label VerticalAlignment="Center" Foreground="White">Names</Label>
</Border>
<ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
<ListBoxItem>Mike</ListBoxItem>
<ListBoxItem>Lisa</ListBoxItem>
<ListBoxItem>John</ListBoxItem>
<ListBoxItem>Mary</ListBoxItem>
</ListBox>
<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>
</Grid>
</Grid>
</Page>
아래의 절차로 그리드의 내용을 변경합니다.
- 2개의 로우를 포함하는 하나의 새로운 그리드를 생성합니다.
- 첫 번째 행에 DockPanel과 Canvas, Image 그리고 Label을 추가합니다. DockPanel 첫 번째 행의 두 번째 컬까지 왼쪽에 Dock된 캔버스와 결합합니다. 이미지에 오버랩하여 라벨을 활성화 합니다.
- 리소스에 이미지를 추가하고 이미지 어트리뷰트에 이미지 소스 경로를 입력합니다.
- 라벨에 "지출보고서" 라고 입력합니다.
- 라벨과 이미지 컨트롤에 크기나 기타 표현할 내용을 출력하기 위해 어트리뷰트를 사용합니다.
3. 컴파일 하고 어플리케이션을 실행합니다.
이것의 결과는 아래의 그림과 같습니다.
다음 시간에는 이벤트를 핸들하기 위한 코드 작성을 해보도록 하겠습니다.
'Silverlight' 카테고리의 다른 글
| 실버라이트는 무엇인가? (0) | 2008/04/17 |
|---|---|
| Silverlight 2 Roadmap Revealed (0) | 2008/04/08 |
| [세티의 WPF] 1. Windows Presentation Foundation 시작하기(2) (0) | 2008/03/16 |
| [세티의 WPF] 1. Windows Presentation Foundation 시작하기(1) (0) | 2008/03/15 |
| [세티의 WPF] Templates, Themes, Design, Graphics, Media, Document (1) | 2007/12/17 |
| [세티의 WPF] 3. DataBinding, Appearence, Resources, Styles (0) | 2007/12/17 |
