Eigene UserControls in WPF und C# mit Datenbindung

Für viele wiederholende Elemente in Benutzeroberflächen bietet sich die Erstellung von eigenen UserControls an. Doch wie sieht es mit dem DataBinding von Außen aus?

In diesem Artikel beschreibe ich die grundsätzliche Vorgehensweise anhand eines einfachen Eingabe-Controls. Das Beispiel gibt es am Ende als Download.

Legen wir los! Was ist das Ziel? Wir wollen einfach ein Eingabefeld mit Text-Label erstellen, welches wir von “außen” konfigurieren und befüttern können.

Xaml

Dazu legen wir ein eigenes UserControl an. In diesem haben wir ein Grid, einen TextBlock für die Beschriftung und eine TextBox für die Eingabe von Werten.

<Grid x:Name="LayoutRoot" DataContext="{Binding ElementName=parent}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"></ColumnDefinition>
        <ColumnDefinition Width="3*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="TextLabel"
               Text="{Binding Path=Label}"
               VerticalAlignment="Center"
               Grid.Column="0"></TextBlock>
    <TextBox x:Name="TextBoxInput"
             Text="{Binding Path=Value}"
             Grid.Column="1"></TextBox>

</Grid>

Das Grid bekommt als DataContext das den Parent zugewiesen. Dazu müssen wir im Code nachher noch eine Zuweisung erledigen. Dadurch können wir die Werte anschließend im Parent-Element über Xaml vornehmen.

TextBlock und TextBox bekommen ihren Text ebenfalls und jeweils über ein Binding. Label und Value.

Die beiden Properties müssen wir anschließend noch im Code-Behind anlegen und als Dependency-Property festlegen.

CodeBehind

Zuerst bearbeiten wir den Konstruktur:

public MyInput()
{
    InitializeComponent();
    LayoutRoot.DataContext = this;
}

Die Zeile “LayoutRoot.DataContext = this;” fügen wir ein. Dies erlaubt uns im Xaml-Code auf den Parent zuzugreifen.

Nun legen wir die Properties für Label und Value an. Schauen wir uns dies am Beispiel für das Label an:

public string Label
{
    get
    {
        return (String)GetValue(LabelProperty);
    }

    set
    {
        SetValue(LabelProperty, value);
    }
}

public static readonly DependencyProperty LabelProperty =
    DependencyProperty.Register("Label", typeof(String),
     typeof(MyInput), new PropertyMetadata(""));

Soweit so unspannend, wir legen einfach ein String Dependency-Property an. Das Gleiche erledigen wir für den Value.

Verwendung der Komponente

Nach dem Kompilieren können wir die Komponente im Xaml-Code unseres Hauptfensters verwenden. Dazu binden wir zuerst den Xml-Namespace ein.

xmlns:controls="clr-namespace:ReuseableWpfComponent.Component"

Und können nun das Control im Xaml-Code anlegen.

<controls:MyInput Grid.Row="0"
                  Label="Name"
                  Value="Andy"
                  Margin="0,10,0,0"></controls:MyInput>

Wie man sieht, setzen wir hier das Label und den Value im Xaml-Code.

Das wars! Viel Erfolg. Das Beispielprojekt gibt es hier.