Aracılığıyla paylaş

XAML düzeninizi iyileştirme

Önemli API'ler

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 XAML uygulamasının pahalı bir parçası olabilir. XAML 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 Düğmesi veya Dikdörtgengibi piksel üreten öğeler yapısal öğeler değildir. Piksel üretmeyen öğelerin sayısını azaltarak ağacı basitleştirmek genellikle önemli bir performans artışı sağlar.

Birçok kullanıcı arayüzü, iç içe geçmiş panellerin uygulanmasıyla derin ve karmaşık panel ve eleman ağaçları oluşturur. 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 DataTemplatekullanı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.

Form düzeni örneği

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.

Option1: StackPanel öğeleri iç içe

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 ızgaralar kullanın

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üzen performansını geliştirmek için iyileştirilmiştir.

Önemli İyileştirmeyi görmek için tek hücreli Izgarakullanın. RowDefinitions veya ColumnDefinitionstanımlamayın.

Örnekler

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

Daire üzerine yer paylaşımlı metin

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

Izgara içinde iki metin bloğu

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, CornerRadiusve Doldurma. Bunların her biri bir DependencyPropertyolduğundan 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 bir anlama sahiptir. FrameworkElement boyutu güncelleştirildiğinde düzen sırasında tetiklenir.

LayoutUpdated de düzen sırasında tetiklenir, ancak genel semantiği vardı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 yalnızca bir öğenin boyutunu değiştirmeden ne zaman yeniden konumlandırıldığını bilmeniz gerekiyorsa kullanın (ki bu nadir 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.

  • Last updated on