Vytvoření a vlastní nastavení formuláře

Pokud vytváříte aplikaci, která vyžaduje, aby uživatelé zadali značné množství informací, pravděpodobně budete chtít vytvořit formulář, který budou vyplňovat. Tento článek vám ukáže, co potřebujete vědět, abyste vytvořili formulář, který je užitečný a robustní.

Budeme probírat, které ovládací prvky XAML zařadit do formuláře, jak je nejlépe uspořádat na stránce a jak optimalizovat formulář pro různé velikosti obrazovek. Protože se ale formulář týká relativní pozice vizuálních prvků, pojďme nejprve probrat rozložení stránky s XAML.

Co potřebujete vědět?

UPW nemá explicitní ovládací prvek formuláře, který můžete přidat do aplikace a nakonfigurovat. Místo toho budete muset vytvořit formulář uspořádáním kolekce prvků uživatelského rozhraní na stránce.

Abyste to mohli udělat, budete muset pochopit rozložení panelů . Jedná se o kontejnery, které obsahují prvky uživatelského rozhraní vaší aplikace a umožňují je uspořádat a seskupit. Umístění panelů rozložení do jiných panelů rozložení vám dává velkou kontrolu nad tím, kde a jak se položky zobrazují ve vztahu k sobě navzájem. To také usnadňuje přizpůsobení aplikace měnícím se velikostem obrazovky.

Přečtěte si tuto dokumentaci o panelech rozložení. Vzhledem k tomu, že formuláře jsou obvykle zobrazeny v jednom nebo více svislých sloupcích, budete chtít seskupit podobné položky v objektu StackPanel a uspořádat je v objektu RelativePanel , pokud potřebujete. Začněte seskupovat některé panely – pokud potřebujete odkaz, níže je základní architektura rozložení pro formulář se dvěma sloupci:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

Co jde ve formuláři?

Formulář budete muset vyplnit celou řadou ovládacích prvků XAML. Pravděpodobně je znáte, ale pokud si je chcete zopakovat, přečtěte si je. Konkrétně budete chtít ovládací prvky, které uživateli umožňují zadat text nebo si vybrat ze seznamu hodnot. Toto je základní seznam možností, které byste mohli přidat – nemusíte číst všechno o nich, stačí, abyste pochopili, jak vypadají a jak fungují.

• TextBox umožňuje uživateli zadat text do vaší aplikace.
• Přepínač umožňuje uživateli vybrat si mezi dvěma možnostmi.
• DatePicker umožňuje uživateli vybrat hodnotu data.
• TimePicker umožňuje uživateli vybrat časovou hodnotu.
• Pole se seznamem rozbalit, aby se zobrazil seznam položek, které se dají vybrat. Další informace o nich najdete tady.

Můžete také chtít přidat tlačítka, aby uživatel mohl uložit nebo zrušit.

Formát ovládacích prvků ve vašem rozložení

Víte, jak uspořádat panely rozložení a máte položky, které chcete přidat, ale jak by se měly formátovat? Na stránce formulářů najdete konkrétní pokyny k návrhu. Přečtěte si části o typech formulářů a o rozložení pro užitečné rady. Za chvíli probereme přístupnost a relativní rozložení.

S ohledem na toto doporučení byste měli začít přidávat vámi zvolené ovládací prvky do rozložení a ujistěte se, že mají správné popisky a jsou správně rozložené. Tady je například základní osnova pro jednostránkový formulář s použitím výše uvedeného rozložení, ovládacích prvků a pokynů k návrhu:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <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>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

Přizpůsobte si ovládací prvky s více vlastnostmi a získáte tak lepší vizuální prostředí.

Nastavení responzivního rozložení

Uživatelé můžou vaše uživatelské rozhraní zobrazit na různých zařízeních s různými šířkami obrazovky. Abyste měli jistotu, že mají dobrou zkušenost bez ohledu na obrazovku, měli byste použít responzivní návrh. Přečtěte si tuto stránku, kde najdete dobré rady ohledně filozofie návrhu, abyste měli na paměti, jak budete pokračovat.

Stránka Responzivní rozložení pomocí XAML poskytuje podrobný přehled o tom, jak to implementovat. Prozatím se zaměříme na rozložení tekutin a vizuální stavy vXAML .

Základní osnova formuláře, kterou jsme vytvořili, je již tekuté rozložení, protože závisí hlavně na relativním umístění ovládacích prvků s minimálním použitím konkrétních velikostí a pozic nastavených v pixelech. Mějte ale na paměti, že v budoucnu můžete vytvořit více uživatelských rozhraní.

Důležitější pro responzivní rozložení jsou vizuální stavy. Stav vizuálu definuje hodnoty vlastností, které se použijí na daný prvek, pokud je daná podmínka pravdivá. Přečtěte si, jak to udělat v xaml, a pak je implementujte do formuláře. V naší předchozí ukázce může velmi základní vypadat takto:

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

