Im Kapitel Ansichten erstellen werden grundlegende Schritte beschrieben, die zur Erstellung des Gerüsts von einem neuen View notwendig sind. Es wird auch gezeigt, wie eine solche noch leere Ansicht registriert wird, damit sie verwaltbar wird. (Ansichten für die Layoutverwaltung und -Navigierung registrieren).

Jedes Element (Steuerelement), das mit der eindeutigen LayoutId versehen wird, wird automatisch verwaltbar. Bei der Verwaltung geht es vor allem um die Möglichkeit, einige Eigenschaften der Steuerelemente zu manipulieren, wie z. B. Hintergrundfarbe, Text, Schriftformatierung, Einstellung von Rand, Breite, Höhe usw. Dies wurde auch im vorherigen Kapitel beschrieben.

Verwaltbare Elemente erhalten eine zusätzliche Funktion, wenn sie innerhalb eines der in der POS-Anwendung verfügbaren Container deklariert werden: Grid und ItemsContainer (aus dem Namespace Comarch.POS.Presentation.Core.Controls). Mit dieser Eigenschaft können sie festlegen, wie und wo sich ein Element im Container befinden soll.

Elemente im ItemsContainer verwalten

Das Hinzufügen von Steuerelementen innerhalb eines ItemsContainers führt dazu, dass sie standardmäßig in der Reihenfolge dargestellt werden, in der sie deklariert wurden. Die Besonderheiten des Containers führen dazu, dass die Elemente standardmäßig entweder horizontal oder vertikal nebeneinander angeordnet werden, je nach der Orientation-Eigenschaft des Containers (die natürlich auch verwaltbar ist). Wenn ein Container eine eindeutige LayoutId hat, wird er verwaltbar und ermöglicht es dem Benutzer, seine Elemente zu manipulieren (alle Elemente müssen auch eine eindeutige LayoutId haben). Wenn der Benutzer in Ansichtsverwaltung öffnet, die diesen Container enthält, kann er mit der Maus ein beliebiges Steuerelement greifen und ziehen, um die internen Elemente des Containers neu zu ordnen, oder das Element vollständig aus dem Container entwerfen oder neu einfügen.

Elemente, die innerhalb eines ItemsContainers deklariert werden, können nur in diesem Container existieren. Dies bedeutet, dass der Benutzer das Steuerelement nicht in einem anderen Container ablegen kann. Diese Einschränkung wird durch den Grid-Container aufgehoben.

Beispiel

<StackPanel>
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer1">
          <TextBlock core:Layout.Id="ExampleView.TextBlock1"/>
          <Button core:Layout.Id="ExampleView.Button1"/>
      </controls:ItemsContainer>
      
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer2">
          <TextBlock core:Layout.Id="ExampleView.TextBlock2"/>
          <Button core:Layout.Id="ExampleView.Button2"/>
      </controls:ItemsContainer>
  </StackPanel>

Im Beispiel sehen Sie eine Ansicht, die aus zwei verwaltbaren Containers: ExampleView.ItemsContainer1 und ExampleView.ItemsContainer2 besteht. Elemente, die innerhalb dieser Container deklariert sind, werden standardmäßig in der Reihenfolge angezeigt, in der sie gespeichert sind.

Wenn Sie sich in der Layoutverwaltung befinden, können Sie die Reihenfolge der Elemente ändern. Er kann die Elemente aus den Containern entwerfen oder sie wieder einfügen (wenn sie schon einmal entworfen wurden). Es wird jedoch nicht möglich, z. B. das Element ExampleView.TestBlock1 vom ItemsContainer1 in den ItemsContainer2 verschoben. Die Elemente können zwischen den Containern nicht verschoben werden.

Elemente im Grid Container verwalten

Der zweite Container, der die Manipulation seiner Elemente ermöglicht, ist der Grid Container. Dieser Container erfordert die Definition einer Tabelle mit Spalten und Zeilen, in dem die Elemente eingebettet werden. Diese Tabelle kann standardmäßig in xaml definiert werden und kann vom Benutzer verwaltet werden (der Benutzer kann die Anzahl der Spalten und Zeilen ändern). Standardmäßig wird jedes Element, das dem Grid hinzugefügt wurde, erst dann angezeigt, wenn der Benutzer in der Verwaltung das Element in die ausgewählte Containerzelle zieht.

