web-dev-qa-db-fra.com

Comment conserver le rapport hauteur / largeur sur le contenu évolutif et déroulant dans WPF?

Je suis assez nouveau sur WPF et je suis tombé sur un problème qui semble un peu difficile à résoudre. Fondamentalement, je veux une grille 4x4 évolutive mais qui conserve un rapport d'aspect carré (ou tout autre arbitraire). Cela semble en fait assez délicat à faire, ce qui me surprend car j'imagine que c'est une exigence assez courante.

Je commence par une définition de grille comme celle-ci:

<Grid>
  <Grid.RowDefinitions>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
    <Grid.RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
    <Grid.ColumnDefinition Width="*"/>
  </Grid.ColumnDefinition>
  ...
</Grid>

Maintenant, si vous définissez cela pour l'étirer, il peut remplir la fenêtre ou tout autre conteneur dans lequel vous le placez. Les lignes et la colonne sont uniformes mais le rapport d'aspect n'est pas fixe.

Ensuite, j'ai essayé de le mettre dans un StackPanel pour utiliser l'espace disponible. N'a pas aidé. Ce qui m'a le plus aidé quand je me suis souvenu des Viewboxes.

<StackPanel Orientation="Horizontal">
  <Viewbox>
    <Grid Height="1000" Width="1000"> <!-- this locks aspect ratio -->
      <Grid.RowDefinitions>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
        <Grid.RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
        <Grid.ColumnDefinition Width="*"/>
      </Grid.ColumnDefinition>
      ...
    </Grid>
  </viewbox>
  <Label HorizontalAlignment="Stretch">Extra Space</Label>
</StackPanel>

Maintenant, mon contenu évolue et conserve les proportions. Le problème est que si la fenêtre n'est pas assez large, une partie de ma grille est hors de l'écran. J'aimerais pouvoir y accéder si tel était le cas. De même, je pourrais avoir besoin d'une taille minimale, ce qui pourrait également entraîner un défilement vertical.

Maintenant, j'ai essayé de mettre mon StackPanel et ma grille (séparément) dans un conteneur ScrollViewer approprié, mais le contenu ne s'adapte plus à la fenêtre. Il passe en taille réelle, ce qui n'est pas bon.

Alors, comment dois-je procéder? Suis-je en train d'aboyer le mauvais arbre? Existe-t-il un moyen meilleur/plus simple de procéder?

37
cletus

Vous devez placer le contenu (la grille) dans un ViewBox et définir Viewbox.Stretch Property sur Stretch.Uniform

Le contrôle Viewbox est utilisé pour étirer ou mettre à l'échelle un élément enfant et vous permet de contrôler la façon dont l'enfant est étiré. Vérifiez le exemples ici.

alt text
(source: Microsoft.com )

74
Pop Catalin

Dans ce cas, votre meilleur pari est un niformGrid . Ceci n'est utile que si vous voulez des grilles NxN.

5
user7116