如何使 ItemsControl 拉伸以填充所有可用 space?
How do I make an ItemsControl stretch to fill all available space?
我有一个 ItemsControl,其 ItemsSource 绑定到一个项目列表。每个项目的大小尽可能小,我需要的是控件和控件中的项目可以拉伸以适应所有可用 space。
我尝试在控件及其项目(使用样式)上将 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>
我认为这应该可行,具体取决于包含最外层的内容 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
默认使用 StackPanel
作为他的 children。将其替换为 Grid
解决了问题:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
编辑:这仅适用于一个 child 元素!
作为模板的网格将无法工作,因为项目被置于下方。使用 DockPanel 效果很好:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
我认为接受的答案有点太复杂了。
在网格中设置项目的位置也很烦人。
UniformGrid 正是您所需要的。
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
我有一个 ItemsControl,其 ItemsSource 绑定到一个项目列表。每个项目的大小尽可能小,我需要的是控件和控件中的项目可以拉伸以适应所有可用 space。
我尝试在控件及其项目(使用样式)上将 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>
我认为这应该可行,具体取决于包含最外层的内容 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
默认使用 StackPanel
作为他的 children。将其替换为 Grid
解决了问题:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
编辑:这仅适用于一个 child 元素!
作为模板的网格将无法工作,因为项目被置于下方。使用 DockPanel 效果很好:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
我认为接受的答案有点太复杂了。 在网格中设置项目的位置也很烦人。 UniformGrid 正是您所需要的。
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>