Windows 10 Dev - XAML Performansı

Uygulamanızın başlangıçta ne kadar hızlı göründüğü veya bir sonraki içeriği göstermek için gezinmesi gibi uygulamaların performansı çok önemlidir.

Bir uygulamanın performansı, XAML işleme motorunun uygulamanızda sahip olduğunuz tüm XAML kodunu ayrıştırma yeteneği de dahil olmak üzere birçok şeyden etkilenebilir. XAML, UI oluşturmak için çok güçlü bir araçtır, ancak artık Windows 10 uygulamalarında bulunan yeni teknikleri kullanarak daha sağlam olabilir.

Örneğin, uygulamalarınızda, sayfa yüklendiğinde göstermek istediğiniz ve daha sonra ihtiyaç duymayacağınız belirli şeyler vardır. Başlangıçta tüm UI öğelerinin yüklenmesine gerek duymamanız da mümkündür.

Windows 10 uygulamalarında, XAML'ye XAML performansını artıran bazı yeni özellikler eklenmiştir.

Herhangi bir Evrensel Windows uygulamasının performansı aşağıdaki tekniklerle iyileştirilebilir;

  • Aşamalı Görüntü Oluşturma
  • Ertelenmiş Yükleme

Aşamalı Görüntü Oluşturma

Windows 10'da, XAML'de iki yeni ve çok güzel özellik tanıtıldı. Onlar -

x: Bağla

XAML'de bağlama için kullanılan ve neredeyse aynı şekilde çalışan yeni bir sözdizimidir. Binding sözdizimi yapar. x:Bindiki temel fark vardır; derleme zamanı sözdizimi doğrulaması ve daha iyi performans sağlar.

X: Aşama

Bir veri şablonu içinde XAML denetimlerinin oluşturulmasına öncelik verme yeteneği sağlar. Her UI öğesinin yalnızca bir aşaması belirtilebilir. Öyleyse, bu, öğedeki tüm bağlamalar için geçerli olacaktır. Bir faz belirtilmezse, faz 0 varsayılır.

Evrensel Windows Platformu (UWP) uygulamalarında, bu iki yeni özellik performans iyileştirmeleri sağlar. Ayrıca, Windows 10'a geçiş yapan mevcut Windows 8.x uygulamalarında da kullanılabilir.

Aşağıda, çalışan nesnelerinin bağlı olduğu bir örnek verilmiştir. GridView kullanarak x:Bind anahtar kelime.

<Page 
   x:Class = "XAMLPhase.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAMLPhase" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <GridView Name = "Presidents" ItemsSource = "{Binding}" Height = "300" 
         Width = "400" Margin = "50"> 
			
         <GridView.ItemTemplate> 
            <DataTemplate x:DataType = "local:Employee"> 
				
               <StackPanel Orientation = "Horizontal" Margin = "2"> 
                  <TextBlock Text = "{x:Bind Name}" Width = "95" Margin = "2" /> 
                  <TextBlock Text = "{x:Bind Title}" Width = "95" Margin = "2"  
                     x:Phase = "1"/> 
               </StackPanel> 
					
            </DataTemplate> 
         </GridView.ItemTemplate>
			
      </GridView> 
		
   </Grid> 
	
</Page>

Yukarıdaki XAML kodunda, x:Phase = "1"Başlık ile tanımlanır. Bu nedenle ilk aşamadaName işlenecek ve sonra Title işlenecek.

Aşağıda verilen Employee class C # 'da uygulama.

using System.Collections.ObjectModel; 
using System.ComponentModel; 
using System.Runtime.CompilerServices; 
using Windows.UI.Xaml.Controls;
  
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 
	
