Question

Here is the code that I currently have to create underlined header text in WPF. There has got to be an easier method then using tables.

<Grid>
<FlowDocumentScrollViewer>
  <FlowDocument>
    <Table>
    <Table.Columns>
      <TableColumn Width="Auto"/>
    </Table.Columns>
    <TableRowGroup>
      <TableRow>
        <TableCell>
          <Paragraph Style="{StaticResource Text_LoginHeaderStyle}">
            <Bold>Some header text</Bold>
          </Paragraph>
        </TableCell >
      </TableRow>
      <TableRow>
        <TableCell>
          <BlockUIContainer>
            <Line Style="{StaticResource Control_TitleLineSeparator}" />
          </BlockUIContainer>
        </TableCell>
      </TableRow>
    </TableRowGroup>
    </Table>
  </FlowDocument>
</FlowDocumentScrollViewer>
</Grid>

The definition for the line is

<Style x:Key="Control_TitleLineSeparator" TargetType="Line" BasedOn="{StaticResource BasicHorizontalLine}">
    <Setter Property="Stroke" Value="Gray"/>
    <Setter Property="StrokeThickness" Value="1"/>
    <Setter Property="Margin" Value="0,0,0,3"/>
</Style>

The idea is to create some text and have it underlined such that the underline stretches the entire width of the enclosing container, in this case a Grid layout.

Update:

I don’t have to use a table, that was the only method I could find that worked and didn’t put a huge space between the text and the line. I have now found what looks to be a simpler method.

<BlockUIContainer>
    <TextBlock Style="{StaticResource Text_LoginHeaderStyle}" Text="Skill Groups"/>
</BlockUIContainer>
<BlockUIContainer>
    <Line Style="{StaticResource Control_TitleLineSeparator}" />
</BlockUIContainer>

But even this seems incredibly complicated. I have modified the text above to be self-contained.

Answer 1

You could try wrapping the text you want in a border that only has a border defined at the bottom:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Border BorderThickness="0,0,0,1"
          BorderBrush="Black"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Top"
          SnapsToDevicePixels="True">
    <TextBlock Text="Some text here" />
  </Border>

</Page>