Как заставить DockPanel заполнить доступное пространство
Вопрос
Я пробую содержимое корзины покупок в 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
был?
Решение
Свяжите 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>
Другие советы
Самое приятное в док-панелях то, что они уже заполняют все доступное пространство.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>
DockPanel
s - это зло.Искушение использовать StackPanel/DockPanel
комбинация для сложных макетов приводит к "тупиковым точкам компоновки".Используйте сетку:
<Grid>
<TextBlock HorizontalAlignment="Left"
...
<TextBlock HorizontalAlignment="Right"
...
/Grid>
Я использую Grid
s почти исключительно, используя отдельную сетку для каждого блока элементов, которые "принадлежат друг другу"