uwp 화면 레이아웃 StackPanel 사용하기

uwp 도 마찬가지로 화면에 컨트롤들을 배치하기 위한 화면 레이아웃이 존재한다. StackPanel 은 가장 쉽고 가장 간편한 화면 레이아웃이다. 단일 행인 세로 또는 가로로 컨트롤들을 배치할 수 있다. 

 

uwp 화면 레이아웃 StackPanel 사용하기

StackPanel은 컨트롤을 담고 있는 컨테이너이기도 하다.

StackPanel이 지정한 세로 또는 가로 방향에 대해 내부에 배치된 컨트롤들의 방향 또한 정해진다.

방향은 2가지이다.

Orientatio 속성을 지정하지 않았다면 기본값은 Vertical 이다.

<StackPanel Orientation="Horizontal">
	<!-- 가로로 컨트롤들이 표시 -->
</StackPanel>
<StackPanel Orientation="Vertical">
	<!-- 세로로 컨트롤들이 표시 -->
</StackPanel>

 

StackPanel 가로 배치

StackPanel 의 Orientation 속성에 Horizontal 을 설정하면 내부 컨트롤들은 가로로 배치된다.

Button 컨트롤 4개를 StackPanel 내부에 넣은 후 Orientation 속성에 Horizontal 을 설정하였다.

<StackPanel Orientation="Horizontal">
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 1" Click="Button_Click"/>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 2" Click="Button_Click"/>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 3" Click="Button_Click"/>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 4" Click="Button_Click"/>
</StackPanel>

XAML 디자이너 화면에서 버튼들이 가로로 배치된 것을 확인할 수 있다.

StackPanel 세로 배치

StackPanel 의 Orientation 속성에 Vertical 을 설정하면 내부 컨트롤들은 세로로 배치된다.

Button 컨트롤 4개를 StackPanel 내부에 넣은 후 Orientation 속성에 Vertical 을 설정하였다.

<StackPanel Orientation="Vertical">
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 5" Click="Button_Click"/>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 6" Click="Button_Click"/>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 7" Click="Button_Click"/>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 8" Click="Button_Click"/>
</StackPanel>

XAML 디자이너 화면에서 버튼들이 세로로 배치된 것을 확인할 수 있다.

전체 코드를 보자.

가로, 세로로 배치된 컨트롤들을 표현한다.

아래의 코드에는 StackPanel 이 중첩된 것을 확인할 수 있다.

최상단의 StackPanel 이 없다면 하위의 컨테이너는 겹치게 되기 때문에 컨트롤들이 배치된 StackPanel 도 화면배치를 하기 위함이다.

<!-- XAML -->
<Page
    x:Class="TestUwpApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUwpApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 1" Click="Button_Click"/>
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 2" Click="Button_Click"/>
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 3" Click="Button_Click"/>
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 4" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Orientation="Vertical">
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 5" Click="Button_Click"/>
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 6" Click="Button_Click"/>
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 7" Click="Button_Click"/>
                <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 8" Click="Button_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

/**
 * uwp C# 비하인드 코드
 */
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Text;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.

namespace TestUwpApp
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            SetCurrentWindowsSize();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var vButton = sender as Button;
            ShowAsyncMessageDialog(vButton.Content.ToString(), "");
        }

        private async void ShowAsyncMessageDialog(String pContent, String pTitle)
        {
            /** 윈도우 크기 알림창 표시 */
            var vMessageDialog = new MessageDialog(pContent, pTitle);
            await vMessageDialog.ShowAsync();
        }

        private void SetCurrentWindowsSize()
        {
            /** 윈도우 크기 설정하기 */
            ApplicationView.PreferredLaunchViewSize = new Size(500, 319);
        }
    }
}

위의 코드에 대한 결과화면은 아래와 같다.

버튼1부터 버튼4까지는 StackPanel 컨테이너의 Orientation 속성이 Horizontal 이고,
버튼5부터 버튼8까지는 StackPanel 컨테이너의 Orientation 속성이 Vertical 이다.

각각의 StackPanel 이 겹치는 것을 방지하기 위해 또다른 StackPanel 을 추가하였다.

가장 최상단의 StackPanel 은 속성을 지정하지 않았기 때문에 기본 Orientation 속성은 Vertical 이다.