[解決済み] DockPanelを空きスペースいっぱいに表示させる方法

質問

ショッピングカートの内容を ItemsControl(ListBox) . そのために、以下のようなものを作りました。 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>

しかし、ショッピングカートに商品が表示されると、名前と価格が表示されます。 TextBlocks が横に並んでいて、右側には非常に多くの空白があります。

を強制的に削除する最善の方法は何だろうか？ DockPanel によって空いたスペースをすべて埋めるように伸ばします。 ListItem でしたっけ？

解決方法は？

バインドする Width の DockPanel から ActualWidth の ListBoxItem :

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

もう一つの方法として、単に ItemContainerStyle というように ListBoxItem は水平に引き伸ばされます。

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