Optimalizace rozložení XAML

důležitá rozhraní API

• panelu

Rozložení je proces definování vizuální struktury pro vaše uživatelské rozhraní. Primárním mechanismem pro popis rozložení v XAML jsou panely, což jsou objekty kontejneru, které umožňují umístit a uspořádat prvky uživatelského rozhraní v nich. Rozložení může být nákladnou součástí aplikace WinUI – jak při využití procesoru, tak i režii na paměť. Tady je několik jednoduchých kroků, které můžete provést, abyste zlepšili výkon rozložení aplikace WinUI.

Zmenšení struktury rozložení

Největší nárůst výkonu rozložení spočívá v zjednodušení hierarchické struktury stromu prvků uživatelského rozhraní. Vizuální stromy obsahují panely, které jsou však strukturálními prvky, nikoli prvky vytvářejícími pixely, jako je tlačítko nebo obdélník. Zjednodušení stromu snížením počtu neprodukčních prvků, které nejsou pixely, obvykle představuje významné zvýšení výkonu.

Mnoho uživatelských rozhraní WinUI se implementuje pomocí vnořených panelů, což vede k hlubokému a komplexnímu stromu panelů a prvků. Je vhodné vnořit panely, ale v mnoha případech lze stejného efektu uživatelského rozhraní dosáhnout jedním složitějším panelem. Použití jednoho panelu poskytuje lepší výkon.

Kdy snížit strukturu rozložení

Zmenšení struktury rozložení triviálním způsobem , například zmenšení jednoho vnořeného panelu ze stránky nejvyšší úrovně, nemá znatelný efekt.

Největší zvýšení výkonu pochází z omezení struktury rozložení, která se opakuje v uživatelském rozhraní, jako je ListView nebo GridView. Tyto elementy ItemsControl používají DataTemplate, který definuje podstrom prvků uživatelského rozhraní, jenž je instancován mnohokrát. Pokud se stejný podstrom v aplikaci několikrát duplikuje, všechna vylepšení výkonu tohoto podstromu mají multiplikativní vliv na celkový výkon vaší aplikace.

Příklady

Zvažte následující uživatelské rozhraní.

Tyto příklady ukazují 3 způsoby implementace stejného uživatelského rozhraní. Každá volba implementace má na obrazovce téměř identické pixely, ale výrazně se liší v podrobnostech implementace.

Možnost 1: Vnořené elementy StackPanel

I když se jedná o nejjednodušší model, používá 5 panelových prvků a vede k významným režijním nákladům.

  <StackPanel>
  <TextBlock Text="Options:" />
  <StackPanel Orientation="Horizontal">
      <CheckBox Content="Power User" />
      <CheckBox Content="Admin" Margin="20,0,0,0" />
  </StackPanel>
  <TextBlock Text="Basic information:" />
  <StackPanel Orientation="Horizontal">
      <TextBlock Text="Name:" Width="75" />
      <TextBox Width="200" />
  </StackPanel>
  <StackPanel Orientation="Horizontal">
      <TextBlock Text="Email:" Width="75" />
      <TextBox Width="200" />
  </StackPanel>
  <StackPanel Orientation="Horizontal">
      <TextBlock Text="Password:" Width="75" />
      <TextBox Width="200" />
  </StackPanel>
  <Button Content="Save" />
</StackPanel>

Možnost 2: Jedna mřížka

Mřížka přidává určitou složitost, ale používá pouze jeden prvek panelu.

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <TextBlock Text="Options:" Grid.ColumnSpan="2" />
  <CheckBox Content="Power User" Grid.Row="1" Grid.ColumnSpan="2" />
  <CheckBox Content="Admin" Margin="150,0,0,0" Grid.Row="1" Grid.ColumnSpan="2" />
  <TextBlock Text="Basic information:" Grid.Row="2" Grid.ColumnSpan="2" />
  <TextBlock Text="Name:" Width="75" Grid.Row="3" />
  <TextBox Width="200" Grid.Row="3" Grid.Column="1" />
  <TextBlock Text="Email:" Width="75" Grid.Row="4" />
  <TextBox Width="200" Grid.Row="4" Grid.Column="1" />
  <TextBlock Text="Password:" Width="75" Grid.Row="5" />
  <TextBox Width="200" Grid.Row="5" Grid.Column="1" />
  <Button Content="Save" Grid.Row="6" />
</Grid>

Možnost 3: Jeden RelativePanel

Tento jeden panel je také o něco složitější než použití vnořených panelů, ale může být snazší na pochopení a údržbu než mřížka.

