Kolumne: XAML Expertise

XAML-Tipp: WPF – Das „TextBox“-Wasserzeichen-Behavior
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Das „TextBox“-Wasserzeichen-Behavior“

Für eine angenehmere Usability einer Textbox kann ein leicht angedeuteter Text als Wasserzeichen von Vorteil sein. Windows macht es mit dem Suchfeld im Windows Explorer elegant vor. Um die gleiche Funktionalität bei einer Textbox unter WPF zu erreichen, sind nur wenige Zeilen Code nötig. Die Logik soll allerdings wiederverwendet werden können; dazu ist das Schreiben eines eigenen Behaviors geradezu ideal. Wir haben gesehen, wie vorteilhaft die mitgelieferten Behaviors für WPF sein können, nun schreiben wir ein eigenes.

Zu Beginn sind zwei Assemblies für die Unterstützung von Behaviors relevant: Microsoft.Expression.Interactions.dll und System.Windows.Interactivity.dll. Die beiden sind einfach über den Assembly-Bereich im References-Fenster zu finden. Dann wird eine neue Klasse mit dem Namen TextBoxWatermarkBehavior angelegt. Damit diese Klasse zu einem Behavior wird, reicht es aus, dass sie von der Basisklasse Behavior erbt. Das dieses Behavior auch nur für das TextBox-Steuerelement gültig ist, kann man mittels Generics bei der Basisklasse festlegen.

In Listing 1 wird der gesamte Code zum Wasserzeichen-Behavior angezeigt. Als Konstruktor für ein Behavior wird die OnAttached-Methode überschrieben. Das AssociatedObject Property wird von der Basisklasse ebenfalls bereitgestellt. Sie erhält den durch Generics festgelegten Typ. In unserem Fall ist das die TextBox. Wenn gar kein Typ festgelegt wurde, ist es normalerweise der Typ Object und zur Laufzeit ist es dann das Steuerelement, bei dem das Behavior eingesetzt wurde.

Der Text für das Wasserzeichen soll über ein Property von außen festgelegt werden. Beim Starten der Anwendung soll das Wasserzeichen sofort mit diesem Text und einer grauen Farbe bestückt sein. Wenn dann ein Klick auf die Textbox erfolgt, verschwindet der Text und die Farbeinstellung soll ebenfalls zurückgesetzt werden. Dafür dienen die beiden Events GotFocus und LostFocus.

public class TextBoxWatermarkBehavior : Behavior<TextBox>
{
  public string Text { get; set; }

  protected override void OnAttached()
  {
    AssociatedObject.GotFocus += OnGotFocus;
    AssociatedObject.LostFocus += OnLostFocus;

    OnLostFocus(null, null);

    base.OnAttached();
  }
  private void OnGotFocus(object sender, RoutedEventArgs e)
  {
    if (AssociatedObject.Text == Text)
    {
      AssociatedObject.Text = string.Empty;
      AssociatedObject.Foreground = new SolidColorBrush(Colors.Black);
      AssociatedObject.FontStyle = FontStyles.Normal;
    }
  }

  private void OnLostFocus(object sender, RoutedEventArgs e)
  {
    if (AssociatedObject.Text == string.Empty)
    {
      AssociatedObject.Text = Text;
      AssociatedObject.Foreground = new SolidColorBrush(Colors.Gray);
      AssociatedObject.FontStyle = FontStyles.Italic;
    }
  }
}

Das war auch schon alles, was man tun muss, um ein eigenes Behavior schreiben zu können. Nun kann das Behavior mit Blend for Visual Studio festgelegt werden. Dazu einfach einen Rechtsklick auf das WPF-Projekt machen und im Kontextmenü Design in Blend auswählen.

In Blend findet man die Behaviors im Assets-Fenster unter dem Punkt Behaviors. Blend erkennt anhand der Basisklasse unser Behavior im Projekt und bietet es automatisch in der Liste an. Das TextBoxWatermarkBehavior muss dann mittels Drag and Drop auf eine TextBox gezogen werden. Für die Konfiguration der Einstellungen eines Behaviors muss im Objects and Timeline-Fenster das jeweilige Control aufgeklappt werden. Hier sind alle definierten Behaviors zu finden. Nachdem das gewünschte Behavior ausgewählt wurde, können sämtliche Einstellungen rechts im Property-Fenster gefunden werden. Hier wird bei der Text-Eigenschaft der Wasserzeichentext hinterlegt (Abb. 1). Beim Starten der Anwendung wird das fertige Ergebnis sofort wie gewünscht angezeigt (Abb. 2).

Abb. 1: Das „TextBoxWatermarkBehavior“ mit Blend auswählen und einstellen

Abb. 1: Das „TextBoxWatermarkBehavior“ mit Blend auswählen und einstellen

Abb. 2: Das fertige „TextBoxWatermarkBehavior“ im Einsatz

Abb. 2: Das fertige „TextBoxWatermarkBehavior“ im Einsatz

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -