Discussion :

[Ikit]

Bonjour,

J'ai une question concernant la construction d'une structure en XAML.

J'aimerais réaliser une frise. En gros l'idée c'est que les blocs qui la constituent se suivent et soient liés les uns aux autres


imaginons que j'ai 3 blocs :

Code :

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

[ 1 ][ 2 ][ 3 ]

le bloc 2 suit le bloc 1, et le bloc 3 suit le bloc 2,
maintenant le truc c'est que si la largeur du bloc 2 change, le bloc 1 reste tel quel, mais le bloc 3 subit l'élargissement du bloc 2 et va se déplacer d'autant vers la droite

Code :

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

[ 1 ][    2    ][ 3 ]

donc voilà ce que j'aimerais réaliser, en HTML c'est trés simple, on prend des <div> avec l'attribut display à "inline", mais en XAML je ne trouve pas ce qui permet de faire ça "tout seul" (sans que je fasse moi même le redimmensionnement)

[mambycamara]

donner une valeur à la propieté Width du premier bloc et ne pas spécifier de Width pour le 2 et 3.

[mambycamara]

une aute methode: spécifier le Width="Auto" de la première "ColumnDefinition":

<GridShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock>fdfggdfg</TextBlock>
</Grid>
<Grid Grid.Column="1">
<TextBlock>fdfggfdg</TextBlock>
</Grid>
<Grid Grid.Column="2">
<TextBlock>fdfgg</TextBlock>
</Grid>
</Grid>

[binoo]

Salut,

Si je me rappelle bien, l'attribut "display: inline" permet d'afficher des éléments à la suite l'un de l'autre.
En WPF, tu as le conteneur StackPanel qui reprend ce principe :

Code xml :

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

1
2
3
4
<StackPanel Orientation="Horizontal">
  <Label Content="label" />
  <Button />  <!-- boutton qui va se placer à la suite du label -->
</StackPanel>

[mambycamara]

Salut binoo,
Je crois que Ikit parle de 3 conteneurs qui se suivent mais pas 3 contrôles dans un conteneur.

[binoo]

Salut binoo,
Je crois que Ikit parle de 3 conteneurs qui se suivent mais pas 3 contrôles dans un conteneur.

Oui peut-être, le code que j'ai mis reste un exemple
Il est tout à fait possible de mettre des conteneurs dans un StackPanel. Pour reprendre ton exemple : les 3 conteneurs Grid contenant des contrôles TextBlock peuvent très bien être intégré dans un StackPanel, soit :

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
<StackPanel Orientation="Horizontal">
  <Grid>
    <TextBlock>fdfggdfg</TextBlock>
  </Grid>
  <Grid>
    <TextBlock>fdfggfdg</TextBlock>
  </Grid>
  <Grid>
    <TextBlock>fdfgg</TextBlock>
  </Grid>
</StackPanel>

C'est le but du StackPanel de d'empiler (pour ne pas traduire le mot) les éléments. Non pas que le Grid ne permette pas d'obtenir ce résultat

[mambycamara]

Mais lui je crois qu'il voudrais que la largeur du premier grid soit fixe. Et dans ton exemple ce n'est pas le cas. Imaginons qu'on ajoute dynamiquement un nouveau contrôle dans le premier grid !

[binoo]

Mais lui je crois qu'il voudrais que la largeur du premier grid soit fixe. Et dans ton exemple ce n'est pas le cas. Imaginons qu'on ajoute dynamiquement un nouveau contrôle dans le premier grid !

