Forms

Az űrlapok olyan vezérlők csoportja, amelyek adatokat gyűjtenek és küldenek el a felhasználóktól. Az űrlapokat általában beállításlapokhoz, felmérésekhez, fiókok létrehozásához és sok máshoz használják.

Ez a cikk az űrlapokhoz készült XAML-elrendezések létrehozásának tervezési irányelveit ismerteti.

Űrlap példa

Mikor érdemes űrlapot használnia?

Az űrlapok egy dedikált oldal, amellyel olyan adatbemeneteket gyűjthet, amelyek egyértelműen kapcsolódnak egymáshoz. Akkor érdemes űrlapot használnia, ha explicit módon kell adatokat gyűjtenie egy felhasználótól. Létrehozhat egy űrlapot egy felhasználó számára a következő célokra:

Bejelentkezés fiókba
Regisztráció fiókra
Alkalmazásbeállítások, például adatvédelem vagy megjelenítési beállítások módosítása
Felmérés készítése
Elem vásárlása
Visszajelzés küldése

Űrlaptípusok

Amikor a felhasználói bemenet elküldésének és megjelenítésének módjára gondol, kétféle űrlaptípus létezik:

1. Azonnali frissítés

beállítások lap

Használjon azonnal frissítő űrlapot, ha azt szeretné, hogy a felhasználók azonnal lássák az űrlap értékeinek módosításának eredményeit. A beállításoldalakon például megjelennek az aktuális kijelölések, és a beállításokon végzett módosítások azonnal életbe lépnek. Az alkalmazás módosításainak nyugtázásához minden beviteli vezérlőhöz hozzá kell adnia egy eseménykezelőt . Ha egy felhasználó módosít egy beviteli vezérlőt, az alkalmazás megfelelően tud válaszolni.

2. Küldés gombbal

A másik űrlaptípus lehetővé teszi, hogy a felhasználó egy kattintással eldöntse, mikor küldje el az adatokat.

Ez az űrlaptípus rugalmasságot biztosít a felhasználónak a válaszadásban. Az ilyen típusú űrlapok általában több szabad beviteli mezőt tartalmaznak, és így több választ kapnak. Annak érdekében, hogy a beküldéskor érvényes felhasználói bevitelt és megfelelően formázott adatokat biztosíthasson, vegye figyelembe az alábbi javaslatokat:

Tegye lehetetlenné az érvénytelen adatok beküldését a megfelelő vezérlő használatával (azaz szövegdoboz helyett használjon naptár dátumválasztót a naptárdátumokhoz). Az űrlap megfelelő beviteli vezérlőinek kiválasztásáról később, a Beviteli vezérlők szakaszban olvashat bővebben.
TextBox-vezérlők használata esetén adjon meg egy tippet a felhasználóknak a kívánt bemeneti formátumról a PlaceholderText tulajdonsággal.
Adja meg a felhasználóknak a megfelelő képernyő-billentyűzetet az InputScope tulajdonsággal rendelkező vezérlőelem várható bemenetének megadásával.
Jelölje meg a szükséges bemenetet csillaggal * a címkén.
Tiltsa le a küldés gombot, amíg az összes szükséges információ ki nem töltődik.
Ha a beküldéskor érvénytelen adatok találhatók, jelölje meg a vezérlőket érvénytelen bemenettel kiemelt mezőkkel vagy szegélyekkel, és követelje meg a felhasználótól, hogy küldje el újra az űrlapot.
Egyéb hibák, például a sikertelen hálózati kapcsolat esetén mindenképpen jelenítsen meg egy megfelelő hibaüzenetet a felhasználónak.

Layout

A felhasználói élmény megkönnyítése és annak biztosítása érdekében, hogy a felhasználók meg tudják adni a megfelelő bemenetet, vegye figyelembe az űrlapok elrendezéseinek tervezésére vonatkozó alábbi javaslatokat.

Címkék

A címkéket balra kell igazítani, és a beviteli vezérlő fölé kell helyezni. Számos vezérlő beépített Fejléc tulajdonságával rendelkezik a címke megjelenítéséhez. Az Olyan vezérlők esetében, amelyek nem rendelkeznek Fejléc tulajdonságokkal, vagy vezérlőelemcsoportok címkézéséhez használhatja a TextBlockot .

Az akadálymentesség kialakításához címkézze fel az összes egyéni és vezérlőcsoportot az emberi és a képernyőolvasók számára is érthetően. Az akadálymentességről további információt az Akadálymentesség áttekintése című témakörben talál.

Betűstílusok esetén használja az alapértelmezett Windows-típust. Lapcímekhez használja a TitleTextBlockStyle, csoportfejlécekhez a SubtitleTextBlockStyle, és vezérlőelemcímkékhez a BodyTextBlockStyle.

Csinál	Nem

Spacing

Ha vizuálisan el szeretné különíteni a vezérlőcsoportokat egymástól, használja az igazítást, a margókat és a kitöltést. Az egyes bemeneti vezérlők magassága 80 képpont, és 24 képpont távolságra kell lenniük egymástól. A bemeneti vezérlők csoportjainak 48 képpont távolságra kell lenniük egymástól.

