head.WriteLine()

Mittwoch, August 24, 2011

TT.DataForm: UI Customizing

In diesem Post soll es um die Anpassung der einzelnen UI-Bestandteile von TT.DataForm gehen.
TT.DataForm besteht aus einer Reihe von Unterkomponenten, die über Styles und Templates separat angepasst werden können. Hierzu zählen:
  • DataFormHeader: Der Kopfbereich des Controls (Titel, Navigation)
  • Marker: Markierungssymbole (aktives Feld, geändertes Feld, Pflichtfeld, Fehler)
  • DataFormItem: Ein Feldzeile mit Bezeichner, Eingabeelement, sowie den Markern.
  • DataFormFooter: Der Fußbereich des Controls (Beschreibungstext, Fehlertext).
  • BusyIndicator: Der eingebaute BusyIndicator der DataForm.
Die folgende Abbildung zeigt den internen Aufbau:TTDataFormCustomizing

Hierbei beschreiben die gelben Kästchen die jeweilige Komponente mit ihren Eigenschaften, während die grünen Kästchen die zugehörigen DataForm-Eigenschaften kennzeichnen, mit denen Anpassungen vorgenommen werden können.

Um beispielsweise die Symbole der Navigationsleiste zu ändern, können über HeaderStyle die Eigenschaften des DataFormHeader-Objekts verändert werden.

<dataform:DataForm x:Name="personDataForm">
  <dataform:DataForm.HeaderStyle>
    <Style TargetType="dataform:DataFormHeader">
      <Setter Property="Background"
        Value="LightYellow" />
      <Setter Property="MoveFirstImage"
        Value="/Images/Navigation_First.png" />
      <Setter Property="MovePreviousImage"
        Value="/Images/Navigation_Previous.png" />
      <Setter Property="MoveNextImage"
        Value="/Images/Navigation_Next.png" />
      <Setter Property="MoveLastImage"
        Value="/Images/Navigation_Last.png" />
      <Setter Property="AddImage"
        Value="/Images/New.png" />
      <Setter Property="RemoveImage"
        Value="/Images/Delete.png" />
    </Style>
  </dataform:DataForm.HeaderStyle>
</dataform>


Darüber hinaus stehen eine Reihe allgemeiner Eigenschaften bereit, mit denen grundsätzliche Entscheidungen des Erscheinungsbilds festgelegt werden können. Die folgende Tabelle zeigt die hierfür wichtigsten Einstellungen:

Eigenschaft Beschreibung
RowHeight Bestimmt die Höhe einer Feldzeile.
ColumnSpacing Bestimmt den Abstand zwischen Anzeigetext und Eingabesteuerelement.
ColumnCount Legt die Anzahl der anzuzeigenden Spalten fest.
ShowHeader Bestimmt, ob der Kopfbereich angezeigt werden soll.
ShowFooter Bestimmt, ob der Fußbereich angezeigt werden soll.
ShowEditTracker Bestimmt, ob das Symbol für geänderte Felder angezeigt werden soll.
ShowRowMarker Bestimmt, ob das Symbol für das aktuell fokussierte Felder angezeigt werden soll.
ShowRequiredFieldMarker Bestimmt, ob das Symbol für Pflichtfelder angezeigt werden soll.
ShowErrorMarker Bestimmt, ob das Symbol für Eingabefehler angezeigt werden soll.
CornerRadius Legt den Radius des äußeren Rahmens fest.
ShowDropShadow Zeichnet einen Schatteneffekt für das Steuerelement.

Noch mehr Beispiele für die Anpassungsmöglichkeiten finden Sie im Demoprojekt, das den Sourcen von TT.DataForm beiliegt.

Labels: