자동 레이아웃 사용 개요

아티클
08/10/2011

이 항목에서는 지역화할 수 있는 user interfaces (UIs)를 사용하여 Windows Presentation Foundation (WPF) 응용 프로그램을 작성하는 방법에 대한 개발자용 지침을 소개합니다. 이전에는 UI의 지역화 작업이 시간이 많이 소요되는 프로세스였습니다. 이전에는 UI가 조정되는 각 언어에 대해 픽셀 단위의 조정이 필요했지만 이제는 올바른 디자인 및 코딩 표준을 사용하여 UIs를 생성할 때 지역화 작업자가 크기 및 위치 조정 작업을 보다 적게 수행할 수 있게 되었습니다. 보다 쉽게 크기 및 위치를 조정할 수 있는 응용 프로그램을 작성하는 방법을 자동 레이아웃이라고 하며 이는 WPF 응용 프로그램 디자인을 통해 구현할 수 있습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

자동 레이아웃 사용의 이점
자동 레이아웃 및 컨트롤
자동 레이아웃 및 코딩 표준
자동 레이아웃 및 모눈
IsSharedSizeScope 속성을 사용한 자동 레이아웃 및 모눈
관련 항목

자동 레이아웃 사용의 이점

WPF 프레젠테이션 시스템은 강력하고 유연하므로 서로 다른 언어의 요구 사항을 충족시킬 수 있도록 조정될 수 있는 응용 프로그램에서의 요소 레이아웃 기능을 제공합니다. 다음 목록에서는 일부 자동 레이아웃의 장점을 보여 줍니다.

UI가 모든 언어에서 잘 표시됩니다.
텍스트가 변환된 후 컨트롤의 위치와 크기를 다시 조정할 필요가 줄어듭니다.
창 크기를 다시 조정할 필요가 줄어듭니다.
UI 레이아웃이 모든 언어에서 적절하게 렌더링됩니다.
문자열을 변환하는 정도로만 지역화를 수행할 수 있습니다.

자동 레이아웃 및 컨트롤

자동 레이아웃을 통해 응용 프로그램은 컨트롤 크기를 자동으로 조정할 수 있습니다. 예를 들어 컨트롤은 문자열 길이를 수용하도록 변경될 수 있습니다. 이러한 기능을 통해 지역화 작업자는 문자열을 변환할 때, 변환된 텍스트에 맞게 컨트롤 크기를 다시 조정하지 않아도 됩니다. 다음 예제에서는 영어 콘텐츠의 단추를 만듭니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

<DockPanel> 
    <Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>

이 예제에서 스페인어 단추를 만들려면 텍스트를 변경하기만 하면 됩니다. 다음 예제를 참조하십시오.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

 <DockPanel> 
    <Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
  </DockPanel>
</Window>

다음 그래픽에서는 코드 샘플의 출력을 보여 줍니다.

자동으로 크기를 조정할 수 있는 단추

텍스트가 여러 언어로 표시되는 동일한 단추

자동 레이아웃 및 코딩 표준

자동 레이아웃 방법을 사용하려면 완전히 지역화할 수 있는 UI를 생성할 수 있는 코딩 및 디자인 표준/규칙 집합이 필요합니다. 다음 지침은 자동 레이아웃 코딩에 도움이 됩니다.

코딩 표준	설명
절대 위치를 사용하지 않습니다.	Canvas는 요소를 절대 위치에 배치하므로 사용하지 않습니다. DockPanel, StackPanel 및 Grid를 사용하여 컨트롤을 배치합니다. 다양한 패널 형식에 대한 설명은 Panel 개요를 참조하십시오.
창에 고정 크기를 설정하지 않습니다.	SizeToContent를 사용합니다. 예를 들면 다음과 같습니다. `<StackPanel xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="GridLoc.Pane1" >`
FlowDirection를 추가합니다.	응용 프로그램의 루트 요소에 FlowDirection을 추가합니다. WPF는 간단한 방법으로 가로, 양방향 및 세로 레이아웃을 지원합니다. 프레젠테이션 프레임워크에서 FlowDirection 속성을 사용하여 레이아웃을 정의할 수 있습니다. 흐름 방향 패턴은 다음과 같습니다. LeftToRight(LrTb) - 라틴어, 동아시아 언어 등을 위한 가로 레이아웃 RightToLeft(RlTb) - 아랍어, 히브리어 등을 위한 양방향 레이아웃
실제 글꼴 대신 합성 글꼴을 사용합니다.	합성 글꼴을 사용하면 FontFamily 속성을 지역화할 필요가 없습니다. 개발자는 다음 글꼴 중 하나를 사용하거나 자체 글꼴을 만들 수 있습니다. Global User Interface Global San Serif Global Serif
xml:lang을 추가합니다.	xml:lang 특성을 UI의 루트 요소에 추가합니다. 예를 들어 영어 응용 프로그램에는 xml:lang="en-US"를 추가합니다. 합성 글꼴은 xml:lang를 통해 사용할 글꼴을 결정하므로 이 속성을 설정하여 다국어 시나리오를 지원합니다.

자동 레이아웃 및 모눈

Grid 요소는 개발자가 요소 위치를 지정하는 데 사용할 수 있으므로 자동 레이아웃에 유용합니다. Grid 컨트롤을 사용하면 열 및 행 정렬을 사용하여 자식 요소 간에 사용 가능한 공간을 분배할 수 있습니다. UI 요소는 여러 셀에 걸쳐 배치될 수 있으며 모눈 안에 모눈을 사용할 수 있습니다. 모눈은 복잡한 UI를 만들고 배치하는 데 사용할 수 있으므로 유용합니다. 다음 예제에서는 모눈을 사용하여 일부 단추 및 텍스트를 배치하는 방법을 보여 줍니다. 셀의 높이와 너비가 Auto로 설정되어 있으므로 이미지가 있는 단추를 포함하는 셀은 이미지에 맞춰 조정됩니다.

<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"  
    Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink" 
    BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
   Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
   <Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as 
   the button's content.
</TextBlock>
</Grid>

다음 그래픽에서는 이전 코드에서 만든 모눈을 보여 줍니다.

모눈

표 예제

IsSharedSizeScope 속성을 사용한 자동 레이아웃 및 모눈

Grid 요소는 지역화할 수 있는 응용 프로그램에서 콘텐츠에 맞게 조정되는 컨트롤을 만드는 데 유용합니다. 그러나 콘텐츠에 관계없이 특정 크기로 컨트롤을 유지하려는 경우도 있습니다. 예를 들어 "확인", "취소" 및 "찾아보기" 단추가 있는 경우 콘텐츠에 맞게 단추 크기를 조정할 필요가 없을 것입니다. 이 경우 Grid.IsSharedSizeScope 연결된 속성을 사용하면 여러 모눈 요소 간에 동일한 크기를 공유할 수 있습니다. 다음 예제에서는 여러 Grid 요소 간에 열과 행 크기 조정 데이터를 공유하는 방법을 보여 줍니다.

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
    <Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
    <Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
</StackPanel> 

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

<Grid ShowGridLines="True" Margin="0,0,10,0">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>        
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

</StackPanel>

<TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>

참고 완전한 코드 샘플은 방법: 모눈 간 크기 조정 속성 공유를 참조하십시오.

참고 항목

작업

방법: 자동 레이아웃을 사용하여 단추 만들기

방법: 자동 레이아웃에 Grid 사용

개념

WPF의 전역화

다음을 통해 공유