csoportokat képez

Columns

Az oszlopok létrehozása csökkentheti az űrlapok szükségtelen szabad területét, különösen nagyobb képernyőméretek esetén. Ha azonban többoszlopos űrlapot szeretne létrehozni, az oszlopok számának az oldalon lévő beviteli vezérlők számától és az alkalmazásablak képernyőméretétől kell függenie. Ahelyett, hogy túlterhelte a képernyőt számos beviteli vezérlővel, fontolja meg több oldal létrehozását az űrlaphoz.

Csinál	Nem

Rugalmas elrendezés

Az űrlapokat a képernyő vagy az ablak méretének változásával kell átméretezni, így a felhasználók nem hagyhatják figyelmen kívül a bemeneti mezőket. További információ: rugalmas tervezési technikák. Előfordulhat például, hogy az űrlap adott régiói mindig láthatók maradnak, a képernyő méretétől függetlenül.

űrlapok fókusza

Tabulátorhelyek

A felhasználók a billentyűzettel tabulátor megállókkal navigálhatnak a vezérlők között. Alapértelmezés szerint a vezérlők lapsorrendje az XAML-ben való létrehozásuk sorrendjét tükrözi. Az alapértelmezett viselkedés felülbírálásához módosítsa a vezérlőelem IsTabStop vagy TabIndex tulajdonságait.

tab fókusz a vezérlőn űrlapon

Bemeneti vezérlők

A beviteli vezérlők azok a felhasználói felületi elemek, amelyek lehetővé teszik a felhasználók számára az adatok űrlapokba való bevitelét. Az űrlapokhoz hozzáadható gyakori vezérlők az alábbiakban láthatók, valamint a használatuk időpontjával kapcsolatos információk.

Szövegbevitel

Vezérlő	Használd	Example
Szövegdoboz	Egy vagy több sornyi szöveg rögzítése	Nevek, ingyenes űrlapválaszok vagy visszajelzések
Jelszómező	Személyes adatok gyűjtése a karakterek elrejtésével	Jelszavak, társadalombiztosítási számok (SSN), PIN-kódok, hitelkártyaadatok
AutoSuggestBox	Javaslatok megjelenítése a felhasználóknak a megfelelő adatkészletből a beíráskor	Adatbázis-keresés, e-mail címzett: vonal, előző lekérdezések
RichEditBox	Formázott szöveggel, hivatkozásokkal és képekkel rendelkező szövegfájlok szerkesztése	Fájl, előnézet és szerkesztés feltöltése az alkalmazásban

Szelekció

Vezérlő	Használd	Example
Jelölőnégyzet	Egy vagy több műveletelem kijelölése vagy kijelölésének megszüntetése	Fogadja el a feltételeket, adjon hozzá opcionális elemeket, válassza ki az összes alkalmazhatót
RadioButton	Válasszon egy lehetőséget két vagy több lehetőség közül	Válasszon típust, szállítási módot stb.
ToggleSwitch	Válasszon egyet a két kölcsönösen kizáró lehetőség közül	Be- és kikapcsolt

Megjegyzés: Ha öt vagy több kijelölési elem van, használjon listavezérlőt.

Lists

Vezérlő	Használd	Example
ComboBox	Indítsa el tömör állapotban, majd bontsa ki az választható elemek listájának megjelenítéséhez	Válasszon az elemek hosszú listájából, például államokból vagy országokból/régiókból
ListView	Elemek kategorizálása és csoportfejlécek hozzárendelése, elemek húzása és ejtése, tartalom gondozása és elemek átrendezése	Rangsorolási beállítások
GridView	Képalapú gyűjtemények elrendezése és tallózása	Fénykép, szín, megjelenítési téma kiválasztása

Numerikus bemenet

Vezérlő	Használd	Example
csúszka	Szám kiválasztása egy folytonos numerikus értékek tartományából	Százalékok, hangerő, lejátszási sebesség
Értékelés	Értékeld csillagokkal	Ügyfélvisszajelzés

Dátum és idő

Vezérlő	Használd
CalendarView	Egyetlen dátum vagy dátumtartomány kiválasztása mindig látható naptárból
CalendarDatePicker	Egyetlen dátum kiválasztása környezeti naptárból
DatePicker	Egyetlen honosított dátum kiválasztása, ha a környezeti információ nem fontos.
TimePicker	Egyetlen időérték kiválasztása

Egyoszlopos űrlap példa

Ez a példa Akril lista/részletlista nézetet és NavigationView vezérlőt használ. Képernyőkép egy másik űrlapról

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>

Két oszlopos űrlap példa

Ez a példa a beviteli vezérlők mellett a Pivot vezérlőelemet, az Akril hátteret és a CommandBar-t is használja. Képernyőkép az űrlap példájáról

<Grid>
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
                        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
                    </StackPanel>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>

Ügyfélrendelések adatbázisminta

customer rendelések adatbázis képernyőképe Az űrlapbemenet Azure-adatbázishoz való csatlakoztatásáról, valamint a teljes körűen implementált űrlapok megtekintéséről a Customers Orders Database alkalmazásmintában olvashat.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-11