[英]How do I make an ItemsControl stretch to fill all available space?
I have an ItemsControl, with its ItemsSource bound to a list of items.我有一个 ItemsControl,它的 ItemsSource 绑定到一个项目列表。 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.
每个项目的大小尽可能小,我需要的是控件和控件中的项目拉伸以适应所有可用空间。
I tried setting VerticalAlignment to Stretch on both the control, and its items (using a style).我尝试将控件及其项目(使用样式)上的 VerticalAlignment 设置为 Stretch。 I also tried wrapping the ItemsControl in a DockPanel, and docking the ItemsControl to the bottom.
我还尝试将 ItemsControl 包装在 DockPanel 中,并将 ItemsControl 停靠在底部。 How do I have the ItemsControl dynamically resize?
如何让 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>
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>
I had the same problem and found out that ItemsControl
by default uses a StackPanel
for his children.我遇到了同样的问题,发现
ItemsControl
默认为他的孩子使用StackPanel
。 Replacing this with a Grid
solved the problem:用
Grid
替换它解决了这个问题:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Edit: This only works for one child element!编辑:这只适用于一个子元素!
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.默认情况下,Grid 将拉伸以填充其容器,并且会导致其内容拉伸以填充自身。 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.如果你把
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
is kind of the Swiss Army boat anchor of XAML layout. Grid
是一种 XAML 布局的瑞士军船锚。 Throw 'em around everywhere.把它们到处扔。
If you want to dock other stuff in a DockPanel
, here's a simple DockPanel
layout:如果你想在
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.