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>

Iが「一緒に属する」という要素のブロック毎に別々のグリッドを使用して、ほぼ独占的Gridsを使用する

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top