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

问题描述

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

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.

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

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?

该项目的部分可见性(但不是全部)也设置为已折叠"(通过相同样式).这会成为完成此操作的一个因素吗?

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>

推荐答案

我认为这应该可行，这取决于包含最外面的Grid的内容.

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

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

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 ItemsControl in a DockPanel and 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>
    <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布局的瑞士军舰锚.到处乱扔它们.

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

如果要将其他内容停靠在DockPanel中，请使用以下简单的DockPanel布局:

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

<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拉伸以填充所有可用空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！