如何在 Silverlight DataGridTextColumn 中换行答案

【问题标题】：How to wrap text in Silverlight DataGridTextColumn如何在 Silverlight DataGridTextColumn 中换行
【发布时间】：2010-12-25 15:01:06
【问题描述】：

我正在尝试在 Silverlight 4 Beta 中创建一个简单的 DataGrid，但似乎无法弄清楚如何让我的 Note 列自动换行。

该表表示根据订单制作的注释，因此它们的长度是可变的。我希望“注意”单元格垂直扩展以适应内容。

我发现了许多类似的问题，但没有答案。 Silverlight 4 中是否有新的东西可以解决这个问题？

    <data:DataGrid AutoGenerateColumns="False" Name="dataGrid1" IsReadOnly="True">
        <data:DataGrid.Columns>
            <data:DataGridTextColumn Header="Date" Binding="{Binding Date}" />
            <data:DataGridTextColumn Header="User" Binding="{Binding User}" />
            <data:DataGridTextColumn Header="Note" Binding="{Binding Note}"  />
        </data:DataGrid.Columns>
    </data:DataGrid>

【问题讨论】：

标签： silverlight silverlight-4.0

【解决方案1】：

使用 DataGridTemplateColumn 而不是文本列。在那里有一个 TextBlock，它的 TextWrapping 设置为 true：

   <data:DataGrid x:Name="LayoutRoot" AutoGenerateColumns="False" IsReadOnly="True" RowDetailsVisibilityMode="Visible" >
        <data:DataGrid.Columns>

            <data:DataGridTextColumn Header="Date" Binding="{Binding Date}" />
            <data:DataGridTextColumn Header="User" Binding="{Binding User}" />

            <data:DataGridTemplateColumn Header="Note" Width="100">
                <data:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                            <TextBlock TextWrapping="Wrap" Text="{Binding Note}" />
                    </DataTemplate>
                </data:DataGridTemplateColumn.CellTemplate>
            </data:DataGridTemplateColumn> 

        </data:DataGrid.Columns>
    </data:DataGrid>

【讨论】：

如果您没有在 DataGrid 上设置 RowHeight，这将导致滚动问题。
如果您将 DataGrid 高度设置为自动，并将数据网格包装在 ScrollViewer 中，您将不会遇到任何滚动问题。
我尝试了您的解决方案，但它导致异常，我正在使用 silverlight 4

【解决方案2】：

我使用 ElementStyle 设置换行文本，它工作正常。编码愉快！

<Style x:Key="DataGridTextColumnStyle" TargetType="TextBlock">
    <Setter Property="TextWrapping" Value="Wrap"/>
</Style>

<data:DataGridTextColumn Binding="{Binding DESC}"   
         Header="Short Description" 
         HeaderStyle="{StaticResource DataGridHeaderStyle}"  
         ElementStyle="{StaticResource DataGridTextColumnStyle}"  >
</data:DataGridTextColumn>

【讨论】：

如果您没有在 DataGrid 上设置 RowHeight，这将导致滚动问题。

【解决方案3】：

其他解决方案中的任何一个都可以工作 - 但它们都会导致滚动问题。

如果您有一个未设置 RowHeight 的 DataGrid，则行高将由这些 TextBlock 的大小决定。好吧，DataGrid 使用虚拟化并且在显示 TextBlock 之前不会绘制它们。所以它根本不知道滚动条应该有多大。然后用鼠标中键滚动会导致各种不幸的行为。

我在我的数据网格上使用分页，所以我通过将 DataGrid 的样式设置为这样来禁用虚拟化：

xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
    xmlns:SystemWindowsControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

    <UserControl.Resources>

        <Style x:Key="DataGridStyleNoVirtualization" TargetType="SystemWindowsControls:DataGrid">
            <Setter Property="RowBackground" Value="#AAEAEFF4" />
            <Setter Property="AlternatingRowBackground" Value="#00FFFFFF" />
            <Setter Property="Background" Value="#FFFFFFFF" />
            <Setter Property="HeadersVisibility" Value="Column" />
            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="SelectionMode" Value="Extended" />
            <Setter Property="CanUserReorderColumns" Value="True" />
            <Setter Property="CanUserResizeColumns" Value="True" />
            <Setter Property="CanUserSortColumns" Value="True" />
            <Setter Property="AutoGenerateColumns" Value="True" />
            <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="DragIndicatorStyle">
                <Setter.Value>
                    <!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
                    <Style TargetType="ContentControl">
                        <Setter Property="Foreground" Value="#7FFFFFFF" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
                                <ControlTemplate TargetType="ContentControl">
                                    <Grid>
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="SortStates">
                                                <vsm:VisualState x:Name="Unsorted" />
                                                <vsm:VisualState x:Name="SortAscending">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="SortDescending">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                                        <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>

                                        <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#66808080" Grid.ColumnSpan="2" />

                                        <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" Opacity="0" >
                                            <Rectangle.Fill>
                                                <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                    <GradientStop Color="#FFFFFFFF" Offset="0.015" />
                                                    <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                                    <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                    <GradientStop Color="#C6FFFFFF" Offset="1" />
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>

                                        <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition/>
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>

                                            <ContentPresenter Content="{TemplateBinding Content}"/>

                                            <Path Grid.Column="1" Name="SortIcon" Fill="#7FFFFFFF" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                                                <Path.RenderTransform>
                                                    <ScaleTransform ScaleX=".9" ScaleY=".9" />
                                                </Path.RenderTransform>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="DropLocationIndicatorStyle">
                <Setter.Value>
                    <Style TargetType="ContentControl">
                        <Setter Property="Background" Value="#FF3F4346"/>
                        <Setter Property="Width" Value="2"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ContentControl">
                                    <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="GridLinesVisibility" Value="Vertical" />
            <Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA" />
            <Setter Property="IsTabStop" Value="True" />
            <Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="SystemWindowsControls:DataGrid">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
                                <Grid Name="Root" Background="{TemplateBinding Background}">
                                    <Grid.Resources>
                                        <!--Start: TopLeftHeaderTemplate-->
                                        <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="dataprimitives:DataGridColumnHeader">
                                            <Grid Name="Root">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                                    <Rectangle Stretch="Fill" StrokeThickness="1">
                                                        <Rectangle.Fill>
                                                            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                                <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                                                <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                                                <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                                <GradientStop Color="#D1FFFFFF" Offset="1" />
                                                            </LinearGradientBrush>
                                                        </Rectangle.Fill>
                                                    </Rectangle>
                                                </Border>
                                                <Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2"/>
                                            </Grid>
                                        </ControlTemplate>
                                        <!--End: TopLeftHeaderTemplate-->

                                        <!--Start: TopRightHeaderTemplate-->
                                        <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="dataprimitives:DataGridColumnHeader">
                                            <Grid Name="RootElement">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                                    <Rectangle Stretch="Fill">
                                                        <Rectangle.Fill>
                                                            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                                <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                                                <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                                                <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                                <GradientStop Color="#D1FFFFFF" Offset="1" />
                                                            </LinearGradientBrush>
                                                        </Rectangle.Fill>
                                                    </Rectangle>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                        <!--End: TopRightHeaderTemplate-->
                                    </Grid.Resources>

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition/>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <dataprimitives:DataGridColumnHeader Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
                                    <dataprimitives:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/>
                                    <dataprimitives:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
                                    <Rectangle Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>

                                    <ScrollViewer Grid.ColumnSpan="2" Grid.Row="1">
                                        <dataprimitives:DataGridRowsPresenter Name="RowsPresenter"  />
                                    </ScrollViewer>

                                    <Rectangle Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
                                    <Rectangle Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" />

                                    <Grid Grid.Column="1" Grid.Row="2">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <Rectangle Name="FrozenColumnScrollBarSpacer" />
                                    </Grid>

                                </Grid>
                            </Border>
                            <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</UserControl.Resources>

【讨论】：

【解决方案4】：

要解决滚动问题，你可以强设置TextBlock的Height属性，例如：

<Style x:Key="DataGridTextColumnStyle" TargetType="TextBlock">
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Height" Value="15"/>
</Style>

【讨论】：