Forms

Formulář je skupina ovládacích prvků, které shromažďují a odesílají data od uživatelů. Formuláře se obvykle používají pro stránky nastavení, průzkumy, vytváření účtů a mnoho dalšího.

Tento článek popisuje pokyny pro návrh pro vytváření rozložení XAML pro formuláře.

Kdy byste měli použít formulář?

Formulář je vyhrazená stránka pro shromažďování vstupů dat, které spolu jasně souvisejí. Formulář byste měli použít, pokud potřebujete explicitně shromažďovat data od uživatele. Můžete vytvořit formulář pro uživatele, aby:

• Přihlášení k účtu
• Registrace účtu
• Změna nastavení aplikace, jako je ochrana osobních údajů nebo možnosti zobrazení
• Zúčastněte se průzkumu
• Nákup položky
• Váš názor

Typy formulářů

Při úvahách o tom, jak se odesílají a zobrazují vstupy uživatelů, existují dva typy formulářů:

1. Okamžitá aktualizace

Pokud chcete, aby uživatelé okamžitě viděli výsledky změny hodnot ve formuláři, použijte formulář s okamžitou aktualizací. Například na stránkách nastavení se zobrazí aktuální výběry a všechny změny provedené u výběrů se použijí okamžitě. Pokud chcete potvrdit změny v aplikaci, budete muset do každého vstupního ovládacího prvku přidat obslužnou rutinu události . Pokud uživatel změní vstupní ovládací prvek, aplikace může správně reagovat.

2. Odeslání s tlačítkem

Druhý typ formuláře umožňuje uživateli zvolit, kdy má odeslat data kliknutím na tlačítko.

Tento typ formuláře poskytuje uživatelům flexibilitu při odpovídání. Tento typ formuláře obvykle obsahuje více volných vstupních polí formuláře, a proto přijímá větší škálu odpovědí. Pokud chcete zajistit platný uživatelský vstup a správně naformátovaná data po odeslání, zvažte následující doporučení:

• Znemožnit odeslání neplatných informací pomocí správného ovládacího prvku (tj. použít CalendarDatePicker místo Textového pole pro kalendářní data). Další informace o výběru příslušných vstupních ovládacích prvků ve formuláři najdete v části Ovládací prvky zadávání později.
• Při použití ovládacích prvků TextBox poskytněte uživatelům nápovědu k požadovanému vstupnímu formátu pomocí vlastnosti PlaceholderText .
• Poskytněte uživatelům odpovídající klávesnici na obrazovce uvedením očekávaného vstupu ovládacího prvku s vlastností InputScope .
• Označte požadovaný vstup hvězdičkou * na popisku.
• Tlačítko Odeslat zakažte, dokud nebudou vyplněny všechny požadované informace.
• Pokud jsou při odeslání neplatná data, označte ovládací prvky s neplatným vstupem zvýrazněnými poli nebo ohraničením a vyžádejte si, aby uživatel formulář znovu odeslal.
• V případě jiných chyb, jako je například neúspěšné síťové připojení, nezapomeňte uživateli zobrazit odpovídající chybovou zprávu.

Rozložení

Pokud chcete usnadnit uživatelské prostředí a zajistit, aby uživatelé mohli zadat správný vstup, zvažte následující doporučení pro návrh rozložení formulářů.

Štítky

Popisky by měly být zarovnané doleva a umístěné nad vstupními ovládacími prvky. Mnoho ovládacích prvků má integrovanou vlastnost Header pro zobrazení popisku. U ovládacích prvků, které nemají vlastnost Záhlaví nebo popisky skupin ovládacích prvků, můžete místo toho použít TextBlock .

K navržení přístupnosti označte všechny jednotlivé i skupinové ovládací prvky pro přehlednost pro lidské i čtečky obrazovky.

Pro styly písma použijte výchozí rampu typu Windows. Slouží TitleTextBlockStyle pro názvy stránek, SubtitleTextBlockStyle pro záhlaví skupin a BodyTextBlockStyle pro popisky ovládacích prvků.

Dělat	Ne

Spacing

Pokud chcete vizuálně oddělit skupiny ovládacích prvků od sebe, použijte zarovnání, okraje a odsazení. Jednotlivé vstupní ovládací prvky mají výšku 80 pixelů a měly by být od sebe rozmístěny 24 pixelů. Skupiny vstupních ovládacích prvků by měly být rozmístěné 48 pixelů od sebe.

Columns

