Expression Blend (Part 2): push the button

Von Christina Duskanich Autor Feed 10. December 2010 14:19
Eines der wichtigsten Elemente, egal ob beim kreieren einer App für das Windows Phone 7 (WiPhone), oder einer Website, ist ein Button. Er dient zu Navigation und sollte deswegen auch, zur allgemeinen Verständnis ein entsprechendes Design besitzen. Deshalb möchte ich euch heute zeigen wie ihr diesen ganz einfach erstellen und bearbeiten könnt. Zu Beginn öffnen wir ein neues Projekt und legen uns gleich einen neuen Ordner an. Hierzu gehen wir in den Projekt Panel und erstellen mit einem Rechtsklick auf dem Namen unseres Projekts einen neuen Ordner. In diesem Bsp habe ich ihn “Pictures” genannt. Anschließend öffnen wir den Ordner und ziehen via Drag and Drop unser Bilder in diesen Ordner. Nun suchen wir unter Assets einen Button und ziehen ihn der Größe unseres Buttons entsprechend auf. Unter Layout, with and hight, im Eigenschaften Panel, könnt ihr diesem konkrete Maße zuweisen. Anschließend wählt ihr den Button aus, und oben, unter dem Namen des Projekts das DropDown Menü “Button”, und wählt Edit Template –> create empty template. Mit diesem kommt ihr in den Button hinein und könnt ihn bearbeiten. Dies ist auch mit einem Rechtsklick auf dem dementsprechendem Namen des Buttons, im Objekte und Zeitleiste Panel, möglich. Tipp: Mit einem klick auf das Button DropDown Menü oben, kann man jederzeit wieder zurück Navigieren. In diesen Button ziehen wir nun zwei Bilder. Eines für den Aktiven (gedrückten) Zustand, und eines für den normal Zustand. Dafür wählen wir wieder unter Assets, Image aus, welches wir in den Button ziehen. Mit Rechtsklick, auf das Objekt, AutoSize –> Fill, passt sich dieses Image genau der Größe des Buttons an. Dies kann bei vielen Dingen eingesetzt werden und ist so eine sehr wichtige Funktion. Tipp: Ebenso gibt es im Tools Panel links, eine Schnellauswahl für Assets. Um den Überblick nicht zu verlieren benennen wir die zwei Image: normal & aktiv. Anschließend weisen wir ihnen ein Bild zu: Eigenschaften Panel unter Source. Im State Panel, oben links können wir nun die einzelnen Zustände definieren. Durch klicken auf normal, können wir nun den Zustand des ungedrückten Buttons wählen. Hierzu wählen wir den “Aktiven” Layer und setzten die Opacity auf 0%. Bei MouseOver und Aktive setzen wir das Bild im Layer “Normal” auf 0%. Tipp: Wenn ein Zustand ausgewählt wird, erscheint ein Record Button und die Arbeitsfläche wird rot umrandet. Nun einfach unter Projekt –> Run Projekt das Projekt starten und austesten =)   Meine lieben Leser… Ich absolviere ein 6 monatiges Praktikum, bis Februar, im Team der DPE. Heuer habe ich meine Matura auf der Graphischen abgelegt und werde nach meinem Praktikum, voraussichtlich mit dem Studium Werbung und Graphik beginnen. Xtina

Entwickler Wettbewerbe:

Wettbewerbe

Entwickler Events:

Developer Events

App für Windows 8, Windows Phone oder/und Azure? Diese Events zeigen Dir, wie es geht:

Mehr Information

Aktuelle Downloads

Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork