Sigurd Snørteland


Windows User ID i Silverlight

SilverlightInitParams-1

Når man utvikler forretningsapplikasjoner har man ofte behov for å få tilgang til windows user id’en til den påloggede brukeren, og i ASP.NET kan man gjør dette med følgende kommando: Page.User.Identity.Name. I Silverlight har man derimot ikke tilgang til denne informasjonen, noe som kan skyldes at Silverlight skal være crossplatform og at dette kan skape vansker i en slik sammenheng, og/eller det kan skyldes den restriktive sikkerhetspolicy som Microsoft har satt i Silverlight.

En måte å komme rundt denne begrensningen på er å kombinere asp.net og InitParameters-funksjonen i Silverlight. I tidligere versjoner av Silverlight hadde man en egen aps-tagg for silverlight (<asp:silverlight>) og dermed kunne man fra asp.net sette initParameteret i runtime. Nå er denne taggen fjernet fra asp.net og man må i stede benytte en vanlig <object>-tagg. Sammen med den endringen forsvant også muligheten for å kommunisere med Silverlight-applikasjonens initParametere direkte fra asp.net. Løsningen på dette er å benytte en <asp:Literal>-tagg inne i Silverlight-objektdefinisjonen, og skrive hele initParameteret-taggen i runtime. Se bildet nedenfor for detaljer:

SilverlightInitParams-2

I ‘Page_Load’ metoden til asp-siten henter jeg windowsID’en fra den påloggede brukeren og skriver denne verdien til <asp:Literal>-taggen som på bildet nedenfor:

SilverlightInitParams-3

I App-filen i Silverlight plukker jeg ut initParameteret og setter den inn MainPage gjennom at jeg har oppdaterte konstruktøren til MainPage til å ta imot dette parameteret (se bildet lenger nede). Nedenfor ser dere StartUp-metoden til App-filen:

SilverlightInitParams-4

Bildet under viser hvordan userid-parameteret ender opp i MainPage-kontrolleren og blir presentert som tekst for brukeren.

SilverlightInitParams-5

Selv om jeg i dette eksemplet tok utgangspunkt i å sende windows user id’en inn til silverlight under runtime, så kan metoden benyttes for å sende alle typer data inn til Silverlight. Man kan f.eks. benytte denne metoden for å lese konfigurasjons-instillinger fra web.config i asp.net-applikasjonen og sende dem inn til Silverlight som initparametre.

Klikk på bildet nedenfor for å laste ned kildekoden til dette eksemplet:

download_SilverlightInitParams


Custom Silverlight Slider

Noe av det jeg setter mest pris på med Silverlight & WPF er at alle standardkontrollere er bygget opp av basismoduler som grid’er, rectangler, textblock’er, osv. i xaml. Dette gjør det mulig å ”drille” ned i alle silverlight-kontrollere og  ta totalkontroll over stylingen. I et prosjekt jeg jobber på for tiden var det ønskelig å gjøre stylingmessige tilpasninger av en standard slider-kontroll, og her er en liten introduksjon til hvordan jeg utførte denne tilpasningen.

Resultatet ser dere på bildet nedenfor. Ved å klikke på bildet kan du se et live eksempel på løsningen.
SilverlightSlider_5

Jeg har forsøkt å forenkle dette prosjektet maksimalt, og derfor er basis-xaml’en du ser nedenfor på bare noen få linjer. Denne xaml’en setter inn en heading + en silverlight slider med standard layout.

SilverlightSlider_1_code

Nedenfor ser dere resultatet av standard xaml’en før styling:

SilverlightSlider_1

Styling av for eksempel en slider-kontroller kan utføres direkte i xaml’en i Visual Studio, men jeg foretrekker å benytte Expression Blend fordi den hjelper meg med å finne riktig xaml’en for den enkelt kontrolleren. Inne i Blend vises en oversikt over alle kontrollere som finnes i prosjektet. Jeg finner slider-kontrolleren og høyreklikke på den og velger ’Edit template -> Edit a copy’ (som på bildet nedenfor).

