DockPanel füllt den verfügbaren Platz

Question

Ich versuche den Inhalt eines Warenkorbs in einer ItemsControl(ListBox) . Zu diesem Zweck habe ich das Folgende erstellt DataTemplate :

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

Wenn die Artikel in meinem Einkaufswagen angezeigt werden, werden jedoch Name und Preis TextBlocks sitzen direkt nebeneinander, und auf der rechten Seite gibt es extrem viel Leerraum.

Ich frage mich, was die beste Methode ist, um die DockPanel zu dehnen, um den gesamten Raum zu füllen, den die ListItem war?

Answer 1

Binden Sie die Width der DockPanel zum ActualWidth der ListBoxItem :

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

Eine andere Möglichkeit: Sie könnten einfach die ItemContainerStyle so dass die ListBoxItem horizontal gestreckt wird:

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

Answer 2

Das Schöne an den Stegplatten ist, dass sie bereits den gesamten verfügbaren Platz ausfüllen. LastChildFill ist standardmäßig wahr (aber ich setze es unten für Klarheit), also einfach nicht das DockPanel-Attribut auf das letzte Kind, und es wird den verfügbaren Platz zu füllen.

<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

DockPanel s sind böse. Die Versuchung zu benutzen StackPanel/DockPanel Kombination für komplexe Layouts führt zu "Layout-Sackgassen". Verwenden Sie ein Raster:

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

Ich benutze Grid s fast ausschließlich ein separates Raster für jeden Block von Elementen, die "zusammengehören", verwenden