WPF Layout der Benutzersteuerung als Lauf

Question

In WPF möchte ich ein Fenster erstellen, das wie das folgende aussieht:

Anwendung mit Benutzerkontrollen http://www.freeimagehosting.net/uploads/86209e1a87.png

Auf dem Bildschirm befinden sich vier Benutzerkontrollen, #1, 2, 3, 4. Wie Sie sehen können, sollte die Benutzerkontrolle 2 nicht als Box, sondern als Inline gerendert werden.

Wenn dies ein WPF-Flow-Dokument wäre:

• 1, 3, 4 wären ein Absatz (Boxen)
• 2 ein Lauf (Inlining)

Der Grund dafür ist, dass 2 in einer anderen Form verwendet werden könnte, ohne dass es zu einer Aufspaltung in 3 kommt.

Haben Sie eine Idee, wie man das richtig macht?

Eine Idee, an die ich schon gedacht habe:

• 2 ist eine gewöhnliche Benutzerkontrolle (Boxen). Wenn im Fenster platziert, 2, 3, 4 werden in einem Canvas platziert, wobei Z-Ordnung und Randtonnensteuerung wie sie gerendert werden
• 2 hat ein Raster, das bereits so formatiert ist, dass es 3 und 4 darin als ContentControl aufnehmen kann, und wir injizieren sie über Xaml oder Code dahinter
• 2 stellt das Hauptgitter als Eigenschaft dar, und über die Eigenschaft Attached Goodness fügen wir die Daten für 3 und 4 hinzu
• Wir erstellen unser eigenes Layout-Steuerelement und implementieren die Methoden Arrange und Measure, um ein Layout zu erstellen, das sich wie ein Run

Und einige andere, die nicht so sauber sind...

Haben Sie eine Idee?

Danke,

Patrick

Answer 1

Es ist 1 großes Raster mit 3 Zeilen und 2 Spalten. Jede Zone dieses Rasters enthält ein Raster, das die Steuerelemente Ihrer Benutzer aufnehmen kann. Das Raster Nummer 3 muss also nur einen oberen Rand von -75 haben. Es wird das Raster Nummer 2 überlappen, wenn es in der Xaml unter ihm platziert ist. Dann müssen Sie nur Ihre Spalten und Zeilen zu sperren, je nachdem, wie Sie es zu reagieren möchten.

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.55*"/>
        <ColumnDefinition Width="0.45*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.363*"/>
        <RowDefinition Height="0.369*"/>
        <RowDefinition Height="0.268*"/>
    </Grid.RowDefinitions>
    <Grid Grid.ColumnSpan="2" Background="#FF48C5D0"/>
    <Grid Margin="1,0,0,0" Grid.ColumnSpan="2" Grid.Row="1" Background="#FFD2A268"/>
    <Grid Margin="1,0,0,0" Grid.Row="2" Background="#FFB7F075"/>
    <Grid Grid.Column="1" Grid.Row="2" Background="#FFB129EC" Margin="0,-75,0,0"/>
</Grid>

Martin Lamontagne

Answer 2

Vielleicht sollte man darüber nachdenken, #3 und #4 als Teil der Benutzerkontrolle #2 zu haben, dann ist es einfacher, das Layout zu gestalten. Ein Raster der obersten Ebene legt #1 und #2 aus

Siehe das Layout der zweiten Benutzerkontrolle. Und es alle Raster mit * Größe, so dass es bekommt Größe entsprechend der Fenstergröße.

Alt-Text http://img5.imageshack.us/img5/4419/40506576.jpg