CODEWITHSUNDEEP
wpfgridtextblockword-wrap
amaca
amaca

Reputation: 1480

Text wrapping, grid and star sizing

I have some text data that I want to display in a Grid, with three columns, the middle column being twice as wide as the other two, taking up the full width of the grid. The text is long and needs to be wrapped. What I can't get to work (and from other queries here in the past, I see others have had similar problems) is getting word wrap and sizing to the grid to work. What I have is:

<Window.Resources>
  <local:DTData x:Key="dtData" />
</Window.Resources>

<StackPanel DataContext="{StaticResource dtData}">
  <ListBox ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Border x:Name="a" Grid.Column="0" Margin="4"/>
          <TextBlock Margin="4" Grid.Column="0" TextWrapping="Wrap" 
                     Text="{Binding A}" Width="{Binding ActualWidth, ElementName=a }" MinWidth="100"/>
          <Border x:Name="b" Grid.Column="1" Margin="4"/>
          <TextBlock Margin="4" Grid.Column="1" TextWrapping="Wrap" 
                     Text="{Binding B}" Width="{Binding ActualWidth, ElementName=b }" MinWidth="100"/>
          <Border x:Name="c" Grid.Column="2" Margin="4"/>
          <TextBlock Margin="4" Grid.Column="2" TextWrapping="Wrap" 
                     Text="{Binding C}" Width="{Binding ActualWidth, ElementName=b }" MinWidth="100"/>
        </Grid>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</StackPanel>

This uses the Border trick from WPF TextBox and Scroll behavior to force text wrapping to work but the column's width is either the minimum width set or the longest word if greater.

Does anyone know of a way to force the columns to fit the width of the grid?

Upvotes: 4

Views: 4622

Answers (1)

Anvaka
Anvaka

Reputation: 15823

You sure you wanna wrap the text? Or you goal is text trimming? I'm asking because when I type the following xaml in kaxaml, the text in the middle column is perfectly wrapped:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>  
    <StackPanel>
  <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" Width="350">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <TextBlock Margin="4" Grid.Column="0" TextWrapping="Wrap" 
                     Text="Binding A"  MinWidth="100"/>
          <TextBlock Margin="4" Grid.Column="1" TextWrapping="Wrap" 
                     Text=" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"  MinWidth="100"/>
          <TextBlock Margin="4" Grid.Column="2" TextWrapping="Wrap" 
                     Text="Binding C" MinWidth="100"/>
        </Grid>
      </DataTemplate>
    </ListBox.ItemTemplate>
    <TextBlock Text="" />
    <TextBlock Text=""/>
    <TextBlock Text=""/>
  </ListBox>
  </StackPanel>
  </Grid>
</Page>

If you want to trim the text, just set TextWrapping="NoWrap" and TextTrimming to TextTrimming="CharacterEllipsis" where needed.

There might be also that you haven't provided all the data, to reproduce the problem you are describing...

Upvotes: 1

Related Questions