Öğretici: Basit bir hava durumu uygulaması oluşturmak için Grid ve StackPanel kullanma

Grid kullanarak basit bir hava durumu uygulamasının düzenini oluşturmak ve StackPanel öğelerini için XAML kullanın. Bu araçlarla, Windows çalıştıran herhangi bir cihazda çalışan harika görünümlü uygulamalar oluşturabilirsiniz. Bu öğretici 10-20 dakika sürer.

Önemli API'ler: Kılavuz sınıfı, StackPanel sınıfı

Önkoşullar

• Windows 10 ve Microsoft Visual Studio 2015 veya üzeri. (Geçerli geliştirme ve güvenlik güncelleştirmeleri için önerilen en yeni Visual Studio) Windows Uygulama SDK'sı için araçları yükleyin.
• XAML ve C# kullanarak temel bir "Merhaba Dünya" uygulaması oluşturma hakkında bilgi. Henüz buna sahip değilseniz , "Merhaba Dünya" uygulaması oluşturmayı öğrenmek için buraya tıklayın.

1. Adım: Boş uygulama oluşturma

1. Visual Studio menüsünde Dosya>Yeni Projeseçin.
2. Yeni Proje iletişim kutusunun sol bölmesinde WindowsEvrenselVisual C# veya WindowsEvrenselVisual C++ seçin.
3. Orta bölmede Boş Uygulamaseçin.
4. Ad kutusuna WeatherPanelgirin ve Tamam'ı seçin.
5. Programı çalıştırmak için menüden Hata Ayıklama>Hata Ayıklamayı Başlat'i seçin veya F5'i seçin.

2. Adım: Bir Kılavuz Tanımlayın

XAML'de bir Kılavuz bir dizi satır ve sütundan oluşur. Kılavuz içindeki bir öğenin satırını ve sütununu belirterek, kullanıcı arabirimi içinde başka öğeler yerleştirip yerleştirebilirsiniz. Satırlar ve sütunlar RowDefinition ve ColumnDefinition öğeleriyle tanımlanır.

Düzen oluşturmaya başlamak için Çözüm Gezgini'ni kullanarak MainPage.xaml dosyasını açın ve otomatik olarak oluşturulan Grid öğesini bu kodla değiştirin.

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

Yeni Kılavuz , uygulama arabiriminin düzenini tanımlayan iki satır ve sütundan oluşan bir küme oluşturur. İlk sütunda "3*" Genişliği , ikinci sütunda ise "5*" olur ve iki sütun arasındaki yatay boşluğu 3:5 oranında böler. Aynı şekilde, iki sıra "2*" ve "*" Yükseklik değerlerine sahip olduğundan, Kılavuz birinci sıraya ikinci sıraya göre iki kat daha fazla alan ayırır ("*", "1*" ile aynıdır). Pencere yeniden boyutlandırıldığında veya cihaz değiştirildiğinde bile bu oranlar korunur.

Satırları ve sütunları boyutlandırmanın diğer yöntemleri hakkında bilgi edinmek için bkz. XAML ile düzenleri tanımlama.

Uygulamayı şimdi çalıştırırsanız , Kılavuz alanlarından hiçbirinin içeriği olmadığından boş bir sayfa dışında hiçbir şey görmezsiniz. Izgara'i göstermek için ona biraz renk verelim.

3. Adım: Kılavuzu Renklendir

Grid'i renklendirmek için, her birinin arka plan rengi farklı olan üç Kenarlık öğesi ekliyoruz. Her biri, Grid.Row ve Grid.Column öznitelikleri kullanılarak ana Kılavuz içindeki bir satır ve sütuna atanır. Bu özniteliklerin değerleri varsayılan olarak 0'dır, bu nedenle bunları ilk Kenarlık'a atamanız gerekmez. Satır ve sütun tanımlarından sonra Grid öğesine aşağıdaki kodu ekleyin.

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

Üçüncü Kenarlık için, bu Kenarlık'in alt satırdaki her iki sütunu da kapsamasını sağlayan ek bir öznitelik olan Grid.ColumnSpankullandığımıza dikkat edin. Grid.RowSpan'ı aynı şekilde kullanabilirsiniz ve bu öznitelikler birlikte herhangi bir sayıda satır ve sütuna bir öğe yaymanıza olanak sağlar. Böyle bir yayılma alanının sol üst köşesi her zaman öğe özniteliklerinde belirtilen Grid.Column ve Grid.Row'dir.

Uygulamayı çalıştırırsanız sonuç şuna benzer olur.

4. Adım: StackPanel öğelerini kullanarak içeriği düzenleme

StackPanel , hava durumu uygulamamızı oluşturmak için kullanacağımız ikinci kullanıcı arabirimi öğesidir. StackPanel, öğeleri dikey veya yatay olarak yığmanızı sağlayan birçok temel uygulama düzeninin temel bir parçasıdır.

Aşağıdaki kodda iki StackPanel öğesi oluşturacak ve her birini üç TextBlock ile dolduracağız. Bu StackPanel öğelerini, 3. Adımdaki Border öğelerinin altındaki Grid'e ekleyin. Bu, TextBlock öğelerinin, daha önce oluşturduğumuz renkli Grid'in üzerinde görüntülenmesine neden olur.

<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>

İlk Stackpaneliçindeki her TextBlock, bir sonraki metin bloğunun altına dikey olarak yığılır. Bu, StackPanel'in varsayılan davranışı olduğundan Orientation özniteliğini ayarlamamız gerekmez. İkinci StackPanel'de alt öğelerin soldan sağa yatay olarak yığılmasını istediğimiz için Orientation özniteliğini "Yatay" olarak ayarlayacağız. Ayrıca Grid.ColumnSpan özniteliğini "2" olarak ayarlamalıyız; böylece metin alt Kenarlıkortalanır.

Uygulamayı şimdi çalıştırırsanız şuna benzer bir şey görürsünüz.

StackPanels ekleme

5. Adım: Resim simgesi ekleme

Son olarak, Izgara'deki boş bölümü, "kısmen bulutlu" diyen, bugünün hava durumunu temsil eden bir görüntüyle dolduralım.

Aşağıdaki görüntüyü indirin ve "kısmen bulutlu" adlı bir PNG olarak kaydedin.

Çözüm Gezgini, Varlıklar klasörüne sağ tıklayın ve Ekle -Var Olan Öğe... öğesini seçin Açılan tarayıcıda partially-cloudy.png bul'u seçin veEkle'yi tıklayın.

Ardından MainPage.xaml dosyasında, 4. Adım'daki StackPanels'in altına aşağıdaki Image öğesini ekleyin.

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

Görüntü'leri ilk satırda ve sütunda istediğimiz için Grid.Row veya Grid.Column özniteliklerini ayarlamamız gerekmez ve bu özniteliklerin varsayılan olarak "0" olarak ayarlanmasına izin veririz.

Hepsi bu! Basit bir hava durumu uygulaması için düzeni başarıyla oluşturdunuz. F5 tuşuna basarak uygulamayı çalıştırırsanız aşağıdakine benzer bir şey görmeniz gerekir:

İsterseniz yukarıdaki düzen üzerinde denemeler yapmayı deneyin ve hava durumu verilerini temsil edebileceğiniz farklı yöntemleri keşfedin.

İlgili makaleler

• Windows uygulama düzenlerini tasarlamaya giriş için bkz. Windows uygulama yerleşim şekilleri
• Farklı ekran boyutlarına uyum sağlayan duyarlı düzenler oluşturma hakkında bilgi edinmek için bkz. XAML ile Sayfa Düzenlerini Tanımlama