水平显示 Datagrid Silverlight答案

【问题标题】：Display Datagrid horizontally Silverlight水平显示 Datagrid Silverlight
【发布时间】：2014-08-08 15:16:58
【问题描述】：

我正在开发一个使用 DataGrid 控件的 Silverlight 5 项目。我想水平显示网格内的数据。我参考了here。

我能够使用 LayoutTransformer 并且旋转了数据网格。但是我面临一个小问题。

Issue: The Cell headers are vertically displayed.

我希望这些单元格标题水平显示。我尝试修改标题样式。能够旋转标题，但由于周围的矩形没有放大，标题文本被剪裁。

这是我编写的 XAML 代码

 <Style x:Key="GridHeader" TargetType="ContentControl">
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Silver" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <Border
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      CornerRadius="2">
                            <ContentControl
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Cursor="{TemplateBinding Cursor}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          FontFamily="{TemplateBinding FontFamily}"
                          FontSize="{TemplateBinding FontSize}"
                          FontStretch="{TemplateBinding FontStretch}"
                          Foreground="{TemplateBinding Foreground}"
                          IsTabStop="{TemplateBinding IsTabStop}"
                          Margin="{TemplateBinding Padding}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5" >
                                <ContentControl.RenderTransform>
                                    <CompositeTransform Rotation="90"/>
                                </ContentControl.RenderTransform>
                            </ContentControl>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<!-- Code for 1 column. Similarly I have added more columns to the DataGrid-->

<sdk:DataGridTemplateColumn Header="IPTV12MISTarget" HeaderStyle="{StaticResource GridHeader}" >
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <toolkit:LayoutTransformer>
                                    <toolkit:LayoutTransformer.LayoutTransform>
                                        <RotateTransform Angle="90"/>
                                    </toolkit:LayoutTransformer.LayoutTransform>
                                    <TextBlock Text="{Binding IPTV12MISTarget}" Margin="5"></TextBlock>
                                </toolkit:LayoutTransformer>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <toolkit:LayoutTransformer>
                                    <toolkit:LayoutTransformer.LayoutTransform>
                                        <RotateTransform Angle="90"/>
                                    </toolkit:LayoutTransformer.LayoutTransform>
                                    <TextBox Text="{Binding IPTV12MISTarget, Mode=TwoWay}" Margin="5"></TextBox>
                                </toolkit:LayoutTransformer>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>

问题：如何放大 Header 矩形以显示完整的标题内容？

【问题讨论】：

所以你的 GridHeader 模板中有一个 RenderTransform 将其翻转 90º，然后每个 CellTemplate 中的另一个 LayoutTransform 将其翻转 90º，这有点令人困惑，但对于您当前的问题，我预计只需在您的 Header 声明中添加 Width="Auto" 就可以了。

标签： c# .net silverlight datagrid

【解决方案1】：

不要使用RenderTransform，而是使用LayoutTransformer（包含在 SL5 中，是 Silverlight5 之前工具包的一部分）。所以你现在有这个：

<ContentControl ...>
    <ContentControl.RenderTransform> ...90...</ContentControl.RenderTransform>
</ContentControl>

写

<LayoutTransformer>
    <LayoutTransformer.LayoutTransform>
        <RotateTransform Angle="90"/>
    <LayoutTransformer.LayoutTransform>
    <ContentControl .../>
</LayoutTransformer>

【讨论】：