Dieses Werkzeug übernimmt im Gegensatz zu Expression Design nicht die Farbe von irgendwo auf dem Screen, sondern alle Farben die auf einer Linie irgendwo über den Screen gezogen werden. Der Gradient eyedropper generiert also einen komplexen Verlauf mit allen Farben die zwischen einem Anfangs- und Endpunkt liegen.

Wie der Gradient eyedropper in Action funktioniert, sieht man in diesem kleinen Screencast.

SharePoint 2010

Auf der offiziellen Produkteseite von SharePoint2010 wurden erste Videos aufgeschaltet.
So richtig informieren will Microsoft ja erst auf der SharePoint Konferenz 2009 in Las Vegas.
So ist auf der Office 2010 Backstage Seite noch nicht viel zu sehen (lediglich drei Filme sind online).
Trotzdem findet man so einiges, wenn auch ein bisschen versteckt. Der Film der vermutlich am meisten von SharePoint 2010 und SharePoint Workspace 2010 zeigt, ist die Live Demo von Paul Cannon (Office Product Manager)

Mittlerweile erscheinen ja für alle SharePoint-Versionen regelmässig Updates. Über diese Updates informiert nun das SharePoint Server TechCenter auch Technet. Dies sowohl für MOSS wie auch für WSS.

Expression 3

Zum gleichen Zeitpunkt wie Silverlight 3 ist auch die Expression Suite 3 veröffentlich worden. Hier ist sicher Expression Blend 3 interessant. Aktuell ist die Suite aber nur in Englisch verfügbar.

Ebenfalls einen Download wert scheint SketchFlow zu sein. Ein neues Programm innerhalb der Expression Suite. Damit können schnelle visuelle Prototypen erstellt und animiert werden.

Live Videos und eine perfekte Linksammlung zu allen Funktionen der aktuellen Expression Programme finden sich im Team Blog von Expression Blend und Design.

In diesem Zusammenhang wurden aber auch andere Silverlight Tools aktualisiert. Der DeepZoom Composer ist nun in der Version 1 verfügbar. Allerdings sind auch schon erste Fehler aufgetaucht. Die aktuellste Version kann unter diesem Link heruntergeladen werden.

FAST ESP
Ich werde immer wieder angefragt, wie das nun mit FAST ESP und SharePoint aussieht. Die Fragen drehen sich um Lizenzmodelle bis hin zur Integration. Ein guter Start um sich mit Hintergrundwissen zu versorgen ist der Blog von Vedant Kulshreshtha.

Ein weiterer guter Beitrag, wie die Integration technisch aussieht, ist auf Channel 9 zu sehen.  Das Video zeigt eine PDC 2008 Session zum Thema „FAST: Building Search-Driven Portals with Microsoft Office SharePoint Server 2007 and Microsoft Silverlight“

BASTA 2009
Parallel zur BASTA 2009 findet die ShareConnect 2009 statt. Eine Konferenz für SharePoint Entwicklung und Management. Auf dieser werde ich zwei Sessions halten. Wer also Lust hat soll vorbeikommen und mir Hallo sagen.

Hier das fertige Resultat im Browser. (Das rote Rechteck unter dem Fenster ist nur zur Kontrolle, ob der Schatten auch transparent wirkt.)

Um ein solches Fenster-Template zu bauen hat man in Silverlight und speziell in Expression Blend zwei Probleme.

1: Der Schlagschatten der rechten unteren Ecke. Dieser muss rund verlaufen und nahtlos an den horizontalen und vertikalen Schatten angepasst sein.

2. Der Schatten muss mit dem Fenster mit skalieren.

Hier der Weg wie ich dieses Problem gelöst habe. Als erstes habe ich auf einem Grid drei weitere Grids, die gleich gross sind, positioniert:

• Schatten-Grid (enthält den Schatten)
• Inhalt-Grid (enthält den Inhalt Kopfzeile und Tasten)
• Fenster-Grid (enthält den Rahmen des Fensters)

Beim Inhalt- und Schatten-Grid werden der Kopfbreich und der Tastenbereich gesperrt, so dass sie nicht mit skalieren. Da diese ja gleich gross bleiben und nur der Inhalt (weisse Fläche) grösser wird.

