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

时间:2016-04-15 17:07:30

标签: wpf xaml resize itemscontrol

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

我尝试在对象及其项目(使用样式)上将VerticalAlignment设置为Stretch。我还尝试将ItemsControl包装在DockPanel中,并将ItemsControl对接到底部。如何让ItemsControl动态调整大小?

此项目的一些(但不是全部)项目的可见性设置为Collapsed(通过相同的样式)。这是否需要如何完成?

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

4 个答案:

答案 0 :(得分:4)

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

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

编辑:这仅适用于一个子元素!

答案 1 :(得分:3)

我认为接受的答案有点太复杂了。 同样,设置项目在网格中的位置可能会很烦人。 您需要UniformGrid。

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

答案 2 :(得分:1)

我认为这应该有效,具体取决于包含最外层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>

答案 3 :(得分:1)

Grid as Template无法正常工作,因为项目已被置于之下。使用DockPanel可以正常工作:

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