Exemplarische Vorgehensweise: Ein WPF Toolbox-Steuerelement erstellen

Artikel
05/16/2015

Die WPF Toolbox-Steuerelementvorlage, die in Visual Studio 2010 SDK enthalten ist, können Sie WPF-Steuerelemente (Windows Presentation Foundation) erstellen, die automatisch mit Toolbox hinzugefügt werden, wenn die Erweiterung installiert ist. In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie mithilfe der Vorlage verwendet, um eine Zählersteuerung zu erstellen, die an andere Benutzer verteilen können.

Vorbereitungsmaßnahmen

Zum Abschließen dieser exemplarischen Vorgehensweise müssen Sie Visual Studio 2010 SDKinstallieren.

Hinweis

Weitere Informationen über das Visual Studio-SDK finden Sie unter Erweitern von Visual Studio Overview.Um herauszufinden finden Sie unter wie das Visual Studio-SDK, auf Visual Studio Extensibility Developer Center der MSDN-Website herunterlädt.

Die WPF Toolbox-Steuerelementvorlage Suchen in Visual Studio

Die WPF Toolbox-Steuerelementvorlage befindet sich im Dialogfeld Neues Projekt unter Installierte Vorlagen, in diesen Positionen verfügbar:

Visual Basic, Erweiterungen. Die Sprache des Projekts ist Visual Basic.
Visual C#, Erweiterungen. Die Sprache des Projekts ist C#.

Ein WPF Toolbox-Steuerelementprojekt erstellen

Die WPF Toolbox-Steuerelementvorlage erstellt ein nicht definiertes Benutzersteuerelement und stellt alle Funktionen, die erforderlich ist, um das Steuerelement Toolboxhinzuzufügen.

So erstellen Sie das Projekt

Klicken Sie im Menü Datei auf Neu und dann auf Projekt.
Klicken Sie im Dialogfeld Neues Projekt unter Installierte Vorlagen, klicken Sie auf den Knoten für die bevorzugte Programmiersprache, und klicken Sie dann Erweiterungenaus. Klicken Sie in der Liste der Projekttypen die Option WPF-Toolbox-Steuerelement.
Geben Sie im Feld Name Geben Sie den Namen ein, den Sie für das Projekt verwenden möchten. (Diese exemplarische Vorgehensweise verwendet den Namen Indikator). Klicken Sie auf OK.

Dadurch wird eine Projektmappe, die ein Benutzersteuerelement ein Attribut enthält, um das Steuerelement in Toolboxzu platzieren und ein VSIX-Manifest für die Bereitstellung. Die Name Guckkastenbühnen der Name der Projektmappe und der Name des Namespaces, sondern legen den Namen des Steuerelements fest, wenn es in Toolboxangezeigt wird. Sie legen das später in der exemplarischen Vorgehensweise fest.

Eine Benutzeroberfläche für das Steuerelement erstellen

Das Indikator-Steuerelement erfordert drei untergeordnete Steuerelemente: Zwei Label von Text und Steuerelementen zum Anzeigen der aktuellen Anzahl und ein Button-Steuerelement, um die Anzahl auf 0 zurückgesetzt werden soll. Es werden keine anderen untergeordneten Steuerelemente sind erforderlich, da das Hosten von Anwendungen programmgesteuert des Indikators erhöht.

So erstellen Sie die Benutzeroberfläche

In Projektmappen-ExplorerDoppelklick ToolboxControl.cs, um sie im Designer zu öffnen.

Der Designer zeigt ein Grid-Steuerelement veranschaulicht, das ein Button-Steuerelement enthält.
Wählen Sie das Grid-Steuerelement aus, und klicken Sie dann auf den blauen Balken, die an den oberen und den linken Seite des Datenblatts angezeigt werden, es in zwei Zeilen und zwei Spalten aufzuteilen.
Von Toolboxziehen Sie ein Label-Steuerelement zu jeder der Zellen in der obersten Zeile des Rasters.

An diesem Punkt können Sie das Lay-out des Steuerelements festlegen, indem Sie die Elemente im Raster anordneten. Stattdessen können Sie die Extensible Application Markup Language (XAML) direkt bearbeiten, damit das Steuerelement sich dynamisch angepasst werden, um den Text angepasst.
Im XAML Bereich legen Sie die Höhe der RowDefinition-Elemente und Breite der ColumnDefinition-Elemente „Auto“fest.
Bearbeiten Sie das Markup, damit die Schaltfläche, die zwei Bezeichnungen dem folgenden Beispiel ähneln.
```
<Button Content="Reset" Name="button1" Click="button1_Click" Grid.Row="1" Grid.ColumnSpan="2" />
<Label Content="{Binding Text}" Grid.Row="0" Grid.Column="0" Name="label1" />
<Label Content="{Binding Count}" Grid.Row="0" Grid.Column="1" Name="label2" />
```
Die Grid.Row und Grid.Column-Attribute legen die Position der Elemente im Raster fest. Das Grid.ColumnSpan-Attribut auf die Schaltfläche aktiviert die erste unabhängig von der Breite der Schaltfläche Größe Spalte geändert werden soll.