Důležité

Pokud používáte StateTriggers, vždy se ujistěte, že VisualStateGroups jsou připojeny k prvnímu dítěti kořenového adresáře. V tomto případě je Mřížka prvním podřízeným prvkem kořenového prvku Stránka.

Není praktické vytvářet vizuální stavy pro širokou škálu velikostí obrazovek, ani jich není víc než pár, které pravděpodobně budou mít významný dopad na uživatelské prostředí vaší aplikace. Doporučujeme proto navrhnout několik klíčových bodů zlomu - můžete přečíst si více zde.

Přidání podpory přístupnosti

Teď, když máte dobře vytvořené rozložení, které reaguje na změny velikosti obrazovky, je poslední věcí, kterou můžete udělat, abyste vylepšili uživatelské prostředí, je zpřístupnění aplikace. Je toho hodně, co se do toho může zapojit, ale ve formě jako je tato, je to jednodušší, než se zdá. Zaměřte se na následující:

• Podpora klávesnice – zajistěte, aby pořadí prvků na panelech uživatelského rozhraní odpovídalo tomu, jak se zobrazují na obrazovce, aby je uživatel mohl snadno procházet.
• Podpora čtečky obrazovky – zajistěte, aby všechny ovládací prvky měly popisný název.

Při vytváření složitějších rozložení s více vizuálními prvky budete chtít konzultovat kontrolní seznam přístupnosti pro více podrobností. I když přístupnost není pro aplikaci nezbytná, pomůže jí to oslovit a zapojit větší cílovou skupinu.

Pokračovat dále

I když jste tady vytvořili formulář, koncepty rozložení a ovládacích prvků platí pro všechny uživatelské rozhraní XAML, které můžete vytvořit. Neváhejte se vrátit k dokumentům, na které jsme vás propojili, a experimentovat s formulářem, který máte, přidávat nové funkce uživatelského rozhraní a dále upřesňovat uživatelské prostředí. Pokud chcete podrobné pokyny k podrobnějším funkcím rozložení, projděte si náš kurz adaptivního rozložení.

Formuláře také nemusí existovat ve vakuu – můžete udělat další krok a zabudovat je do vzoru seznamu/podrobností nebo NavigationView. Nebo pokud chcete začít pracovat na logice za svým formulářem, možná budete chtít zahájit s naším přehledem událostí .

Užitečná rozhraní API a dokumentace

Tady je stručný přehled rozhraní API a další užitečné dokumentace, které vám pomůžou začít pracovat s datovými vazbami.

Užitečná rozhraní API

API (rozhraní pro programování aplikací)	Popis
Ovládací prvky užitečné pro formuláře	Seznam užitečných vstupních ovládacích prvků pro vytváření formulářů a základní pokyny k jejich použití
mřížka	Panel pro uspořádání prvků v rozloženích s více řádky a více sloupci
RelativePanel	Panel pro uspořádání položek ve vztahu k jiným prvkům a k hranicím panelu.
StackPanel	Panel pro uspořádání prvků do jedné vodorovné nebo svislé čáry
VisualState	Umožňuje nastavit vzhled prvků uživatelského rozhraní, když jsou v konkrétních stavech.

Užitečné dokumenty

Téma	Popis
přehled přístupnosti	Obecný přehled možností přístupnosti v aplikacích
kontrolní seznam přístupnosti	Praktický kontrolní seznam, který zajistí, že vaše aplikace splňuje standardy přístupnosti.
Přehled událostí	Podrobnosti o přidávání a strukturování událostí pro zpracování akcí uživatelského rozhraní
formulářů	Celkové pokyny pro vytváření formulářů
Rozvržení panelů	Poskytuje přehled typů panelů rozložení a jejich použití.
vzor seznamu a podrobností	Vzor návrhu, který lze implementovat kolem jednoho nebo více formulářů.
NavigationView	Ovládací prvek, který může obsahovat jeden nebo více formulářů.
Responzivní návrh	Přehled rozsáhlých principů responzivního návrhu
Responzivní rozložení s XAML	Konkrétní informace o vizuálních stavech a dalších implementacích responzivního návrhu
Velikosti obrazovky pro responzivní návrh	Pokyny týkající se velikosti obrazovek, na které mají být responzivní rozložení vymezena.

Užitečné ukázky kódu

Ukázka kódu	Popis
Databáze objednávek zákazníků	Podívejte se na rozložení a formuláře v akci na vícestrákové podnikové ukázce.
Galerie ovládacích prvků XAML	Podívejte se na výběr ovládacích prvků XAML a jejich implementaci.
Další ukázky kódu	Výběrem ovládacích prvků, rozložení a textu v rozevíracím seznamu kategorií zobrazíte související ukázky kódu.