Poznámka:
Přístup k této stránce vyžaduje autorizaci. Můžete se zkusit přihlásit nebo změnit adresáře.
Přístup k této stránce vyžaduje autorizaci. Můžete zkusit změnit adresáře.
Systém rozložení XAML poskytuje automatickou změnu velikosti prvků, panelů rozložení a vizuálních stavů, které vám pomůžou vytvořit responzivní uživatelské rozhraní. Díky responzivnímu rozložení můžete aplikaci skvěle vypadat na obrazovkách s různými velikostmi oken aplikací, rozlišeními, hustotami pixelů a orientací. Xaml můžete také použít k přemístění, změně velikosti, přeformátování, zobrazení nebo skrytí, nahrazení nebo opětovnému návrhu uživatelského rozhraní aplikace, jak je popsáno v technikách responzivního návrhu. Tady probereme, jak implementovat responzivní rozložení pomocí XAML.
Rozložení tekutin s vlastnostmi a panely
Základem responzivního rozložení je vhodné použít vlastnosti a panely rozložení XAML k přemístění, změně velikosti a přeformátování obsahu plynulým způsobem.
Systém rozložení XAML podporuje statické i fluidní rozložení. Ve statickém rozložení dáváte ovládacím prvkům explicitní velikosti a pozice pixelů. Když uživatel změní rozlišení nebo orientaci zařízení, uživatelské rozhraní se nezmění. Statická rozvržení mohou být zkrácena na různých formátech a velikostech displeje. Na druhou stranu se rozložení tekutin zmenšují, zvětšují a přeformátují, aby reagovaly na vizuální prostor dostupný na zařízení.
V praxi použijete kombinaci statických a fluidních prvků k vytvoření uživatelského rozhraní. Na některých místech stále používáte statické prvky a hodnoty, ale ujistěte se, že celkové uživatelské rozhraní reaguje na různá rozlišení, velikosti obrazovky a zobrazení.
V této části probereme, jak pomocí vlastností XAML a panelů rozložení vytvořit rozložení tekutin.
Vlastnosti rozložení
Vlastnosti rozložení určují velikost a umístění prvku. Chcete-li vytvořit pružné rozložení, použijte automatické nebo proporcionální určení velikosti prvků a umožněte, aby panely rozvržení dynamicky podle potřeby umístily své podřízené položky.
Tady jsou některé běžné vlastnosti rozložení a jejich použití k vytváření rozložení tekutin.
Výška a šířka
Vlastnosti Height and Width určují velikost prvku. Můžete použít pevné hodnoty měřené v efektivních pixelech nebo můžete použít automatickou nebo proporcionální velikost.
Při automatické změně velikosti se změní velikost prvků uživatelského rozhraní tak, aby odpovídaly jejich obsahu nebo nadřazeného kontejneru. Automatické nastavení velikosti můžete použít také s řádky a sloupci mřížky. Pokud chcete použít automatické nastavení velikosti, nastavte výšku a/nebo šířku prvků uživatelského rozhraní na hodnotu Automaticky.
Poznámka:
Zda se element přizpůsobí svému obsahu nebo svému kontejneru závisí na tom, jak nadřazený kontejner zpracovává velikost svých podřízených objektů. Další informace najdete v části Panely rozložení dále v tomto článku.
Proporcionální velikost, označovaná také jako velikost hvězdic, distribuuje dostupné místo mezi řádky a sloupce mřížky podle vážených poměrů. V jazyce XAML jsou hodnoty hvězdy vyjádřeny jako * (nebo n* pro váženou velikost hvězdy). Pokud chcete například určit, že jeden sloupec je 5krát širší než druhý sloupec v rozložení se 2 sloupci, použijte pro vlastnosti Width v elementech ColumnDefinition hodnotu "5*" a "*".
Tento příklad kombinuje pevnou, automatickou a proporcionální změnu velikosti v mřížce se 4 sloupci.
| Sloupec | Sizing | Description |
|---|---|---|
| Sloupec_1 | Automatické | Sloupec se přizpůsobí jeho obsahu. |
| Sloupec_2 | * | Po výpočtu automatických sloupců získá sloupec část zbývající šířky. Column_2 bude jedna polovina stejně široká jako Column_4. |
| Sloupec_3 | 44 | Sloupec bude široký 44 pixelů. |
| Sloupec_4 | 2* | Po výpočtu automatických sloupců získá sloupec část zbývající šířky. Column_4 bude dvakrát širší než Column_2. |
Výchozí šířka sloupce je *, takže tuto hodnotu nemusíte explicitně nastavit pro druhý sloupec.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>
Chcete-li získat velikost elementu za běhu, použijte vlastnosti ActualHeight a ActualWidth jen pro čtení místo Height a Width.
Omezení velikosti
Pokud v uživatelském rozhraní použijete automatické nastavení velikosti, možná budete muset nastavit omezení velikosti prvku. Vlastnosti MinWidth/MaxWidth a MinHeight/MaxHeight můžete nastavit tak, že zadáte hodnoty, které omezují velikost prvku, zatímco umožňují plynulé změny velikosti.
V mřížce lze také použít MinWidth/MaxWidth s definicemi sloupců a MinHeight/MaxHeight lze použít s definicemi řádků.
Zarovnání
Pomocí HorizontalAlignment a VerticalAlignment vlastnosti určit, jak má být prvek umístěn v nadřazeném kontejneru.
- Hodnoty pro HorizontalAlignment jsou Left, Center, Right a Stretch.
- Hodnoty pro VerticalAlignment jsou Top, Center, Bottom a Stretch.
S zarovnáním Stretch prvky zaplní veškerý prostor, který je k dispozici v nadřazeném kontejneru. Funkce Stretch je výchozí pro obě vlastnosti zarovnání. Některé ovládací prvky, jako například Button, ale ve svém výchozím stylu tuto hodnotu přepíší. Každý prvek, který může mít podřízené elementy, může s hodnotou Stretch u vlastností HorizontalAlignment a VerticalAlignment zacházet jedinečně. Například prvek, který používá výchozí hodnoty pro roztažení a je umístěn v mřížce, se roztáhne tak, aby vyplnil buňku, která ho obsahuje. Stejný prvek umístěný v plátně se přizpůsobí své velikosti obsahu. Další informace o tom, jak jednotlivé panely zpracovávají hodnotu Stretch, najdete v článku Panely rozložení .
Další informace najdete v článku o zarovnání, okraji a odsazení a na referenčních stránkách HorizontalAlignment a VerticalAlignment.
Viditelnost
Prvek můžete zobrazit nebo skrýt nastavením vlastnosti Visibility na jednu z hodnot výčtu Viditelnost: Visible nebo Collapsed. Když je prvek sbalený, nezabírá žádné místo v uspořádání uživatelského rozhraní.
Vlastnost Visibility elementu můžete změnit v kódu nebo ve vizuálním stavu. Při změně viditelnosti elementu se změní i všechny jeho podřízené prvky. Oddíly uživatelského rozhraní můžete nahradit zobrazením jednoho panelu při sbalení jiného panelu.
Návod
Pokud máte ve svém uživatelském rozhraní prvky, které jsou ve výchozím nastavení sbalené , objekty se stále vytvářejí při spuštění, i když nejsou viditelné. Načtení těchto prvků můžete odložit, dokud se nezobrazí pomocí atributu x:Load , který zpozdí vytvoření objektů. To může zlepšit výkon při spuštění. Další informace najdete v atributu x:Load.
Prostředky stylů
U ovládacího prvku nemusíte nastavovat každou hodnotu vlastnosti jednotlivě. Obvykle je efektivnější seskupit hodnoty vlastností do prostředku Style a použít styl na ovládací prvek. To platí zejména v případě, že potřebujete použít stejné hodnoty vlastností pro mnoho ovládacích prvků. Další informace o používání stylů naleznete v tématu Styly ovládací prvky.
Rozvržení panelů
Pokud chcete umístit vizuální objekty, musíte je umístit do panelu nebo jiného objektu kontejneru. Architektura XAML poskytuje různé třídy panelů, jako jsou Canvas, Grid, RelativePanel a StackPanel, které slouží jako kontejnery a umožňují umístit a uspořádat prvky uživatelského rozhraní v nich.
Při výběru panelu rozložení je klíčové zvážit, jak panel umísťuje a velikostně přizpůsobuje své podřízené prvky. Možná budete také muset zvážit, jak jsou překrývající se podřízené prvky vrstvené nad sebou.
Tady je porovnání hlavních funkcí ovládacích prvků panelu poskytovaných v rozhraní XAML.
| Ovládací panel | Description |
|---|---|
| Plátno |
Plátno nepodporuje dynamické uživatelské rozhraní; řídíte všechny aspekty umístění a velikosti podřízených prvků. Obvykle ho používáte pro speciální případy, jako je vytváření grafiky nebo definování malých statických oblastí většího adaptivního uživatelského rozhraní. K přemísťování prvků za běhu můžete použít kód nebo vizuální stavy. |
| Mřížka |
Mřížka podporuje fluidní změnu velikosti podřízených prvků. Pomocí kódu nebo vizuálních stavů můžete přemístit a přeformátovat prvky. |
| RelativePanel | |
| StackPanel | |
| VariableSizedWrapGrid |
Podrobné informace a příklady těchto panelů najdete v tématu Panely rozložení.
Panely rozložení umožňují uspořádat uživatelské rozhraní do logických skupin ovládacích prvků. Když je použijete s příslušnými nastaveními vlastností, získáte podporu automatické změny velikosti, přemístění a přeformátování prvků uživatelského rozhraní. Většina rozložení uživatelského rozhraní ale potřebuje další úpravy, pokud dojde k významným změnám velikosti okna. K tomu můžete použít vizuální stavy.
Adaptivní rozložení s vizuálními stavy a spouštěči stavu
Pomocí vizuálních stavů můžete provádět významné změny uživatelského rozhraní na základě velikosti okna nebo jiných změn.
Když se okno aplikace rozroste nebo zmenší nad určitou částku, můžete chtít změnit vlastnosti rozložení tak, aby se změnilo umístění, změna velikosti, přeformátování, zobrazení nebo nahrazení oddílů uživatelského rozhraní. Pro uživatelské rozhraní můžete definovat různé stavy vizuálů a použít je, když šířka okna nebo výška okna překročí zadanou prahovou hodnotu.
VisualState definuje hodnoty vlastností, které se použijí na element, když je v určitém stavu. Seskupíte vizuální stavy v objektu VisualStateManager , který použije odpovídající VisualState při splnění zadaných podmínek. AdaptiveTrigger poskytuje snadný způsob, jak nastavit prahovou hodnotu (označovanou také jako zarážka), při které se použije stav v XAML. Nebo můžete v kódu volat metodu VisualStateManager.GoToState , která použije vizuální stav. Příklady obou způsobů jsou uvedené v dalších částech.
Nastavení vizuálních stavů v kódu
Chcete-li použít vizuální stav z kódu, zavolejte metodu VisualStateManager.GoToState. Pokud chcete například použít stav v případě, že je okno aplikace určitou velikostí, zpracujte událost SizeChanged a zavolejte GoToState , aby se použil příslušný stav.
V tomto případě visualStateGroup obsahuje dvě definice VisualState. První, DefaultStateje prázdný. Po použití se použijí hodnoty definované na stránce XAML. Druhý, WideState, změní DisplayMode vlastnost SplitView na Vložený a otevře podokno. Tento stav se použije v obslužné rutině události SizeChanged, pokud je šířka okna větší než 640 efektivních pixelů.
Poznámka:
Windows nenabízí způsob, jak vaše aplikace rozpoznat konkrétní zařízení, na kterém je vaše aplikace spuštěná. Může vám říct efektivní rozlišení a velikost místa na obrazovce dostupné aplikaci (velikost okna aplikace). Doporučujeme definovat vizuální stavy pro velikosti obrazovky a zarážky.
<Page ...
SizeChanged="Page_SizeChanged">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultState">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="WideState">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="SplitView.DisplayMode"
Storyboard.TargetName="mySplitView">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SplitViewDisplayMode>Inline</SplitViewDisplayMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="SplitView.IsPaneOpen"
Storyboard.TargetName="mySplitView">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView x:Name="mySplitView" DisplayMode="CompactInline"
IsPaneOpen="False" CompactPaneLength="20">
<!-- SplitView content -->
<SplitView.Pane>
<!-- Pane content -->
</SplitView.Pane>
</SplitView>
</Grid>
</Page>
private void Page_SizeChanged(object sender, Microsoft.UI.Xaml.SizeChangedEventArgs e)
{
if (e.Size.Width > 640)
VisualStateManager.GoToState(this, "WideState", false);
else
VisualStateManager.GoToState(this, "DefaultState", false);
}
// YourPage.h
void Page_SizeChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::SizeChangedEventArgs const& e);
// YourPage.cpp
void YourPage::Page_SizeChanged(IInspectable const& sender, SizeChangedEventArgs const& e)
{
if (e.NewSize.Width > 640)
VisualStateManager::GoToState(*this, "WideState", false);
else
VisualStateManager::GoToState(*this, "DefaultState", false);
}
Nastavení stavů vizuálů v kódu XAML
Před Windows 10 vyžadovaly definice VisualState Storyboard objekty pro změny vlastností a museli jste volat GoToState v kódu, aby se použil stav. To je znázorněno v předchozím příkladu. Stále uvidíte mnoho příkladů, které tuto syntaxi používají, nebo máte existující kód, který ji používá.
Počínaje Windows 10 můžete použít zjednodušenou syntaxi Setter zobrazené zde a k použití stavu můžete použít StateTrigger ve vašem XAML označení. Spouštěče stavu slouží k vytvoření jednoduchých pravidel, která automaticky aktivují změny vizuálního stavu v reakci na událost aplikace.
Tento příklad dělá totéž jako předchozí příklad, ale používá zjednodušenou syntaxi Setter místo scénáře k definování změn vlastností. Místo volání GoToState používá vestavěný stavový spouštěč AdaptiveTrigger, aby aplikoval stav. Při použití stavových spouštěčů nemusíte definovat prázdný DefaultState. Výchozí nastavení se znovu použije automaticky, když už nejsou splněny podmínky aktivační události stavu.
<Page ...>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when the
window width is >=640 effective pixels. -->
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="mySplitView.DisplayMode" Value="Inline"/>
<Setter Target="mySplitView.IsPaneOpen" Value="True"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView x:Name="mySplitView" DisplayMode="CompactInline"
IsPaneOpen="False" CompactPaneLength="20">
<!-- SplitView content -->
<SplitView.Pane>
<!-- Pane content -->
</SplitView.Pane>
</SplitView>
</Grid>
</Page>
Důležité
V předchozím příkladu je připojená vlastnost VisualStateManager.VisualStateGroups nastavena na Element Grid . Pokud používáte StateTriggers, vždy se ujistěte, že VisualStateGroups je připojen k prvnímu potomkovi kořenového adresáře, aby se triggery automaticky projevily. (V této části je mřížka prvním podřízeným prvkem kořenové stránky .)
Syntaxe připojených vlastností
Ve VisualState obvykle nastavíte hodnotu pro vlastnost ovládacího prvku nebo pro jednu z připojených vlastností panelu, který obsahuje ovládací prvek. Při nastavování připojené vlastnosti použijte závorky kolem názvu připojené vlastnosti.
Tento příklad ukazuje, jak nastavit RelativePanel.AlignHorizontalCenterWithPanel připojenou vlastnost v TextBox s názvem myTextBox. První XAML používá syntaxi ObjectAnimationUsingKeyFrames a druhá používá syntaxi Setter .
<!-- Set an attached property using ObjectAnimationUsingKeyFrames. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(RelativePanel.AlignHorizontalCenterWithPanel)"
Storyboard.TargetName="myTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
<!-- Set an attached property using Setter. -->
<Setter Target="myTextBox.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>
Vlastní spouštěče stavu
Třídu StateTrigger můžete rozšířit tak, aby vytvářela vlastní triggery pro širokou škálu scénářů. Můžete například vytvořit StateTrigger, který aktivuje různé stavy na základě typu vstupu a pak zvýší okraje kolem ovládacího prvku, když je typ vstupu dotykového ovládání. Nebo vytvořte StateTrigger pro použití různých stavů na základě řady zařízení, na které je aplikace spuštěná. Příklady vytváření vlastních triggerů a jejich použití k vytváření optimalizovaných prostředí uživatelského rozhraní v jednom zobrazení XAML najdete v ukázce triggerů State triggery.
Vizuální stavy a styly
Stylové prostředky můžete využívat ve vizuálních stavech, abyste aplikovali sadu změn vlastností na více ovládacích prvků. Další informace o používání stylů naleznete v tématu Styly ovládací prvky.
V tomto zjednodušeném kódu XAML z ukázky stavových spouštěčů se prostředek stylu použije na tlačítko, aby se upravila velikost a okraje pro vstup myší nebo dotykem. Úplný kód a definici vlastního triggeru stavu najdete v ukázce State triggers.
<Page ... >
<Page.Resources>
<!-- Styles to be used for mouse vs. touch/pen hit targets -->
<Style x:Key="MouseStyle" TargetType="Rectangle">
<Setter Property="Margin" Value="5" />
<Setter Property="Height" Value="20" />
<Setter Property="Width" Value="20" />
</Style>
<Style x:Key="TouchPenStyle" TargetType="Rectangle">
<Setter Property="Margin" Value="15" />
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="40" />
</Style>
</Page.Resources>
<RelativePanel>
<!-- ... -->
<Button Content="Color Palette Button" x:Name="MenuButton">
<Button.Flyout>
<Flyout Placement="Bottom">
<RelativePanel>
<Rectangle Name="BlueRect" Fill="Blue"/>
<Rectangle Name="GreenRect" Fill="Green" RelativePanel.RightOf="BlueRect" />
<!-- ... -->
</RelativePanel>
</Flyout>
</Button.Flyout>
</Button>
<!-- ... -->
</RelativePanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="InputTypeStates">
<!-- Second set of VisualStates for building responsive UI optimized for input type.
Take a look at InputTypeTrigger.cs class in CustomTriggers folder to see how this is implemented. -->
<VisualState>
<VisualState.StateTriggers>
<!-- This trigger indicates that this VisualState is to be applied when MenuButton is invoked using a mouse. -->
<triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Mouse" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BlueRect.Style" Value="{StaticResource MouseStyle}" />
<Setter Target="GreenRect.Style" Value="{StaticResource MouseStyle}" />
<!-- ... -->
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- Multiple trigger statements can be declared in the following way to imply OR usage.
For example, the following statements indicate that this VisualState is to be applied when MenuButton is invoked using Touch OR Pen.-->
<triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Touch" />
<triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Pen" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BlueRect.Style" Value="{StaticResource TouchPenStyle}" />
<Setter Target="GreenRect.Style" Value="{StaticResource TouchPenStyle}" />
<!-- ... -->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Page>
Související témata
- Ukázka triggerů stavu (GitHub)
- Přizpůsobený příklad více zobrazení (GitHub)
Spolupracujte s námi na GitHubu
Zdroj tohoto obsahu najdete na GitHubu, kde můžete také vytvářet a kontrolovat problémy a žádosti o přijetí změn. Další informace najdete v našem průvodci pro přispěvatele.
Windows developer