Wpf – Making a WPF TextBox be only as wide as the room it has but expand when the space expands

textboxwidthwpfxaml

Notice how the textbox expands to the right until it has enough horizontal space to fit the content? Well I'd like it to not expand and fit the text with the space it has in the window.

enter image description here

If the windows expands, then the Grid.Column it's in will expand, but the textbox itself should expand to fit. Simple enough?

Any suggestions? This is my first foray into WPF and so far it's been pretty sleek.

Edit: Here's my XAML markup:

<Window x:Class="GameLenseWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.15*" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <TextBlock Text="Platform" 
                       Foreground="White" 
                       FontFamily="Georgia"
                       FontSize="15" 
                       Margin="10"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
            <ComboBox x:Name="cmbPlatform" 
                      Margin="10"
                      FontFamily="Georgia"
                      FontSize="15"
                      MinHeight="30"
                      MinWidth="140"
                      VerticalAlignment="Center"
                      VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
                <ComboBoxItem>All Platforms</ComboBoxItem>
                <ComboBoxItem>Playstation 3</ComboBoxItem>
                <ComboBoxItem>XBox 360</ComboBoxItem>
                <ComboBoxItem>Wii</ComboBoxItem>
                <ComboBoxItem>PSP</ComboBoxItem>
                <ComboBoxItem>DS</ComboBoxItem>
            </ComboBox>
        </StackPanel>
        <Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png" 
               Height="16" HorizontalAlignment="Right"
               VerticalAlignment="Center"
               Margin="0 0 10 0"    />
        <ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Height="120" Margin="0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="90"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
                            <Image Grid.Row="0" Grid.Column="0" Source="{Binding ImageUrl}" Stretch="Fill"/>                            
                        </Border>

                        <StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
                                <TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
                                <TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
                            </StackPanel>
                            <TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
                            <TextBox Background="#454545" Text="{Binding Synopsis}" MinHeight="76" />
                        </StackPanel>  
                    </Grid>                    
                </DataTemplate>
            </ListBox.ItemTemplate>            
        </ListBox>
    </Grid>
</Window>

Best Answer

To get a TextBox to wrap inside a ListBox you can make the following changes:

  1. Set the content of the listbox equal to the width of the listbox using: HorizontalContentAlignment="Stretch".
  2. Disable the horizontal scrollbar of the listbox to prevent listbox from getting the desired size of the controls and preventing the word wrap in your textbox.
  3. Set TextWrapping="Wrap" in the TextBox

Here is the XAML: 

<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         HorizontalContentAlignment="Stretch" >
</ListBox>

<TextBox Text="{Binding Synopsis}" MinHeight="76" TextWrapping="Wrap" />
Related Topic