24

我正在尝试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是什么？

4

3 回答 3

32

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>
于 2009-07-03T19:03:32.907 回答
10

停靠面板的好处是它们已经填满了所有可用空间。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>
于 2014-02-24T23:32:18.760 回答
9

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

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

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

于 2009-07-03T20:48:07.247 回答