Die Content-Attribute der Bezeichnungen verwenden eine {Binding} Syntax, um Eigenschaften zu binden, die Sie später in der exemplarischen Vorgehensweise definieren.

Das Benutzersteuerelement Codieren

Das Indikator-Steuerelement macht eine Methode, um den Indikator, ein Ereignis ausgelöst, sobald sich der Zähler erhöht wird, eine Zurücksetzen Schaltfläche und drei Eigenschaften zu erhöhen, um die aktuelle Anzahl, den Anzeigetext zu speichern, und ob die Zurücksetzen Schaltfläche angezeigt oder ausgeblendet wird. Das ProvideTolboxControl-Attribut bestimmt, wo in Toolbox das Indikator-Steuerelement angezeigt wird.

Sie können dieses Steuerelement schreiben auf dieselbe Weise wie ein Windows Forms-Steuerelement schreiben würden und Ereignishandler. h. indem Sie öffentliche Methoden entfernen, um den Inhalt der Bezeichnungen festlegen. Allerdings in WPF können Sie einen Datenkontext für das Steuerelement festlegen, sodass Sie XAML-Element Attribute direkt zu den Eigenschaften im Code gebunden werden können. Dieses Modell stellt eine Abstraktionsebene, um die Kernfunktionen von der Benutzeroberfläche des Steuerelements zu trennen.

Diese exemplarische Vorgehensweise veranschaulicht die Verwendung einer Datenmodellklasse erstellt und bindet dann den Datenkontext des Steuerelements im Datenmodell.

So erstellen Sie ein Datenmodell

Doppelklicken Sie auf die Schaltfläche, um das Codefenster anzuzeigen.
Fügen Sie am Anfang der Datei fügen Sie using-Direktive für den System.ComponentModel-Namespace hinzu.
Nach der generierten Klasse erstellen Sie eine öffentliche Klasse, um den Datenkontext zu definieren.
```
public class MyDataModel : INotifyPropertyChanged
```
Diese Klasse implementiert die INotifyPropertyChanged-Schnittstelle, die die XAML-Elemente zu definierten Eigenschaften zu binden.
Klicken Sie mit der rechten Maustaste auf die INotifyPropertyChanged-Schnittstellendeklaration, klicken Sie auf Schnittstelle implementieren, und klicken Sie dann auf Schnittstelle implementieren erneut.

Visual Studio ein PropertyChanged-Ereignis deklariert.

Nach der Deklaration des Ereignisses erstellen Sie die folgenden privaten Methode, um das Ereignis auszulösen.

public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, 
            new PropertyChangedEventArgs(propertyName));
    }
}

Erstellen Sie die folgenden privaten Felder und die öffentlichen Eigenschaften, um die Werte der beiden Bezeichnungen im Steuerelement enthalten soll.
```
private string text = "Count:";
public string Text
{
    get { return this.text; }
    set
    {
        this.text = value;
        RaisePropertyChanged("Text");
    }
}

private int count = 0;
public int Count
{
    get { return this.count; }
    set
    {
        this.count = value;
        RaisePropertyChanged("Count");
    }
}
```
Das Auslösen des Ereignisses verursacht PropertyChanged XAML, das gebunden wird, um den Inhalt der gebundenen Steuerelementen zu aktualisieren. Das Festlegen der Eigenschaften als public macht sie verfügbar, jedoch nicht in den Designer für andere Programme, es sei denn, sie zu diesen Kontext Daten binden.

Nachdem Sie das Datenmodell erstellt haben, können Sie die Code-Behind-Funktionalität des Steuerelements implementieren.

So implementieren Sie das Steuerelement

Bei der Definition der partiellen Klasse, die das Steuerelement implementiert, ändern, klicken Sie mit der rechten Maustaste auf den Klassennamen UmgestaltenUmbenennen, und klicken Sie dann auf den Namen der Klasse Indikator. Dies ist der Name, der in Toolbox angezeigt wird, wenn die Erweiterung installiert ist.
Fügen Sie direkt oberhalb der Klassendefinition in der ProvideToolboxControl-Attributdeklaration, Änderung der Wert des ersten Parameters aus „Indikator“ an „Allgemein“. Dies legt den Namen fest, die der Elementgruppe Hosten des Steuerelements in Toolboxwird.

Im folgenden Beispiel wird das ProvideToolboxControl-Attribut und die angepasste Klassendefinition.
```
[ProvideToolboxControl("General", true)]
public partial class Counter : UserControl
```
Erstellen Sie ein privates Feld, um den Datenkontext für das Steuerelement, und klicken Sie dann im Konstruktor der Klasse zuweisen, Anhalten MyDataModel den Datenkontext, wie im folgenden Beispiel gezeigt.
```
private MyDataModel dm;
public Counter()
{
    this.DataContext = new MyDataModel();
    dm = (MyDataModel)DataContext;
    InitializeComponent();            
}
```
Erstellen Sie die folgenden öffentlichen Eigenschaften, um die Text und Count-Eigenschaften vom Datenkontext zu spiegeln.
```
public string Text
{
    get { return dm.Text; }
    set { dm.Text = value; }
}

public int Count { get { return dm.Count; } }
```
Diese Eigenschaften können den Inhalt vom Datenkontext, der auf jeder Anwendung verfügbar ist, die das Steuerelement enthält.

