Comment faire DockPanel remplir l'espace disponible

Question

J'essaie le contenu d'un panier dans un ItemsControl(ListBox). Pour ce faire, je l'ai créé le DataTemplate suivant:

<DataTemplate x:Key="Templates.ShoppingCartProduct"
              DataType="{x:Type viewModel:ProductViewModel}">
    <DockPanel HorizontalAlignment="Stretch">
        <TextBlock DockPanel.Dock="Left"
                   Text="{Binding Path=Name}"
                   FontSize="10"
                   Foreground="Black" />
        <TextBlock DockPanel.Dock="Right"
                   Text="{Binding Path=Price, StringFormat=\{0:C\}}"
                   FontSize="10"
                   Foreground="Black" />
    </DockPanel>
</DataTemplate>

Lorsque les éléments sont affichés dans mon panier cependant, le nom et TextBlocks de prix sont assis juste à côté de l'autre, et il y a une très grande quantité d'espaces sur le côté droit.

se demande quelle est la meilleure méthode pour forcer le DockPanel à étirer pour remplir tout l'espace mis à la disposition par le ListItem était?

Answer 1

Lier le Width du DockPanel au ActualWidth du ListBoxItem:

<DockPanel Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}">
...

Une autre option: vous pouvez simplement redéfinir la ItemContainerStyle de sorte que la ListBoxItem est étirée horizontalement:

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListBox.ItemContainerStyle>

Answer 2

La bonne chose à propos des panneaux de quai est qu'ils remplissent déjà tout l'espace disponible. LastChildFill est vrai par défaut (mais je l'ai mis ci-dessous pour plus de clarté), si juste ne définissez pas l'attribut DockPanel le dernier enfant, et il remplira l'espace disponible.

<DockPanel HorizontalAlignment="Stretch" LastChildFill="true">
    <TextBlock DockPanel.Dock="Left"
               Text="{Binding Path=Name}"
               FontSize="10"
               Foreground="Black" />
    <TextBlock 
               Text="{Binding Path=Price, StringFormat=\{0:C\}}"
               FontSize="10"
               Foreground="Black" />
</DockPanel>

Answer 3

DockPanels sont mauvais. La tentation d'utiliser la combinaison de StackPanel/DockPanel pour mises en page complexes conduit à des impasses « mise en page ». Utilisez une grille:

<Grid>
  <TextBlock HorizontalAlignment="Left"
...
  <TextBlock HorizontalAlignment="Right"
...
/Grid>

J'utilise Grids presque exclusivement, à l'aide d'une grille séparée pour chaque bloc d'éléments qui « appartiennent ensemble »