Which WPF control should I use for this desired output format?

Question

I have some data I need to present to a user in a very specific format and I want something that looks like this:

+- Window 1 --------------------------+ +- Window 2 ----------+
| This is some text that is being     | | Yet more stuff      |
| output for the user.                | |                     |
|                                     | |                     |
+-------------------------------------+ +---------------------+
+- Window 3 ----------------+ +- Window 4 --------------------+
| Yoiks!                    | | Blah blah blah                |
| To eternity and beyond... | |                               |
|                           | |                               |
+---------------------------+ +-------------------------------+

There will be a number of these items, all with different headings and they will be of fixed sizes (each section will be a different size but the sizes of each section are fixed). The text within the sections will be fixed fonts (like Courier), not proportional.

I already have the WPF StackPanels set up to properly arrange these controls the way I want them. All I need to know is what's the best control to use for the actual content (a nice frame and heading, with fixed-size text within).

One other thing, I need to be able to underline one or more of the characters inside the control. In my Java version, I was able to use HTML to do this. It'd also be nice if the text was able to have other properties (like foreground and background color) but it's not absolutely necessary.

Answer 1

There are countless ways to do this. The WPF controls are extremely flexible.

 <Border Width="320" Height="200" Canvas.Left="40" Canvas.Top="72" BorderThickness="1" BorderBrush="Black">
        <DockPanel>
            <Label Content="Window 1" VerticalAlignment="Top" Width="320" Background="#FFFFE58B" DockPanel.Dock="Top" />
            <RichTextBox DockPanel.Dock="Bottom">
                <FlowDocument>
                    <Paragraph><Run Text="I am a fancy textbox"/></Paragraph>
                </FlowDocument>
            </RichTextBox>
        </DockPanel>
    </Border>

You should be able to do anything you need formatting wise in a rich text box

Answer 2

You should divide your layout problem into multiple different layers. First is how big and where your "windows" are. Here I would either use bunch of stack panels or grids inside each other. This can be little heavy-weight, but it will make your layout really flexible.

Then I would use GroupBoxes to get that "Titled window" look. You can then set anything as their content.

Something like this?

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"  />
                <ColumnDefinition Width="1*"  />
            </Grid.ColumnDefinitions>
            <GroupBox BorderThickness="1" BorderBrush="Black" Header="Window 1" Grid.Column="0">
                <TextBlock>This is some text that is being output for the user.</TextBlock>
            </GroupBox>
            <GroupBox BorderThickness="1" BorderBrush="Black" Header="Window 2" Grid.Column="1">
                <TextBlock>Yet more stuff</TextBlock>
            </GroupBox>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"  />
                <ColumnDefinition Width="3*"  />
            </Grid.ColumnDefinitions>
            <GroupBox BorderThickness="1" BorderBrush="Black" Header="Window 3" Grid.Column="0">
                <TextBlock>
                    Yoiks!
                    To eternity and beyond...
                </TextBlock>
            </GroupBox>
            <GroupBox BorderThickness="1" BorderBrush="Black" Header="Window 4" Grid.Column="1">
                <TextBlock>Blah blah blah</TextBlock>
            </GroupBox>
        </Grid>
    </Grid>

Answer 3

Try the GroupBox panel