共用方式為

教學課程：使用 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 是由一系列數據列和數據行所組成。 藉由在 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 的比例分割兩個數據行之間的水平空間。 同樣地，這兩個數據行的高度 分別為“2*”和“*”，因此 Grid 分配給第一個數據行的空間是第二個數據行的兩倍（“*”與“1*”相同）。 即使視窗重設大小或裝置已變更，仍會維持這些比例。

若要瞭解調整數據列和數據行大小的其他方法，請參閱 使用 XAML定義版面配置。

如果您現在執行應用程式，除了空白頁面之外，不會看到任何內容，因為 方格 區域沒有任何內容。 若要顯示 方格，我們來給它上點色彩吧。

步驟 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"/>

請注意，針對第三個 Border，我們使用額外的屬性 Grid.ColumnSpan，這會使此 Border 跨越下方的兩欄。 您可以以相同的方式使用 Grid.RowSpan，這些屬性可讓您將元素跨越任意數目的列和行。 這類範圍的左上角一律是元素屬性中指定的 Grid.Column 和 Grid.Row。

如果您執行應用程式，結果看起來會像這樣。

[設定網格線色彩]

步驟 4：使用 StackPanel 元素組織內容

StackPanel 是我們用來建立天氣應用程式的第二個 UI 元素。 StackPanel 是許多基本應用程式版面配置的基本部分，可讓您垂直或水準堆疊元素。

在下列程式代碼中，我們會建立兩個 StackPanel 元素，並以三個 TextBlocks填滿每個元素。 請將這些 StackPanel 元素新增至步驟 3 的 Border 元素下方的 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”。 我們也必須將 Grid.ColumnSpan 屬性設定為 “2”，讓文字置中於下方的 Border。

如果您現在執行應用程式，您會看到類似如下的內容。

新增 StackPanels

步驟 5：新增影像圖示

最後，讓我們在 格子 的空白區段中填上一張代表今天天氣的圖像，這張圖像顯示「部分多雲」。

下載下圖，並將其儲存為名為 「partially-cloudy」 的 PNG。

部分多雲

在 [方案總管]中，以滑鼠右鍵單擊 [Assets] 資料夾，然後選取 [新增 ->現有項目...]， 在快顯的瀏覽器中尋找 partially-cloudy.png，選取它，然後按一下 [新增]。

接下來，在 MainPage.xaml 中，將以下 Image 元素添加到步驟 4 的 StackPanels 之下。

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

因為我們希望圖像在第一排和第一行中，所以我們不需要設定其 Grid.Row 或 Grid.Column 屬性，允許它們預設為 "0"。

就是這樣！ 您已成功建立簡單天氣應用程式的版面配置。 如果您按下 F5 來執行應用程式，您應該會看到如下的內容：

天氣窗格範例

如果您想要的話，請嘗試使用上述配置進行實驗，並探索代表天氣數據的不同方式。

  • Last updated on