Megosztás a következőn keresztül:

Oktatóanyag: Egyszerű időjárási alkalmazás létrehozása a Grid és a StackPanel használatával

Az XAML használatával létrehozhatja egy egyszerű időjárási alkalmazás elrendezését a Grid és a StackPanel elemekkel. Ezekkel az eszközökkel nagyszerű megjelenésű alkalmazásokat készíthet, amelyek bármilyen Windows rendszerű eszközön működnek. Ez az oktatóanyag 10-20 percet vesz igénybe.

Fontos API-k: Rácsosztály, StackPanel-osztály

Előfeltételek

1. lépés: Üres alkalmazás létrehozása

  1. A Visual Studio menüben válassza a Fájl>Új projekt.
  2. Az Új projekt párbeszédpanel bal oldali ablaktábláján válassza a Visual C#>Windows>Universal vagy a Visual C++>Windows>Universal lehetőséget.
  3. A középső panelen válassza Üres alkalmazáslehetőséget.
  4. A Név mezőbe írja be a WeatherPanel kifejezést, és válassza az OK gombot.
  5. A program futtatásához válassza a Hibakeresés> lehetőséget a menüben, vagy válassza az F5 lehetőséget.

2. lépés: Rács definiálása

Az XAML-ben a rács sorokból és oszlopokból áll. Ha megadja egy elemnek a sorát és oszlopát egy Grid-ban, a felhasználói felületen más elemeket rendezhet el. A sorok és oszlopok a RowDefinition és a ColumnDefinition elemekkel vannak definiálva.

Az elrendezés létrehozásához nyissa meg a MainPage.xaml fájlt a Megoldáskezelővel, és cserélje le az automatikusan létrehozott Rács elemet erre a kódra.

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

Az új Rács két sorból és oszlopból álló készletet hoz létre, amely meghatározza az alkalmazás felületének elrendezését. Az első oszlop szélessége "3*", míg a második "5*", a két oszlop közötti vízszintes térközt 3:5 arányban osztja el. Ugyanígy, a két sor magassága "2*" és "*", így a Rács kétszer annyi helyet oszt ki az első sornak, mint a másodiknak ("*" ugyanaz, mint az "1*"). Ezek az arányok akkor is megmaradnak, ha az ablakot átméretezik vagy az eszközt módosítják.

A sorok és oszlopok méretezésének egyéb módszereiről az Elrendezések definiálása XAML-lel című témakörben olvashat.

Ha most futtatja az alkalmazást, az üres oldalon kívül semmit sem fog látni, mert egyik Rács terület sem rendelkezik tartalommal. A Rács megjelenítéséhez adjunk neki egy kis színt.

3. lépés: A rács színezése

A Rács színezéséhez hozzáadunk három Szegély elemet, amelyek mindegyike eltérő háttérszínnel rendelkezik. A rácsos szülő egyik sorához és oszlopához is hozzá vannak rendelve a Grid.Row és Grid.Column attribútumok használatával. Az attribútumok értékei alapértelmezés szerint 0, így nem szükséges őket az első Szegély-hez rendelni. Adja hozzá a következő kódot a Rács elemhez a sor- és oszlopdefiníciók után.

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

Észrevehetjük, hogy a harmadik Szegélynél egy extra attribútumot használunk, a Grid.ColumnSpan-t, ami miatt ez a Szegély az alsó sor mindkét oszlopára kiterjed. A Grid.RowSpan a következőképpen használható, és ezek az attribútumok együttesen lehetővé teszik, hogy egy elem tetszőleges számú soron és oszlopon átnyúljon. Az ilyen span bal felső sarkában mindig a Grid.Column és a Grid.Row van megadva az elemattribútumokban.

Ha futtatja az alkalmazást, az eredmény így néz ki.

A rács színezése

4. lépés: Tartalom rendszerezése StackPanel-elemek használatával

A StackPanel a második felhasználói felületi elem, amelyet az időjárási alkalmazás létrehozásához fogunk használni. A StackPanel számos alapvető alkalmazáselrendezés alapvető része, amely lehetővé teszi az elemek függőleges vagy vízszintes halmozását.

A következő kódban két StackPanel-elemet hozunk létre, és mindegyiket három TextBlock-tal töltjük ki. Adja hozzá ezeket a StackPanel elemeket a Grid-hez a 3. lépésben a Border elemek alatt. Emiatt a TextBlock elemei a korábban létrehozott színes Grid tetejére kerülnek.

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

Az első Stackpanel-ben mindegyik TextBlock függőlegesen halmozódik a következő alá. Ez a StackPanel alapértelmezett viselkedése, ezért nem kell beállítani a Tájolás attribútumot. A második StackPanelben szeretnénk, hogy az elemek vízszintesen, balról jobbra helyezkedjenek el, ezért a Tájolás attribútumot "Vízszintes" értékre állítjuk. A Grid.ColumnSpan attribútumot is "2" értékre kell állítani, hogy a szöveg középre kerüljön az alsó Szegélyfölött.

Ha most futtatja az alkalmazást, ehhez hasonlót fog látni.

StackPanelok hozzáadása

5. lépés: Kép hozzáadása ikon

Végül töltsük ki a Grid üres szakaszát egy olyan képpel, amely a mai időjárást jelképezi, például "részben felhős".

Töltse le az alábbi képet, és mentse egy "részlegesen felhős" nevű PNG-ként.

Részben felhős

A Megoldáskezelőben kattintson a jobb gombbal az Eszközök mappára, és válassza a Meglévő>elem hozzáadása... Keresse meg az előugró böngészőben a partially-cloudy.png, jelölje ki, majd kattintson a Hozzáadás gombra.

Ezután a MainPage.xamlfájlban adja hozzá a következő Kép elemet a 4. lépésben létrehozott StackPanel elemek alá.

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

Mivel azt szeretnénk, hogy a rendszerkép az első sorban és oszlopban legyen, nem kell beállítani a Grid.Row vagy a Grid.Column attribútumait, így alapértelmezés szerint "0" értékre kell állítani őket.

És ennyi! Sikeresen létrehozta egy egyszerű időjárási alkalmazás elrendezését. Ha az alkalmazást az F5 billentyű lenyomásával futtatja, az alábbihoz hasonlót kell látnia:

Időjárás panel minta

Ha szeretné, kísérletezzen a fenti elrendezéssel, és fedezze fel az időjárási adatokat ábrázoló különböző módszereket.