Cách đặt DockPanel lấp đầy không gian có sẵn

Question

Tôi đang thử nội dung của giỏ hàng trong một số ItemsControl(ListBox). Để làm như vậy, tôi đã tạo ra những điều sau 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> 

Khi các mục được hiển thị trong giỏ hàng của tôi tuy nhiên, Name, Price TextBlocks đang ngồi ngay bên cạnh nhau, và có một số lượng rất lớn của khoảng trắng ở phía bên tay phải.

Đã tự hỏi phương pháp nào tốt nhất để buộc DockPanel để kéo dài để lấp đầy tất cả không gian được cung cấp bởi ListItem là?

Answer 1

Bind các Width của DockPanel đến ActualWidth của ListBoxItem:

<DockPanel Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"> 
... 

Một tùy chọn: bạn có thể chỉ xác định lại ItemContainerStyle để các ListBoxItem được kéo dài theo chiều ngang:

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    </Style> 
</ListBox.ItemContainerStyle> 

Answer 2

DockPanel s là ác. Cám dỗ sử dụng kết hợp StackPanel/DockPanel cho bố cục phức tạp dẫn đến "bố cục kết thúc chết". Sử dụng một lưới:

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

tôi sử dụng Grid là gần như độc quyền, sử dụng một mạng lưới riêng biệt cho mỗi khối của các yếu tố đó "thuộc về nhau"

Answer 3

Những điều tốt đẹp về tấm dock là họ đã lấp đầy tất cả các không gian có sẵn . LastChildFill là true theo mặc định (nhưng tôi đặt nó dưới đây cho rõ ràng), do đó, chỉ cần không đặt thuộc tính DockPanel trên đứa trẻ cuối cùng, và nó sẽ lấp đầy không gian có sẵn.

<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>