다음을 통해 공유

자습서: Grid 및 StackPanel을 사용하여 간단한 날씨 앱 만들기

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

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

필수 조건

1단계: 빈 앱 만들기

  1. Visual Studio 메뉴에서 새 프로젝트 파일을> 선택합니다.
  2. 새 프로젝트 대화 상자의 왼쪽 창에서 Visual C#>Windows>유니버설 또는 Visual C++>Windows>유니버설을 선택합니다.
  3. 가운데 창에서 빈 앱을 선택합니다.
  4. 이름 상자에 WeatherPanel을 입력하고 확인을 선택합니다.
  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 는 앱 인터페이스의 레이아웃을 정의하는 두 개의 행과 열 집합을 만듭니다. 첫 번째 열의 너비는 "3*"이고, 두 번째 열은 "5*"입니다. 이렇게 가로 공간을 두 열 사이에서 3:5 비율로 나눕니다. 동일한 방식으로 두 행의 Height 각각 "2*" 및 "*"이므로 Grid 두 번째 행에 대해 두 번째 행에 대해 두 배의 공간을 할당합니다("*"는 "1*"과 동일). 이러한 비율은 창 크기가 조정되거나 디바이스가 변경된 경우에도 유지됩니다.

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

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

3단계: 눈금 색 지정

Grid의 색을 지정하기 위해, 각각 다른 배경색을 가진 세 개의 테두리 요소를 추가합니다. 또한 각각은 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을 사용합니다. 이로 인해 이 테두리 가 아래쪽 행의 두 열에 걸치게 됩니다. Grid.RowSpan을 동일한 방식으로 사용할 수 있으며 이러한 특성을 함께 사용하면 여러 행과 열에 걸쳐 요소를 확장할 수 있습니다. 이러한 범위의 좌상단 모서리는 항상 요소의 속성에 지정된 Grid.Column 및 Grid.Row입니다.

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

눈금 색 지정

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

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

다음 코드에서는 StackPanel 요소 두 만들고 각각 3개의 TextBlocks채웁니다. 이러한 StackPanel 요소를 3단계의 테두리 요소 아래에 Grid 추가합니다. 이로 인해 우리가 이전에 만든 색상 있는 Grid 위에 TextBlock 요소가 렌더링됩니다.

<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"로 설정합니다. 또한 텍스트가 아래쪽 테두리를 중심으로 되도록 Grid.ColumnSpan 특성을 "2"로 설정해야 합니다.

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

StackPanels 추가하기

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

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

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

부분적으로 흐린

솔루션 탐색기에서 자산 폴더를 마우스 오른쪽 버튼으로 클릭하고 추가 ->기존 항목...을 선택합니다. 나타나는 브라우저에서 partially-cloudy.png을 찾아 선택한 다음 추가를 클릭합니다.

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

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

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

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

날씨 패널 샘플

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

  • Last updated on