locked
Text wrapping in DataGrid column RRS feed

  • Question

  • I've seen several threads about this, however, none of the solutions I've come across actually work! Below is a sample I've thrown together to show that solutions such as this do not work, at least not for me. If anyone has a (working) solution to this issue, I'm all ears!

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100*"/>
        </Grid.RowDefinitions>
        <Border BorderBrush="Black" BorderThickness="1" CornerRadius="15" 
                Margin="10" Padding="10" Grid.Row="0" Grid.Column="0">
            <data:DataGrid x:Name="myDataGrid" AutoGenerateColumns="False" HorizontalScrollBarVisibility="Disabled">
                <data:DataGrid.Columns>
                    <data:DataGridTextColumn Binding="{Binding}">
                        <data:DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="TextWrapping" Value="Wrap" />
                            </Style>
                        </data:DataGridTextColumn.ElementStyle>
                    </data:DataGridTextColumn>
                </data:DataGrid.Columns>
            </data:DataGrid>
        </Border>
    </Grid>
    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        List<string> data = new List<string>()
        {
            "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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        };
        myDataGrid.ItemsSource = data;
    }
    Monday, April 12, 2010 5:55 PM

Answers

  • This is a great idea, but I don't think this will work in my case. In my application, the DataGrid does not span the entire width of the browser, there are controls to the left of it; I would have to account for the width of these controls, plus any padding/margins, and a few other factors. It's entirely possible, however, I've decided to just upgrade to VS10/SL4 so I can take advantage of the * column width on the DataGrid, which is ultimately the functionality I'm looking for.

    Wednesday, April 14, 2010 9:48 AM

All replies

  • set a maxwidth on the column, the text will wrap within the maxwidth
    Monday, April 12, 2010 7:13 PM
  • set a maxwidth on the column, the text will wrap within the maxwidth

    I should have prefaced my original post with this, but I want the DataGrid to wrap without setting a max width. I'm developing an application that will be displayed on both a larger flat-panel monitor and a smaller tablet PC, so the interface needs to be dynamic, and stretch/wrap to fill the screen. If you replace the DataGrid in the previous example with a ListBox, it works exactly as I want, so why not with the DataGrid? Very frustrating!

    <ListBox x:Name="myListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock TextWrapping="Wrap" Text="{Binding}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    Tuesday, April 13, 2010 9:10 AM
  • Well, I thought I had found an answer here. Download the GridEx class, import the namespace, and set the StarColumn property on your DataGrid. It works in my sample (see below), but in my actual application I have a DataGrid embedded inside another DataGrid cell, only the inner DataGrid uses the StarColumn property, and for some reason it makes the interface become unresponsive.

    <UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
                 x:Class="Test.SL.MainPage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
                 xmlns:gp="clr-namespace:GridProperties">
        <Grid x:Name="LayoutRoot">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100*"/>
            </Grid.RowDefinitions>
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="15" 
                    Margin="10" Padding="10" Grid.Row="0" Grid.Column="0">
    
                <data:DataGrid x:Name="myDataGrid" AutoGenerateColumns="False" 
                               HorizontalScrollBarVisibility="Disabled" gp:GridEx.StarColumn="0">
                    <data:DataGrid.Columns>
                        <data:DataGridTextColumn Binding="{Binding}">
                            <data:DataGridTextColumn.ElementStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="TextWrapping" Value="Wrap" />
                                </Style>
                            </data:DataGridTextColumn.ElementStyle>
                        </data:DataGridTextColumn>
                    </data:DataGrid.Columns>
                </data:DataGrid>
    
            </Border>
        </Grid>
    </UserControl>
    Tuesday, April 13, 2010 10:50 AM
  • bind the maxwidth to a value converter, in the converter get the width of the browser and set the maxwidth based on the browser width

    this should give you the width of the browser 

    App.Current.Host.Content.ActualWidth

     

    Tuesday, April 13, 2010 6:30 PM
  • This is a great idea, but I don't think this will work in my case. In my application, the DataGrid does not span the entire width of the browser, there are controls to the left of it; I would have to account for the width of these controls, plus any padding/margins, and a few other factors. It's entirely possible, however, I've decided to just upgrade to VS10/SL4 so I can take advantage of the * column width on the DataGrid, which is ultimately the functionality I'm looking for.

    Wednesday, April 14, 2010 9:48 AM