Erstellen Sie die folgende öffentliche Methode, um den Indikator zu inkrementieren und ein Ereignis, um die Hostanwendung zu benachrichtigen.

public event EventHandler Incremented;
public void Increment()
{
    dm.Count ++;
    if (Incremented != null)
    {
        Incremented(this, EventArgs.Empty);
    }
}

Implementieren Sie den Ereignishandler für die Schaltfläche auf Zurücksetzen wie folgt.
```
private void button1_Click(object sender, RoutedEventArgs e)
{
    dm.Count = 0;
}
```
Fügen Sie die folgenden öffentlichen Eigenschaft hinzu, um die Zurücksetzen Schaltfläche anzuzeigen oder auszublenden.
```
public Visibility ShowReset
{
    get { return button1.Visibility; }
    set { button1.Visibility = value; }
}
```

Testen des Steuerelements

So erstellen Sie ein Steuerelement, Toolbox einen ersten Test testen es in der Entwicklungsumgebung und in einer Hostanwendung dann testen.

So testen Sie das Steuerelement

Drücken Sie F5.

Dies erstellt das Projekt und öffnet eine zweite Instanz von Visual Studio, das das installierte Steuerelement verfügt.
In der neuen Instanz von Visual Studio, erstellen Sie ein WPF-Anwendungsprojekt.
In Projektmappen-Explorerauf MainWindow.xaml, um sie im Designer zu öffnen.
Klicken Allgemein-Abschnitt Toolbox, ziehen Sie ein Indikator-Steuerelement auf das Formular, und wählen Sie ihn dann aus.

Die Text und ShowReset im Fenster Eigenschaften sollten Eigenschaften zusammen mit den anderen Eigenschaften angezeigt werden, die von UserControlvererbt werden. Die Count-Eigenschaft sollte nicht angezeigt werden, da sie schreibgeschützt ist.
Ändern Sie den Wert der Text-Eigenschaft.

Der Bezeichnungstext, der im Designer angezeigt wird, sollte ändern.
Legen Sie die ShowReset-Eigenschaft auf Hiddenfest, und legen Sie sie anschließend wieder an Visiblefest.

Die Zurücksetzen Schaltfläche im Steuerelement sollte entfernen und dann erneut angezeigt werden.
Ziehen Sie ein Button-Steuerelement auf das Formular, legen Sie das Attribut Contentzu Testfest, und doppelklicken Sie dann auf die Schaltfläche, um auf den Handler in der Codeansicht zu öffnen.

Implementieren Sie den Handler auf, um die Increment-Methode des Steuerelements aufrufen.

private void button1_Click(object sender, RoutedEventArgs e)
{
    counter1.Increment();
}

Klicken Sie in der Konstruktorfunktion drücken nach dem Aufruf von InitializeComponent, Typ += counter1.Implementedund dann die TAB-TASTE zweimal, um einen Handler für das Counter.Incremented-Ereignis zu generieren.

Implementieren Sie den neuen Handler wie im folgenden Beispiel gezeigt.

public MainWindow()
{
    InitializeComponent();
    counter1.Incremented += new EventHandler(counter1_Incremented);
}

void counter1_Incremented(object sender, EventArgs e)
{
    button1.Opacity -= .2;
}

Drücken Sie F5.

Die WPF-Anwendung sollte geöffnet werden.
Klicken Sie auf Test.

Der Zähler erhöht werden soll, und die Schaltfläche sollte einige ausblenden.
Klicken Sie auf Test vier weitere Male.

Der Zähler erhöht werden soll, und die Schaltfläche sollte weiterhin ausgeblendet, bis sie ausgeblendet. Wenn Sie weiterhin, klicken Sie auf die Schaltfläche Where wurde, sollte der Zähler weiterhin zu erhöhen.
Klicken Sie auf Zurücksetzen.

Der Indikator soll 0zurücksetzen.

Nächste Schritte

Wenn Sie ein Toolbox-Steuerelement erstellen, erstellt Visual Studio eine Datei, die ProjectName.vsix im Verzeichnis \ Bin \ Debug \ mit Ordnern des Projekts. Sie können das Steuerelement bereitstellen, indem Sie die VSIX-Datei in einem Netzwerk oder auf einer Website hochladen. Wenn ein Benutzer die VSIX-Datei öffnet, wird das Steuerelement an Visual Studio installiert und Toolboxhinzugefügt. Wenn Sie die VSIX-Datei zur Visual Studio Gallery Website hochladen, sodass Benutzer diese finden können, indem Sie in Erweiterungs-Managerdurchsuchen.

Siehe auch

Freigeben über