Wie UI-Elemente in WPF träge erstellen?

Question

Wir erstellen eine WPF-Anwendung, die stark verzierte Eingabeelemente verwendet. Ein einfaches Beispiel für ein dekoriertes Element ist eine TextBox, die wie ein schreibgeschützter TextBlock aussieht, wenn sie keinen Fokus hat, und nach dem Empfangen des Fokus zu einer TextBox wird. Außerdem wird zusätzliches visuelles Feedback bereitgestellt, wenn der geänderte Wert in der Datenbank gespeichert wird. Das Problem besteht darin, dass das Anzeigen einer Ansicht, die viele dieser Elemente enthält (z. B. 100), sehr langsam ist und die Anwendung sehr unempfindlich macht.

Wir haben diesen Decorator als UserControl implementiert, das alle erforderlichen Elemente enthält (z. B. den TextBlock zum Anzeigen von unfokussiertem Text und rotierendes Bild für den Busy-Indikator). Dann fügen wir das Eingabeelement als Kind dieses Decorator-Steuerelements hinzu, was bedeutet, dass der Decorator zusätzlich zu allen zusätzlichen Elementen auch das Eingabeelement in seinem visuellen Baum enthält. In XAML würde dies wie folgt aussehen:

<custom:Decorator Context="{Binding ValueHelper}" > 
    <TextBox Text="{Binding ValueHelper.Text}"/> 
</custom:Decorator> 

Das macht es einfach für uns jedes Eingabeelement wir wollen dekorieren, sei es entweder Textfeld, Datumsauswahl, Combobox oder jedes individuelle Element.

Nun zurück zum Problem: Sagen wir, wir haben eine Ansicht, die 100 dekorierte Textfelder enthält, und wir navigieren zu dieser Ansicht. Was geschieht? Zumindest mein Quad-Core-Laptop friert für eine lange Zeit, weil es viele hundert Textblöcke, Rechtecke, Bilder usw. erstellen muss, um das visuelle Feedback für jedes dekorierte Element zu liefern, obwohl keine Dekorationen noch sichtbar sind. Was wirklich benötigt wird, sind nur 100 TextBlocks, weil das auf dem Bildschirm sichtbar ist. Es ist nur, nachdem das Element Maus über Ereignis oder Fokus empfängt, wenn andere Elemente benötigt werden. Außerdem wird immer nur ein Element bearbeitet, sodass nur ein Eingabeelement (in diesem Fall ein Textfeld) für die gesamte Anwendung ausreicht.

Also, was wäre der beste Weg, um die gleichen Dekorationen zu erreichen, ohne alle Dekorationselemente (oder das eigentliche Eingabeelement) für jedes Element in der Ansicht zu erstellen?

---

Ein Beispiel dekoriert TextBox Anwendungsfall zu klären:

Das Textfeld sieht aus wie ein Nur-Lese-Textblock, wenn es nicht den Fokus oder Mauszeiger hat, ist derzeit nicht oben drauf (Zustand 1). Außerdem werden drei Punkte ("...") angezeigt, da das Element momentan keinen Wert hat.

Wenn der Mauszeiger über das Element bewegt wird, wird um TextBlock herum ein gepunktetes grünes Rechteck angezeigt, um anzuzeigen, dass das Element geändert werden kann (Status 2). Die Farbe wäre rot, wenn TextBox schreibgeschützt wäre.

Nach dem Empfang wird das Fokuselement zu einer tatsächlichen TextBox, mit der der tatsächliche Wert geändert werden kann (Status 3).

Der Wert wird in der Datenbank gespeichert, nachdem das Textfeld seinen Fokus verliert, und um anzuzeigen, dass der Wert gerade gespeichert wird, erscheint ein Besetztzeichen auf der linken Seite des Elements (Status 4).

Schließlich wurde der Wert gespeichert und das Element kehrt in seinen Leerlaufzustand zurück und zeigt den neuen Wert an (Status 5). (Tatsächlich haben die Elemente noch mehr Zustände, die mit der Validierung und anderen spezifischen Anforderungen zusammenhängen, aber Sie haben sicherlich den Punkt erreicht, dass Elemente wirklich hoch dekoriert sind.

)

Answer 1

Statt alle UI-Elemente im Voraus von zeichnen, zeichnen sie nur die, die benötigt

WPF ermöglicht es Ihnen, die Template eines Objekts zu ändern, um eine DataTrigger verwenden, so dass Sie die Vorlage anpassen können für Ihre Decorator basierend auf Ihren Trigger

Ein Beispiel Stil für Ihren Decorator könnte wie folgt aussehen:

<Style TargetType="{x:Type ContentControl}"> 
    <!-- Default Template --> 
    <Setter Property="ContentTemplate" 
      Value="{StaticResource NoDecoratorTemplate}" /> 

    <Style.Triggers> 
     <DataTrigger Property="Text" Value=""> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource BlankTemplate}" /> 
     </DataTrigger> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource MouseOverTemplate}" /> 
     </Trigger> 
     <Trigger Property="IsFocused" Value="True"> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource FocusedTemplate}" /> 
     </Trigger> 
     <DataTrigger Property="{Binding IsLoading}" Value="True"> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource LoadingTemplate}" /> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

Außerdem sollte WPF nicht sichtbare Elemente nicht laden. Sie können versuchen, Ihre Dekoratoren Visibility="Collapsed" als Test zu setzen, um zu sehen, ob das die Ladezeit behebt.

Wenn es funktioniert und Sie nicht die Template Weg gehen möchten, können Sie sicherstellen, dass die Visibility aller Ihrer Objekte zu Collapsed gesetzt zu beginnen, und sie nur zu Visible gesetzt werden, wenn sie angezeigt werden sollen.

Wenn es Ihre Ladezeit nicht repariert, dann ist Ihr Problem wahrscheinlich woanders. Zum Beispiel sieht es so aus, als ob einige Ihrer Decorator-Elemente entsprechend der darin enthaltenen Inhaltskontrolle dimensioniert sind. Es ist also möglich, dass Sie die Objekte nicht verlangsamen, sondern die Größe der Objekte bestimmen.