如何使DockPanel填充可用空间

I'm trying the content of a shopping cart in an ItemsControl(ListBox). To do so, I've created the following DataTemplate:

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

When the items are displayed in my shopping cart however, the Name and Price TextBlocks are sitting right beside one another, and there is an extremely large amount of whitespace on the right hand side.

然而，当项目显示在我的购物车中时，名称和价格文本块正好位于彼此旁边，并且右侧有大量的空白。

Was wondering what the best method to force the DockPanel to stretch to fill all the space made available by the ListItem was?

想知道强制DockPanel拉伸以填充ListItem提供的所有空间的最佳方法是什么？

3 个解决方案

#1

Bind the Width of the DockPanel to the ActualWidth of the ListBoxItem:

将DockPanel的宽度绑定到ListBoxItem的ActualWidth：

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

Another option: you could just redefine the ItemContainerStyle so that the ListBoxItem is stretched horizontally:

另一个选项：您可以重新定义ItemContainerStyle，以便ListBoxItem水平拉伸：

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

#2

The nice thing about dock panels is they already fill all the available space. LastChildFill is true by default (but I set it below for clarity), so just don't set the DockPanel attribute on the last child, and it will fill the available space.

码头面板的好处是它们已经填满了所有可用空间。默认情况下，LastChildFill为true（但我为了清楚起见将其设置在下方），因此不要在最后一个子节点上设置DockPanel属性，它将填充可用空间。

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

#3

DockPanels are evil. Temptation to use StackPanel/DockPanel combination for complex layouts leads to "layout dead ends". Use a Grid:

DockPanels很邪恶。将StackPanel / DockPanel组合用于复杂布局的诱惑导致“布局死角”。使用网格：

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

I use Grids almost exclusively, using a separate grid for each block of elements that "belong together"

我几乎完全使用网格，为每个“属于一起”的元素块使用单独的网格

#1