Search code examples
wpfgridtextblock

wpf textblock in grid columns autosize

I am trying to layout a design where the textblock needs to grow/shrink when we maximize the app.

In my design the grid has 4 columns and 2 rows. the textblock in 2nd row grow/shrinks with respect to mainwindow size.

But not the textblock in 1st row. The properties TextAlignment or HorizontalAlignment with values Stretch or Right doesn't help.

Could someone guide me on how to make textblock in 1st row to

  • fill the columns 1 & 2
  • grow/shrink when we maximize the app
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="120"/>
        </Grid.RowDefinitions>
        <CheckBox Name="Enable" Content="Enable" Width="70" Height="20" Margin="1,0,0,0" Grid.Row="0" Grid.Column="0"></CheckBox>
        <Border Margin="2" BorderBrush="Black" BorderThickness="1" Height="20" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" >
            <TextBlock Name="Status" Text="current status" TextAlignment="Right" HorizontalAlignment="Right"></TextBlock>
        </Border>
        <Button x:Name="Clear" Content="Clear"  Width="40" Height="20" Margin="1,0,2,0" HorizontalAlignment="Right" ToolTip="clear" Grid.Row="0" Grid.Column="3">            
        </Button>
        <Border Margin="2" BorderBrush="Black" BorderThickness="1"  Height="110" Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0">
            <ScrollViewer>
                <TextBlock Name="ActionText" Text="" TextWrapping="Wrap">
                </TextBlock>
            </ScrollViewer>
        </Border>
    </Grid>
</Window>

enter image description here

Solution

  • OK this is a bit confusing what you got going here, but I think I see the issues.

    First of all, Columns 1, and 2 are all set to Auto size, which means they will size to the Content within them. Columns 1 and 2 have the TextBlock which reads "current status" which I'm guessing is the one you want to change.

    In order to do this, set Columns 1 and 2 to be a proportional size mode (1*, 2*, etc.) play around with some values to find one that looks good for your use case.

    Next, you're going to want to put this TextBlock in a ViewBox so the visual will grow and shrink autonomously to the available space it has.

    Finally, make good use of the MaxWidth and MinWidth properties to ensure that sizing the Window to any size doesn't result in the TextBlock becoming too large / small.

    As an addendum, I suggest you remove the ScrollViewer containing the TextBlock named ActionText all together and replace it with a TextBox with the ReadOnly property set to true.

    I have applied the suggestions and it comes out in I believe the way you intended. Note I also adjusted the Columns to remove the unneeded ones and set their proportional sizing weights to some suggested values that you can adjust as needed.

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="1*" MaxWidth="200" MinWidth="75"/>
            <ColumnDefinition  Width="5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="30" MaxHeight="35" Height="1*"/>
            <RowDefinition Height="120"/>
        </Grid.RowDefinitions>
        <CheckBox Name="Enable" Content="Enable" Width="70" Height="20" Margin="1,0,0,0" Grid.Row="0" Grid.Column="0"></CheckBox>
        <Border BorderBrush="Black" BorderThickness="1" Margin="2,5" Grid.Row="0" Grid.Column="1" >
            <Viewbox>
                <TextBlock Name="Status" Text="current status"></TextBlock>
            </Viewbox>
        </Border>
        <Button x:Name="Clear" Content="Clear"  Width="40" Height="20" Margin="1,0,2,0" HorizontalAlignment="Right" ToolTip="clear" Grid.Row="0" Grid.Column="3">
        </Button>
        <TextBox IsReadOnly="true" VerticalScrollBarVisibility="Visible" Margin="2" BorderBrush="Black" BorderThickness="1"  Height="110" Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0" Name="ActionText" Text="" TextWrapping="Wrap"/>
    </Grid>