如何避免文本块重叠？

Question

我尝试使用ViewBox解决这个问题，但是对于某些分辨率，结果很奇怪，字体太大了，我想保持我的字体大小，所以ViewBox不适合这个目标。这是我的结构：

<StackPanel Orientation="Vertical"  Grid.Column="0" Grid.Row="5">
          <TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center">Fattore forma (casa)</TextBlock>
          <Label Content="40%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"></Label>
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="5" Margin="5,0">
           <TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center">Fattore forma (fuori)</TextBlock>
           <Label Content="35%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"></Label>
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="5">
           <TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center">Totali giocate</TextBlock>
           <Label Content="9" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"></Label>
</StackPanel>

现在的主要问题是，如果我将窗口调整到最小分辨率，文本会重叠，我想避免这种情况，有什么最好的解决方案吗？我是wpf的新手，所以我正在学习如何解决这些问题。 图像示例：

建议的新代码：

<Grid Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="3">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="15" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="0">Fattore forma (casa)</TextBlock>
                                <Label Content="40%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Grid.Column="0" Grid.Row="1"></Label>
                                <TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0">Fattore forma (fuori)</TextBlock>
                                <Label Content="35%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Grid.Column="1" Grid.Row="1"></Label>
                                <TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="2" Grid.Row="0">Totali giocate</TextBlock>
                                <Label Content="9" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Grid.Column="2" Grid.Row="1"></Label>
                            </Grid>

- Dillinger

---

不要使用StackPanel，而是使用Grid或Uniform Grid，并定义列和行的定义。 - user1672994

在我看来，你应该提供一张你达成的结果截图。 - marcinax

很高兴能看到屏幕截图。也许第二个截图可以展示期望的结果。 - Spawn

按照建议，我已经使用网格和图片编辑了我的答案，但问题仍然存在于最小分辨率下。 - Dillinger

Answer 1

看起来StackPanel在具有行和列定义的Grid中，而您没有粘贴整个代码。

然而，您可以在TextBlock中使用TextTrimming="CharacterEllipsis"。当文本太长时，它会自动添加省略号。

或者如果您想要将文本换行，则可以使用TextWrapping="Wrap"。

- marcinax

---

似乎是完美的选择。 - Dillinger