De kracht van het Silverlight platform is onder andere de mogelijkheid tot het bieden van een hoge mate van scheiding tussen User Interface design in XAML en de code die voorziet in de interactiviteit en data van de User Interface. In deze tutorial gaan we bekijken hoe je hiermee je voordeel doet in Blend 3 door gebruik te maken van voorbeeld data voor de vormgeving van je ListBox die een lijst met contacten laat zien.
Om deze Tutorial te kunnen volgen dien je de Silverlight 3 Runtime geïnstalleerd te hebben en de evaluatie of volledige versie van Expression Blend 3.
1. Maak een Project
In Expression Blend, gebruik je File|New Project optie. Selecteer ‘Silverlight 3 Application + Website’ en kies een passende naam en lokatie voor je project en klik ‘OK’ om het nieuwe project aan te maken.
2. Instellen van je Expression Blend’s Panels
Experession Blend zal je nieuwe project openen met een blanco designscherm en de User Interface van je applicatie gedefinieerd in de file MainPage.xaml. Tevens zie je aantal extra tabbladen afhankelijk van je setup. Voor deze Tutorial zullen we gebruik maken van de volgende panelen:
afb7_fmt.jpg
afb8_fmt.jpg
Assets
Objects and Timeline
Data
Properties
Zorg ervoor dat deze panelen zichtbaar zijn, gebruik daarvoor het Window menu waar je alle panelen kunt weergegeven en verbergen.
3. Een ListBox toevoegen aan de Design Surface
In het Assets paneel, zoek en selecteer je de ListBox control. En gebruik de cursor om de ListBox in het lege designvlak te tekenen. Maak de ListBox zo groot als je wilt, het wordt namelijk ons enige item binnen deze UI waar we mee aan de slag gaan.
En de structuur van de User Interface wordt automatisch bijgewerkt in Objects and Timeline paneel om de nieuwe toegevoegde ListBox weer te geven (zie figuur 1).
4. Data toevoegen aan het Project
Een ListBox vormgeven zonder data is lastig. Expression Blend 3 maakt dit makkelijker door het voor de designer mogelijk te maken met voorbeelddata te werken door dit automatisch te laten genereren door Blend. Tevens kun je ervoor kiezen om een XML-bestand te laten laden mocht dit beschikbaar zijn.
Het Data paneel maakt beide opties beschikbaar en geeft de voorbeelddata en echte databronnen weer voor zowel het huidige project alsmede het document geopend in je design vlak (zie figuur 2).
Gebruik het icoontje dat hieronder staat weergegeven (zie figuur 3) om nieuwe voorbeelddata toe te voegen aan het project:
Hier kun je kiezen tussen ‘Define New Sample Data’ en ‘Import Sample Data from XML’. Selecteer de eerste optie om het ‘Define New Sample Data’ dialoog venster te krijgen (zie figuur 4).
afb9_fmt.jpg
afb10_fmt.jpg
afb11_fmt.jpg
Kies een passende naam voor je voorbeelddatabron en definieer deze voor het Project en niet voor het document. Houd er rekening mee dat ik er in het bovenstaande screenshot voor gekozen heb om de data niet beschikbaar te maken wanneer de applicatie draait.
Het Data paneel zal nu geupdated worden om de nieuwe gedefinieerde databron weer te geven zoals hieronder te zien is. Standaard wordt er een collectie data gecreëerd, Collection genaamd, die 10 records bevat. Elke record heeft twee eigenschappen genaamd Property1 (type String) en Property2 (type Boolean).
Gebruik het Data paneel om de eigenschappen te wijzigen/hernoemen die ik Picture, Name, EmailAddress, Address, Phone genoemd heb – met de button ‘+’ wordt een eigenschap toegevoegd en een naam wijzigen doe je door dubbel te klikken op een bestaande naam (zie figuur 5).
Om de voorbeelddata er realistischer uit te laten zien, maak je gebruik van de het drop-down menu naast ieder item om het datatype in te stellen. Voor alle items behalve ‘Picture’ dient het Type ‘String’ te zijn en ‘Format’ gelijk aan de naam van eigenschap. Hierdoor zal er een passende tekenreeks gegenereerd worden (zie figuur 6).
Voor de ‘Picture’ eigenschap gebruik je het type ‘Image’ en selecteer je een set van afbeeldingen die je wilt gebruiken in je voorbeelddata. Het is niet nodig om het exacte aantal afbeeldingen te hebben, Blend zal afbeeldingen automatisch dupliceren wanneer dat nodig is. Wanneer je geen passende afbeeldingen voor handen hebt kun je de ‘location’ leeg laten en Blend zal je dan voorzien van standaard afbeeldingen.
5. ‘Bind’ de Data met de ListBox
Nu de voorbeelddata gedefinieerd is kun je data ‘binden’ aan de ‘Listbox’. Sleep de Collection van het Data paneel naar de ListBox. Je krijgt een ToolTip te zien. De Listbox zal de nu de voorbeelddata weergeven en je krijgt nu goed zicht op hoe je items eruit gaan zien zonder dat je enige code hebt hoeven produceren (zie figuur 7).
6. ListBox Item Template opmaken
Als onderdeel van de sleepactie heeft Blend de data gegenereerd en gekoppeld aan ieder ‘item template’ die de Listbox gebruikt om weer te geven. Je kunt de template wijzigen om zelf exact aan te kunnen geven hoe ieder item wordt weergegeven.
Zorg ervoor dat de ListBox is geselecteerd en gebruik het menu links boven je designvlak om het item template te bewerken zoals hieronder (zie figuur 8):
afb12_fmt.jpg
afb14_fmt.jpg
afb15_fmt.jpg
Het menu boven aan het scherm verandert nu om aan te geven dat je het item template aan het bewerken bent en het Objects and Timeline paneel geeft weer welke template er bewerkt wordt.
De designer heeft vier TextBlock controls en een Image aangemaakt en gerangschikt. Het hernoemen van de gegenereerde controls maakt het makkelijker om mee te werken (rechtermuisknop -> Rename) en het eind resultaat ziet er als volgt uit (zie figuur 9).
Nu de data wordt weergegeven in de ListBox is het meer kunst dan wetenschap om er een attractieve ListBox van te maken:
Gebruik de rechtermuisknop om het StackPanel te veranderen in een Grid (zie figuur 10);
Gebruik de rechtermuisknop opnieuw om de adressen en e-mai te groeperen in een StackPanel
afb17_fmt.jpg
Herhaal dit voor de naam en het telefoonnummer.
Sleep vervolgens de afbeelding naar de bovenkant van je boomstructuur om het achter de content te plaatsen.
Klik op de blauwe randen op de linker- en bovenkant van de ‘Grid’ om een 2x2 indeling te krijgen zoals in figuur 11 te zien is (om in te zoomen hiervoor kun je het muiswiel gebruiken).
Gebruik het ‘Properties’ paneel om de volgende eigenschappen van de controls aan te passen:
imgPicture: Margin (0), Horizontal & Vertical Alignment (Stretch), Width & Height (Auto), Row 0, RowSpan (2), Column (0), ColumnSpan (1), MaxWidth(144),MaxHeight(144)
StackPanel (Name/Phone): Margin(0), Row (1), Column (0), ColumnSpan (2), Horizontal Alignment (Right)
StackPanel (Address/Email): Margin(0), Row(0), Column(1), Horizontal Alignment (Right), Vertical Alignment (Stretch)
Tevens zou je ook de TextAlignment, TextWrap en lettertype-eigenschappen kunnen wijzigen in de verschillende TextBlocks. Verder kun je ook van de Grid een Border maken met de BorderBrush, BorderThickness en de CornerRadius en wellicht nog effecten zoals DropShadow op een aantal elementen los laten.
Als je merkt dat je ListBox item niet de volledige breedte vult van de ListBox is er nog één setting die je kunt wijzigen. Deze zit een beetje verstopt, je moet de ‘style’ van de ‘item container’ wijzigen die ListBox gebruikt om ieder item te wijzigen. Selecteer eerst de ListBox zelf en gebruik dan het Object|Edit Additional Styles|Edit Generated Item Container|Edit a Copy menu item
afb18_fmt.jpg
afb19_fmt.jpg
afb22_fmt.jpg
afb24_fmt.jpg
Accepteer vervolgens de standaard waarden in het dialoog venster (zie figuur 12).
En zet de HorizontalContentAlignment eigenschap op Stretch in de Style voor de ‘item container’ om ervoor te zorgen dat elk item zich zodanig uitrekt dat de container gevuld is.
Ga dan terug naar de template voor de ListBox items zelf door in het menu boven het design vlak zoals in figuur 13:
En nadat je hier verder aan de slag bent gegaan met het aanbrengen van een Border, DropShadow en wat andere lettertypen ziet je ListBox er netjes uit (zie figuur 14).
En hoewel er nog steeds een weg te gaan is, zie je hopelijk de kracht en flexibiliteit die het ontwerpen met data je biedt.
7.Data tijdens Runtime
Het mooie van het Silverlight systeem is dat het toevoegen van echte data in de ListBox super eenvoudig is. De data die we hebben ontworpen in Runtime is een lijst van data ItemsSource eigenschap van de ListBox. Deze lijst moest een aantal objecten bevatten met een aantal eigenschappen in ons geval Name, Address, Picture, EmailAddress, Phone. Echter zonder ook maar iets te hoeven veranderen aan het design of aan de user interface kunnen we simpel overstappen naar de live data source met dezelfde eigenschappen.
Mark+Voermans+Nieuw_fmt.jpg
Mark Voermans, is Silverlight & Expression Product Manager voor Microsoft in Nederland. Hij is te bereiken via
http://markvoer.com.