New Silverlight Toolkit for Windows Phone 7 available

The new November 2010 edition of the open source-based Silverlight Toolkit for Windows Mobile developers brings new pre-built controls that they can make your apps easily and refine. The new and exciting elements AutoCompleteBox, ListPicker LongListSelector (this control helps a lot), different page transition effects (page transitions) are now available in the current version. Of course the controls known from the previous version remain included in the scope of the Toolkit (GestureService GestureListener, ContextMenu, DatePicker, TimePicker, ToggleSwitch, WrapPanel).

You can download the toolkit here: Silverlight - Release: Silverlight for Windows Phone Toolkit - Nov 2010

Silverlight: DataGrid and Comboxbox with MVVM

If you are using a MVVM pattern with a view model you have generally the problem to bind a combobox inside a Datagrid because you cannot access the data context of your view by referencing with the elementname syntax. The trick to bind your Comboxbox inside a DataGridTemplateColumn is to define the reference to your viewmodel with a StaticResoucre and use this for the DataContext-Binding and combobox-Binding:

StaticResoucre of the viewmodel

   1:  

   2:     <controls:ChildWindow.Resources>

   3:         <ViewModels:SettingsViewModel x:Key="SettingsViewModel" />

   4:     </controls:ChildWindow.Resources>

Binding the view to your viewmodel

   1: <Grid x:Name="LayoutRoot" Margin="2" DataContext="{StaticResource SettingsViewModel}">

Combobox-Binding in the Datagrid

   1: <sdk:DataGridTemplateColumn.CellEditingTemplate>

   2:     <DataTemplate>

   3:         <ComboBox ItemsSource="{Binding Gesellschaften,Source={StaticResource SettingsViewModel}}" 

   4:                   DisplayMemberPath="Name" SelectedValue="{Binding GesellschaftId, Mode=TwoWay}" 

   5:                   SelectedValuePath="GesellschaftId"  />

   6:     </DataTemplate>

   7: </sdk:DataGridTemplateColumn.CellEditingTemplate>

RIA Services: Windows Phone 7 and SOAP endpoint

You can use RIA services as a normal WCF service with several clients. For example as Excel OData-Source or as data delivery service for your Windows Phone 7 application. To achieve this goal you have to install the latest RIA Services Toolkit and do a little configuration work.

Reference for Microsoft.ServiceModel.DomainServices.Hosting

Add a reference of Microsoft.ServiceModel.DomainServices.Hosting to your RIA Services project.

It is important that you choose the version which was shipped by the RIA Services (Silverlight) toolkit. The standard standard assembly from the SDK does not contain the SoapXmlEndpointFactory and JSonEndpointFactory.

So take this one:

For the OData endpoint you need the System.ServiceModel.DomainServices.Hosting.OData assembly from the SDK directory.

Configure the endpoints

Configure the Json, Soap and OData endpoints in the web.config:

<system.serviceModel>

      <domainServices>

        <endpoints>

          <add name="Soap" 

               type="Microsoft.ServiceModel.DomainServices.Hosting.SoapXmlEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

          <add name="Json" 

               type="Microsoft.ServiceModel.DomainServices.Hosting.JsonEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

          <add name="OData"

               type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

        </endpoints>

      </domainServices>

       <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />

     </system.serviceModel>

Using of RIA Services in your Windows Phone 7 application

To use the rias service (Soap endpoint) in your Windows Phone 7 application you have only to add a new reference and enter the Uri of your ria service.

Your Uri consists of the <namespace of your ria service>-<classname of your ria service>.svc where “.” are replaced with “-“ !

 

