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

【问题标题】：How do I make an ItemsControl stretch to fill all available space?如何使 ItemsControl 拉伸以填充所有可用空间？
【发布时间】：2016-08-07 18:35:48
【问题描述】：

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

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

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

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

【问题讨论】：

不确定你的意思。默认情况下，我的 ItemsControl 中的项目是垂直拉伸的。您的 ItemTemplate 看起来如何？
ItemTemplate 没有变化。 ContentPresenter 绑定到具有 DataTemplate 的对象，该对象是使用 DataTemplate 的模板（根据 MVVM）。 DataTemplate 属于 WPF 工具包图表控件。我也将 VerticalAlignment 设置为 that 的 Stretch。
如果您将 DataTemplate 替换为仅具有例如一个文本块。然后设置 TextBlock 背景。
@Clemens 我做到了。它尽可能小而不超出内容。
你也可以设置 DockPanel 的背景，看看它是否真的被拉伸了。

标签： wpf xaml resize itemscontrol

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我遇到了同样的问题，发现ItemsControl 默认为他的孩子使用StackPanel。将其替换为 Grid 即可解决问题：

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

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

【讨论】：

网格作为模板不起作用，因为项目放置在相同位置并相互重叠！
你说得对，我只使用了一个子元素。我编辑了我的答案。

【解决方案3】：

我认为这应该可行，具体取决于最外面的 Grid 包含什么。

默认情况下，Grid 会拉伸以填充其容器，并且会导致其内容拉伸以填充自身。如果您将ItemsControl 放入DockPanel 并在ItemsControl 上设置DockPanel.Dock="Bottom"，它将填充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>

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

如果您想将其他内容停靠在 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>

【讨论】：

我尝试将 ItemsControl 放在网格中，但没有成功。
@kleineg 整个 XAML 文件是什么样的？一定有什么东西没有伸展。
当我将 DockPanel 的背景设置为红色时，它填满了我想要的所有区域。尽管停靠在底部，但 ItemsControl 都在顶部
其实我刚想通了，我用了一个setter把item的高度设置为它的所有者的ActualHeight，很容易放入一个转换器来除以n。再次感谢您。
@kleineg 如果它不会滚动，UniformGrid 作为 ItemsPanel 可能是完美的。刚刚发现了那个。

【解决方案4】：

作为模板的网格将不起作用，因为项目被放在下面。使用 DockPanel 效果很好：

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

【讨论】：

使用 DockPanel 只会导致最后一个项目拉伸并填充可用空间，因此项目不会是统一的。