wpf 如何使 ItemsControl 拉伸以填充所有可用空间？

How do I make an ItemsControl stretch to fill all availible space?

提问by kleineg

I have an ItemsControl, with its ItemsSource bound to a list of items. The size of each of the items is as small as they can be, what I need is for the control and the items in the control to stretch to fit all available space.

我有一个 ItemsControl，它的 ItemsSource 绑定到一个项目列表。每个项目的大小都尽可能小，我需要的是控件和控件中的项目拉伸以适应所有可用空间。

I tried setting VerticalAlignment to Stretch on both the control, and its items (using a style). I also tried wrapping the ItemsControl in a DockPanel, and docking the ItemsControl to the bottom. How do I have the ItemsControl dynamically resize?

我尝试将控件及其项目（使用样式）上的 VerticalAlignment 设置为 Stretch。我还尝试将 ItemsControl 包装在 DockPanel 中，并将 ItemsControl 停靠在底部。如何让 ItemsControl 动态调整大小？

Also some, but not all, of the item's visibilities are set to Collapsed (through the same style). Will that be a factor in how this needs to be done?

还有一些（但不是全部）项目的可见性设置为折叠（通过相同的样式）。这会是如何完成这项工作的一个因素吗？

<DockPanel HorizontalAlignment="Stretch">
    <ItemsControl DockPanel.Dock="Bottom"
                    ItemsSource="{Binding Owner.LoadPointCharts}"
                    HorizontalAlignment="Stretch"
                    x:Name="ItemsControl">
        <ItemsControl.ItemContainerStyle><!--Height="{Binding Path=Height, RelativeSource={RelativeSource AncestorType={x:Type DockPanel}}}"-->
            <Style TargetType="ContentPresenter">
            <Setter Property="VerticalAlignment"
                    Value="Stretch" />

                <Setter Property="Visibility">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource CompareIndexToVisibilityConverter}">
                        <Binding Path="Index" />
                        <Binding Path="SelectedIndex" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            </Style >
        </ItemsControl.ItemContainerStyle>
        </ItemsControl>
</DockPanel> 

采纳答案by 15ee8f99-57ff-4f92-890c-b56153

I think this ought to work, depending on what contains the outermost Grid.

我认为这应该有效，具体取决于包含最外层的Grid.

By default, a Grid will stretch to fill its container, and it'll cause its contents to stretch to fill itself. If you're putting the ItemsControlin a DockPaneland setting DockPanel.Dock="Bottom"on the ItemsControl, it'll fill the bottom of the DockPanel, so if I understand correctly, that's not what you want.

默认情况下，Grid 将拉伸以填充其容器，并且会导致其内容拉伸以填充自身。如果您将ItemsControlaDockPanel和设置DockPanel.Dock="Bottom"放在 上ItemsControl，它将填充 的底部DockPanel，所以如果我理解正确，那不是您想要的。

<Grid>
    <ItemsControl 
        ItemsSource="{Binding Owner.LoadPointCharts}"
        x:Name="ItemsControl"
        >
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="VerticalAlignment" Value="Stretch" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />

                <Setter Property="Visibility">
                    <Setter.Value>
                        <MultiBinding Converter="{StaticResource CompareIndexToVisibilityConverter}">
                            <Binding Path="Index" />
                            <Binding Path="SelectedIndex" />
                        </MultiBinding>
                    </Setter.Value>
                </Setter>
            </Style >
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

Gridis kind of the Swiss Army boat anchor of XAML layout. Throw 'em around everywhere.

Grid是一种 XAML 布局的瑞士军船锚。把它们到处扔。

If you want to dock other stuff in a DockPanel, here's a simple DockPanellayout:

如果你想在 a 中停靠其他东西DockPanel，这里有一个简单的DockPanel布局：

<Window xmnls:blah="blah blah etc.">
    <Window.DataContext>
        <local:MyViewModel />
    </Window.DataContext>
    <Grid>
        <DockPanel>
            <Menu DockPanel.Dock="Top">
                <!-- Menu Items-->
            </Menu>
            <Grid>
                <!-- 
                This assumes we've got a DataTemplate in a resource dictionary  
                somewhere with DataType="{x:Type local:MyViewModel}" 
                -->
                <ContentControl
                    Content="{Binding}"
                    />
            </Grid>
        </DockPanel>
    </Grid>
</Window>

回答by Florian Lavorel

The accepted answer is a little too complex in my opinion. Also setting the positions of your items in a Grid can be annoying. UniformGrid is what you need.

在我看来，接受的答案有点太复杂了。在网格中设置项目的位置也很烦人。UniformGrid 正是您所需要的。

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

回答by SpeziFish

I had the same problem and found out that ItemsControlby default uses a StackPanelfor his children. Replacing this with a Gridsolved the problem:

我遇到了同样的问题，发现ItemsControl默认情况下StackPanel为他的孩子使用 a 。用Grid解决了的问题替换它：

 <ItemsControl>
      <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
                <Grid />
           </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
 </ItemsControl>

Edit: This only works for one child element!

编辑：这只适用于一个子元素！

回答by deafjeff

The Grid as Template won't work since items are put over under. Using a DockPanel works fine:

网格作为模板将不起作用，因为项目被放在下面。使用 DockPanel 工作正常：

  <ItemsControl>
  <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
            <DockPanel/>
       </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>