Schatten Grid
Der Schatten-Grid enthält fünf Felder. Die horizontalen und vertikalen Felder mit dem verlaufenden Schatten und die drei quadratischen Felder der Abschlüsse und der Ecke. Diese Bereiche werden nur auf dem Schatten-Grid gesperrt, so dass die Abschlüsse der Schatten nicht skalieren, sondern nur die entsprechenden horizontalen und vertikalen Schatten.

Das Problem der abschliessenden Schatten habe ich folgendermassen gelöst. In die Ecke (und die Abschlüsse) platziert man ein Quadrat, das die gleiche Dimension wie die Rechtecke mit den Schatten hat. Dort platziert man einen radialen Verlauf und verschiebt das Zentrum des Verlaufs in die entsprechende Ecke. Ebenfalls muss man alle Verläufe mit der Alphamaske entsprechend nachbearbeiten, so dass sie auch wirklich transparent werden.

Der Inhalt-Grid
Der Inhalt-Grid wird, im Gegensatz zum Schatten-Grid, nur im Kopf- und  Tastenbereich gesperrt.

Fenster-Grid
Der Fenster-Grid  enthält den Rahmen des Fensters und wird überhaupt nicht gesperrt.

Da diese drei Grids nun alle auf einem übergeordneten Grid liegen kann nun das ganze Fenster inklusive Schatten skaliert werden.

Um selber solche Deep Zooms zu bauen ist von Microsoft der Deep Zoom Composer entwickelt worden. Relativ intuitiv kann man mit dieser kleinen Software das gewünschte Bilderlayout zusammenstellen und das Ganze entweder als Deep Zoom Image oder als Collection (welche das Silverlight MutliScaleImage control befüllt) exportieren.

Und ja, Deep Zoom ist verwandt mit der SeaDragon Technolgie, die es sogar als iPhone Applikation gib.

Nun stellt sich natürlich die Frage, wie man dieses Control in Blend bearbeiten kann (öffnen kann man es in Blend ja ohne Probleme). Wenn man aber F5 drückt um die Seite zu testen wird im Browser lediglich eine leere Seite angezeigt. Da ich diese Funktion aber in einem Projekt brauche, musste ich hier ein bisschen nachforschen. Hier meine Erkenntnisse:

1: Das Deep Zoom Resultat wie folgt exportieren:

• Output Type: Silverlight Deep Zoom
• Image Settings: Export as a collection (multiple images)

2: Nun öffnet man die Datei “DeepZoomProject.sln“ aus dem Projektordner in Blend

3: Wenn man jetzt F5 drückt passiert nichts. Der Grund dafür ist, dass das Controll an einem anderen Ort aufgerufen wird. Standardmässig heisst der Export “DeepZoomProjectWeb”. Im geöffneten Projekt sind einige Ordner und Dateien vorhanden. Einer davon heisst auch “DeepZoomProjectWeb”. Darin befindet sich ein Ordner “ClientBin“. Dort kann man nun die Datei “DeepZoomProjectTestPage.html” öffnen und nun hat man das Control in Blend.

4. Änderungen an der Deep Zoom Collection können nun aber nicht mehr im Deep Zoom Composer gemacht werden. Man kann zwar nachträglich immer noch die .dzprj-Datei in den Deep Zoom Composer laden. Die Änderungen werden aber nicht mehr dynamisch in Blend nachgeladen. Eine ähnliche Anbindung wie zwischen Blend und Visual Studio existiert in diesem Fall leider nicht.

Seit einiger Zeit gibt es von Adobe eine Online Applikation (logischerweise in Flash programmiert) die hier Abhilfe verspricht. Adobe kuler kann auf Grund verschiedener Kombinationsregeln (bspw. Komplementärfarben, monochromatischen Tönen und Farbabstufungen) eigene Farbvorschläge machen. Ein Farbrad und darin verankerte Pipetten, die den Regeln entsprechend die Nachbarfarben selektieren, ergänzen das Interface. Die Farbwerte werden in RGB, CMYK, LAB, HSV und hexadezimalen Werten ausgegeben. Die so entwickelten Farbkombinationen kann man nun mit anderen Anwendern teilen, bewerten lassen oder eben auch selber benutzen.

