Как заставить DockPanel заполнить доступное пространство

StackOverflow https://stackoverflow.com/questions/1080479

  •  22-08-2019
  •  | 
  •  

Вопрос

Я пробую содержимое корзины покупок в 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>

DockPanels - это зло.Искушение использовать StackPanel/DockPanel комбинация для сложных макетов приводит к "тупиковым точкам компоновки".Используйте сетку:

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top