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

Question

我有一個 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> 

Answer 1

在我看來，接受的答案有點太復雜了。 在網格中設置項目的位置也很煩人。 UniformGrid 正是您所需要的。

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

Answer 2

我遇到了同樣的問題，發現ItemsControl默認為他的孩子使用StackPanel 。 用Grid替換它解決了這個問題：

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

編輯：這只適用於一個子元素！

Answer 3

我認為這應該有效，具體取決於包含最外層Grid 。

默認情況下，Grid 將拉伸以填充其容器，並且會導致其內容拉伸以填充自身。 如果你把ItemsControl一個DockPanel並設置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>

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>

Answer 4

網格作為模板將不起作用，因為項目被放在下面。 使用 DockPanel 工作正常：

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