Bryan Albrecht

User Control

Ein UserControl ist eine Komponente, welche wie ein schon vordefiniertes Contol (z.B. ein Button) einmal definiert und danach mehrmals benutzt werden kann.

Bevor man ein UserControl bearbeiten kann, muss man zuerst eins erstellen. Dies funktioniert, wie das Erstellen einer Klasse. Dieses Control muss nicht einmal im gleichen Namespace sein. Aber mehr dazu später.

In dem UserControl können alle Controls verwendet werden, wie auf der Hauptseite auch.

Im folgenden Beispiel wird ein UserControl erstellt, welches für ein Login-Screen verwendet werden könnte. Dieses UserControl habe ich LoginScreen genannt.

Beispiel:

  1. <Grid Background="Black">
  2. <StackPanel Margin="30">
  3. <StackPanel Orientation="Horizontal">
  4. <TextBlock Width="100" >Username </TextBlock>
  5. <TextBox Width="100"></TextBox>
  6. </StackPanel>
  7. <StackPanel Orientation="Horizontal" Margin="0,10">
  8. <TextBlock Width="100">Paswort</TextBlock>
  9. <PasswordBox Width="100"></PasswordBox>
  10. </StackPanel>
  11. </StackPanel>
  12. </Grid>

Um ein UserControl verwenden zu können, muss man zuerst den Namespace angeben, in welchem sich das Control befindet. Dies ist aber nur notwendig, wenn es sich in einem anderen Namespace befindet, da der aktuelle Namespace schon definiert ist.

Vordefinierter Namespace:

  1. xmlns:local="using:BlogProject"

*Hier wurde der Namespace vom obigen Beispiel verwendet.

Beim selber definieren ist es möglich einen Namen festzulegen, unter welchem man die UserContols im demjenigen Namespace zu finden. Im nachstehenden Beispiel wird dafür der Name SecondNamespace verwendet.

Selber Definierter Namespace:

  1. xmlns: SecondNamespace ="using: BeispielNS "

*Der Namespace BeispielNS ist nur ein Beispielsname und muss dem eigentlichen Namen angepasst werden.

Für das Einfügen der UserControl in die App zeige ich nun zwei Möglichkeiten.

Möglichkeit 1:

In dieser Möglichkeit wird gezeigt, wie man ein UserControl direkt ins XAML einbindet.

Dies wird über den vorher definierten Namespacename, welcher als Tag verwendet wird gemacht.

Wenn man nun das vorhin erstellte UserControl einbindet, wird das so aussehen:

  1. < local:UserControl1 />

Möglichkeit 2:

In dieser Möglichkeit wird das UserControl über den Code einem StackPanel als "Kind" hinzugefügt.

Dazu muss das StackPanel einen Namen haben, auf welchen man im Code zugreifen kann. Dies ist möglich mit dem x Name.

Stackpanel:

  1. <StackPanel x:Name="MainStackPanel" /<

Control einfügen:

  1. private void AddLoginPage()
  2. {
  3. LoginScreen loginScreen = new LoginScreen();
  4. MainStackPanel.Children.Add(loginScreen);
  5. }

Mit dieser Möglichkeit ist es auch einfach das UserControl wieder als "Kind" zu entfernen.

Code:

  1. private void ClearLoginPage()
  2. {
  3. LoginScreen loginScreen = new LoginScreen();
  4. MainStackPanel.Children.Clear();
  5. }

Aber Achtung! Dabei werden gleich alle "Kinder" gelöscht.