CODEWITHSUNDEEP
wpfxamltextboxwidth
Only Bolivian Here
Only Bolivian Here

Reputation: 36743

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

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>

Upvotes: 2

Views: 7003

Answers (2)

Zamboni
Zamboni

Reputation: 8043

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

Upvotes: 7

Fishz
Fishz

Reputation: 465

I believe you need to set the Margin property of your textbox control. In the designer, you can see little circles around each textbox (and each control when you focus them, for that matter). Click the little circle on the right side of the textbox, to make that control grow marginally with the available space in the current layout control (by clicking the circle, the margin will be added into the XAML).

I don't know if in your image you've already adjusted the window size, but with that image it appears you'll also need to set the width for your textbox.

Does this help?

Upvotes: 1

Related Questions