SilverlightSlider_2

Når man velger å opprette en kopi av en silverlight-kontroller blir xaml’en for denne kontrollen satt inn i ’UserControl.Resources’ i usercontrol’ens xaml, slik at den kan tilpasses av deg som utvikler.

Slider-kontrollen har et sett med styling for både horisontal og vertikal visning, men i dette tilfellet skal vi bare fokusere på den horisontale stylingen. Grid’en ’HorizontalTemplate’ består av et antall komponenter der de viktigste er:

  • TrackRectangle – Selve linjen/backgrunnen til slider’en
  • HorizontalTrackRectangleChangeDecreaseRepeatButton – Venstre side av ‘HorizontalThumb’, som i dette tilfellet skal være farget rosa, og som viser ’progressen’ til slideren.
  • HorizontalTrackRectangleChangeIncreaseRepeatButton –Høyre side av ‘HorizontalThumb, som I dette tilfellet skal være farget grått, og som viser gjenværende ”sum” i slider’en.
  • HorizontalThumb – Selve knappen man drar frem og tilbake på slider’en

På de to bildene nedenfor ser der endringen som er gjort i forhold til original styling. Endringene innbefatter blant annet høyde på slider-komponenter, fargevalg og endring av stylingtemplate.

Før styling-endring:
SilverlightSlider_2_code

Etter styling-endring:
SilverlightSlider_3_code

HorizontalTrackRectangleChangeDecreaseRepeatButton & HorizontalTrackRectangleChangeIncreaseRepeatButton har fått opprettet hver sin ‘ControlTemplate’ hvor blandt annet fargen er definert.

Før endring:
SilverlightSlider_4_code

Etter endring, nå med to ‘ControlTemplate’-metoder:
SilverlightSlider_5_code

Bildet nedenfor viser at progress’en nå vises riktig med fargene rosa og grått. Det som gjenstår å endre er selve knappen man benytter for å slide, kalt ‘HorizontalThumb’.

SilverlightSlider_3

‘HorizontalThumb’ endres ved å høyreklikke på den i kontrolloversikten og deretter velge ’Edit template -> Edit current’

SilverlightSlider_4

Opprinnelig vises ‘HorizontalThumb’ som en knapp men jeg ønsker i stede å vise en rosa sirkel med skyggeeffekt. Jeg velger derfor å fjerne alt som står mellom taggen <ControlTemplate TargetType=”Thumb”> og
</ControlTemplate>, og erstatter dem med to ellipser som på bilde 2 nedenfor.

Før endring:
SilverlightSlider_6_code

Etter endring:
SilverlightSlider_7_code

Det endelige resultatet er dere på bildet nedenfor:
SilverlightSlider_5

download_SilverlightSlider


Key Performance Indicators i Silverlight

Som jeg har skrevet om tidligere på denne bloggen så gir Silverlight helt nye muligheter for utvikling og styling av usercontrols enn f.eks. det windows forms gjør. Når jeg så behovet for en kontroll for visning av KPI (Key Performance Indicator) i et prosjekt nylig var det derfor naturlig å prøve å utvikle en slik kontroll selv. Jeg har tatt utgangspunkt i en listbox-kontroll og definerte en ItemTemplate med ulike kontrollere som textblock og ellipse for visning av status og informasjon på de ulike KPI’ene. Kontrollene inne i listbox’en er bindet mot ulike parametre i en KPI-klasse.

Det endelige resultatet er dere på bildet nedenfor:
SilverlightKPI_1

Her er xaml’en for hvordan listbox’en er bygget opp:
SilverlightKPI_2_code

Her vises det hvordan listbox’en bindes mot en liste av KPI-klasser:
SilverlightKPI_1_code

download_SilverlightKPI