Como hacer DockPanel llenar el espacio disponible

Question

Estoy intentando el contenido de un carrito de la compra en un ItemsControl(ListBox). Para ello, he creado la siguiente 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>

Cuando los elementos se muestran en mi carro de la compra, sin embargo, el nombre y el precio TextBlocks están sentados justo al lado uno del otro, y hay una cantidad extremadamente grande de espacio en blanco en el lado derecho.

preguntaba cuál es el mejor método para forzar el DockPanel que estirarse para llenar todo el espacio puesto a disposición por el ListItem era?

Answer 1

Enlazar el Width de la DockPanel a la ActualWidth de la ListBoxItem:

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

Otra opción: sólo podría redefinir el ItemContainerStyle para que el ListBoxItem se estira horizontalmente:

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

Answer 2

Lo bueno de acoplar paneles es que ya llenan todo el espacio disponible. LastChildFill es cierto por defecto (pero me puse abajo para mayor claridad), por lo que simplemente no se establezca el atributo DockPanel en el último hijo, y llenará el espacio 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 son malos. Tentación de utilizar la combinación de diseños complejos StackPanel/DockPanel conduce a callejones sin salida "de diseño". Utilizar una cuadrícula:

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

utilizo Grids casi exclusivamente, usando una rejilla separada para cada bloque de elementos que "pertenecen juntos"