Sdílet prostřednictvím

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 XAML – v režii procesoru i paměti. Tady je několik jednoduchých kroků, které můžete provést, abyste zlepšili výkon rozložení aplikace XAML.

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í. Panely existují ve vizuálním stromu, ale jsou to strukturální prvky, nikoli prvky produkující 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í je implementováno vnořením panelů, které mají za následek hluboké, složité stromy panelů a prvků. Je vhodné vkládat panely, ale v mnoha případech lze téhož 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 ItemsControl prvky používají DataTemplate, který definuje podstrom prvků uživatelského rozhraní, jenž je inicializován mnohokrát. Pokud je stejný podstrom v aplikaci duplikován mnohokrát, 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í.

Příklad rozložení formuláře

Tyto příklady ukazují tři 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žnost1: Vnořené prvky StackPanel

I když se jedná o nejjednodušší model, používá 5 panelových prvků a způsobuje výraznou režii.

  <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 jediný panel je také o něco složitější než použití vnořených panelů, ale může být srozumitelnější a snazší na údržbu než Grid.

<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 XAML Grid je optimalizovaný pro zlepšení výkonnosti při rozložení prvků, které se překrývají.

Důležité Chcete-li zobrazit zlepšení, použijte jednobuňkovou 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>

Překryvný text v kruhu 

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

Dva textové bloky v mřížce

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, CornerRadiusa Padding. 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í prvky ohraničení kolem těchto panelů, použijte místo toho předdefinované ohraničení, což ušetří jeden prvek ve struktuře 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. Můžete používat některou z těchto událostí k získání oznámení, když se během rozložení změní velikost elementu. 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. K aktivaci dochází při rozložení, když dojde k aktualizaci velikosti FrameworkElement.

LayoutUpdated je vyvolán také během rozložení, ale má globální sémantiku – je vyvolán na každém prvku při každé aktualizaci 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é).

Volba mezi panely

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

  • Last updated on