Question

I want to make a TextBox surrounded with a glowing border.

The TextBox should be as large as it needs to be in order to contain all the text within. But no larger. And the Border should then surround the text.

I use a 3×3 Grid to make the Border centered in the middle of the container. Centering works fine as long as the text is short enough. But when you enter a big long text, the ViewBox will not actually scale the TextBox down in size.

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

I thought the Viewbox was supposed to scale the content to fit within the dimensions available according to the parent container. But what happens is that if I enter a text that is very long, it will clip at the end.

In short: I want the text to uniformly shrink to available size, but never grow beyond what’s needed.

Can someone explain what I’m doing wrong?

EDIT: Ok, If I Put in 10* as Width and Height of the middle column and row the text will always stay inside the border.
The problem is then that the ViewBox will make the text grow, when it’s only a small text.
I can’t use maxHeight for this purpose I think, because I just never want it to enlarge the text.

Answer 1

Use Viewbox.StretchDirection Property. StretchDirection.DownOnly will do what you want.

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