L
L
LiptonOlolo2017-11-16 20:08:16
WPF
LiptonOlolo, 2017-11-16 20:08:16

Ellipse and TextBlock, how to correctly make TextBlock's width with TextWrapping?

Good day.
I have a ListBox with an ItemTemplate:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <ListBox Name="Test" Grid.Column="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/> <!-- Avatar -->
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="20"/> <!-- Name -->
                            <RowDefinition Height="Auto"/> <!-- Text -->
                            <RowDefinition Height="Auto"/> <!-- Time -->
                        </Grid.RowDefinitions>

                        <Ellipse Grid.RowSpan="2" Height="40" Width="40" VerticalAlignment="Bottom">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="{Binding UserAvatar}"/>
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding UserName}"/>
                        <TextBlock TextWrapping="Wrap" Grid.Row="1" Grid.Column="1" Text="{Binding MessageText}"/>
                        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Time}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

But with this layout, the width of the TextBlock'a becomes unlimited and the text just crawls to the right and a scroll appears:
MAj0RL1I4yKLKm.png
But, if you force the width of the TextBlock'y, for example 200, then everything becomes as I need it:
Vrwop7qsOqYXqr.png
The question is how to make this TextBlock' fit a automatic so that the text wraps around, but there is no slider?
Thanks in advance.
(ps - binding to the width of the area in which the TextBlock is located will not work, due to the fact that there is a PICTURE (40x40))

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stanislav Makarov, 2017-11-16
@LiptonOlolo

Set ColumnDefinition to 1* instead of Auto.
Also prevent the listbox from having horizontal scrolling:

<ListBox Name="Test" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
 ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question