Hannes  PreishuberSilverlight Textbox mit Wasserzeichen


Eben sind die neuen Programme aus der Live Serie erschienen. Ich schreibe dies auch auf dem neuen Windows Live Writer Beta. Den gibts aktuell leider nur in Englisch und so muss ich auf die deutsche Rechtschreibprüfung verzichten. Man verzeihe mir schon jetzt.

Was seit Beginn der Zune Zeiten auffällt, ist die Reduktion auf weniger. Also vor allem kurzer Text statt bunter Icons. Apple geht hier aktuell einen anderen Weg. Microsoft hat das ganze sogar in seinem Metro UI Style Guide beschrieben. Dort steht auch, das man Oberflächen bewusst leer halten soll. Eine alte Designer Regel.  Ausserdem soll man alle Elemente dem Benutzer zugänglich machen. Als Beispiel dafür  möchte ich die klassische Windows XResult Fehlermeldung nennen, deren Text man nicht in die Zwischenablage kopieren kann, da es als Label implementiert ist. Um das klar zu sagen, ich stehe zu beiden Aussagen. Das macht Sinn und ist die Zukunft.

Ich habe mir nun einen einfachen Silverlight Login Dialog vorgenommen um dieses Design Pattern umzusetzen. Textblock ist eigentlich obsolet und gehört verboten. Entsprechend kommt die Beschriftung in die Textbox und verschwindet, wenn der Benutzer etwas eingetippt hat. Davon ausgehend, das der Benutzer auch nachträglich erkennen kann was der Inhalt bedeutet. Wenn die Textbox wieder geleert wird, erscheint die Watermark in wieder in Grau.

imageimage

Realisiert habe ich das ganz einfach. Zunächst wird der Watermark Text der Textbox im Tag und Text Element abgelegt und der Foreground Grau gesetzt. Das Ziel ist es die Watermark wieder herstellen zu können. Dann brauche ich nur mehr die Events GotFocus und LostFocus um minimale Funktion zu implementieren.

<TextBox Height="26" Name="txtUser" Width="63" Margin="10"
        MaxLength="3" Foreground="gray" 
        GotFocus="txt_GotFocus"  LostFocus="txt_LostFocus"
        Text="User" Tag="User">
</TextBox>
<TextBox Height="26" Name="txtPassword" Width="84"  Foreground="gray"
        GotFocus="txt_GotFocus"  LostFocus="txt_LostFocus" 
        Text="Passwort" Tag="Password">
</TextBox>

Die Methoden sind universell ausgelegt und erkennen das Sender Control.

Private Sub txt_LostFocus(ByVal sender As System.Object, 
ByVal e As System.Windows.RoutedEventArgs) Dim tb As TextBox = CType(sender, TextBox) If (tb.Text = String.Empty) Then tb.Text = tb.Tag tb.Foreground = New SolidColorBrush(Colors.Gray) End If End Sub Private Sub txt_GotFocus(ByVal sender As System.Object,
ByVal e As System.Windows.RoutedEventArgs) Dim tb As TextBox = CType(sender, TextBox) If tb.Text = tb.Tag Then tb.Text = "" tb.Foreground = New SolidColorBrush(Colors.Black) End If End Sub

Sieht doch schick aus, oder?



Kategorien: Silverlight;Design;XAML; 25.06.2010 08:13:16


 


Neuen Kommentar einfügen:

  Titel:   
  Name:
  E-Mail:
  Kommentar:

 
 


Kommentare




© Copyright 2008 ppedv AG