XAML-elemzés áttekintése

Az XAML-elemzés egy eszköz, amely értesíti Önt az alkalmazás teljesítményproblémáiról. Ellenőrzi az alkalmazás kódját a teljesítményre vonatkozó irányelvek és ajánlott eljárások alapján, és azonosítja a gyakori problémák szabálykészletéből származó problémákat.

Amikor az eszköz hibát talál, az Visual Studio diagnosztikai eszközeire, forrásadataira és dokumentációjára mutat, hogy kivizsgálhassa és kijavíthassa a problémát.

A dekódolt kép mérete nagyobb, mint a renderelési méret

A nagy felbontásban rögzített képek miatt az alkalmazás több processzort használhat dekódoláskor és több memóriát a lemezről való betöltés után. A nagy felbontású képek dekódolásának nincs előnye, ha csak kisebb méretben jeleníti meg. Ehelyett hozza létre a kép egy olyan változatát, amely akkora méretű, amekkorában a képernyőn megjeleníti, a DecodePixelWidth és DecodePixelHeight tulajdonságok használatával.

Hatás

A képek natív mérettől eltérő méretben való megjelenítése negatívan befolyásolhatja a processzoridőt (dekódolást és letöltést) és a memóriát.

Okok és megoldások

A rendszerkép nincs aszinkron módon beállítva

Az alkalmazás SetSource() helyett SetSourceAsync() használ. Ha egy streamet a képek aszinkron dekódolásához állít be, mindig a SetSourceAsync metódust használja.

A kép forrása be van állítva, mielőtt az elem az élő fában szerepel

A BitmapImage az élő XAML-fához kapcsolódik a tartalom SetSourceAsync vagy UriSource használatával történő beállítása után. A forrás beállítása előtt mindig csatoljon bitmapImage-et az élő fához. Amikor egy képelemet vagy ecsetet ad meg a jelölőnyelvben, a csatolás automatikusan történik.

Jó – a forrás a jelölőnyelvben a(z) BitmapImage használatával van megadva:

<Image x:Name="myImage">
    <Image.Source>
        <BitmapImage UriSource="Assets/cool-image.png"/>
    </Image.Source>
</Image>

Jó – a BitmapImage csatlakoztatása a fához az UriSource beállítása előtt:

Image myImage = new Image();
var bitmapImage = new BitmapImage();
myImage.Source = bitmapImage;
bitmapImage.UriSource = new Uri("ms-appx:///Assets/cool-image.png", UriKind.RelativeOrAbsolute);

Rossz – a BitmapImage UriSource beállítása a fához való csatlakoztatás előtt:

Image myImage = new Image();
var bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("ms-appx:///Assets/cool-image.png", UriKind.RelativeOrAbsolute);
myImage.Source = bitmapImage;

A képecset nem téglalap alakú

Ha nem téglalap alakú ecsethez képet használ, a kép szoftveres raszterizálási eljárást használ, amely nem skálázza a képeket. Emellett a rendszer a kép egy példányát a szoftver- és a hardvermemóriában is tárolja. Ha nem téglalap alakú ecsetet használ, előre méretezze át a képeket körülbelül arra a méretre, amelyben renderelni fogja őket.

Másik lehetőségként adjon meg egy explicit dekódolási méretet a DecodePixelWidth és a DecodePixelHeight tulajdonságok használatával:

<Image>
    <Image.Source>
    <BitmapImage UriSource="ms-appx:///Assets/highresCar.jpg"
                 DecodePixelWidth="300" DecodePixelHeight="200"/>
    </Image.Source>
</Image>

A fizikai képpontok mértékegysége DecodePixelWidthDecodePixelHeight alapértelmezés szerint. Állítsa a DecodePixelType értékét logikai értékre, hogy a dekódolás mérete automatikusan figyelembe vegye a rendszer aktuális méretezési tényezőjét, hasonlóan a többi XAML-tartalomhoz.

Ha nem tudja előre meghatározni a megfelelő dekódolási méretet, támaszkodjon az XAML automatikus, megfelelő méretű dekódolására, ami minden tőle telhetőt megtesz a kép megfelelő méretű dekódolására.

A BitmapIconokban használt képek visszaállnak a természetes méretre

Állítson be explicit dekódolási méretet a DecodePixelWidth és DecodePixelHeight tulajdonságok használatával.

A DecodePixelWidth vagy a DecodePixelHeight nagyobb, mint a kijelző mérete

Ha explicit módon állítja be DecodePixelWidth vagy DecodePixelHeight nagyobb, mint a kép képernyős megjelenítési mérete, az alkalmazás extra memóriát használ (képpontonként legfeljebb 4 bájt), ami nagy képek esetén költségessé válik.

A kép el van rejtve

