Az XAML-elrendezés optimalizálása

Fontos API-k

• Panel

Az elrendezés a felhasználói felület vizuális szerkezetének meghatározására szolgáló folyamat. Az XAML elrendezésének leírásának elsődleges mechanizmusa a panelek, amelyek tárolóobjektumok, amelyek lehetővé teszik a felhasználói felület elemeinek elhelyezését és elrendezését. Az elrendezés költséges része lehet a WinUI-alkalmazásoknak – mind a processzorhasználatban, mind a memóriaterhelésben. Íme néhány egyszerű lépés a WinUI-alkalmazás elrendezési teljesítményének javítása érdekében.

Az elrendezés szerkezetének csökkentése

Az elrendezési teljesítmény legnagyobb nyeresége a felhasználói felület elemeinek hierarchikus szerkezetének leegyszerűsítése. A panelek a vizuális fában léteznek, de szerkezeti elemek, nem képpontokat létrehozó elemek, mint például egy gomb vagy egy téglalap. A fa egyszerűsítése a nem képpontos elemek számának csökkentésével általában jelentős teljesítménynövekedést eredményez.

Számos WinUI felhasználói felületet a beágyazott panelek valósítanak meg, amelyek a panelek és elemek mély, összetett fáit eredményezik. Kényelmes a panelek beágyazása, de sok esetben ugyanaz a felhasználói felület érhető el egy összetettebb egyetlen panellel. Egyetlen panel használata jobb teljesítményt nyújt.

Mikor kell csökkenteni az elrendezés struktúráját?

Az elrendezési struktúra triviális csökkentése – például egy beágyazott panel csökkentése a felső szintű oldalról – nem érzékelhető hatással van.

A legnagyobb teljesítménynövekedés a felhasználói felületen ismétlődő elrendezési struktúra csökkentéséből ered, például a ListView-ban vagy a GridView-ban. Ezek az ItemsControl-elemekegy DataTemplate-ot használnak, amely a sokszor példányosított felhasználói felületi elemek egy részhalmazát határozza meg. Ha ugyanazt a részösszeget többször duplikálja az alkalmazásban, a részösszeg teljesítményének bármilyen javítása többszörös hatással van az alkalmazás általános teljesítményére.

Examples

Vegye figyelembe az alábbi felhasználói felületet.

Ezek a példák 3 módszert mutatnak be ugyanazon felhasználói felület implementálására. Minden implementálási választás majdnem azonos képpontokat eredményez a képernyőn, de jelentősen eltér a megvalósítás részleteiben.

1. lehetőség: Beágyazott StackPanel-elemek

Bár ez a legegyszerűbb modell, 5 panelelemet használ, és jelentős többletterhelést eredményez.

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

2. lehetőség: Egyetlen rács

A Rács némi összetettséggel rendelkezik, de csak egyetlen panelelemet használ.

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

3. lehetőség: Egyetlen RelativePanel

Ez az egyetlen panel egy kicsit összetettebb, mint a beágyazott panelek használata, de könnyebben érthető és karbantartható, mint a Rács.

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

Ahogy ezek a példák is mutatják, számos módon lehet elérni ugyanazt a felhasználói felületet. Úgy kell választania, hogy gondosan mérlegeli az összes kompromisszumot, beleértve a teljesítményt, az olvashatóságot és a karbantarthatóságot.

Egycellás rácsok használata átfedésben lévő felhasználói felületen

A felhasználói felület általános követelménye, hogy olyan elrendezéssel rendelkezzen, amelyben az elemek átfedésben vannak egymással. Általában a párnázás, a margók, az igazítások és az átalakítások az elemek ily módon való elhelyezésére szolgálnak. Az XAML Grid vezérlő úgy van optimalizálva, hogy javítsa az elrendezés teljesítményét az átfedésben lévő elemek esetében.

Fontos A javulás megtekintéséhez használjon egy cellás rácsot. Ne definiáljon RowDefinitions vagy ColumnDefinitions függvényeket.

Examples

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

Panel beépített szegélytulajdonságainak használata

A Grid, a StackPanel, a RelativePanel és a ContentPresenter vezérlők beépített szegélytulajdonságokkal rendelkeznek, amelyekkel szegélyt rajzolhat körülöttük anélkül, hogy további Border elemet ad hozzá az XAML-hez. A beépített szegélyt támogató új tulajdonságok a következők: BorderBrush, BorderThickness, CornerRadius és Padding. Ezek mindegyike egy DependencyProperty, így kötésekkel és animációkkal is használhatja őket. Úgy vannak kialakítva, hogy egy külön szegélyelem teljes cseréjére szolgálnak.

Ha a felhasználói felületen szegélyelemek vannak a panelek körül, használja helyette a beépített szegélyt, amely egy további elemet takarít meg az alkalmazás elrendezési szerkezetében. Ahogy korábban említettük, ez jelentős megtakarítást jelenthet, különösen ismétlődő felhasználói felület esetén.

Examples

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

A SizeChanged eseményekkel reagálhat az elrendezés változásaira

A FrameworkElement osztály két hasonló eseményt tesz elérhetővé az elrendezésváltozások megválaszolásához: LayoutUpdated és SizeChanged. Előfordulhat, hogy ezen események egyikével kap értesítést, ha egy elem átméreteződik az elrendezés során. A két esemény szemantikája eltérő, és fontos teljesítménybeli szempontokat kell választani közöttük.

A jó teljesítmény érdekében a SizeChanged szinte mindig a megfelelő választás. SizeChanged rendelkezik intuitív szemantikával. Ez az elrendezés során merül fel, amikor a FrameworkElement mérete frissült.

Az LayoutUpdated az elrendezés során is fel van emelve, de globális szemantikával rendelkezik – minden elemnél elő van emelve, amikor bármilyen elem frissül. Jellemző, hogy csak helyi feldolgozást végez az eseménykezelőben, ebben az esetben a kód a szükségesnél gyakrabban fut. Az LayoutUpdated parancsot csak akkor használja, ha tudnia kell, hogy egy elem mikor van áthelyezve a méret módosítása nélkül (ami nem gyakori).

Választás a panelek között

A teljesítmény általában nem számít az egyes panelek közötti választáskor. Ez a választás általában úgy történik, hogy figyelembe veszi, hogy melyik panel biztosítja a implementálandó felhasználói felülethez legközelebb eső elrendezési viselkedést. Ha például a Grid, a StackPanel és a RelativePanel közötti választást választja, válassza ki azt a panelt, amely a legközelebbi leképezést biztosítja az implementáció mentális modelljéhez.

Minden XAML-panel jó teljesítményre van optimalizálva, és minden panel hasonló teljesítményt nyújt a hasonló felhasználói felülethez.