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的{{1}}绑定到DockPanel的{{1}}：

ActualWidth

另一种选择：您可以重新定义ListBoxItem，以便<DockPanel Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"> ...水平拉伸：

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

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

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

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

如何使DockPanel填充可用空间

3 个答案: