Display Datagrid horizontally Silverlight

Question

I am working on a Silverlight 5 project which uses a DataGrid contorl. I want to display the data inside grid horizontally. I took reference from here.

I was able to use the LayoutTransformer and datagrid was rotated. However I am facing a small issue.

Issue: The Cell headers are vertically displayed.

enter image description here

I want these cell headers to be displayed horizontally. I tried modifying the Header Style. Was able to rotate the headers but the header text is clipped becase the surrounding rectangle is not enlarged.

enter image description here

Here is the XAML code I have written

 <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>

Question: How should I enlarge Header rectangle to display full header content?

So you have a `RenderTransform` in your `GridHeader` template flipping it 90º, then another `LayoutTransform` in each `CellTemplate` flipping it 90º which is a little confusing, but for your current issue I would expect just adding `Width="Auto"` by your Header declaration should do the trick. — Chris W., Jun 18 '14 at 15:08

score 0 · Accepted Answer · answered Jun 18 '14 at 16:04

Don't use RenderTransform, use a LayoutTransformer instead (included in SL5, was part of the toolkit prior to Silverlight5). So where you have this now:

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

write

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

Display Datagrid horizontally Silverlight

1 Answers1