도크 패널을 채우는 방법으로 사용 가능한 공간을 만드는 방법

Question

나는 쇼핑 카트의 내용을 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 였다?

Answer 1

바인딩 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>

Answer 2

도크 패널의 좋은 점은 이미 사용 가능한 모든 공간을 채우는 것입니다. 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>

Answer 3

DockPanelS는 악하다. 사용하려는 유혹 StackPanel/DockPanel 복잡한 레이아웃의 조합은 "레이아웃 막 다른 골목"으로 이어집니다. 그리드 사용 :

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

나는 사용한다 Grid거의 독점적으로, "함께 속하는"각 요소 블록에 별도의 그리드를 사용합니다.