Dela via

Optimera din XAML-layout

viktiga API:er

Layout är processen för att definiera den visuella strukturen för användargränssnittet. Den primära mekanismen för att beskriva layouten i XAML är via paneler, som är containerobjekt som gör att du kan placera och ordna gränssnittselementen i dem. Layout kan vara en dyr del av en XAML-app – både i CPU-användning och minnesomkostnader. Här följer några enkla steg som du kan vidta för att förbättra layoutprestandan för din XAML-app.

Minska layoutens struktur

Den största vinsten i layoutprestanda kommer från att förenkla den hierarkiska strukturen i trädet med gränssnittselement. Paneler finns i det visuella trädet, men de är strukturella element, inte pixelproducerande element som en Button eller en Rektangel. Att förenkla trädet genom att minska antalet icke-pixelproducerande element ger vanligtvis en betydande prestandaökning.

Många användargränssnitt implementeras genom att nästla paneler, vilket resulterar i djupa, komplexa träd av paneler och element. Det är praktiskt att kapsla paneler, men i många fall kan samma användargränssnitt uppnås med en mer komplex enskild panel. Att använda en enda panel ger bättre prestanda.

När layoutstrukturen ska minskas

Att minska layoutstrukturen på ett trivialt sätt – till exempel att minska en kapslad panel från sidan på den översta nivån – har ingen märkbar effekt.

De största prestandavinsterna kommer från att minska layoutstrukturen som upprepas i användargränssnittet, till exempel i en ListView eller GridView. Dessa ItemsControl-element använder ett DataTemplate, som definierar ett underträd med gränssnittselement som instansieras många gånger. När samma underträd dupliceras många gånger i din app har eventuella förbättringar av underträdets prestanda en multiplikativ effekt på appens övergripande prestanda.

Exempel

Överväg följande användargränssnitt.

Exempel på formulärlayout

De här exemplen visar tre sätt att implementera samma användargränssnitt. Varje implementeringsval resulterar i nästan identiska bildpunkter på skärmen, men skiljer sig avsevärt åt i implementeringsinformationen.

Alternativ 1: Kapslade StackPanel--element

Även om detta är den enklaste modellen använder den 5 panelelement och resulterar i betydande omkostnader.

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

Alternativ 2: Ett enda Rutnät

Rutnätet lägger till viss komplexitet, men använder bara ett enda panelelement.

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

Alternativ 3: En enda RelativePanel:

Den här panelen är också lite mer komplex än att använda kapslade paneler, men kan vara lättare att förstå och underhålla än ett rutnät.

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

Som dessa exempel visar finns det många sätt att uppnå samma användargränssnitt. Du bör välja genom att noga överväga alla kompromisser, inklusive prestanda, läsbarhet och underhåll.

Använda rutnät med en cell för överlappande användargränssnitt

Ett vanligt krav för användargränssnittet är att ha en layout där element överlappar varandra. Normalt används utfyllnad, marginaler, justeringar och transformeringar för att placera elementen på det här sättet. XAML Grid-kontrollen är optimerad för att förbättra layoutprestanda för element som överlappar varandra.

Viktigt För att se förbättringen ska du använda ett enkelscells-Rutnät. Definiera inte RowDefinitions eller ColumnDefinitions.

Exempel

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

Text överlagrad på en cirkel 

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

Två textblock i ett rutnät

Använda en panels inbyggda kantlinjeegenskaper

Kontrollerna Grid, StackPanel, RelativePanel och ContentPresenter har inbyggda kantlinjeegenskaper som gör att du kan rita en kantlinje runt dem utan att lägga till ytterligare ett kantlinjeelement i XAML. De nya egenskaperna som stöder den inbyggda kantlinjen är: BorderBrush, BorderThickness, CornerRadius och Padding. Var och en av dessa är en DependencyProperty, så du kan använda dem med bindningar och animeringar. De är utformade för att vara en fullständig ersättning för ett separat kantlinjeelement .

Om användargränssnittet har kantlinjeelement runt dessa paneler använder du den inbyggda kantlinjen i stället, vilket sparar ett extra element i appens layoutstruktur. Som tidigare nämnts kan detta vara en betydande besparing, särskilt när det gäller upprepat användargränssnitt.

Exempel

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

Använda SizeChanged-händelser för att svara på layoutändringar

Klassen FrameworkElement exponerar två liknande händelser för att svara på layoutändringar: LayoutUpdated och SizeChanged. Du kanske använder en av dessa händelser för att få ett meddelande när ett element ändras under layouten. Semantiken för de två händelserna skiljer sig åt och det finns viktiga prestandaöverväganden när du väljer mellan dem.

För bra prestanda är SizeChanged nästan alltid rätt val. SizeChanged har intuitiv semantik. Den höjs under layouten när storleken på FrameworkElement har uppdaterats.

LayoutUpdated höjs också under layouten, men den har global semantik – den höjs på varje element när ett element uppdateras. Det är vanligt att endast utföra lokal bearbetning i händelsehanteraren, i vilket fall koden körs oftare än vad som behövs. Använd endast LayoutUpdated om du behöver veta när ett element flyttas utan att ändra storlek (vilket är ovanligt).

Välja mellan paneler

Prestanda är vanligtvis inte ett övervägande när du väljer mellan enskilda paneler. Det valet görs vanligtvis genom att överväga vilken panel som tillhandahåller layoutbeteendet som är närmast det användargränssnitt som du implementerar. Om du till exempel väljer mellan Grid, StackPanel och RelativePanel bör du välja den panel som ger den närmaste mappningen till din mentala modell för implementeringen.

Varje XAML-panel är optimerad för bra prestanda och alla paneler ger liknande prestanda för liknande användargränssnitt.

  • Last updated on