4sale Logo klein
Kontakt


Bei Fragen und Anregungen:
LightSwitch[at]4sale-it.de

4sale IT Header Downloads

Visual Studio LightSwitch Erweiterung

Einfache Extension für Prozent

Im Visual Studio (mindestens Professional und installiertem LightSwitch Extensibility Toolkit) über Datei/Neu/Projekt ein neues Projekt anlegen. Bei der Auswahl der Vorlagen nehmen wir LightSwitch/Extensibility/..Library(Visual C#) und nennen es z.B. „Extension_Prozent“. Der Name taucht dann später in der Erweiterungsliste von LightSwitch auf.

Wir erhalten sieben vordefinierte Projekte. Daraus machen wir jetzt eine „Business Type Extension“. D.h. wir fügen zum Projekt Extension_Prozent.Lspkg über Rechtsklick und Hinzufügen/Neues Element die Vorlage Business Type mit dem Namen „Prozent“ hinzu.

Als zu überschreibenden Datentyp wählen wir „Decimal“. Dazu wählen wir im Projekt Extension_Prozent.Common/Metadata/Types die Datei Prozent.lsml aus.

In dieser XML-Datei ersetzen wir den „UnderlyingType mit „:Decimal“ statt „:String“. Der angezeigte Name(DisplayName) ist schon richtig auf „Prozent“ gesetzt (wenn gewünscht kann man den natürlich noch ändern). Er erscheint später bei den Typen(wie z.B. Money) und sollte daher sprechend sein.

Es wird automatisch ein Control mit der entsprechenden XAML-Beschreibungsdatei erstellt. Sie ist unter Extension_Prozent.Client/ProzentControl.xaml zu finden. Standardmäßig enthält sie eine TextBox mit dem Binding zu „StringValue“. Wie der Name schon erahnen lässt, ist das unser Wert als String und nicht decimal (das wäre „Value“). Da wir direkt Einfluss auf das Erscheinungsbild nehmen wollen, benutzen wir „StringValue“.

Einfluss nehmen heißt in unserem Fall, wir wollen den Wert in der Datenbank für 10 % als 0,1 gespeichert haben, bei der Darstellung soll aber 10 % stehen. Außerdem soll der Benutzer auch in ihm geläufigen Prozentwerten eingeben können.

Diese Forderungen lassen sich nicht mit reiner Formatierung erledigen, daher brauchen wir einen Konvertierer, der bei der Anzeige den Wert formatiert und bei der Eingabe des Benutzers den Wert durch 100 dividiert. Für diese Konvertierer gibt es ein vordefiniertes Interface „IValueConverter“, das zwei Methoden implementiert: „Convert“ für die Anzeige und „ConvertBack“ für die Eingaben des Benutzers.

Wir wollen also eine Klasse schreiben, die die Konvertierung am Client für unser Control durchführt. Dazu klicken wir rechts auf das Clientprojekt/Presentation/Controls und fügen über Hinzufügen/Klasse eine Klasse mit dem Namen „ProzentwerteKonverter“ hinzu.

Der Code für C# sieht dann z.B. so aus:

    /// <summary>

    /// Annahme: der Wertbereich für Prozent in der Datenbank ist 0 - 1

    /// der Konverter handhabt Werteingaben von z.B. 10 und wandelt dies in 0,1

    /// </summary>

    public class ProzentwerteKonverter : IValueConverter

    {

        // wird aufgerufen, wenn die Objekt-Eigenschaft an ein Control gebunden wird (Anzeige)

        public object Convert(object value, Type targetType, object parameter,

                                System.Globalization.CultureInfo culture)

        {

            decimal _Wert = 0M;

            if (value == null)

                return value;

            if (!(decimal.TryParse((string)value, out _Wert)))

                return String.Empty;

 

            return String.Format(culture, "{0:P}", _Wert);

        }

 

        // wird bei einem Two-Way-Binding aufgerufen, wenn der Wert vom Control wieder

        // zurück in die Objekteigenschaft geschrieben wird

        public object ConvertBack(object value, Type targetType, object parameter,

                                  System.Globalization.CultureInfo culture)

        {

            decimal _Wert = 0M;    

            if (value == null)

                return value;

 

            string _strWert = value.ToString();

 

            if (String.IsNullOrWhiteSpace(_strWert))

                return "0";

            // Prozent entfernen

            _strWert = _strWert.Replace(culture.NumberFormat.PercentSymbol, string.Empty);

            if (decimal.TryParse(_strWert, out _Wert))

            {

                // der Wert wird wieder durch 100 dividiert

                _Wert /= 100;

            }

            return _Wert.ToString();

        }

 

    }

Visual Studio kann jetzt „IValueConverter“ nicht finden, wir brauchen noch die using Deriktive:

using System.Windows.Data; 

Jetzt müssen wir den Konverter noch unserem Control bekannt machen. Dazu erweitern wir unsere XAML-Datei (ProzentControl.xaml) um den gerade benutzten Namespace(wir nennen den „lokal“):

    xmlns:lokal="clr-namespace:Extension_Prozent.Presentation.Controls">

Der Konverter wird als UserControl.Resource deklariert:

    <UserControl.Resources>

        <lokal:ProzentwerteKonverter x:Key="ProzentwertKonverter" />

    </UserControl.Resources>

Zusätzlich müssen wir sie für unser Binding angeben:

    <TextBox Text="{Binding StringValue, Mode=TwoWay, Converter={StaticResource ProzentwertKonverter}, Name="ProzentTextBox" />

Wir benutzen bei der Formatierung die Kultureinstellung. Sie kommt allerdings nicht automatisch, sondern wir müssen sie angeben. Der Einfachheit halber geben wir deutsch direkt in unserer TextBox an. Damit sieht die gesamte XAML-Datei (ProzentControl.xaml) dann so aus:

<UserControl x:Class="Extension_Prozent.Presentation.Controls.ProzentControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:lokal="clr-namespace:Extension_Prozent.Presentation.Controls">

 

    <UserControl.Resources>

        <lokal:ProzentwerteKonverter x:Key="ProzentwertKonverter" />

    </UserControl.Resources>

    <TextBox Text="{Binding StringValue, Mode=TwoWay, Converter={StaticResource ProzentwertKonverter}, ConverterCulture=de-DE}"

             Name="ProzentTextBox" />

</UserControl>

Nach den Änderungen sollten wir über einen Rechtsklick auf das Extension_Prozent.Client-Projekt und Erstellen, dieses einzeln erstellen, um die lästigen Fehler zu beseitigen.

Wenn wir den Debug-Mode schon richtig eingestellt haben (s. How to: Debug or Test a LightSwitch Extension), können wir jetzt unser Werk über F5 testen.

Dazu brauchen wir in eine Tabelle Testdaten nur eine Variable TestProzent anlegen. In der Auswahl für Typ finden wir aber noch kein Prozent.

Dazu müssen wir zuerst die Extension „scharf schalten“. Über die Eigenschaften des LightSwitch-Projekts (direkt unter dem Projektnamen im Projektmappen-Explorer) finden wir links in der Navigation „Erweiterungen“. Dort gibt es die „Microsoft LightSwitch-Erweiterungen“ mit einem Haken vorne und unser Extension_Prozent, allerdings ohne Haken. Den holen wir jetzt nach.

Zurück zu unserer Tabelle haben wir jetzt in der Typauswahl auch unser Prozent. In den Eigenschaften (rechts unten) können wir unter Skalierung die Anzahl der Nachkommastellen festlegen (z.B. 2) und den Wertebereich (z.B. Minimalwert 0 und Maximalwert 1 für 100 %).

Möchte man zwischen dem %-Zeichen und der Zahl noch ein Leerzeichen, so muss man die Formatierung im Konverter ändern

            return String.Format(culture, "{0:# %}", _Wert);

Das könnte man natürlich noch in den Eigenschaften von Prozent konfigurierbar machen(vielleicht später mal).

Außerdem besagt die Fehlermeldung bei Eingabe von über 100 %, dass der Wert 1 oder kleiner sein muss, was für den Anwender, der den Datenbankwert nicht sieht, verwirrend sein kann. Dies kann man auch noch mit einer eigenen Validierungsroutine ändern.

Jetzt ist unser Projekt soweit fertig, wir müssen es noch verpacken zum Ausrollen.

Dazu brauchen wir die Eigenschaften der Extension_Prozent -Projektsmappe (Rechtsklick auf die Projektmappe und Eigenschaften). Unter „Konfiguration“ ändern wir die Konfiguration auf „Release“.

Für Angaben des Autors, Version etc. können wir noch über einen Doppelklick auf die source.extension.vsixmanifest-Datei des Extension_Prozent.Vsix-Projekts die Werte dort ändern.

Jetzt können wir das Projekt erstellen (Rechtsklick Projektmappe neu erstellen).

Fertig!

Für alle, die kein Visual Studio Professional haben, hier das Packet zum Herunterladen als ZIP.

 

zurück