Question

I’m trying to build a UI layout in WPF that can scale with the size of the window. The idea is to have a number of controls on the left, a number of controls on the right, and in the middle, have a line of text. It’s OK if the line of text is cropped on the right. The main thing is that the aspect ratio of all of the controls is maintained.

That part is working fine. The problem is that the center line of text seems to have a minimum height; below this height, it will start clipping vertically. I want the text to keep shrinking if I make the window very thin. Even manually setting the FontSize on the TextBlock doesn’t work.

Note that the controls on the left and right do not have a minimum width; they can shrink indefinitely.

My XAML is here. I’m using .NET 4.0.

<Window x:Class="TestWpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="75" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Viewbox Grid.Column="0" Stretch="UniformToFill" Margin="2">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">A</Button>
                <Button Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">B</Button>
                <Button Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">C</Button>
                <Button Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">D</Button>
            </Grid>
        </Viewbox>

        <Viewbox VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Stretch="UniformToFill" Margin="2">
            <TextBlock>Here is a bunch of text that may prove to be interesting.</TextBlock>
        </Viewbox>

        <Viewbox Grid.Column="2" Stretch="UniformToFill" Margin="2">
            <Button HorizontalAlignment="Center">X</Button>
        </Viewbox>
    </Grid>
</Window>

Answer 1

The problem is that you like the Viewbox clipping when it occurs horizontally but don’t want any clipping vertically. In other words, you want UniformToFill until the horizontal clipping stops and then you want to switch to Uniform.

To get both of these behaviors you need an alternative to Viewbox. A while ago I wrote a prototype of just such a layout element in this Stack Overflow answer called ViewboxPanel:

• Making a Viewbox scale vertically but stretch horizontally

I just tested it, and at least for your sample XAML, I think it does just what you want:

<local:ViewboxPanel VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Margin="2">
    <TextBlock>Here is a bunch of text that may prove to be interesting.</TextBlock>
</local:ViewboxPanel>