Come rendere DockPanel riempire lo spazio disponibile

Question

sto cercando il contenuto di un carrello della spesa in un ItemsControl(ListBox). Per fare ciò, ho creato il seguente 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>

Quando gli articoli sono visualizzati nel mio carrello della spesa Tuttavia, il nome e TextBlocks prezzo sono seduti accanto l'un l'altro, e v'è un estremamente grande quantità di spazio bianco sul lato destro della strada.

chiedevo che cosa il metodo migliore per costringere il DockPanel di allungare a riempire tutto lo spazio messo a disposizione dalla ListItem era?

Answer 1

Associare il Width del DockPanel al ActualWidth del ListBoxItem:

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

Un'altra opzione: si può solo ridefinire la ItemContainerStyle in modo che il ListBoxItem è allungata in senso orizzontale:

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

Answer 2

La cosa bella di pannelli dock è che già riempiono tutto lo spazio disponibile. LastChildFill è true per impostazione predefinita (ma ho impostato sotto per chiarezza), quindi basta non impostare l'attributo DockPanel sul l'ultimo figlio, e sarà riempire lo spazio disponibile.

<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 sono il male. Tentazione di utilizzare combinazioni StackPanel/DockPanel per i layout complessi porta a "layout di vicoli ciechi". Utilizzare una griglia:

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

Uso Grids quasi esclusivamente, utilizzando una griglia separata per ogni blocco di elementi che "appartengono insieme"