Es ist möglich, die Standarddarstellung der Komponenten so zu ändern, dass sie wie beim ItemsContainer funktioniert. Ist die Eigenschaft DefaultShowChildren=true, werden standardmäßig alle Elemente in der Ansicht angezeigt.

Jedes in einem Grid-Container definierte Element kann, wie bei einem ItemsContainer, dem Container eingefügt bzw. aus dem Container entfernt werden. Wenn ein weiterer Container (Grid oder ItemsContainer) vorhanden ist, können die Elemente außerdem direkt dem geschachtelten Container eingefügt werden. Damit ist es beispielsweise möglich, Steuerelemente zwischen verschiedenen ItemsContainern zu verschieben.

Beispiel

<controls:Grid core:Layout.Id="ExampleView.BaseGrid">
      <TextBlock core:Layout.Id="ExampleView.TextBlock1"/>
      <Button core:Layout.Id="ExampleView.Button1"/>
      <TextBlock core:Layout.Id="ExampleView.TextBlock2"/>
      <Button core:Layout.Id="ExampleView.Button2"/>
 
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer1"/>     
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer2" />
  </controls:Grid>

Im Beispiel sind alle Steuerelemente direkt im Grid definiert. Wenn Sie nun zum ersten Mal eine solche Ansicht aufrufen, sehen Sie eine leere Ansicht. Der Grund dafür ist, dass die Elemente im Grid standardmäßig nicht darstellt werden. Wenn Sie hingegen die Layoutverwaltung öffnen, können können Sie die Grid-Tabelle (also die Spalten und Zeilen) definieren und jedes der definierten Steuerelemente in den Grid ziehen. Es wird auch möglich, z.B. das Steuerelement ExampleView.TextBlock1 direkt in einen ExampleView.ItemsContainer1 oder ExampleView.ItemsContainer2 zu verschieben, nachdem Sie diese Container dem Grid eingefügt werden.

Die Standardtabelle von Grid kann auch in xaml über die ColumnDefinition und RowDefinition-Eigenschaftendefiniert werden.  Die gewünschte Anzahl der Spalten bzw. Zeilen bestimmen Sie, indem Sie so viele Werte (bestimmte Zahl, * oder Auto) eingeben, wie Sie Spalten bzw. Zeilen haben möchten, getrennt durch Kommas.

Um beispielsweise fünf Spalten zu definieren, von denen die erste eine Breite von 100 hat, die zweite automatisch ausgewählt wird und die anderen proportional gleichmäßig den restlichen Platz erhalten, muss die ColumnDefinition-Eigenschaft einen folgenden Wert haben: „100,Auto,*,*,*”.

Sie können auch die Standardposition von Elementen in der entsprechenden Grid-Zelle mit der Grid.Position-Eigenschaft festlegen. Der Wert wird durch vier durch Kommas getrennte Zahlen definiert, die wiederum die Zeilennummer (von 0 an), die (Spaltennummer von 0 an), die Anzahl der Zeilen (mindestens 1) und die Anzahl der Spalten, die von dem Steuerelement belegt werden sollen, angeben.

Beispiel

<controls:Grid core:Layout.Id="ExampleView.BaseGrid" DefaultShowChildren="True">
        <controls:Grid.Style>
            <Style TargetType="controls:Grid" BasedOn="{StaticResource {x:Type controls:Grid}}">
                <Setter Property="ColumnDefinition" Value="*,*,*" />
                <Setter Property="RowDefinition" Value="*,*,*" />
            </Style>
        </controls:Grid.Style>
 
        <TextBlock core:Layout.Id="ExampleView.TextBlock1" Text="Hello">
            <TextBlock.Style>
                <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
                    <Setter Property="controls:Grid.Position" Value="1,1,1,1" />
                </Style>
            </TextBlock.Style>
        </TextBlock>
 
    </controls:Grid>

Die Ansicht besteht nun aus einem Grid, für das die Standarddarstellung von Elementen aktiviert, sowie drei Spalten mit gleicher Breite (die Breite wird dynamisch je nach der Größe der Breite der Ansicht festgelegt) und drei Zeilen mit gleicher Höhe (die Höhe wird dynamisch wie bei der Breite festgelegt) definiert wurden. Der Container besteht aus einem Element, nämlich dem TextBlock, dessen Standardposition im Container auf die mittlere Zelle festgelegt wurde.