Ich habe mir einen Wunschtraum erfüllt. Eine österreische Ampel als mini App. Da Windows Phone noch kein Silverlight unterstützt, vorerst nur als Desktop Anwendung
Was macht nun eine österreichische Ampel so einmalig. Sie blinkt 3 mal Grün bevor sie auf gelb schaltet! Diese Ampel kann uns nun den Arbeitsalltag versüssen, gibt uns klare Richtlinien vor. Sinnlosses Starren auf den Fortschrittsbalken ist nun endgültig vorbei. Jetzt kommt sinnloses Starren auf die Ampel. Ich bitte um Überweisung von 3,99 € pro Download. Reklamation und Rückgabe ausgeschlossen.
Zunächst einmal das technsiche Konzept. Ich implementiere die Ampel als Usercontrol und nutze den Visual Statemanager um die Statusinformation Rot, Gelb und Grün mit Animationen hinterlegen zu können.
Startpunkt ist das UI Design mit Blend. Es beginnt relativ harmlos mit einer Border, Farbverlauf und wie immer runden Ecken.
Dann widme ich mich der ersten Lampe. Ein Kreis mit etwas dickerem Rand (Strockethickness 10) und zwei gegenläufige Farbverläufe im Graubereich erzeugen einen 3D Eindruck.
Da rein kommt dann nochmal ein kleinerer Kreis, der ein wenig Abstand zum äusseren Rahmen hat auf den ersten Kreis. So das man den Hintergrund am Rand noch ein wenig sehen kann. Dieser Kreis wird rot gefärbt und bekommt einen im Zentrum leicht versetzten runden Farbverlauf. Das GradientBrushtool ( dicker Pfeil) aus der linken Toolleiste hilft dabei ungemein.
Um die die Wölbung perfekt zu machen, wird Lichteinfall von oben simuliert. Dazu wird ein weiße, sehr transparente Elypse, darüber gelegt. Das gleiche machen Comic Zeichner z.B. mit den großen Heidi Augen um diese wässrig aussehen zu lassen. Ich verwende hier 30% alpha blending und versüse das mit einem Effekt um ein unscharfe Kontur zu haben.
Dann werden die Ui Element in ein Canvas gepackt, kopiert und umgefärbt.
Weiter gehts mit dem Visual State Manager. Dort erzeuge ich eine Gruppe mit dem Namen Phasen und darin die drei States: rot, gelb und gruen. Dann kann jeder in jedem State und Übergang das UI animiert werden. Im wesentlichen werden die beiden anderen Kreise einfach schwarz gefärbt mit einem Delay von 0,2 Sekunden. Schliesslich leuchtet so eine antike Glühbirne ja nach. LED Ampeln gibts in Österreich noch nicht. Für die Phase Grün auf Gelb habe ich einen speziellen Übergang definiert. Diese Animation läuft drei Sekunden und wechselt dabei von abwechselnd drei mal von Grün nach Schwarz den SolidcolorBrush im Fill Attribut.
Als nächstes wird das Usercontrol in eine weitere XAML Seite eingepackt. Dort gehts dann nur mehr mit puren Code zur Sache. Ein Timer wirft die Statusänderungen an. Da die Ampelphasen ja unterschiedlich lang sind, brauch ich ein wenig Logik um die Timer Zeiten zu ändern. Da die Grün Blink Phase 3 Sekunden dauert muss die Gelb Phase 5 Sekunden sein um in Summe 2 Sekunden Gelb zu sehen. Ich denke der Code spricht auch ohne refactoring für sich selbst
Dim dp As New DispatcherTimer
Dim status As Integer = 0
private Sub page35_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
dp.Interval = New TimeSpan(0, 0, 10)
AddHandler dp.Tick, AddressOf ticking
VisualStateManager.GoToState(Ampel1, "rot", True)
status = 1
dp.Start()
End Sub
Private Sub ticking(ByVal sender As Object, ByVal e As EventArgs)
Select Case status
Case 0
VisualStateManager.GoToState(Ampel1, "rot", True)
dp.Interval = New TimeSpan(0, 0, 10)
status = 1
Case 1
VisualStateManager.GoToState(Ampel1, "gelb", True)
dp.Interval = New TimeSpan(0, 0, 2)
status = 2
Case 2
VisualStateManager.GoToState(Ampel1, "gruen", True)
dp.Interval = New TimeSpan(0, 0, 10)
status = 3
Case 3
VisualStateManager.GoToState(Ampel1, "gelb", True)
dp.Interval = New TimeSpan(0, 0, 5)
status = 0
End Select
End Sub
Jetzt habe ich nur mehr das Problem, wie komme ich an Ihr Geld. Bzw wie können Sie ganz einfach die Anwendung starten?
Dazu rufen Sie einfach folgende Website auf. Per rechtsclick können Sie diese auch lokal installieren.