namespace XAMLPhase {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
         DataContext = Employee.GetEmployees(); 
      } 
   } 
	
   public class Employee : INotifyPropertyChanged {
      private string name; 
		
      public string Name {
         get { return name; } 
			
         set {
            name = value; 
            RaiseProperChanged(); 
         } 
      } 
		
      private string title; 
		
      public string Title {
         get { return title; }
			
         set {
            title = value; 
            RaiseProperChanged(); 
         } 
      }
		
      public static Employee GetEmployee() {
       
         var emp = new Employee() {
            Name = "Waqas", 
            Title = "Software Engineer" 
         };  
			
         return emp; 
      } 
		
      public event PropertyChangedEventHandler PropertyChanged;
		
      private void RaiseProperChanged( 
         [CallerMemberName] string caller = "") {
			
         if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(caller)); 
         } 
			
      } 
		
      public static ObservableCollection<Employee> GetEmployees() {
         var employees = new ObservableCollection<Employee>(); 
			
         employees.Add(new Employee() { Name = "Ali", Title = "Developer" }); 
         employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" }); 
         employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" }); 
         employees.Add(new Employee() { Name = "Waqar", Title = "Manager" }); 
			
         return employees; 
      } 
		
   }
	
}

Yukarıda verilen kod çalıştırıldığında aşağıdaki pencereyi göreceksiniz.

X:Phase ile x:Bind render etmek için kullanılır ListView ve GridView öğeleri aşamalı olarak ve kaydırma deneyimini iyileştirir.

Ertelenmiş Yükleme

Ertelenmiş yükleme, bir uygulamanın başlangıcında XAML UI öğelerinin sayısını azaltarak başlangıç ​​yükleme süresini en aza indirmek için kullanılabilen bir tekniktir. Uygulamanız 30 UI öğesi içeriyorsa ve kullanıcı başlangıçta tüm bu öğelere ihtiyaç duymuyorsa, gerekli olmayan tüm bu öğeler erteleyerek yükleme süresinden tasarruf sağlayabilir.

x:DeferLoadStrategy = "Lazy" bir öğenin ve alt öğelerinin oluşturulmasını geciktirir, bu da başlangıç ​​süresini azaltır, ancak bellek kullanımını biraz artırır.

Ertelenen öğe, Calling ile gerçekleştirilebilir / yaratılabilir FindName eleman üzerinde tanımlanan isimle.

Ertelenmiş bir öğe oluşturulduktan sonra, birkaç şey olur -

  • Öğe üzerindeki Yüklendi olayı ortaya çıkacaktır.

  • Öğe üzerindeki tüm bağlamalar değerlendirilecektir.

  • Başvurunun, ertelenen unsur (lar) ı içeren mülkle ilgili mülk değişikliği bildirimlerini almak için kaydedilmesi durumunda bildirim yapılır.

Aşağıda verilen bir örnek verilmiştir. x:DeferLoadStrategy = "Lazy" dört metin bloğu içeren ve siz yükleyene kadar uygulamanızın başlangıcında yüklenmeyecek olan ızgara için kullanılır.

<Page 
   x:Class = "UWPDeferredLoading.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPDeferredLoading" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Grid x:Name = "DeferredGrid" x:DeferLoadStrategy = "Lazy" Margin = "50"> 
         <Grid.RowDefinitions> 
            <RowDefinition Height = "Auto" /> 
            <RowDefinition Height = "Auto" /> 
         </Grid.RowDefinitions> 
			
         <Grid.ColumnDefinitions> 
            <ColumnDefinition Width = "Auto" /> 
            <ColumnDefinition Width = "Auto" /> 
         </Grid.ColumnDefinitions>
			
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 1" Margin = "0,0,4,4" /> 
			
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 2" 
            Grid.Column = "1" Margin = "4,0,0,4" /> 
				
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 3" 
            Grid.Row = "1" Margin = "0,4,4,0" /> 
				
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 4" 
            Grid.Row = "1" Grid.Column = "1" Margin = "4,4,0,0" /> 
      </Grid> 
		
      <Button x:Name = "RealizeElements" Content = "Show Elements"  
         Click = "RealizeElements_Click" Margin = "50"/> 
			
   </Grid>   
	
</Page>

Aşağıdaki program, kılavuzun uygulama ana sayfasına yüklendiği tıklama olay uygulamasıdır.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
	
namespace UWPDeferredLoading {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void RealizeElements_Click(object sender, RoutedEventArgs e) {
         this.FindName("DeferredGrid"); // This will realize the deferred grid 
      } 
		
   } 
	
}

Yukarıdaki kod yerine getirilip yürütüldüğünde, yalnızca bir düğme göreceksiniz. Textblocks başlangıçta yüklenmez.

Şimdi tıkladığınızda Show Elements düğmesi, uygulamanızın başlangıç ​​performansını artıracak metin bloklarını yükleyecektir.