Label and grid auto height and width adjust

Question

I'm trying to create a chat application. I'm trying to display a series of text in a Label wrapped inside a Grid.

<Grid Grid.Row="2">
    <Grid Margin="0,0,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid Grid.Row="0" Width="auto" MaxWidth ="300" Height="auto" HorizontalAlignment="Left" Margin="10,5,0,0" ScrollViewer.CanContentScroll="True">
                <Grid.Background>
                    <ImageBrush ImageSource="Public\Images\chat_green-textarea.png"/>
                </Grid.Background>

                <Label Padding="5,0,5,5" Foreground="White" FontSize="15">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</Label>
            </Grid>
        </Grid>

        <Image Source="Public\Images\chat_green-textarea-tail.png" Height="20" Width="30" VerticalAlignment="Top" Margin="-20,29.5,0,0"/>
    </Grid>
</Grid>

As you can see I set a max width hoping that when the text in the label reached this width, the grid will adjust its height as to process all the text inside the label. But it won't work. This is my first time to try WPF. Any ideas and suggestions? Thanks!

score 2 · Answer 1 · edited May 23 '17 at 11:51

You need to specify TextWrapping for text wrap. Label does not support TextWrapping by itself. You got two options switch the Label to a TextBlock or embed a TextBlock inside the Label.

something like:

<TextBlock FontSize="15"
            Foreground="White"
            Padding="5,0,5,5"
            TextWrapping="Wrap">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</TextBlock>

or

<Label FontSize="15"
        Foreground="White"
        Padding="5,0,5,5">
  <TextBlock TextWrapping="Wrap">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</TextBlock>
</Label>

sidenotes:

Since it's your first time to try WPF, I'd suggest reading up a bit more from books or source codes about layout guidelines.

Firstly Grid can be made to do almost anything another layout control can do. This does not mean you just use Grid everywhere for everything since it's more expensive to use than say StackPanel, DockPanel, WrapPanel and sorts. If it wasn't we wouldn't have any other layout control but the Grid.

secondly, Label in WPF isn't like the Label in OSX Cocoa or Qt or maybe other languages too. It's more expensive than a TextBlock in WPF. Read through this to understand the differences and assess for yourself if you really need to be using a Label here.

Also get Snoop and go through it's quick help videos to see it's usage. It will become your go-to helper for diagnosing Layout problems.

Oh and also look at some existing open-source chat examples using WPF like this to guide you. You could ignore all the bit's about back-end services and focus just on the xaml bits and see what control's the author picks for which section of the application and try to understand the reasoning. I say this because your approach of adding a Label per message is soon going to either involve creating control's from the code-behind or weirder stuff which is kinda frowned upon. Using a ListView or another custom control might be what you're eventually going to refactor your app into. Just saves you all that hassle if you visit some existing samples and teach yourself.

Finally welcome to WPF!!! it's a great place here :)

Label and grid auto height and width adjust

1 Answers1