XAML düzeninizi iyileştirme

Önemli API'ler

• Panel

Düzen, kullanıcı arabiriminizin görsel yapısını tanımlama işlemidir. XAML'de düzeni açıklamaya yönelik birincil mekanizma, içinde kullanıcı arabirimi öğelerini konumlandırmanızı ve düzenlemenizi sağlayan kapsayıcı nesneleri olan paneller aracılığıyla yapılır. Düzen, hem CPU kullanımı hem de bellek yükü açısından WinUI uygulamasının pahalı bir parçası olabilir. WinUI uygulamanızın düzen performansını geliştirmek için uygulayabileceğiniz bazı basit adımlar aşağıdadır.

Düzen yapısını azaltma

Düzen performansındaki en büyük kazanç, kullanıcı arabirimi öğeleri ağacının hiyerarşik yapısını basitleştirmekten gelir. Paneller görsel ağaçta bulunur, ancak bunlar Düğme veya Dikdörtgen gibi piksel üreten öğeler değil yapısal öğelerdir. Piksel üretmeyen öğelerin sayısını azaltarak ağacı basitleştirmek genellikle önemli bir performans artışı sağlar.

Birçok WinUI kullanıcı arayüzü, iç içe geçmiş paneller tarafından uygulanır ve bu da derin, karmaşık panel ve öğe ağaçlarıyla sonuçlanır. Panelleri iç içe yerleştirmek uygundur, ancak çoğu durumda aynı kullanıcı arabirimi daha karmaşık bir tek panelle elde edilebilir. Tek bir panel kullanmak daha iyi performans sağlar.

Düzen yapısını ne zaman azaltmalı?

Düzen yapısını önemsiz bir şekilde azaltmanın (örneğin, en üst düzey sayfanızdan iç içe yerleştirilmiş bir panelin azaltılması) dikkat çekici bir etkiye sahip değildir.

En büyük performans kazancı, ListView veya GridView gibi kullanıcı arabiriminde tekrarlanan düzen yapısının azaltılmasından gelir. Bu ItemsControl öğeleri, birçok kez örneklenen kullanıcı arabirimi öğelerinin alt ağacını tanımlayan bir DataTemplate kullanır. Uygulamanızda aynı alt ağaç birçok kez çoğaltıldığında, söz konusu alt ağacın performansındaki tüm iyileştirmeler uygulamanızın genel performansı üzerinde çok faktörlü bir etkiye sahiptir.

Örnekler

Aşağıdaki kullanıcı arabirimini göz önünde bulundurun.

Bu örneklerde aynı kullanıcı arabirimini uygulamanın 3 yolu gösterilmektedir. Her uygulama seçimi ekranda neredeyse aynı piksellerle sonuçlandırılır, ancak uygulama ayrıntılarında önemli ölçüde farklılık gösterir.

Seçenek 1: İç İçe StackPanel öğeleri

Bu en basit model olsa da, 5 panel öğesi kullanır ve önemli ek yüke neden olur.

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

Seçenek 2: Tek bir Kılavuz

Kılavuz biraz karmaşıklık ekler, ancak yalnızca tek bir panel öğesi kullanır.

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

Seçenek 3: Tek bir RelativePanel

Bu tek panel, iç içe yerleştirilmiş panelleri kullanmaktan biraz daha karmaşıktır, ancak anlaşılması ve bakımı Bir Kılavuzdan daha kolay olabilir.

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

Bu örneklerde gösterildiği gibi, aynı kullanıcı arabirimini elde etmenin birçok yolu vardır. Performans, okunabilirlik ve bakım dahil olmak üzere tüm dengeleri dikkatle göz önünde bulundurarak seçim yapmanız gerekir.

Çakışan kullanıcı arabirimi için tek hücreli kılavuzlar kullanma

Yaygın bir kullanıcı arabirimi gereksinimi, öğelerin birbiriyle çakıştığı bir düzenin olmasıdır. Öğeleri bu şekilde konumlandırmak için genellikle doldurma, kenar boşlukları, hizalamalar ve dönüşümler kullanılır. XAML Grid denetimi, örtüşen öğelerin düzenleme performansını iyileştirmek için optimize edilmiştir.

Önemli İyileştirmeyi görmek için tek hücreli kılavuz kullanın. RowDefinitions veya ColumnDefinitions tanımlamayın.

Örnekler

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

Panelin yerleşik kenarlık özelliklerini kullanma

Grid, StackPanel, RelativePanel ve ContentPresenter denetimleri, XAML'inize ek bir Border öğesi eklemeden bunların çevresine kenarlık çizmenize olanak sağlayan yerleşik kenarlık özelliklerine sahiptir. Yerleşik kenarlığı destekleyen yeni özellikler şunlardır: BorderBrush, BorderThickness, CornerRadius ve Padding. Bunların her biri bir DependencyProperty'dir, bu nedenle bunları bağlamalar ve animasyonlarla kullanabilirsiniz. Bunlar, ayrı bir Border öğesinin tam yerini alacak şekilde tasarlanmıştır.

Kullanıcı arabiriminizde bu panellerin çevresinde Kenarlık öğeleri varsa, bunun yerine uygulamanızın düzen yapısına fazladan bir öğe kaydeden yerleşik kenarlık kullanın. Daha önce belirtildiği gibi, bu özellikle yinelenen kullanıcı arabirimi söz konusu olduğunda önemli bir tasarruf olabilir.

Örnekler

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

Düzen değişikliklerine yanıt vermek için SizeChanged olaylarını kullanma

FrameworkElement sınıfı, düzen değişikliklerine yanıt vermek için iki benzer olay sunar: LayoutUpdated ve SizeChanged. Düzen sırasında bir öğe yeniden boyutlandırıldığında bildirim almak için bu olaylardan birini kullanıyor olabilirsiniz. İki olayın semantiği farklıdır ve aralarında seçim yaparken önemli performans konuları vardır.

İyi performans için SizeChanged neredeyse her zaman doğru seçimdir. SizeChanged sezgisel semantiklere sahiptir. FrameworkElement'in boyutu güncelleştirildiğinde düzen sırasında oluşturulur.

LayoutUpdated de düzenleme sırasında da tetiklenir, ancak genel bir anlam taşır; herhangi bir öğe güncellendiğinde, her öğede tetiklenir. Genellikle yalnızca olay işleyicisinde yerel işleme yapılır ve bu durumda kod gerekenden daha sık çalıştırılır. LayoutUpdated'i yalnızca boyutu değiştirmeden bir öğenin ne zaman yeniden konumlandırıldığını bilmeniz gerekiyorsa kullanın (bu sık karşılaşılan bir durumdur).

Paneller arasında seçim

Tek tek paneller arasında seçim yaparken performans genellikle dikkate alınmaz. Bu seçim genellikle hangi panelin uyguladığınız kullanıcı arabirimine en yakın düzen davranışını sağladığı düşünülerek yapılır. Örneğin , Grid, StackPanel ve RelativePanel arasında seçim yapmak istiyorsanız, uygulamanın zihinsel modeline en yakın eşlemeyi sağlayan paneli seçmeniz gerekir.

Her XAML paneli iyi performans için iyileştirilmiştir ve tüm paneller benzer kullanıcı arabirimi için benzer performans sağlar.