كيفية جعل DockPanel ملء المساحة المتاحة

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 صحيح افتراضيا (ولكن أنا تعيينها أدناه للحصول على وضوح)، لذلك فقط لا تعيين السمة 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>

وأنا استخدم Grids على وجه الحصر تقريبا، وذلك باستخدام شبكة منفصلة لكل كتلة من العناصر التي "تنتمي معا"