2009-07-03 5 views
17

Я пробую содержимое корзины покупок в ItemsControl(ListBox). Для этого я создал следующие DataTemplate:Как сделать DockPanel заполнять свободное пространство

<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, было?

ответ

26

Свяжите 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> 
+0

Я попытался с помощью, что связывание и это, кажется, в результате чего ListBoxItem постоянно растут в размерах, при просмотре с Snoop, я увидел, что ширина обоих ListBoxItem и DockPanel превышает 300000. –

+0

Попробуйте привязать к ActualWidth самого ListBox, затем ... –

+2

О, ладно, я понял ... вы должны установить LastChildFill = «False» на DockPanel, иначе второй TextBlock растянут –

4

DockPanel сек являются злыми. Искушение использовать комбинацию StackPanel/DockPanel для сложных макетов приводит к «макетам тупика». Использование сетки:

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

Я использую Grid S почти исключительно, используя отдельную сетку для каждого блока элементов, которые «принадлежат вместе»

+0

Я не думаю, что DockPanels являются злыми, они могут быть довольно полезными иногда ... однако я должен согласиться с тем, что это был, вероятно, не самый лучший вариант в этом случае –

+0

Конечно, это субъективно, и они не являются _absolute_ злом;) Но посмотрите, куда Rich уже идет - используя ItemContainerStyle (полупрофессиональный материал) для простой задачи - своего рода показатель ... –

+0

С самого начала я рассматривал Grid. Однако, учитывая узкий ListBox или достаточно долгое значение для свойств Name или Price, два TextBlocks в конечном итоге перекрывают их значения. Кроме того, я бы вряд ли классифицировал выкладку двух текстовых блоков на противоположных концах панели как «сложную компоновку». –

5

Хорошая вещь о док-панелей, они уже заполнить все доступное пространство , LastChildFill по умолчанию является истинным (но я устанавливаю его ниже для ясности), поэтому просто не устанавливайте атрибут 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> 

 Смежные вопросы

  • Нет связанных вопросов^_^