<RelativePanel>
  <TextBlock Text="Options:" x:Name="Options" />
  <CheckBox Content="Power User" x:Name="PowerUser" RelativePanel.Below="Options" />
  <CheckBox Content="Admin" Margin="20,0,0,0" 
            RelativePanel.RightOf="PowerUser" RelativePanel.Below="Options" />
  <TextBlock Text="Basic information:" x:Name="BasicInformation"
           RelativePanel.Below="PowerUser" />
  <TextBlock Text="Name:" RelativePanel.AlignVerticalCenterWith="NameBox" />
  <TextBox Width="200" Margin="75,0,0,0" x:Name="NameBox"               
           RelativePanel.Below="BasicInformation" />
  <TextBlock Text="Email:"  RelativePanel.AlignVerticalCenterWith="EmailBox" />
  <TextBox Width="200" Margin="75,0,0,0" x:Name="EmailBox"
           RelativePanel.Below="NameBox" />
  <TextBlock Text="Password:" RelativePanel.AlignVerticalCenterWith="PasswordBox" />
  <TextBox Width="200" Margin="75,0,0,0" x:Name="PasswordBox"
           RelativePanel.Below="EmailBox" />
  <Button Content="Save" RelativePanel.Below="PasswordBox" />
</RelativePanel>

Jak ukazují tyto příklady, existuje mnoho způsobů, jak dosáhnout stejného uživatelského rozhraní. Měli byste se rozhodnout pečlivě zvážit všechny kompromisy, včetně výkonu, čitelnosti a udržovatelnosti.

Použití jedno buňkové mřížky pro překrývající se uživatelské rozhraní

Běžným požadavkem uživatelského rozhraní je mít rozložení, ve kterém se prvky vzájemně překrývají. K umístění prvků tímto způsobem se obvykle používají odsazení, okraje, zarovnání a transformace. Ovládací prvek Mřížka XAML je optimalizovaný pro zlepšení výkonu rozložení prvků, které se překrývají.

Důležité Pokud chcete vidět zlepšení, použijte jednobíňovou mřížku. Nedefinujte definice RowDefinitions ani ColumnDefinitions.

Příklady

<Grid>
    <Ellipse Fill="Red" Width="200" Height="200" />
    <TextBlock Text="Test" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" />
</Grid>

<Grid Width="200" BorderBrush="Black" BorderThickness="1">
    <TextBlock Text="Test1" HorizontalAlignment="Left" />
    <TextBlock Text="Test2" HorizontalAlignment="Right" />
</Grid>

Použití předdefinovaných vlastností ohraničení panelu

Ovládací prvky Grid, StackPanel, RelativePanel a ContentPresenter mají předdefinované vlastnosti ohraničení, které umožňují nakreslit kolem nich ohraničení, aniž byste do XAML přidali další prvek Border . Nové vlastnosti, které podporují předdefinované ohraničení, jsou: BorderBrush, BorderThickness, CornerRadius a Odsazení. Každý z nich je DependencyProperty, takže je můžete použít s vazbami a animacemi. Jsou navržené tak, aby byly úplnou náhradou samostatného prvku Border .

Pokud má vaše uživatelské rozhraní kolem těchto panelů prvky ohraničení , použijte místo toho předdefinované ohraničení, které uloží další prvek do struktury rozložení vaší aplikace. Jak už jsme zmínili dříve, může to být významné úspory, zejména v případě opakovaného uživatelského rozhraní.

Příklady

<RelativePanel BorderBrush="Red" BorderThickness="2" CornerRadius="10" Padding="12">
    <TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
    <Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>

Reakce na změny rozložení pomocí událostí SizeChanged

FrameworkElement třída zveřejňuje dvě podobné události pro reagování na změny rozložení: LayoutUpdated a SizeChanged. Možná používáte některou z těchto událostí k obdržení oznámení, když je prvek během rozložení změněn velikost. Sémantika těchto dvou událostí se liší a při výběru mezi nimi jsou důležité aspekty výkonu.

Pro dobrý výkon je SizeChanged téměř vždy správnou volbou. SizeChanged má intuitivní sémantiku. Během rozložení se vyvolá, když je aktualizována velikost FrameworkElement.

LayoutUpdated je také vyvolán během rozložení, ale má globální sémantiku – je vyvolána na každém prvku při každé aktualizaci jakéhokoli prvku. V obslužné rutině události je typické provádět pouze místní zpracování, v takovém případě se kód spouští častěji, než je potřeba. Funkci LayoutUpdated použijte pouze v případě, že potřebujete vědět, kdy je prvek přemísťován bez změny velikosti (což je neobvyklé).

Výběr mezi panelmi

Při výběru mezi jednotlivými panely obvykle není potřeba brát v úvahu výkon. Tato volba se obvykle provádí zvážením toho, který panel poskytuje chování rozložení, které je nejblíže uživatelskému rozhraní, které implementujete. Pokud například vybíráte mezi objekty Grid, StackPanel a RelativePanel, měli byste zvolit panel, který poskytuje nejbližší mapování k vašemu mentálnímu modelu implementace.

Každý panel XAML je optimalizovaný pro dobrý výkon a všechny panely poskytují podobný výkon pro podobné uživatelské rozhraní.