Vytváření sloupců může snížit nepotřebné prázdné znaky ve formulářích, zejména u větších velikostí obrazovky. Pokud ale chcete vytvořit formulář s více sloupci, měl by počet sloupců záviset na počtu vstupních ovládacích prvků na stránce a velikosti obrazovky okna aplikace. Místo zahlcení obrazovky mnoha vstupními ovládacími prvky zvažte vytvoření více stránek pro formulář.

Dělat	Ne

Responzivní rozložení

Formuláře by se měly měnit při změně velikosti obrazovky nebo okna, takže uživatelé nepřehlédnou žádná vstupní pole. Další informace najdete v technikách responzivního návrhu. Můžete například chtít zachovat určité oblasti formuláře vždy v zobrazení bez ohledu na velikost obrazovky.

Zarážky tabulátoru

Uživatelé můžou pomocí klávesnice procházet ovládací prvky se zarážkami tabulátoru. Ve výchozím nastavení pořadí ovládacích prvků odpovídá pořadí, ve kterém jsou vytvořeny v JAZYCE XAML. Chcete-li přepsat výchozí chování, změňte vlastnosti IsTabStop nebo TabIndex ovládacího prvku.

Vstupní ovládací prvky

Vstupní ovládací prvky jsou prvky uživatelského rozhraní, které uživatelům umožňují zadávat informace do formulářů. Níže jsou uvedeny některé běžné ovládací prvky, které je možné přidat do formulářů, a také informace o tom, kdy je použít.

Textové zadání

Řízení	Používání	Example
Textové pole	Zachycení jednoho nebo více řádků textu	Jména, odpovědi na bezplatné formuláře nebo zpětná vazba
Pole pro heslo	Shromažďování soukromých dat skrytím znaků	Hesla, čísla sociálního pojištění (SSN), PIN kódy, informace o platební kartě
Automatické našeptávání	Zobrazení seznamu návrhů z odpovídající sady dat při jejich psaní	Vyhledávání v databázi, řádek pro 'poslat na', předchozí dotazy
RichEditBox	Úprava textových souborů s formátovaným textem, hypertextovými odkazy a obrázky	Nahrání souboru, náhledu a úprav v aplikaci

Selection

Řízení	Používání	Example
Zaškrtávací políčko	Výběr nebo zrušení výběru jedné nebo více položek akcí	Souhlas s podmínkami a ujednáními, přidejte volitelné položky, vyberte všechny, které platí.
Radiobutton	Výběr jedné možnosti ze dvou nebo více možností	Vyberte typ, způsob dopravy atd.
Přepínač	Zvolte jednu ze dvou vzájemně se vylučujíných možností.	Zapnuto/vypnuto

Poznámka: Pokud existuje pět nebo více položek výběru, použijte ovládací prvek seznamu.

Lists

Řízení	Používání	Example
ComboBox	Začněte v kompaktním stavu a rozbalte, aby se zobrazil seznam vybraných položek.	Vyberte si z dlouhého seznamu položek, jako jsou státy nebo země/oblasti.
ListView	Kategorizace položek a přiřazení záhlaví skupin, přetažení položek, kurátorování obsahu a změna pořadí položek	Možnosti pořadí
GridView	Uspořádání a procházení kolekcí založených na obrázcích	Výběr fotky, barvy a motivu zobrazení

Číselný vstup

Řízení	Používání	Example
Posuvník	Výběr čísla z oblasti souvislých číselných hodnot	Procenta, hlasitost, rychlost přehrávání
Hodnocení	Hodnocení pomocí hvězdiček	Zpětná vazba zákazníků

Datum a čas

Řízení	Používání
CalendarView	Výběr jednoho data nebo rozsahu kalendářních dat z vždy viditelného kalendáře
CalendarDatePicker	Výběr jednoho data z kontextového kalendáře
DatePicker	Výběr jednoho lokalizovaného data, pokud kontextové informace nejsou důležité
TimePicker	Vyberte jednu časovou hodnotu

Další ovládací prvky

Úplný seznam ovládacích prvků UPW najdete v indexu ovládacích prvků podle funkce.

Složitější a vlastní ovládací prvky uživatelského rozhraní najdete ve společnostech, jako jsou Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne a ActiPro.

Příklad formuláře s jedním sloupcem

V tomto příkladu se používá zobrazení seznamu a podrobností a ovládací prvek NavigationView.

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

Příklad formuláře se dvěma sloupci

V tomto příkladu se kromě vstupních ovládacích prvků používá ovládací prvek Pivot , akrylové pozadí a CommandBar .

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

Ukázka databáze objednávek zákazníků

Informace o připojení vstupu formuláře k databázi Azure a zobrazení plně implementovaného formuláře najdete v ukázce aplikace Databáze objednávek zákazníků .

Související témata

• Ovládací prvky vstupu
• Typografie