2

我正在尝试放置两个标签，一个紧挨着另一个（间距很小）。

例如

标签 1 标签 2

每个标签的内容总是不同的，通常标签 2 会有更多字符，但我希望内容随着窗口大小的调整而缩放，并且我希望标签 1 和标签 2 中的字体大小保持一致。

如果标签 2 的内容太长，我不在乎是否被裁剪。

我尝试使用具有两列的网格并将标签放在 ViewBox 内：

<Viewbox Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Label Margin="0,0,0,0" Content="{Binding Path=Suburb}"/>
</Viewbox>

问题在于，定位永远不会正确，字体大小也不会保持一致。

实现这一目标的最佳布局方法是什么？我可以通过绑定来同步字体大小吗？我已经尝试将标签 2 的 FontSize 属性绑定到标签 1 的 FontSize 但这不起作用，因为它每次都返回 12，无论字体实际有多大/小（我假设实际的 FontSize 没有被计算，因为标签位于 ViewBox 内）。

有什么建议么？

谢谢

4

4 回答 4

2

您可以使用以下方法：

<Viewbox VerticalAlignment="Top">
  <DockPanel>
    <TextBlock Text="Second" DockPanel.Dock="Right" />
    <TextBlock Text="First" />
  </DockPanel>
</Viewbox>

请注意，第二个标签永远不会被裁剪，因为Viewbox它将允许内容呈现为任何大小然后对其进行缩放。您可以指定MaxWidth第二个TextBlock将限制其大小（以像素为单位）。

代替 aDockPanel你可以使用Grid不同的 aColumnDefinitions来达到相同的效果。

重要的是它们都是相同的Viewbox（因此，它们不会同步，FontSize而是对其包含的所有内容执行视觉缩放）。

于 2012-04-25T09:03:28.060 回答
0

以下标记似乎没问题：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Viewbox>
        <Label Content="Label 1" Width="{Binding ActualWidth, ElementName=label2}"/>
    </Viewbox>
    <Viewbox Grid.Column="1">
        <Label Name="label2" Content="Label 2 Label 2 Label 2"/>
    </Viewbox>
</Grid>
于 2012-04-25T08:13:31.923 回答
0

我不能 100% 确定“窗口调整大小时的内容缩放”和“字体大小保持一致”的实际含义，但我想您希望每个标签都根据可用空间进行修剪。

那么为什么不使用TextBlock如下

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding Path=Suburb}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Margin="0,0,5,0" />
    <TextBlock Text="{Binding Path=Area}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="1"/>
</Grid>
于 2012-04-25T08:34:46.290 回答
0

我意识到这个问题很老，但更正确的方法之一是使用Runs。

运行是 TextBlock 中的文本部分。

<TextBlock Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Run Text="{Binding Suburb}" />
    <Run Text="{Binding Area}" />
</TextBlock>

请记住，TextBlock 中的所有内容都是对空格敏感的，因此如果您想要两个 Run 背靠背且中间没有任何空格，您可以执行以下操作：

<TextBlock Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Run Text="Foo" /><Run Text="bar" />
    <!-- Prints 'Foobar' -->
</TextBlock>

它类似于 HTML 的呈现方式，如果标签之间有空格，则在这些元素之间的页面上呈现一个空格。此规则仅适用于TextBlock 中的项目，而不适用于整个 XAML 页面。

于 2013-04-10T14:09:36.277 回答