Zwei Entwickler haben nun auf Codeplex eine Standalone Applikation und Plugins für die Expression Suite bereitgestellt. Das Projekt mit dem Namen “Colorful Expression“ lässt sich die kuler-Farbkombinationen nach Bewertungen, Beliebtheit und weiteren Kriterien sortieren und für Blend und Designer exportieren. Dabei kann man entweder die PlugIn-Funktionalität der beiden Programme benutzen oder eine eigene WPF-Applikation.

Und so bringt man die Farben aus “Colorful Expression“ in die Expression Applikationen:

Microsoft Expression Blend 2

1: In “Colorful Expression“ die gewünschte Farbkombination auswählen

2: Beim “Mouse over“-Effekt zeigt sich ein “#“-Symbol. Wenn man auf dieses klickt, werden die Hex-Daten der Farben in die Zwischenablage kopiert.

3: Nun kopiert man die Zwischenablage in ein Blend-Projekt. Dies erzeugt eine sichtbare Farbmatrix, die man später wieder löschen kann. Gleichzeitig wird aber im Hintergrund eine „lokale Brush Ressource“ mit den entsprechenden Farben angelegt. Diese kann nun für das Projekt benutzt werden.

Microsoft Expression Design 2

1: In “Colorful Expression“ die gewünschte Farbkombination auswählen

2: Beim “Mouse over“-Effekt zeigt sich ein Symbol mit einem Pfeil nach unten. Das Tooltip nennt: „Save as Expression Design Swatch Library“. Wenn man auf dieses klickt, werden die Hex-Daten der Farben als XML-Datei exportiert.

3: In Expression Designer klickt man in die Eigenschaften der Darstellung in klickt auf das Kontextmenü in der obersten Farbreihe. In dem Kontextmenü wählt man unten links die Einstellungen und wählt den Menüpunkt „Musterbibliothek importieren“ aus.

Nun wie bringt man diese Controlls in Blend?

Nach der Installation der Silverlight ToolKit 2 .msi-Datei liegen die Dateien der Installation unter:

C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries

In Blend rechtsklickt man nun im Projekt-Panel auf “Verweise” und wählt dort “Verweis hinzufügen”.

Danach navigiert man zu:

C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Toolkit\March 2009\Libraries

und fügt die entsprechenden Controll DLL hinzu.
Was ist in den Controlls:

System.Windows.Controls
Update: (Liegt unter: C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Client)

• Calendar
• CalendarButton
• CalendarDayButton
• CalendarItem
• DatePicker
• DatePickerTextBox
• GridSplitter
• TabControll
• TabItem
• TabPanel

System.Windows.Controls.Toolkit

• DockPanel
• Expander
• HeaderedContentControl
• HeaderedItemsControls
• Label
• TreeView
• TreeViewItem
• Viewbox
• WrapPanel

System.Windows.Controls.Input.Toolkit

• AutoCompleteBox
• ButtonSpinner
• DomainUpDown
• ListTimePcikerPopup
• NumericUpDown
• RangeTimePickerPopup
• TimePicker
• TimeUpDown

System.Windows.Controls.DataVisualization.Tookit

• AreaDataPoint
• AreaSeries
• BarDataPoint
• BarSeries
• BubbleDataPoint
• BubbleSeries
• DategoryAxis
• Chart
• ColumnDataPoint
• ColumnSeries
• DateTimeAxis
• LegendItem
• LinerarAxis
• LineDataPoint
• LineSeries
• PieDataPoint
• PieSeries
• ScatterDataPoint
• ScatterSeries

System.Windows.Controls.Layout.Tookit

• Accordion
• AccordionItem
• ExpandableContentControll
• LayoutTransformer
• TransitionContentControll
• System.Windows.Controls.Theming.Toolkit
• Bubble Creme
• Bureau Black
• Bureau Blue
• Expression Dark
• Expression Light
• Rainier Purple
• Rainier Orange
• Shiny Blue
• Shiny Red
• Twilight Blue
• Whistler Blue

Onlinebeispiele für alle Controlls findet man auf:

• Silverlight 2 Toolkit Samples
• Silverlight 3 Toolkit Samples
• oder in der guided tour of the Silverlight Toolkit