チュートリアル: Grid と StackPanel を使用して簡単な天気アプリを作成する

2025-06-10

XAML を使用して、Grid と StackPanel 要素を使い、単純な天気予報アプリのレイアウトを作成します。これらのツールを使用すると、Windows を実行している任意のデバイスで動作する見栄えの良いアプリを作成できます。このチュートリアルには 10 ~ 20 分かかります。

重要な API: Grid クラス、 StackPanel クラス

[前提条件]

Windows 10 および Microsoft Visual Studio 2015 以降。 (現在の開発およびセキュリティ更新プログラムに推奨される最新の Visual Studio) Windows App SDK 用のツールをインストールします。
XAML と C# を使用して基本的な "Hello World" アプリを作成する方法に関する知識。まだお持ちでない場合は、ここをクリックして、"Hello World" アプリを作成する方法を確認してください。

手順 1: 空のアプリを作成する

Visual Studio メニューの [ファイル] >[新しいプロジェクト] を選択します。
[ 新しいプロジェクト ] ダイアログボックスの左側のウィンドウで、 Visual C#>Windows>Universal または Visual C++>Windows>Universal を選択します。
中央のウィンドウで、[空のアプリ]を選択します。
[名] ボックスに「WeatherPanel」を入力し、[OK] を選択します。
プログラムを実行するには、メニューから [デバッグ>デバッグの開始 ] を選択するか、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 は、アプリインターフェイスのレイアウトを定義する 2 つの行と列のセットを作成します。最初の列の幅は "3*" で、2 番目の列は "5*" で、2 つの列間の水平方向のスペースを 3:5 の比率で除算します。同様に、2 つの行の 高さは それぞれ "2*" と "*" であるため、 Grid は 2 番目の行の 2 倍の領域を割り当てます ("*" は "1*" と同じです)。これらの比率は、ウィンドウのサイズが変更された場合やデバイスが変更された場合でも維持されます。

行と列のサイズを設定するその他の方法については、「 XAML を使用してレイアウトを定義する」を参照してください。

ここでアプリケーションを実行すると、 グリッド 領域にコンテンツがないため、空白のページ以外は表示されません。 グリッドを表示するには、それにいくつかの色を付けましょう。

手順 3: グリッドの色を設定する

グリッドの色を設定するには、それぞれ異なる背景色を持つ 3 つの Border 要素を追加します。それぞれは、Grid.Row 属性と Grid.Column 属性を使用して、親 Grid の行と列にも割り当てられます。これらの属性の値は既定で 0 なので、最初の Border に割り当てる必要はありません。行と列の定義の後に 、Grid 要素に次のコードを追加します。

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

3 番目の罫線では、追加の属性 Grid.ColumnSpan が使用され、この罫線が下の行の両方の列にまたがることに注意してください。 Grid.RowSpan は同じ方法で使用でき、これらの属性を組み合わせることで、任意の数の行と列に要素をまたがることができます。このようなスパンの左上隅は、常に要素属性で指定された Grid.Column と Grid.Row です。

アプリを実行すると、結果は次のようになります。

グリッドの色分け

手順 4: StackPanel 要素を使用してコンテンツを整理する

StackPanel は、天気アプリの作成に使用する 2 番目の UI 要素です。 StackPanel は、多くの基本的なアプリレイアウトの基本的な部分であり、要素を垂直方向または水平方向にスタックできます。

次のコードでは、2 つの StackPanel 要素を作成し、それぞれに 3 つの TextBlock を入力します。これらの StackPanel 要素を、手順 3 の Border 要素の下のグリッドに追加します。これにより、前に作成した色付きのグリッドの上に 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 属性を設定する必要はありません。 2 番目の StackPanel では、子要素を左から右に水平方向に積み重ねるようにするため、 Orientation 属性を "Horizontal" に設定します。また、テキストが下罫線の中央に配置されるように、Grid.ColumnSpan 属性を "2" に設定する必要があります。

ここでアプリを実行すると、次のような内容が表示されます。

StackPanels の追加

手順 5: 画像アイコンを追加する

最後に、Grid の空のセクションに、今日の天気を表す画像 ("部分的に曇り" と書かれているもの) を入力します。

次の画像をダウンロードし、"partially-cloudy" という名前の PNG として保存します。

部分的に曇った

ソリューションエクスプローラーで、Assets フォルダーを右クリックし、[add -Existing Item...] を選択します。ポップアップ表示されたブラウザーで [partially-cloudy.png の検索] をして選択し、[の追加] クリックします。

次に、 MainPage.xaml で、手順 4 の StackPanels の下に次の Image 要素を追加します。

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

最初の行と列にイメージが必要であるため、 Grid.Row 属性または Grid.Column 属性を設定する必要はありません。既定では "0" に設定できます。

これで終わりです! 単純な気象アプリケーション用のレイアウトが正常に作成されました。 F5 キーを押してアプリケーションを実行すると、次のような内容が表示されます。

天気ウィンドウのサンプル

必要に応じて、上記のレイアウトを試して、気象データを表すさまざまな方法を調べてみてください。

Windows アプリレイアウトの設計の概要については、Windows アプリのシルエットに関するページを参照してください。
さまざまな画面サイズに適応するレスポンシブレイアウトの作成については、「XAML を使用してページレイアウトを定義する」を参照してください。