Windows 10 Dev - wydajność XAML

Wydajność aplikacji, taka jak szybkość wyświetlania aplikacji podczas uruchamiania lub nawigacji w celu wyświetlenia następnej zawartości itp., Jest bardzo ważna.

Na wydajność aplikacji może mieć wpływ wiele rzeczy, w tym zdolność aparatu renderującego XAML do analizowania całego kodu XAML, który masz w aplikacji. XAML to bardzo zaawansowane narzędzie do tworzenia interfejsu użytkownika, ale może być bardziej niezawodne dzięki zastosowaniu nowych technik, które są teraz dostępne w aplikacjach systemu Windows 10.

Na przykład w twoich aplikacjach są pewne rzeczy, które chcesz pokazać po załadowaniu strony, a potem nie potrzebujesz ich później. Możliwe jest również, że przy starcie nie trzeba ładować wszystkich elementów UI.

W aplikacjach systemu Windows 10 w języku XAML dodawane są nowe funkcje, które poprawiają wydajność języka XAML.

Wydajność dowolnej aplikacji Universal Windows można poprawić za pomocą następujących technik;

Renderowanie progresywne
Odroczone ładowanie

Renderowanie progresywne

W systemie Windows 10 w języku XAML wprowadzono dwie nowe i bardzo fajne funkcje. Oni są -

x: Powiązanie

Jest to nowa składnia wprowadzona w języku XAML używana do wiązania, która działa prawie tak samo, jak Binding składnia tak. x:Bindma dwie kluczowe różnice; zapewnia walidację składni w czasie kompilacji i lepszą wydajność.

X: Faza

Zapewnia możliwość ustalania priorytetów renderowania kontrolek XAML w szablonie danych. Każdy element interfejsu użytkownika może mieć tylko jedną określoną fazę. Jeśli tak, będzie to miało zastosowanie do wszystkich powiązań w elemencie. Jeśli faza nie jest określona, zakłada się, że faza 0.

W aplikacjach Universal Windows Platform (UWP) te dwie nowe funkcje zapewniają poprawę wydajności. Może być również używany w istniejących aplikacjach systemu Windows 8.x, które migrują do systemu Windows 10.

Poniżej podano przykład, w którym obiekty pracowników są powiązane GridView używając x:Bind słowo kluczowe.

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

W powyższym kodzie XAML x:Phase = "1"jest zdefiniowany za pomocą tytułu. Dlatego w pierwszej fazieName zostaną renderowane, a następnie Title zostaną wyrenderowane.

Podano poniżej Employee class implementacja w C #.

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

Kiedy powyższy kod zostanie wykonany, zobaczysz następujące okno.

Plik X:Phase z x:Bind jest używany do renderowania ListView i GridView elementy stopniowo i poprawiają jakość panoramowania.

Odroczone ładowanie

Ładowanie odroczone to technika, której można użyć w celu zminimalizowania czasu ładowania podczas uruchamiania przez zmniejszenie liczby elementów interfejsu użytkownika XAML podczas uruchamiania aplikacji. Jeśli Twoja aplikacja zawiera 30 elementów UI, a użytkownik nie potrzebuje wszystkich tych elementów na starcie, wszystkie te elementy, które nie są wymagane, mogą zaoszczędzić trochę czasu ładowania poprzez odroczenie.

x:DeferLoadStrategy = "Lazy" opóźnia tworzenie elementu i jego elementów podrzędnych, co skraca czas uruchamiania, ale nieznacznie zwiększa zużycie pamięci.

Element odroczony można zrealizować / utworzyć przez Calling FindName o nazwie, która została zdefiniowana w elemencie.

Po utworzeniu odroczonego elementu wydarzy się kilka rzeczy -

Zostanie zgłoszone zdarzenie Loaded w elemencie.
Wszystkie powiązania elementu zostaną ocenione.
Jeśli aplikacja jest zarejestrowana w celu otrzymywania powiadomień o zmianie właściwości dla właściwości zawierającej odroczone elementy, powiadomienie zostanie zgłoszone.

Poniżej podano przykład, w którym x:DeferLoadStrategy = "Lazy" służy do siatki, która zawiera cztery bloki tekstowe i nie będzie ładowana podczas uruchamiania aplikacji, dopóki jej nie załadujesz.

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

Poniższy program to implementacja zdarzenia kliknięcia, w którym grid jest ładowany na stronie głównej aplikacji.

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

Gdy powyższy kod jest zgodny i wykonany, zobaczysz tylko przycisk. PlikTextblocks nie są ładowane podczas uruchamiania.

Teraz, gdy klikniesz Show Elements spowoduje załadowanie bloków tekstu, co poprawi wydajność uruchamiania aplikacji.