代码之家  ›  专栏  ›  技术社区  ›  Chris Johnston

如何使下划线/边框一直延伸到整个容器

  •  0
  • Chris Johnston  · 技术社区  · 15 年前

    下面是我目前必须在WPF中创建带下划线的标题文本的代码。必须有一种比使用表格更简单的方法。

    <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>
    

    该行的定义为

    <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>
    

    其思想是创建一些文本并对其加下划线,以便下划线延伸封闭容器的整个宽度,在本例中为网格布局。

    更新:

    我不必使用表格,这是我能找到的唯一有效的方法,并且不会在文本和行之间留出很大的空间。我现在发现了一种看起来更简单的方法。

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

    1 回复  |  直到 13 年前
        1
  •  1
  •   Drew Noakes    15 年前

    您可以尝试将所需文本包装在底部仅定义了边框的边框中:

    <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>