19

以下片段：

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center">            
            <Label Content="Name:"/>
            <Label Content="Itzhak Perlman" FontSize="44"/>
        </StackPanel>
    </Grid>
</Window>

呈现以下内容：
替代文字

有什么方法可以设置标签的样式，以便它们的文本底部应该对齐？
我对 TextBlocks 也有同样的问题。

注意：由于我一直在为这个问题苦苦挣扎，请只发布您知道有效的某些答案。
我已经尝试过：VerticalAlignment、VerticalContentAlignment、Padding、Margin。还有什么我不知道的吗？

我读过这篇文章，但它没有谈论不同字体大小的场景。

更新：问题是，即使 Padding 设置为 0，在 ContentPresenter 区域内，字体周围仍有一个不确定的空间。这个空间因字体大小而异。如果我能控制这个空间，我会处于更好的境地。

谢谢

4

7 回答 7

28

另一个相当简单的解决方案：

1) 使用 TextBlock 控件而不是 Labels。原因是 TextBlock 比 Label 重量轻 - 请参阅http://joshsmithonwpf.wordpress.com/2007/07/04/differences-between-label-and-textblock/

2) 使用 LineHeight 和 LineStackingStrategy = BlockLineHeight 作为您的 TextBlock 样式。这将很容易将两者对齐在它们的基线上。

<StackPanel Orientation="Horizontal"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
    <StackPanel.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="LineHeight" Value="44pt"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        </Style>
    </StackPanel.Resources>            
    <TextBlock Text="Name:"/>
    <TextBlock Text="Itzhak Perlman" FontSize="44"/>
</StackPanel>
于 2010-11-29T16:40:08.750 回答
7

我真的很喜欢这里提出的创造性解决方案，但我确实认为从长远来看（双关语）我们应该使用这个：

<TextBlock>
   <Run FontSize="20">What</Run>
   <Run FontSize="36">ever</Run>
   <Run FontSize="12" FontWeight="Bold">FontSize</Run>
</TextBlock>

Run 元素中唯一缺少的是 Text 属性的数据绑定，但迟早会添加。

Run 不会修复标签及其文本框的对齐方式，但对于许多简单的情况，Run 会做得很好。

于 2010-01-20T14:59:54.200 回答
6

没有唯一的 XAML 解决方案，您必须使用后面的代码。此外，即使使用代码隐藏，也没有通用的解决方案，因为如果您的文本是多行的怎么办？在这种情况下应该使用哪个基线？或者如果您的模板中有多个文本元素怎么办？比如一个header和一个content，或者更多，那是哪个baseline呢？

简而言之，最好的办法是使用顶部/底部边距手动对齐文本。

如果您愿意假设您有一个文本元素，您可以通过实例化具有FormattedText现有文本元素的所有相同属性的对象来计算基线到元素顶部的像素距离。该FormattedText对象具有double Baseline保存该值的属性。请注意，您仍然必须手动输入边距，因为元素可能不会完全靠在其容器的顶部或底部。

请参阅此 MSDN 论坛帖子：文本框基线

这是我编写的提取该值的方法。它使用反射来获取相关属性，因为它们对任何单个基类都不通用（它们分别在Control、TextBlock、Page和TextElement其他类上定义）。

public double CalculateBaseline(object textObject)
{
    double r = double.NaN;
    if (textObject == null) return r;

    Type t = textObject.GetType();
    BindingFlags bindingFlags = BindingFlags.Instance | BindingFlags.Public;

    var fontSizeFI = t.GetProperty("FontSize", bindingFlags);
    if (fontSizeFI == null) return r;
    var fontFamilyFI = t.GetProperty("FontFamily", bindingFlags);
    var fontStyleFI = t.GetProperty("FontStyle", bindingFlags);
    var fontWeightFI = t.GetProperty("FontWeight", bindingFlags);
    var fontStretchFI = t.GetProperty("FontStretch", bindingFlags);

    var fontSize = (double)fontSizeFI.GetValue(textObject, null);
    var fontFamily = (FontFamily)fontFamilyFI.GetValue(textObject, null);
    var fontStyle = (FontStyle)fontStyleFI.GetValue(textObject, null);
    var fontWeight = (FontWeight)fontWeightFI.GetValue(textObject, null);
    var fontStretch = (FontStretch)fontStretchFI.GetValue(textObject, null);

    var typeFace = new Typeface(fontFamily, fontStyle, fontWeight, fontStretch);

    var formattedText = new FormattedText(
        "W", 
        CultureInfo.CurrentCulture, 
        FlowDirection.LeftToRight, 
        typeFace, 
        fontSize, 
        Brushes.Black);

    r = formattedText.Baseline;

    return r;
}

