如何使DockPanel填充可用空间

Question

我正在尝试购物车的内容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？

Answer 1

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

Answer 2

停靠面板的好处是它们已经填满了所有可用空间.默认情况下,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>

Answer 3

DockPanels是邪恶的。尝试将StackPanel/DockPanel组合用于复杂的布局会导致“布局死胡同”。使用网格：

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

我Grid几乎专门使用s，对“属于”的每个元素块使用单独的网格