J'ai pas tant retenu l'exemple (qui reste qu'un exemple en plus ) mais plutôt la référence au comportement obtenu par la balise html <div> et son attribut display à "inline".
Après peut-être que le besoin colle mieux avec le grid

[Ikit]

Rebonjour, merci pour ces nombreuses réponses


Oui donc moi ce qui m'intéresse c'est que mes blocs se placent correctement (et automatique) les uns à la suite des autres quand je change leur taille. Je vais tester le stackPanel, qui m'a l'air plus simple à mettre en place, je vous tiens au courant.

[Ikit]

Bon je vais être franc : J'ai un peu de mal à réaliser ce que je veux, je vais donc expliquer en détails, car si ça se trouve c pas comme ça qu'il faut faire :s


Bon je voudrais réaliser une frise chronologique, avec comme infos, les années, les mois et les jours. Le truc c'est qu'il faudrait qu'on puisse zoomer/dézoomer, et changer l'échelle de la frise afin d'avoir une précision au jour prés, ou bien au mois etc.


Donc moi ce que j'imaginais, c'est ma frise contient des blocs années, qui contiennent des blocs mois, qui contiennent les blocs jours.
et les blocs jours se suivent les uns les autres sans se chevaucher, idem pour les mois et les années. et quand on zoom, on ne fait que changer la taille des blocs (seule la largeur change), et tout se réajuste correctement. (et j'aimerais laisser cette tâche là à XAML.

Mes blocs contiennent du texte (numéro du jour, nom du mois, etc) ainsi que des icônes représentant des événements. Ces objets ne doivent pas subir de redimensionnement, seul la largeur des blocs (années, mois, jours) changent. le texte lui se contente de rester centrer, dans son bloc. et quand on dézoom trop, et que les jours (par exemple) deviennent trop petit, alors j'arrêterais des les afficher (il ne reste plus que les mois et les années).

Voilà.

Est-ce que c'est comme ça que vous auriez fait ? ou bien ya plus malin


Au dfébut j'avait pensé faire ma frise à l'échelle 1 et simplement appliquer un scale lors des zoom/dézoom, mais le scale redimmensionne aussi le text et tout le reste et la frise devient vite illisible. (et ça pose des problème avec la hauteur qui elle doit rester fixe)

[binoo]

Ah oui la problématique est un peu différente . Donc le zoom va agir proportionnellement sur toutes les block. Peut-être qu'une ListBox ferait l'affaire. Voilà comment je ferais (à savoir que l'idée du scale est celle que j'utilise, ça me parait pas mal comme idée) :

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
  <Window.Resources>
    <l:WidthItemConverter x:Key="WidthItemConv" />
  </Window.Resources>
  <StackPanel Orientation="Vertical" >
    <ScrollViewer Margin="5" >
      <ListBox x:Name="ListBoxDate" >
        <ListBox.Style>
          <Style TargetType="ListBox" >
            <Setter Property="SelectedIndex" Value="0" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ItemsPanel" >
              <Setter.Value>
                <ItemsPanelTemplate>
                  <VirtualizingStackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </ListBox.Style>
        <ListBox.ItemTemplate>
          <DataTemplate>
            <Border BorderThickness="1,0,1,0" BorderBrush="Black" Width="{Binding ElementName=SliderZoom, Path=Value, Converter={StaticResource WidthItemConv}}" Height="60" >
              <TextBlock Text="{Binding TheDate}" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
    </ScrollViewer>
 
    <Slider x:Name="SliderZoom" Orientation="Horizontal" Value="1" Maximum="10" Minimum="0.5" Margin="5" />
 
  </StackPanel>

Code c# :

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
  public class ClasseDate {
 
    public string TheDate {
      get;
      set;
    }
 
    public ClasseDate( string theDate ) {
      TheDate = theDate;
    }
 
  }
 
  public class WidthItemConverter : IValueConverter {
    public object Convert( object o, Type type, object parameter,
                          CultureInfo culture ) {
      double scale = (double)o;
      return scale * 60.0;
    }
 
    public object ConvertBack( object o, Type type, object parameter,
                              CultureInfo culture ) {
      throw new NotSupportedException();
    }
  }

Initialisation de la listBox :

Code c# :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
      List<ClasseDate> lstDate = new List<ClasseDate>();
      ClasseDate cd = new ClasseDate( "22 Mars" );
      lstDate.Add( cd );
      cd = new ClasseDate( "23 Mars" );
      lstDate.Add( cd ); 
      cd = new ClasseDate( "24 Mars" );
      lstDate.Add( cd );
      cd = new ClasseDate( "25 Mars" );
      lstDate.Add( cd );
      cd = new ClasseDate( "26 Mars" );
      lstDate.Add( cd );
 
      ListBoxDate.ItemsSource = lstDate;

Le zoom a un effet sur la largeur des Items, après cela pourrait être appliqué sur la FontSize des textBlock si besoin