튜토리얼: Grid 및 StackPanel을 사용하여 간단한 날씨 앱 만들기

  • 아티클

및XAML을 사용하여 Grid 및 StackPanel 요소를 사용하여 간단한 날씨 앱에 대한 레이아웃을 만듭니다. 이러한 도구를 사용하면 Windows를 실행하는 모든 디바이스에서 작동하는 멋진 앱을 만들 수 있습니다. 이 튜토리얼은 10~20분 정도 소요됩니다.

중요 API: Grid 클래스, StackPanel 클래스

필수 조건

1단계: 빈 앱 만들기

  1. Visual Studio 메뉴에서 File>New Project를 선택합니다.
  2. 새 프로젝트 대화 상자의 왼쪽 창에서 Visual C#>Windows>Universal 또는 Visual C++>Windows>Universal 노드를 선택합니다.
  3. 가운데 창에서 빈 앱을 선택합니다.
  4. Name 상자에 WeatherPanel를 입력한 다음, OK을 선택합니다.
  5. 프로그램을 실행하려면 메뉴에서 디버그>디버깅 시작을 선택하거나 F5 키를 선택합니다.

2단계: 그리드 정의

XAML에서 그리드는 일련의 행과 열로 구성됩니다. Grid 내에서 요소의 행과 열을 지정하면 사용자 인터페이스 내에서 다른 요소를 배치하고 공백을 지정할 수 있습니다. 행 및 열은 RowDefinition 및 ColumnDefinition 요소로 정의됩니다.

레이아웃 만들기를 시작하려면 솔루션 탐색기를 사용하여 MainPage.xaml을 열고 자동으로 생성된 Grid 요소를 이 코드로 바꿉니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

새 Grid는 앱 인터페이스의 레이아웃을 정의하는 두 개의 행과 열 집합을 만듭니다. 첫 번째 열은 Width가 "3*"이고, 두 번째 열은 "5*"이므로 두 열 사이의 가로 공간이 3:5 비율로 분할됩니다. 마찬가지로, 두 행의 Height는 각각 "2*" 및 "*"이므로 Grid에서 두 번째 행보다 세 배의 공간이 첫 번째 행에 할당됩니다("*"는 "1*"과 같음). 이러한 비율은 창 크기가 조정되거나 디바이스가 변경되더라도 유지됩니다.

행 및 열 크기를 조정하는 다른 방법에 대한 자세한 내용은 XAML을 사용하여 레이아웃 정의를 참조하세요.

이제 애플리케이션을 실행하면 Grid 영역에 콘텐츠가 없기 때문에 빈 페이지 외에는 아무것도 표시되지 않습니다. Grid를 표시하기 위해 색을 지정해 보겠습니다.

3단계: Grid 색 지정

Grid에 색을 지정하기 위해 각각 다른 배경색을 가진 세 개의 Border 요소를 추가합니다. 또한 각각은 Grid.Row 및 Grid.Column 특성을 사용하여 부모 Grid의 행과 열에 할당됩니다. 이러한 특성의 값은 기본적으로 0이므로 첫 번째 테두리에 할당할 필요가 없습니다. 행 및 열 정의 뒤의 Grid 요소에 다음 코드를 추가합니다.

<Border Background="#2f5cb6"/>
<Border Grid.Column ="1" Background="#1f3d7a"/>
<Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951"/>

세 번째 Border의 경우 추가 특성인 Grid.ColumnSpan을 사용하므로 이 Border는 아래쪽 행의 두 열에 걸쳐 있습니다. Grid.RowSpan을 동일한 방식으로 사용할 수 있으며 이러한 특성을 함께 사용하면 여러 행과 열에 걸쳐 요소를 확장할 수 있습니다. 이러한 범위의 왼쪽 위 모서리는 항상 요소 특성에 지정된 Grid.Column 및 Grid.Row입니다.

앱을 실행하는 경우 결과는 다음과 같습니다.

Coloring the Grid

4단계: StackPanel 요소를 사용하여 콘텐츠 구성

StackPanel은 날씨 앱을 만드는 데 사용할 두 번째 UI 요소입니다. StackPanel은 여러 기본 앱 레이아웃의 기본 부분으로, 요소를 세로 또는 가로로 쌓을 수 있습니다.

다음 코드에서는 두 개의 StackPanel 요소를 만들고 각각 3개의 TextBlocks으로 채웁니다. 3단계의 Border 요소 아래에 이러한 StackPanel 요소를 Grid에 추가합니다. 이렇게 하면 TextBlock 요소가 앞에서 만든 색이 지정된 Grid 위에 렌더링됩니다.

<StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
    <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
    <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
</StackPanel>

첫 번째 Stackpanel에서 각 TextBlock은 다음 아래 세로로 스택됩니다. 이는 StackPanel의 기본 동작이므로 Orientation 특성을 설정할 필요가 없습니다. 두 번째 StackPanel에서는 자식 요소가 왼쪽에서 오른쪽으로 가로로 스택되도록 하므로 Orientation 특성을 "Horizontal"으로 설정합니다. 또한 텍스트가 아래쪽 Border를 중심으로 되도록 Grid.ColumnSpan 특성을 "2"로 설정해야 합니다.

지금 앱을 실행하면 다음과 같이 표시됩니다.

Adding StackPanels

5단계: 이미지 아이콘 추가

마지막으로 Grid의 빈 섹션을 오늘의 날씨를 나타내는 이미지("부분적으로 흐림")로 채우겠습니다.

아래 이미지를 다운로드하여 "partially-cloudy"라는 PNG로 저장합니다.

Partially cloudy

솔루션 탐색기에서 Assets 폴더를 마우스 오른쪽 단추로 클릭하고 추가 ->기존 항목...을 선택합니다. 팝업되는 브라우저에서 partially-cloudy.png를 찾아서 선택한 다음, 추가를 클릭합니다.

다음으로 MainPage.xaml에서 4단계의 StackPanels 아래에 다음 Image 요소를 추가합니다.

<Image Margin="20" Source="Assets/partially-cloudy.png"/>

첫 번째 행과 열에서 이미지를 원하기 때문에 Grid.Row 또는 Grid.Column 특성을 설정할 필요가 없으므로 기본값을 "0"으로 설정할 수 있습니다.

정말 간단하죠! 간단한 날씨 애플리케이션에 대한 레이아웃을 성공적으로 만들었습니다. F5 키를 눌러 애플리케이션을 실행하는 경우 다음과 같이 표시됩니다.

Weather pane sample

원하는 경우 위의 레이아웃을 실험하고 날씨 데이터를 나타낼 수 있는 다양한 방법을 탐색해 보세요.