编辑： Shimmy，作为对您的评论的回应，我不相信您实际上已经尝试过这个解决方案，因为它有效。这是一个例子：

基线对齐示例

这是 XAML：

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="0,40,0,0"/>
        </Style>
    </StackPanel.Resources>
    <StackPanel Orientation="Horizontal">
        <TextBlock Name="tb1" Text="Lorem " FontSize="10"/>
        <TextBlock Name="tbref" Text="ipsum"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Name="tb2" Text="dolor "  FontSize="20"/>
        <TextBlock Text="sit"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Name="tb3" Text="amet "  FontSize="30"/>
        <TextBlock Text="consectetuer"/>
    </StackPanel>
</StackPanel>

这是实现这一目标的代码

double baseRef = CalculateBaseline(tbref);
double base1 = CalculateBaseline(tb1) - baseRef;
double base2 = CalculateBaseline(tb2) - baseRef;
double base3 = CalculateBaseline(tb3) - baseRef;
tb1.Margin = new Thickness(0, 40 - base1, 0, 0);
tb2.Margin = new Thickness(0, 40 - base2, 0, 0);
tb3.Margin = new Thickness(0, 40 - base3, 0, 0);
于 2010-01-10T13:43:24.337 回答
3 
<TextBlock>
<InlineUIContainer BaselineAlignment="Baseline"><TextBlock>Small</TextBlock></InlineUIContainer>
<InlineUIContainer BaselineAlignment="Baseline"><TextBlock FontSize="50">Big</TextBlock></InlineUIContainer>
</TextBlock>

这应该运作良好。试验基线/底部/中心/顶部。

于 2013-03-28T08:10:35.990 回答
1

XAML 设计器支持TextBlock在设计时按基线对齐控件：

在此处输入图像描述

这会为您的控件分配固定边距。只要字体大小在运行时不改变，对齐就会被保留。

于 2014-11-20T15:35:12.920 回答
0

我实际上找到了一个基于Aviad的简单答案。

我创建了一个包含 Aviad 函数的转换器，该函数接受元素本身并返回计算的厚度。

然后我设置

<Style TargetType="TextBlock">
    <Setter Property="Margin" 
        Value="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource converters:TextAlignmentMarginConverter}}" />
</Style>

缺点是这显然占用了原来的 Margin 属性，因为 TextBlock 没有模板所以我们不能通过 TemplateBinding 来设置它。

于 2010-01-11T00:56:34.417 回答
0

在博客文章Windows 8.1 中的 XAML 文本改进中解释了如何将两个TextBlock不同字体大小的它们的基线对齐。该技巧TextLineBounds="TrimToBaseline"与VerticalAlignment="Bottom". 这将删除其基线以下的大小，然后将TextBlocks 向下移动。Margin然后，您可以通过在放入它们的容器上设置 a 将它们移回所需的高度。

样本：

<Grid Margin="some margin to lift the TextBlocks to desired height">
    <TextBlock Text="{x:Bind ViewModel.Name, Mode=OneWay}"
                Style="{StaticResource HeaderTextBlockStyle}"
                VerticalAlignment="Bottom"
                TextLineBounds="TrimToBaseline" />
    <TextBlock Text="{x:Bind ViewModel.Description.Yield, Mode=OneWay}"
                Style="{StaticResource SubheaderTextBlockStyle}"
                VerticalAlignment="Bottom"
                HorizontalAlignment="Right"
                TextLineBounds="TrimToBaseline" />
</Grid>
于 2020-09-25T23:20:06.820 回答