How do I get a TextBox to fill a resizable column?

Question

I'm trying to get a TextBox to fill the available space in a resizable column. The TextBox is part of a user control:

<UserControl x:Class="TextBoxLayout.FieldControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0">Name</Label>
        <TextBox Grid.Column="1"/>
    </Grid>
</UserControl>

This user control is in a window with a vertical splitter:

<Window x:Class="TextBoxLayout.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TextBoxLayout"
    Title="Text box layout" Height="400" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition MinWidth="100"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <local:FieldControl Grid.Column="0" Grid.Row="0" MaxWidth="200" HorizontalAlignment="Left"/>

        <TextBlock Grid.Column="0" Grid.Row="1" Text="Testing"/>

        <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="3"/>

        <TextBlock Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Text="Testing"/>
    </Grid>
</Window>

The problem is the TexTBox appears to be very narrow - what I'd want it to do is fill the left column and resize with the splitter. How do I do that?

Do you mean fit by width, or both width and heigth? – Alex Shtoff Jul 05 '11 at 14:20 — Alex Shtoff, Jul 05 '11 at 14:20

score 53 · Accepted Answer · answered Jul 05 '11 at 14:32

53

Use HorizontalAlignment="Stretch" instead of "Left" for FieldControl. Remove MaxWidth if required. Use TextAlignment to align text.

answered Jul 05 '11 at 14:32

anivas

6,437
6
37
45

5

That works if I don't want to have a MaxWidth. However... if I add MaxWidth (because the column becomes very wide and I don't want the text field to fill it), then the FieldControl floats in the center of the column. If I add back HorizontalAlignment="Left", then I'm right back where I started. How do I get a text field to align to the left of a column without filling it, and cope with the column being shrunk when you drag the splitter? – imekon Jul 06 '11 at 09:20
I agree with imekon. This answer puts you back to where you started. – Vaccano Oct 23 '12 at 22:13
@anivas +1 for distinction between HorizontalAlignment and TextAlignment, and the need to use both. I had forgotten. – Kent Weigel Dec 16 '16 at 23:18

score 2 · Answer 2 · answered Feb 24 '16 at 07:18

Just wanted to add to more examples for future code searches.

I put this in the top of the xaml file:

<UserControl.Resources>
    <Style TargetType="{x:Type TextBlock}" x:Key="CenterCell">
        <Setter Property="Background" Value="{Binding Included, Converter={StaticResource BoolToColorConverter}}"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="TextAlignment" Value="Center"/>
    </Style>
</UserControl.Resources>

And then in the datagrid:

<DataGridTextColumn Header="Excluded" Binding="{Binding Excluded}" ElementStyle="{StaticResource CenterCell}"/>

This centers the text and sorting is still enabled. The textbox fills the cell and in this case is colored using a bool converter.

score 1 · Answer 3 · answered Jul 05 '11 at 16:07

just see whether is that you want

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

    <local:FieldControl Grid.Column="0"
                        Grid.Row="0"
                        Margin="2"
                         />

    <TextBlock Grid.Column="0"
               Grid.Row="1"
               Text="Testing" />

    <GridSplitter Grid.Column="1"
                  Grid.Row="0"
                  Grid.RowSpan="2"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Width="3" />

    <TextBlock Grid.Column="2"
               Grid.Row="0"
               Grid.RowSpan="2"
               Text="Testing" />
</Grid>

How do I get a TextBox to fill a resizable column?

3 Answers3