Discussion :

[azar121]

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

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

[azar121]

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

[binoo]

Pour faire une rotation du Datagrid :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[binoo]

Tu peux redéfinir le style des colonnes ainsi :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[binoo]

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

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[azar121]

Wahouu vraiment super tout ça et surtout merci à vous pour votre temps de réaction.

[binoo]

Pas de quoi

Pense au Tag si tout est bon.

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<Style TargetType="{x:Type dg:DataGridCell}">
                    <Setter Property="Height" Value="200" />

ne marche pas.

[azar121]

J'ai trouvé pourquoi faire compliqué quand on peut faire simple lol

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<dg:DataGrid  
                 RowHeight="300"