Exemplarische Vorgehensweise: Erstellen einer Designerweiterung
Diese exemplarische Vorgehensweise veranschaulicht, wie eine Designerweiterung für LightSwitch erstellt wird. Eine Designerweiterung definiert eine Farb- und eine Schriftartpalette für die LightSwitch-Shell.
Zum Erstellen einer Designerweiterung führen Sie die folgenden Schritte aus:
Erstellen eines Designerweiterungsprojekts
Angeben des Anzeigenamens und der Beschreibung
Definieren des Designs
Testen der Designerweiterung
Vorbereitungsmaßnahmen
Visual Studio 2013 Professional
Visual Studio 2013 SDK
LightSwitch Extensibility Toolkit für Visual Studio 2013
Erstellen eines Designerweiterungsprojekts
Der erste Schritt besteht darin, ein Projekt zu erstellen und eine LightSwitch-Designvorlage hinzuzufügen.
So erstellen Sie ein Erweiterungsprojekt
Wählen Sie in der Visual Studio-Menüleiste Datei, Neu und Projekt aus.
Erweitern Sie im Dialogfeld Neues Projekt den Knoten Visual Basic oder Visual C#, erweitern Sie den Knoten LightSwitch, wählen Sie dann den Knoten Erweiterungen und anschließend die Vorlage LightSwitch-Erweiterungsbibliothek aus.
Geben Sie im Feld Name den Namen TestThemeExtension für die Erweiterungsbibliothek ein. Der Name erscheint auf der Registerkarte Erweiterungen des LightSwitch-Anwendungs-Designers.
Wählen Sie die Schaltfläche OK, um eine Projektmappe zu erstellen, die die sieben Projekte enthält, die für die Erweiterung erforderlich sind.
So wählen Sie einen Erweiterungstyp aus
Wählen Sie im Projektmappen-Explorer das Projekt TestThemeExtension.Lspkg aus.
Wählen Sie in der Menüleiste Projekt, Neues Element hinzufügen aus.
Wählen Sie im Dialogfeld Neues Element hinzufügen die Option LightSwitch-Design aus.
Geben Sie im Feld Name den Namen TestTheme für die Erweiterung ein.
Klicken Sie auf die Schaltfläche OK. Dateien werden für mehrere Projekte in der Projektmappe hinzugefügt.
Angeben des Anzeigenamens und der Beschreibung
Der Standardname für das Design lautet "TestTheme", die Standardbeschreibung ist "TestTheme description". Beides wird im Anwendungs-Designer zur Entwurfszeit angezeigt. Daher ändern Sie dies in aussagekräftigere Bezeichnungen ab.
So geben Sie den Anzeigenamen und die Beschreibung an
Wählen Sie im Projektmappen-Explorer das Projekt TestThemeExtension.Common aus.
Erweitern Sie die Knoten Metadaten und Designs, öffnen Sie das Kontextmenü für die Datei TestTheme.lsml, und wählen Sie Öffnen mit aus.
Im Dialogfeld Öffnen mit wählen Sie XML (Text)-Editor und dann OK aus.
Ersetzen Sie im Theme-Element den DisplayName-Wert durch Test Theme und den Description-Wert durch This is my first try at creating a theme (Dies ist mein erster Designversuch). Gehen Sie dabei wie folgt vor.
<Theme Name="TestTheme"> <Theme.Attributes> <DisplayName Value="Test Theme"/> <Description Value="This is my first try at creating a theme."/> </Theme.Attributes> </Theme>Diese Werte werden den Entwicklern angezeigt, wenn sie das Design auf der Registerkarte Allgemeine Eigenschaften im Anwendungs-Designer auswählen.
Sie haben nun ein Design erstellt und können es in einer LightSwitch-Anwendung testen.
Definieren des Designs
Über die Projektvorlage LightSwitch-Design wurde dem TestThemeExtension.Client-Projekt eine TestTheme.xaml-Datei hinzugefügt. Diese Datei enthält das Ressourcenverzeichnis für die LightSwitch-Shell. Die Standardwerte und -stile definieren die Darstellung des Designs Blaues LightSwitch-Design (Standard), das den Standard für LightSwitch-Anwendungen darstellt. Sie definieren ein eigenes Design, indem Sie einige oder alle Werte in dieser Datei ändern. Weitere Informationen zu verfügbaren Stilen finden Sie unter Steuerelemente für LightSwitch-Designs.
So definieren Sie das Design
Wählen Sie im Projektmappen-Explorer das Projekt TestThemeExtension.Client aus.
Erweitern Sie die Knoten Präsentation und Designs, und öffnen Sie die Datei TestTheme.xaml.
Wählen Sie in der Menüleiste Bearbeiten, Suchen und Ersetzen und Schnellersetzung aus.
Geben Sie im Dialogfeld Suchen und Ersetzen die Zeichenfolge Segoe UI, Arial im Feld Suchen nach ein, und geben Sie Segoe Script im Feld Ersetzen durch ein.
Wählen Sie in der Liste Suchen in die Option Aktuelles Dokument und dann Alle ersetzen aus.
Elf Übereinstimmungen werden ersetzt, sodass Segoe Script für alle Schriftartwerte definiert wird.
Suchen Sie in der TestTheme.xaml-Datei das TextBoxBackgroundBrush-Element, und ersetzen Sie <SolidColorBrush x:Key="TextBoxBackgroundBrush" Color="White"/> durch <SolidColorBrush x:Key="TextBoxBackgroundBrush" Color="Yellow"/>.
Suchen Sie das ToolbarBackgroundBrush-Element, und ersetzen Sie <SolidColorBrush x:Key="ToolbarBackgroundBrush" Color="#FFE9EDF1"/ durch <SolidColorBrush x:Key="ToolbarBackgroundBrush" Color="Red"/.
Beachten Sie, dass die Farbwerte entweder als System.Drawing.Color-Wert oder als hexadezimaler Farbwert eingegeben werden können.
Tipp
Sie können die XAML-Datei auch in Microsoft Expression Blend 4 öffnen und die Farben in einem visuellen Designer ändern.
Sie haben nun ein rudimentäres Design erstellt und können es in einer LightSwitch-Anwendung testen.
Testen der Designerweiterung
Sie können die Designerweiterung in einer experimentellen Instanz von Visual Studio testen. Falls Sie nicht bereits ein anderes LightSwitch-Erweiterungsprojekt getestet haben, müssen Sie die experimentelle Instanz zunächst aktivieren.
So aktivieren Sie eine experimentelle Instanz
Wählen Sie im Projektmappen-Explorer das BusinessTypeExtension.Vsix-Projekt aus.
Wählen Sie in der Menüleiste Projekt und dann die Option für Eigenschaften von BusinessTypeExtension.Vsix aus.
Wählen Sie auf der Registerkarte Debuggen unter Startaktion die Option Externes Programm starten aus.
Geben Sie den Pfad der ausführbaren Visual Studio-Datei (devenv.exe) ein.
Auf einem 32-Bit-System ist der Standardpfad C:\Programme\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe, und auf einem 64-Bit-System ist der Pfad C:\Programme (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe.
Geben Sie im Feld Befehlszeilenargumente die Zeichenfolge /rootsuffix Exp ein.
Hinweis
Alle folgenden LightSwitch-Erweiterungsprojekte verwenden standardmäßig ebenfalls diese Einstellung.
So testen Sie das Design
Klicken Sie in der Menüleiste auf Debuggen und dann auf Debuggen starten. Eine experimentelle Instanz von Visual Studio wird geöffnet.
Wählen Sie in der experimentellen Instanz in der Menüleiste Datei, Neu und Projekt aus.
Wählen Sie im Dialogfeld Projekt öffnen ein beliebiges vorhandenes LightSwitch-Anwendungsprojekt aus, und öffnen Sie dieses.
Wählen Sie in der Menüleiste Projekt und die Option für ProjectName-Eigenschaften aus.
Aktivieren Sie im Projekt-Designer auf der Registerkarte Erweiterungen das Kontrollkästchen TestThemeExtension.
Wählen Sie die Registerkarte Allgemeine Eigenschaften aus. Wählen Sie anschließend in der Liste Design die Option Test Theme aus.
Klicken Sie in der Menüleiste auf Debuggen und dann auf Debuggen starten. Beachten Sie die Änderungen in der Darstellung der ausgeführten Anwendung.
Nächste Schritte
Damit ist die exemplarische Vorgehensweise für die Designerweiterung beendet. Sie sollten nun über eine voll funktionsfähige Designerweiterung verfügen, die Sie in jedem LightSwitch-Projekt einsetzen können. Möglicherweise möchten Sie die Stile ändern, damit das Design ansprechender wird. Diese exemplarische Vorgehensweise dient nur dazu, Ihnen die erforderlichen Schritte zu veranschaulichen.
Wenn Sie die Erweiterung verteilen möchten, sind einige zusätzliche Schritte erforderlich. Um die Richtigkeit der Informationen sicherzustellen, die für die Erweiterung im Projekt-Designer und Erweiterungs-Manager angezeigt werden, können die Eigenschaften für das VSIX-Paket aktualisiert werden. Weitere Informationen finden Sie unter Gewusst wie: VSIX-Paketeigenschaften. Außerdem sind bei einer geplanten öffentlichen Verteilung der Erweiterung einige Punkte zu berücksichtigen. Weitere Informationen finden Sie unter Gewusst wie: Verteilen einer LightSwitch-Erweiterung.
Siehe auch
Aufgaben
Gewusst wie: VSIX-Paketeigenschaften
Gewusst wie: Verteilen einer LightSwitch-Erweiterung