WPF Layout of user control as a run

Question

In WPF, I want to create a Window that looks like the following:

Application with user controls http://www.freeimagehosting.net/uploads/86209e1a87.png

On the screen are four user control, #1, 2, 3, 4. As you can see, user control 2 should not be rendered as a box, but inlined.

If this were a WPF flow document:

• 1, 3, 4 would be a paragraph (boxing)
• 2 a run (inlining)

The reason is that 2 could be used in another form without splitting for 3.

Do you have any idea how to do this in a proper manner ?

Some idea already thought of:

• 2 is and ordinary user control (boxing). When placed in the window, 2, 3, 4 are placed in a canvas, using there Z-Order and margin ton control how they are rendered
• 2 has a grid already formatted so that it could accept 3 and 4 in it as ContentControl, and we inject them via Xaml or code behind
• 2 exposes the main Grid as a property, and via the Attached Property goodness, we add the data for 3 and 4
• We create our own layout control and implement the Arrange and Measure methods to create a layout acting like a Run

And some others that are not as clean...

Any thoughts ?

Thanks,

Patrick

Answer 1

I think you have your form broken up incorrectly, IMO.

Area 2 should not include the bottom piece you're describing that you want to have "inlined".

It should separate (as far as layout is concerned), and probably fit in a grid with 2 columns and 2 rows along with Area 3 and Area 4. Area 3 would then need to have a rowspan of 2.

The XAML, in this case, would actually be pretty clean if done this way.

It might look something like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <uC:Area1 Grid.Row="0"><!-- Area Control here --></uC:Area1>
    <uC:Area2 Grid.Row="1"><!-- Area Control here --></uC:Area2>

    <Grid Grid.Row="2">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <uC:AreaDuree Grid.Row="0" Grid.Column="0">
            <!-- Area Control here -->
        </uC:AreaDuree>

        <uC:Area4 Grid.Row="1" Grid.Column="0">
            <!-- Area Control here -->
        </uC:Area4>

        <uC:Area3 Grid.RowSpan="2" Grid.Column="1">
            <!-- Area Control here -->
        </uC:Area3>                        

    </Grid>

</Grid>

Answer 2

I suggest you to split your Control #2 in 3 or 4 more specific UserControl. Then load #2, #3, #4 inside a WrapPanel. Check this link: Layout of UserControl to implement an intelligent wrap panel Arrange and Mesure strategy.