Question

我想制作一个用发光边框包围的TextBox。

TextBox应该尽可能大，以便包含其中的所有文本。但没有更大。然后边界应围绕文本。

我使用3x3网格使边框位于容器中间。只要文本足够短，居中就可以正常工作。但是当你输入一个很大的长文本时，ViewBox实际上不会缩小TextBox的大小。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Viewbox Stretch="Uniform" Grid.Row="1" Grid.Column="1" >
        <Border BorderBrush="#bab98b" BorderThickness="7" CornerRadius="15" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black">
            <TextBox Name="WaitMessage" Text="A Message" HorizontalAlignment="Center" Foreground="White" Background="Black" Padding="20" FontSize="60" Width="Auto"/>
        </Border>
    </Viewbox>
</Grid>

我认为Viewbox应该根据父容器缩放内容以适应可用的维度。但是，如果我输入的文本很长，它会在最后剪辑。

简而言之：我希望文本统一缩小到可用的大小，但永远不会超出所需的范围。

有人可以解释我做错了吗？

编辑：好的，如果我输入10 *作为中间列和行的宽度和高度，文本将始终保持在边框内。问题是，当文本只是一个小文本时，ViewBox会使文本增长。我认为，我不能将maxHeight用于此目的，因为我只是不想让它扩大文本。

Answer 1

我不知道这对代码的其余部分有多大可扩展性，但是要将文本放在控件的中心，您可以执行以下操作：

<Grid>
      <Border BorderBrush="#bab98b" BorderThickness="7" CornerRadius="15" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black">
          <TextBox Name="WaitMessage" Text="A Message" HorizontalAlignment="Center" Foreground="White" Background="Black" Padding="20" FontSize="60" Width="Auto"/>
      </Border>
</Grid>

Answer 2

使用Viewbox.StretchDirection Property。 StretchDirection.DownOnly会做你想做的事。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="10*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Viewbox Grid.Row="1" Grid.Column="1"
             Stretch="Uniform" StretchDirection="DownOnly">
        <TextBox Text="A Message" FontSize="60" />
    </Viewbox>
</Grid>

将TextBox缩放到其中的文本

2 个答案: