DataGrid Vertical avec Header à droite

Version imprimable

24/04/2009, 14h23
azar121

DataGrid Vertical avec Header à droite

Bonjour,

Est-il possible d'utiliser le controle DataGrid du WPF Toolkit de manière Verticale avec les headers à droite et un élément par colonne ?

Merci d'avance
24/04/2009, 14h34
binoo

Salut,

Tu dois pouvoir effectuer une rotation du DataGrid de manière à mettre les header des colonnes à droite et tu crées des templates pour les header des colonnes ainsi que pour les cellules sans oublier de leur faire une rotation aussi.

Après il existe peut-être déjà une option...
24/04/2009, 14h37
azar121

Justement Je ne trouve pas ce paramètres :( je suis preneur si quelqu'un le connait ou avoir un exemple. merci

Pour faire une rotation du Datagrid :

Code:

1
2
3
4
5
6
7
8
    <dg:DataGrid x:Name="Dg1" x:FieldModifier="private" 
                 RenderTransformOrigin="0.5, 0.5" 
                 RowHeight="100" >
      <dg:DataGrid.LayoutTransform>
        <RotateTransform Angle="90" />
      </dg:DataGrid.LayoutTransform>
 
    </dg:DataGrid>

Après il faut aussi faire une rotation sur les cellules, et header peut-être (sauf si tu veux les garder comme ça)

Tu peux redéfinir le style des colonnes ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
      <dg:DataGrid.Resources>
        <Style TargetType="{x:Type dgc:DataGridColumnHeader}" >
          <Setter Property="Height" Value="80" />
 
          <Setter Property="ContentTemplate">
            <Setter.Value>
              <DataTemplate>
                <StackPanel>
                  <TextBlock Text="{Binding}" RenderTransformOrigin="0.5, 0.5" >
                      <TextBlock.RenderTransform>
                        <RotateTransform Angle="-90"/>
                      </TextBlock.RenderTransform>
                  </TextBlock>
                </StackPanel>
              </DataTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </dg:DataGrid.Resources>

où dgc fait référence à :

Code:

xmlns:dgc="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"

Pour reprendre l'ensemble, en ajoutant la partie rotation sur les cellules ;) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<Window 
  x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:dg="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"
  xmlns:dgc="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"
  Title="Window1" 
  Height="220" Width="400"
  WindowStartupLocation="CenterScreen" 
  >
 
  <Grid>
    <dg:DataGrid x:Name="Dg1" x:FieldModifier="private" 
                 RenderTransformOrigin="0.5, 0.5" 
                 RowHeight="100" >
      <dg:DataGrid.LayoutTransform>
        <RotateTransform Angle="90" />
      </dg:DataGrid.LayoutTransform>
 
      <dg:DataGrid.Resources>
 
        <Style TargetType="{x:Type dgc:DataGridColumnHeader}" >
          <Setter Property="Height" Value="80" />
 
          <Setter Property="ContentTemplate">
            <Setter.Value>
              <DataTemplate>
                <StackPanel>
                  <TextBlock Text="{Binding}" RenderTransformOrigin="0.5, 0.5" >
                      <TextBlock.RenderTransform>
                        <RotateTransform Angle="-90"/>
                      </TextBlock.RenderTransform>
                  </TextBlock>
                </StackPanel>
              </DataTemplate>
            </Setter.Value>
          </Setter>
        </Style>
 
        <Style TargetType="{x:Type dg:DataGridCell}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type dg:DataGridCell}">
                <Border Background="{TemplateBinding Background}"
                                                     BorderBrush="{TemplateBinding BorderBrush}"  
                                                     BorderThickness="{TemplateBinding BorderThickness}"
                                                     SnapsToDevicePixels="True">
                  <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                    <ContentPresenter.LayoutTransform>
                      <RotateTransform Angle="-90"/>
                    </ContentPresenter.LayoutTransform>
                  </ContentPresenter>
                </Border>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
 
      </dg:DataGrid.Resources>
    </dg:DataGrid>
 
  </Grid>
 
</Window>

24/04/2009, 16h19
azar121

Wahouu vraiment super tout ça et surtout merci à vous pour votre temps de réaction.
24/04/2009, 16h47
binoo

Pas de quoi ;)

Pense au Tag :resolu: si tout est bon.
24/04/2009, 16h58
azar121
Juste une dernière question comment faire pour que mes DataGridCell s'adaptent automatiquement à la taille du contenu, ou pour le définir manuellement car
Code:

1 2 <Style TargetType="{x:Type dg:DataGridCell}"> <Setter Property="Height" Value="200" />
ne marche pas.
24/04/2009, 17h05
azar121
J'ai trouvé pourquoi faire compliqué quand on peut faire simple lol
Code:

1 2 <dg:DataGrid RowHeight="300"