Now you can create a proxy client and access to your Domainservice methods:

   1: public partial class MainPage : PhoneApplicationPage

   2:     {

   3:         object _selectedItem;

   4:         PrivatbilanzService.FinancialPlanningDomainServiceSoapClient client;

   5:  

   6:         public MainPage()

   7:         {

   8:             InitializeComponent();

   9:  

  10:             client = new PrivatbilanzService.FinancialPlanningDomainServiceSoapClient();

  11:  

  12:             SupportedOrientations = SupportedPageOrientation.Portrait;

  13:             Loaded += new RoutedEventHandler(MainPage_Loaded);

  14:  

  15:             PageTransitionList.Completed += new EventHandler(PageTransitionList_Completed);

  16:  

  17:             // Set the data context of the listbox control to the sample data

  18:             DataContext = new MainViewModel();

  19:         }

 

Uri of all endpoints

The Uri for our exposed endpoints are:

OData : http://localhost:[portnumber]/<namespace of your ria service>-<classname of your ria service>.svc/OData/

SOAP: http://localhost:[portnumber]/<namespace of your ria service>-<classname of your ria service>.svc

JSON: http://localhost:[portnumber]/<namespace of your ria service>-<classname of your ria service>.svc/JSON/

With these exposed endpoints, you can talk to multiple clients:

• Excel Power pivot - Using the OData endpoint
• Windows Phone 7 – Using the SOAP endpoint
• AJAX client – Using the JSON endpoint

Silverlight Toolkit: Disable Drag for DragDropTarget

Each of the new DragDropTarget-Controls in the Silverlight Toolkit have a property AllowDrop which you can use to disable or enable the drop behaviour. But if you want to disable the underlaying controls to be draggable you have to cancel the drag start event at the ItemDragStarting Event:

1. Add Event handler

   1: <toolkit:TreeViewDragDropTarget ExpandNodeDelay="500"

   2:     AllowDrop="True" Drop="OnItemDropped" ItemDragStarting="TreeViewDragDropTarget_ItemDragStarting"

   3:     HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top" >

2. Define the event handler

   1: private void TreeViewDragDropTarget_ItemDragStarting(object sender, ItemDragEventArgs e)

   2:         {

   3:             e.Cancel = true;

   4:             e.Handled = true;

   5:         }

Drag & Drop with Silverlight 4

In our new project we use the new Drag and Drop features of Silverlight 4. This new feature increase the usability of any Sliverlight application.

More informations could be found on Tim Heuers blog: Silverlight Toolkit adds DragDrop targets!

Silverlight 3: Add wheel mouse support for ScrollViewer

Das Silverlight 3 ScrollViewer-Control unterstützt ja standardmäßig nicht das Mausrad (ein Kollege meinte: Weil die Microsoft Entwickler noch die alten Microsoft-Mäuse verwenden).

Dieses Problem lässt sich aber durch die Verwendung des Silverlight Toolkit folgendermaßen auf einfache Art und Weise lösen:

(1) Verweis auf das Toolkit-Assembly im  XAML

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

(2) Nach dem InitializeComponent die SetIsMouseWheelScrollingEnabled aufrufen

   1: InitializeComponent();

   2: ContentScrollViewer.SetIsMouseWheelScrollingEnabled(true);

Silverlight Toolkit samples (Out of browser)

Dank verbesserten Out-of-Browser-Funktionalität von Silverlight 4 kann man die Silverlight Toolkit Samples jetzt auch Offline verwenden.

Der „Out of Browser“-Modus, bei dem eine Silverlight-Anwendung in einem eigenen Anwendungsfenster ausführt, wurde bereits mit Silverlight 3 eingeführt und wird mit der kommenden Version deutlich erweitert, so dass sich eine Silverlight-Anwendung nicht mehr grundlegend von einer traditionellen Desktop-Anwendung unterscheidet.

Mit Silverlight 4 wird der “Out of Browser”-Modus durch zahlreiche wichtige Merkmale (u.a. sicherer Zugriff auf das lokale Dateisystem) erweitert. Eine Silverlight 4-Anwendung kann auch als „Trusted Application“ ausgeführt werden. Damit stehen in der Anwendung folgende Möglichkeiten zur Verfügung:

• Dateizugriff, in dem die Pfade von Verzeichnissen im Benutzerprofil abgefragt werden können
• Cross Domain-Netzwerkzugriff
• COM-Interop
• Vollständiger Zugriff auf den Verzeichnispfad von Dateien im Rahmen einer Datei öffnen- und Datei speichern-Dialogbox auf dem lokalen Dateisystem

Silverlight Toolkit: Themes benutzen

Zusätzlich zu einigen Controls enthält das Silverlight Toolkit auch eine schöne Sammlung von professionellen Themes, die man einfach benutzen und so die eigene Silverlight Anwendung aufpeppen kann.
Die Themes beinhalten zur Zeit (Toolkit November 2009):

• Bureau Black
• Bureau Blue
• Expression Dark
• Expression Light
• Rainier Purple
• Rainier Orange
• Shiny Blue
• Shiny Red
• Whistler Blue

Beispiele dieser Silverlight Themes kann man hier sehen.
Wie verwendet man jetzt die Themes?

Schritt 1: Eine Referenz auf die Themes im Projekt hinzufügen

1. Im Solution Explorer “References” und “Add Reference” wählen.
2. Den Ordner mit den Silverlight Toolkit binaries auswählen (C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin).
3. Hinzufügen von Microsoft.Windows.Controls.Theming.
4. Zusätzlich eine Referenz zu dem ausgewählten Theme einfügen (z.B. Microsoft.Windows.Controls.Theming.BureauBlue.dll aus dem \Themes Ordner).

Schritt 2: Eine Namespace Deklaration in die XAML-Seite

1. Die gewünschte XAML-Seite aufmachen und eine Referenz auf das Theme einfügen

Schritt 3: Ein Control (z.B. dataForm) mit dem Theme verknüpfen