Vytvoření uživatelského rozhraní pomocí Návrháře XAML
Návrhář XAML v sadě Visual Studio a Blend pro Visual Studio poskytuje vizuální rozhraní, které vám pomůže navrhovat aplikace založené na JAZYCE XAML, jako je WPF a UPW. Uživatelská rozhraní pro aplikace můžete vytvořit přetažením ovládacích prvků z okna Panel nástrojů (okno Prostředky v Blend pro Visual Studio) a nastavením vlastností v okno Vlastnosti. XAML můžete také upravovat přímo v zobrazení XAML.
Pro pokročilé uživatele můžete dokonce přizpůsobit Návrhář XAML.
Poznámka:
Xamarin.Forms nepodporuje návrháře XAML. Pokud chcete zobrazit uživatelská rozhraní XAML Xamarin.Forms a upravit je během běhu aplikace, použijte pro Xamarin.Forms Opětovné načítání za provozu XAML. Další informace najdete na stránce xaml Opětovné načítání za provozu pro Xamarin.Forms (Preview).
Poznámka:
Návrhář WINUI 3 / .NET MAUI XAML není v sadě Visual Studio 2022 podporován. Pokud chcete zobrazit uživatelské rozhraní WINUI 3 / .NET MAUI XAML a upravit je během běhu aplikace, použijte xaml Opětovné načítání za provozu pro WinUI 3 / .NET MAUI. Další informace najdete na stránce Opětovné načítání za provozu XAML.
Pracovní prostor Návrhář XAML
Pracovní prostor v Návrháři XAML se skládá z několika prvků vizuálního rozhraní. Patří sem kreslicí deska (což je plocha návrhu vizuálu), editor XAML, okno Osnova dokumentu (objekty a okno časové osy v Blend pro Visual Studio) a okno Vlastnosti. Návrhář XAML otevřete tak, že v Průzkumník řešení kliknete pravým tlačítkem na soubor XAML a zvolíte Návrhář zobrazení.
Návrhář XAML poskytuje zobrazení XAML a synchronizované návrhové zobrazení vykreslených značek XAML vaší aplikace. S otevřeným souborem XAML v sadě Visual Studio nebo Blend pro Visual Studio můžete přepínat mezi návrhovým zobrazením a zobrazením XAML pomocí karet Návrh a XAML. Pomocí tlačítka
Prohodit podokna můžete přepnout, které okno se zobrazí nahoře: buď na kreslicí tabuli, nebo v editoru XAML.
Návrhové zobrazení
V návrhovém zobrazení je okno obsahující kreslicí prkno aktivní okno a můžete ho použít jako primární pracovní plochu. Můžete ji použít k vizuálnímu návrhu stránky v aplikaci přidáním, kreslením nebo úpravou prvků. Další informace naleznete v tématu Práce s elementy v Návrháři XAML. Tento obrázek znázorňuje kreslicí prkno v návrhovém zobrazení.
V kreslicí tabuli jsou k dispozici tyto funkce:
Snaplines
Zarovnávací čáry jsou hranice zarovnání, které se zobrazují jako červeně přerušované čáry, které se zobrazí, když jsou okraje ovládacích prvků zarovnané nebo když jsou zarovnané účaří textu. Hranice zarovnání se zobrazí pouze při přichycení k přichycení k přichycené čáry.
Mřížkové lišty
Mřížkové lišty slouží ke správě řádků a sloupců na panelu Mřížka. Můžete vytvářet a odstraňovat řádky a sloupce a upravovat jejich relativní šířky a výšky. Svislá mřížka, která se zobrazí na levé straně kreslicí desky, se používá pro řádky a vodorovná čára, která se zobrazí v horní části, se používá pro sloupce.
Doplňky mřížky
Mřížka se zobrazí jako trojúhelník, který má svislou nebo vodorovnou čáru připojenou na mřížce. Při přetažení doplňku Mřížka se při pohybu myší aktualizují šířky nebo výšky sousedních sloupců nebo řádků.
Mřížkové doplňky slouží k řízení šířky a výšky řádků a sloupců mřížky. Kliknutím na mřížku můžete přidat nový sloupec nebo řádek. Když přidáte nový řádek nebo čáru sloupce pro panel Mřížka se dvěma nebo více sloupci nebo řádky, zobrazí se minipanel nástrojů mimo lištu, která umožňuje explicitně nastavit šířku a výšku. Minipanel nástrojů umožňuje nastavit možnosti nastavení velikosti pro řádky a sloupce mřížky.
Úchyty pro změnu velikosti
Úchyty pro změnu velikosti se zobrazí na vybraných ovládacích prvcích a umožňují změnit velikost ovládacího prvku. Při změně velikosti ovládacího prvku se hodnoty šířky a výšky obvykle zobrazují tak, aby vám pomohly určit velikost ovládacího prvku. Další informace o manipulaci s ovládacími prvky v návrhovém zobrazení naleznete v tématu Práce s prvky v Návrháři XAML.
Okraje
Okraje představují množství pevné mezery mezi okrajem ovládacího prvku a okrajem jeho kontejneru. Okraje ovládacího prvku můžete nastavit pomocí vlastností okrajů v části Rozložení v okně Vlastnosti.
Doplňky okrajů
K změně okrajů prvku vzhledem k kontejneru rozložení použijte doplňky okrajů. Pokud je otevřený adorner okrajů, není nastaven okraj a adorner okrajů zobrazuje poškozený řetězec. Pokud okraj není nastavený, zůstanou prvky na místě, když se kontejner rozložení změní v době běhu. Při zavření adorneru okrajů se zobrazí nepřerušený řetězec a prvky se přesunou s okrajem, protože kontejner rozložení se mění v době běhu (okraj zůstane pevný).
Úchyty elementů
Prvek můžete upravit pomocí úchytů prvků, které se zobrazí na kreslicí tabuli, když přesunete ukazatel nad rohy modrého pole, které obklopuje prvek. Tyto úchyty umožňují otočit, změnit velikost, překlopit, přesunout nebo přidat k prvku poloměr rohu. Symbol úchytu prvku se liší podle funkce a mění se v závislosti na přesném umístění ukazatele. Pokud úchyty elementu nevidíte, ujistěte se, že je vybraný prvek.
V návrhovém zobrazení jsou v levém dolním rohu okna k dispozici další příkazy kreslicí plochy, jak je znázorněno tady:
Tyto příkazy jsou k dispozici na tomto panelu nástrojů:
Zoom
Lupa umožňuje velikost návrhové plochy. Můžete zvětšit velikost od 12,5 % na 800 % nebo vybrat možnosti, jako je Přizpůsobit výběr a Přizpůsobit všem.
Zobrazit nebo skrýt mřížku přichycení
Zobrazí nebo skryje mřížku přichycení, která zobrazuje mřížku. Mřížka se používá, když povolíte přichycení k mřížce nebo přichycení k přichycení k zachytávání.
Zapnutí nebo vypnutí přichycení k mřížce
Pokud je přichycení k mřížce povolené, je prvek při přetažení na kreslicí desku obvykle zarovnaný s nejbližší vodorovnou a svislou mřížkou.
Přepnout pozadí kreslicí plochy
Přepíná mezi světlým a tmavým pozadím.
Zapnutí/vypnutí přichycení k přichycení
Přichycení pomáhá zarovnat ovládací prvky k sobě navzájem. Pokud je přichycení k přichyceným čarám povolené, zobrazí se při přetažení ovládacího prvku vzhledem k jiným ovládacím prvkům ohraničení, když jsou okraje a text některých ovládacích prvků zarovnaný vodorovně nebo svisle. Hranice zarovnání se zobrazí jako červená přerušovaná čára.
Zakázání kódu projektu
Zakáže kód projektu, například vlastní ovládací prvky a převaděče hodnot a znovu načte návrháře.
Zobrazení XAML
V zobrazení XAML je okno obsahující editor XAML aktivním oknem a editor XAML je vaším primárním nástrojem pro vytváření obsahu. Jazyk XAML (Extensible Application Markup Language) poskytuje deklarativní slovník založený na jazyce XML pro určení uživatelského rozhraní aplikace. Zobrazení XAML zahrnuje IntelliSense, automatické formátování, zvýrazňování syntaxe a navigaci značek. Následující obrázek znázorňuje zobrazení XAML s otevřenou nabídkou IntelliSense:
Okno Osnova dokumentu
Okno Osnova dokumentu v sadě Visual Studio se podobá okně Objekty a časová osa v Blend pro Visual Studio. Osnova dokumentu vám pomůže provádět tyto úlohy:
Umožňuje zobrazit hierarchickou strukturu všech prvků na kreslicí tabuli.
Vyberte prvky, abyste je mohli upravit. Můžete je například přesunout v hierarchii nebo nastavit jejich vlastnosti v okno Vlastnosti. Další informace naleznete v tématu Práce s elementy v Návrháři XAML.
Vytvořte a upravte šablony pro prvky, které jsou ovládacími prvky.
Vytváření animací (pouze Blend pro Visual Studio)
Pokud chcete zobrazit okno Osnova dokumentu v sadě Visual Studio, na řádku nabídek vyberte Zobrazit>další osnovu dokumentu systému Windows.> Pokud chcete zobrazit okno Objekty a časová osa v Blend pro Visual Studio, na řádku nabídek vyberte Zobrazit>osnovu dokumentu.
Hlavní zobrazení v okně Osnova dokumentu / Objekty a časová osa zobrazuje hierarchii dokumentu ve stromové struktuře. Hierarchickou povahu osnovy dokumentu můžete použít k prozkoumání dokumentu na různých úrovních podrobností a k zamknutí a skrytí prvků ingly nebo ve skupinách. V okně Osnova dokumentu a objekty a časová osa jsou k dispozici následující možnosti:
Zobrazit nebo skrýt
Zobrazí nebo skryje prvky kreslicí plochy. Zobrazí se jako symbol oka při zobrazení. Můžete také stisknout Ctrl+H a skrýt prvek a stisknutím shift+Ctrl+H ho zobrazit.
Uzamčení/odemknutí
Uzamkne nebo odemkne prvky kreslicí plochy. Uzamčené prvky nelze upravit. Při uzamčení se zobrazí jako symbol visacího zámku. Stisknutím kláves Ctrl+L můžete také uzamknout prvek a stisknutím kláves Shift+Ctrl+L ho odemknout.
Návrat oboru do pageRoot
Možnost v horní části okna Osnova nebo objekty dokumentu a časová osa, která zobrazuje symbol šipky nahoru, se přesune do předchozího oboru. Rozsah je použitelný jenom v případě, že jste v oboru stylu nebo šablony.
Vlastnosti – okno
Okno Vlastnosti umožňuje nastavit hodnoty vlastností u ovládacích prvků. Vypadá takto:
V horní části okna Vlastnosti jsou k dispozici různé možnosti:
- Změňte název aktuálně vybraného prvku v poli Název .
- V levém horním rohu je ikona, která představuje aktuálně vybraný prvek.
- Chcete-li uspořádat vlastnosti podle kategorie nebo abecedy, klikněte v seznamu Uspořádat podle kategorie na položku Kategorie, Název nebo Zdroj.
- Pokud chcete zobrazit seznam událostí ovládacího prvku, klikněte na tlačítko Události , které se zobrazí jako symbol blesku.
- Pokud chcete vyhledat vlastnost, začněte do vyhledávacího pole zadávat název vlastnosti. V okně Vlastnosti se při psaní zobrazí vlastnosti, které odpovídají vašemu hledání.
Některé vlastnosti umožňují nastavit upřesňující vlastnosti tak, že vyberete tlačítko šipky dolů.
Napravo od každé hodnoty vlastnosti je značka vlastnosti, která se zobrazí jako symbol pole. Vzhled značky vlastnosti označuje, jestli je u vlastnosti použitá datová vazba nebo prostředek. Například symbol prázdného pole označuje výchozí hodnotu, symbol černého rámečku obvykle označuje, že byl použit místní prostředek a oranžový rámeček obvykle označuje použití datové vazby. Když kliknete na značku vlastnosti, můžete přejít k definici stylu, otevřít tvůrce datových vazeb nebo otevřít výběr prostředku.
Další informace o používání vlastností a zpracování událostí naleznete v tématu Úvod k ovládacím prvkům a vzorům.