A kép el van rejtve, ha a Opacity értéke 0-ra, vagy a Visibility értéke Collapsed-ra van állítva a gazdagép képobjektumán, ecsetjén vagy valamelyik szülőelemén. A kivágás vagy átlátszóság miatt a képernyőn nem látható képek visszaállhatnak natív méretű dekódolásra.

A kép NineGrid tulajdonságot használ

Ha egy képet NineGrid használatával használ, a kép szoftveres raszterezési útvonalon jelenik meg. A képeket előre skálázhatja úgy, hogy nagyjából a megjelenített méretük legyen.

Összecsukott elemek a betöltési időben

Gyakori minta a felhasználói felület elemeinek elrejtése és későbbi megjelenítése. A legtöbb esetben a x:Load használatával el kell halasztania ezen elemek létrehozását, hogy elkerülje a betöltéskor történő létrehozás költségét.

Hatás

Az összecsukott elemek más elemekkel együtt töltődnek be, és növelik a betöltési időt.

Solution

Az x:Load attribútummal késleltetheti a felhasználói felület betöltését. Az elem csak akkor töltődik be, amikor szükség van rá, ami csökkenti a kezdeti feldolgozási terhelést. A betöltési állapot szabályozására is használható x:Bind .

A ListView nincs virtualizálva

A felhasználói felület virtualizálása a gyűjteményteljesítmény szempontjából a legfontosabb fejlesztés. Az elemeket képviselő felhasználói felületi elemek igény szerint jönnek létre. Az 1000 elemből álló gyűjteményhez kötött vezérlők esetében az összes felhasználói felület létrehozása egyszerre pazarolja az erőforrásokat, mert nem jelenítheti meg egyszerre az összes elemet. ListView és GridView kezeli a felhasználói felület virtualizálását – felhasználói felületet hoznak létre a nézetport közelében lévő elemekhez, és visszanyerik a nézeten kívül görgetett elemek memóriáját.

Hatás

A nem virtualizált ItemsControl a szükségesnél több gyermekelem betöltésével növeli a betöltési időt és az erőforrás-használatot.

Solution

Állítsa be a szélességet és a magasságot a ItemsControl nézetport meghatározásához. Ha egy virtualizált vezérlőt korlátlan területtel (például ScrollViewerGrid automatikus méretű sorokkal) helyez el egy panelen, a vezérlő elegendő helyet foglal el az összes elem számára, ami legyőzi a virtualizálást.

A UI-szál blokkolt vagy tétlen a betöltés közben

A felhasználói felületi szál blokkolása akkor fordul elő, ha a szálon kívül végrehajtó függvények szinkron hívásai blokkolják a felhasználói felület szálát. A felhasználói felületi szál aszinkron API-kkal rugalmasan kezelhető. További információ: A felhasználói felület szálának rugalmasan tartása.

{x:Bind} használata {Binding} helyett

{Binding} több időt és memóriát használ, mint {x:Bind}a . A {Binding} létrehozása memóriafoglalások sorozatát okozza, és a kötési cél frissítése tükrözést és dobozolást is magában foglalhat. Használja a(z) {x:Bind} elemet, amely fordítási időben fordítja le a kötéseket a jobb teljesítmény és a fordításkori ellenőrzés érdekében.

X:Kulcs használata az x:Név helyett a ResourceDictionariesben

Amikor egy erőforráson a(z) x:Name elemet használja, a platform azonnal példányosítja azt, mert a(z) x:Name mezőreferenciát hoz létre. Használja inkább a x:Key elemet, ha nincs szükség arra, hogy a mögöttes kódból hivatkozzon az erőforrásra.

Virtualizálási panelek használata gyűjteményekhez

Ha egyéni elempanel-sablont ad meg (lásd: ItemsPanel), használjon virtualizáló panelt, például ItemsWrapGrid vagy ItemsStackPanel. A(z) VariableSizedWrapGrid, WrapGrid vagy StackPanel használata letiltja a virtualizálást.

Akadálymentesség: Adja meg az UIA-elemek nevét

Állítsa be a vezérlő XAML-jében a(z) AutomationProperties.Name értékét egy megfelelő lokalizált karakterláncra. Ha egy elemnek nem szabad megjelennie az UIA-fában, állítsa be a AutomationProperties.AccessibilityView = "Raw" elemet.

Ne adjon két, azonos szülővel rendelkező UIA-elemnek azonos Name-t és ControlType-et. Azokban a listákban, amelyekben gyakoriak az ismétlődő nevek, adatkötéssel állítsa be a(z) AutomationProperties.Name értékét egy adatforrásból.

Kapcsolódó tartalom

• Optimalizálja a XAML-jelölést
• Az XAML-elrendezés optimalizálása
• A felhasználói felület szálának rugalmasan tartása