Flowdocument in WPF

The FlowDocument object in WPF can be thought of as a document with contents that can take up/flow to use the available space in the control. The FlowDocument shown below contains controls such as Paragraph, Table, List, Figure and Floater along with other UI elements.

      <FlowDocument FontFamily="Arial" FontSize="12" Background="Lime" Foreground=" Black" >
 
            <Paragraph>This is a
                <Run FontStyle="Italic" Foreground="Red" FontWeight="Bold" >simple</Run>
                Paragraph that contains a Run.
            </Paragraph>
 
            <Table BorderBrush="Black" BorderThickness="1" FontSize="12" >
                <Table.Columns>
                    <TableColumn Width=" 25*" />
                    <TableColumn Width=" 75*" />
                    </Table.Columns>
                    <TableRowGroup>
                        <TableRow Background=" LightGray" FontSize=" 15">
                            <TableCell>
                                <Paragraph>Item</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Purpose</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph>List</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Display items in a list</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
            </Table>
 
            <BlockUIContainer>
                <Button Name="btnBlockUI" Width="100" Height="50"
         Content="Block UI Button" />
            </BlockUIContainer>
 
            <Paragraph>
                Some inline stuff:
                <Button Name="btnAButton">A Button</Button>
                <TextBox>A Text Box</TextBox>
                <Ellipse Width="50" Height=" 30" 
         Fill="Yellow" Stroke="Red" StrokeThickness=" 5" />
            </Paragraph>
 
            <Paragraph>
                <Floater HorizontalAlignment=" Right">
                    <Paragraph BorderBrush=" Black" BorderThickness=" 1" >
                        <StackPanel Margin=" 2, 2, 2, 2">
                            <Ellipse Fill="Yellow" Width="40" Height=" 20"/>
                            <TextBlock Margin="5" FontStyle="Italic">
                        Figure 1. A floating Ellipse.</TextBlock>
                        </StackPanel>
                    </Paragraph>
                </Floater>
            </Paragraph>
 
            <Paragraph>
                A Floater holds content that can float to other locations.
            </Paragraph>
 
            <List>
                <ListItem>
                    <Paragraph>
                        Ellipse
                        <Ellipse Width=" 20" Height="20" Stroke="Black" StrokeThickness="1"/>
                    </Paragraph>
                </ListItem>
                <ListItem>
                    <Paragraph>
                        Triangle
                        <Polygon
                 Stroke=" Black" StrokeThickness=" 1"
                 Points=" 0, 0 20, 0 10, 20" />
                    </Paragraph>
                </ListItem>
            </List>
        </FlowDocument>

Example Output:

Enjoyed this post? Share it!

 

Leave a comment

Your email address will not be published.