J'ai du mal à obtenir le contenu de ListBox à redimensionner avec elle

Question

J'ai essayé la suggestion here concernant Stretching, mais cela n'a pas fonctionné pour moi.

J'ai un TabItem qui héberge un UserControl qui est essentiellement un ListBox avec un ItemsPanel. Le ItemsPanel force le ListBox à afficher son contenu horizontalement. Le contenu de la zone de liste est databound à ObservableCollection<StackPanelContents>, qui est un autre UserControl. StackPanelContents lui-même contient simplement List d'objets avec une représentation visuelle (ils contiennent un UIElement pour la visualisation).

En général, le code fonctionne correctement car il restitue toutes les données que j'ai contenues dans le ObservableCollection, mais le problème est que les éléments ne sont pas redimensionnés lorsque la fenêtre est agrandie ou réduite.

Voici un aperçu de ce que la hiérarchie des classes ressemble à:

Et voici les résultats:

Le XAML pour la fenêtre principale a juste TabControl et TabItem:

<Window x:Class="ResizeStackPanelInListBox.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"> 

    <TabControl> 
     <TabItem Header="Test" x:Name="MyTabItem"> 
      <!-- contents are set in code behind --> 
     </TabItem> 
    </TabControl> 
</Window> 

Le ListBoxContainer XAML qui affiche les StackPanelContents ressemble à ceci:

<UserControl x:Class="ResizeStackPanelInListBox.ListBoxContainer" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="Auto" Width="Auto"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"></RowDefinition> 
      <RowDefinition Height="Auto"></RowDefinition> 
     </Grid.RowDefinitions> 
     <TextBlock>ListBox with StackPanels as its ListBoxItems:</TextBlock> 
     <ListBox Grid.Row="1" ItemsSource="{Binding StackPanels}" HorizontalContentAlignment="Stretch"> 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" Width="Auto" Height="Auto" /> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
     </ListBox> 
    </Grid> 
</UserControl> 

Et le StackPanelContents UserControl ressemble à ceci:

<UserControl x:Class="ResizeStackPanelInListBox.StackPanelContents" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="Auto" Width="Auto"> 

    <StackPanel> 
     <TextBlock Text="StackPanel"></TextBlock> 
     <StackPanel x:Name="MyStackPanel"> 
     </StackPanel> 
    </StackPanel> 
</UserControl> 

Quelqu'un peut-il expliquer pourquoi cela ne redimensionne automatiquement, et comment je peux va-t-il résoudre cela? Est-ce que je vais devoir écrire mon propre panneau personnalisé pour traiter ceci, et utiliser MeasureOverride et Arrange?

Answer 1

Le problème est que vous utilisez StackPanels pour organiser les éléments dans les deux sens afin que vous perdez toute sorte d'étirement. StackPanel permet à ses enfants de s'étirer uniquement dans la direction opposée à l'orientation. L'autre direction ne recevra que l'espace dont elle a besoin pour laisser le plus de place possible au reste des objets. Donc, pour un Vertical StackPanel par défaut, tout ce que vous mettez à l'intérieur s'étend horizontalement, mais se faufile verticalement vers le haut. Puisque vous avez des StackPanels verticaux à l'intérieur d'un StackPanel horizontal, les objets sont compressés dans les deux sens.

Il y a quelques options selon ce que vous voulez faire de vos objets. Changer pour un DockPanel permettra au dernier élément de s'étirer et de remplir l'espace (le vertical aurait besoin de définir DockPanel.Dock = Top dans ItemContainerStyle). Une Grille avec des lignes et des colonnes de taille * fonctionne bien pour les mises en page normales mais pas pour ItemsControls puisque la ligne et la colonne doivent être définies pour chaque article (cela peut être fait en utilisant ItemsControl.AlternationIndex mais c'est douloureux et fragile). L'utilisation d'un UniformGrid à 1 ligne/colonne (comme dans la réponse que vous avez référencée) répartit également l'espace disponible et ne nécessite aucun paramètre supplémentaire sur les éléments.

Si vous avez besoin d'une stratégie de mise en page plus complexe avec des éléments différents pour obtenir une quantité d'espace ou un comportement d'étirement différent, vous aurez besoin d'un panneau personnalisé.

Answer 2

try situé dans la fenêtre

SizeToContent="WidthAndHeight"