Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextBlock TextWrapping not wrapping inside StackPanel

Tags:

I have a StackPanel, but the following line :

<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap"  />

is not Wrapping the Text.

<StackPanel Orientation="Vertical">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="15" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <DockPanel Grid.Row="0" Grid.Column="0">
            <TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
            <TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
        </DockPanel>
        <TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
        <Image
            Grid.Row="0"
            Grid.Column="6"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />

        <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />

        <Image
            Grid.Row="1"
            Grid.Column="4"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
    </Grid>
</StackPanel>

The StackPanel Orientation is set to 'Vertical' but the TextBlock is not inheriting it.

Where am I going wrong?

like image 635
Joe.Net Avatar asked Jul 11 '12 10:07

Joe.Net


People also ask

How do I wrap text in TextBlock WPF?

In WPF, the Label control does not support text wrapping. If you need a label that wraps contents across multiple lines, you can use a TextBlock control. Place a TextBlock control inside a Label and apply wrapping on TextBlock.

What is StackPanel in XAML?

StackPanel is a layout panel that arranges child elements into a single line that can be oriented horizontally or vertically. By default, StackPanel stacks items vertically from top to bottom in the order they are declared. You can set the Orientation property to Horizontal to stack items from left to right.

What is StackPanel C#?

A StackPanel places child elements in a vertical or horizontal stack. It is one of the popular panels because of its simplicity. By default, a StackPanel's child element grows from the top of the panel to the bottom, in other words in vertical orientation.


1 Answers

Your problem is using the StackPanel that allows its children to fill in all the available space - the StackPanel stretches accordingly to the size of its content. Try removing the StackPanel and keep just the Grid - this way you will limit the size of its children to the available space used by the Grid.

If that isn't enough in the layout you've built, try setting a MaxWidth on the TextBox that needs wrapping.

Now the source of your problem was also the fact that your TextBox was inserted in the first Column of the Grid that had an infinite size (Width="Auto"). Thus, setting the Grid.Column="7" to the TextBox did the trick you wanted (wrapping text). Here's the revised code:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="15" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Row="0" Grid.Column="0">
        <TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
        <TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
    </DockPanel>
    <TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
    <Image
        Grid.Row="0"
        Grid.Column="6"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />

    <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7" Text="{Binding Notes}" TextWrapping="Wrap" />

    <Image
        Grid.Row="1"
        Grid.Column="4"
        HorizontalAlignment="Center"
        VerticalAlignment="Top"
        Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>
like image 157
Adrian Popescu Avatar answered Oct 14 '22 00:10

Adrian Popescu