WPF单个scrollviewer中的多个listview
我试图构建一个窗口,它有三个长度不确定的数据绑定listview控件。我希望所有三个都在一个滚动视图中 最简单地说,下面的代码是我希望它如何工作的。当然,示例xaml代码的结果是scrollviewer内容超出了窗口范围,不可滚动 我尝试使用网格控件,但这并没有达到预期效果。我不希望每个ListView都有固定的高度和单独的滚动条,因为可能会有不同数量的数据,这会导致不必要的滚动 任何人都可以提供一种在一个滚动条中包含多个可变内容列表视图的方法吗WPF单个scrollviewer中的多个listview,wpf,Wpf,我试图构建一个窗口,它有三个长度不确定的数据绑定listview控件。我希望所有三个都在一个滚动视图中 最简单地说,下面的代码是我希望它如何工作的。当然,示例xaml代码的结果是scrollviewer内容超出了窗口范围,不可滚动 我尝试使用网格控件,但这并没有达到预期效果。我不希望每个ListView都有固定的高度和单独的滚动条,因为可能会有不同数量的数据,这会导致不必要的滚动 任何人都可以提供一种在一个滚动条中包含多个可变内容列表视图的方法吗 <Window x:Class="Amul
<Window x:Class="AmultiListTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SomeNamespace"
mc:Ignorable="d"
Title="AmultiListTest"
Height="300"
Width="300">
<StackPanel>
<ScrollViewer>
<StackPanel Height="250">
<Label>List number one</Label>
<ListView>
<ListViewItem>list 1 Item 1</ListViewItem>
<ListViewItem>list 1 Item 2</ListViewItem>
<ListViewItem>list 1 Item 3</ListViewItem>
<ListViewItem>list 1 Item 4</ListViewItem>
<ListViewItem>list 1 Item 5</ListViewItem>
<ListViewItem>list 1 Item 6</ListViewItem>
<ListViewItem>list 1 Item 7</ListViewItem>
<ListViewItem>list 1 Item 8</ListViewItem>
<ListViewItem>list 1 Item 9</ListViewItem>
</ListView>
<Label>List number two</Label>
<ListView>
<ListViewItem>list 2 Item 1</ListViewItem>
<ListViewItem>list 2 Item 2</ListViewItem>
<ListViewItem>list 2 Item 3</ListViewItem>
<ListViewItem>list 2 Item 4</ListViewItem>
<ListViewItem>list 2 Item 5</ListViewItem>
<ListViewItem>list 2 Item 6</ListViewItem>
</ListView>
<Label>List number three</Label>
<ListView>
<ListViewItem>list 3 Item 1</ListViewItem>
<ListViewItem>list 3 Item 2</ListViewItem>
<ListViewItem>list 3 Item 3</ListViewItem>
<ListViewItem>list 3 Item 4</ListViewItem>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
第一名
清单1第1项
清单1项目2
清单1项目3
清单1项目4
清单1项目5
清单1项目6
清单1项目7
清单1项目8
清单1项目9
名单二
清单2第1项
清单2项目2
清单2项目3
清单2项目4
清单2项目5
清单2项目6
名单三
清单3项目1
清单3项目2
清单3项目3
清单3项目4
首先移除堆叠面板的高度:
<StackPanel Height="250">
到
然后绑定卷轴的高度
(...)
<ScrollViewer Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}">
(...)
</ScrollViewer>
(…)
(...)
来源:首先移除堆栈面板的高度:
<StackPanel Height="250">
到
然后绑定卷轴的高度
(...)
<ScrollViewer Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}">
(...)
</ScrollViewer>
(…)
(...)
来源:Scrollviewer高度解决方案发布后效果良好。我找到了一种包含标题的方法,添加了一个代码,将scrollviewer的高度减少了标题stackpanel的高度。以下是XAML:
<Window x:Class="AmultiListTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SomeNamespace"
mc:Ignorable="d"
Title="AmultiListTest"
Height="300"
Width="300"
Loaded="Window_Loaded">
<StackPanel>
<StackPanel x:Name="SPheader">
<Label>this is header one</Label>
<Label>this is header two</Label>
<Separator />
</StackPanel >
<ScrollViewer x:Name="SViewer"
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Border}, Mode=FindAncestor}}">
<StackPanel>
<Label Content="List number one" />
<ListView>
<ListViewItem Content="list 1 Item 1" />
<ListViewItem Content="list 1 Item 2" />
<ListViewItem Content="list 1 Item 3" />
<ListViewItem Content="list 1 Item 4" />
<ListViewItem Content="list 1 Item 5" />
<ListViewItem Content="list 1 Item 6" />
<ListViewItem Content="list 1 Item 7" />
<ListViewItem Content="list 1 Item 8" />
<ListViewItem Content="list 1 Item 9" />
</ListView>
<Label Content="List number two" />
<ListView>
<ListViewItem Content="list 2 Item 1" />
<ListViewItem Content="list 2 Item 2" />
<ListViewItem Content="list 2 Item 3" />
<ListViewItem Content="list 2 Item 4" />
<ListViewItem Content="list 2 Item 5" />
<ListViewItem Content="list 2 Item 6" />
</ListView>
<Label Content="List number three" />
<ListView>
<ListViewItem Content="list 3 Item 1" />
<ListViewItem Content="list 3 Item 2" />
<ListViewItem Content="list 3 Item 3" />
<ListViewItem Content="list 3 Item 4" />
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
最好不要让代码落后,而是在XAML中扣除头的实际值,但我不知道如何做到这一点。这段代码暂时有效
编辑:一个合适的解决方案-不绑定ScrollViewer的高度或在代码隐藏中设置它-如下所示:
<Window ... />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="SPheader" Grid.Row="0">
...
</StackPanel >
<ScrollViewer x:Name="SViewer" Grid.Row="1">
...
</ScrollViewer>
</Grid>
</Window>
...
...
Scrollviewer高度解决方案可以正常工作。我找到了一种包含标题的方法,添加了一个代码,将scrollviewer的高度减少了标题stackpanel的高度。以下是XAML:
<Window x:Class="AmultiListTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SomeNamespace"
mc:Ignorable="d"
Title="AmultiListTest"
Height="300"
Width="300"
Loaded="Window_Loaded">
<StackPanel>
<StackPanel x:Name="SPheader">
<Label>this is header one</Label>
<Label>this is header two</Label>
<Separator />
</StackPanel >
<ScrollViewer x:Name="SViewer"
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Border}, Mode=FindAncestor}}">
<StackPanel>
<Label Content="List number one" />
<ListView>
<ListViewItem Content="list 1 Item 1" />
<ListViewItem Content="list 1 Item 2" />
<ListViewItem Content="list 1 Item 3" />
<ListViewItem Content="list 1 Item 4" />
<ListViewItem Content="list 1 Item 5" />
<ListViewItem Content="list 1 Item 6" />
<ListViewItem Content="list 1 Item 7" />
<ListViewItem Content="list 1 Item 8" />
<ListViewItem Content="list 1 Item 9" />
</ListView>
<Label Content="List number two" />
<ListView>
<ListViewItem Content="list 2 Item 1" />
<ListViewItem Content="list 2 Item 2" />
<ListViewItem Content="list 2 Item 3" />
<ListViewItem Content="list 2 Item 4" />
<ListViewItem Content="list 2 Item 5" />
<ListViewItem Content="list 2 Item 6" />
</ListView>
<Label Content="List number three" />
<ListView>
<ListViewItem Content="list 3 Item 1" />
<ListViewItem Content="list 3 Item 2" />
<ListViewItem Content="list 3 Item 3" />
<ListViewItem Content="list 3 Item 4" />
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
最好不要让代码落后,而是在XAML中扣除头的实际值,但我不知道如何做到这一点。这段代码暂时有效
编辑:一个合适的解决方案-不绑定ScrollViewer的高度或在代码隐藏中设置它-如下所示:
<Window ... />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="SPheader" Grid.Row="0">
...
</StackPanel >
<ScrollViewer x:Name="SViewer" Grid.Row="1">
...
</ScrollViewer>
</Grid>
</Window>
...
...
就在我的头顶上,我建议您尝试从内部StackPanel移除固定高度250,并将外部StackPanel更改为网格。网格将符合其父网格(本例中为窗口)的大小。这将强制网格的内容(ScrollViewer)符合网格的大小,从而触发ScrollViewer的滚动行为。如果这不起作用,至少你不会浪费太多时间去尝试它。并且移除外部堆叠面板-你给它九分之一的高度。使用网格。就在我头顶上,我建议你尝试从内部StackPanel移除固定高度250,并将外部StackPanel更改为网格。网格将符合其父网格(本例中为窗口)的大小。这将强制网格的内容(ScrollViewer)符合网格的大小,从而触发ScrollViewer的滚动行为。如果这不起作用,至少你不会浪费太多时间去尝试它。并且移除外部堆叠面板-你给它九分之一的高度。使用网格。无需绑定ScrollViewer的高度。如问题评论中所述,用网格替换外部StackPanel。一般来说,当你可以使用常规布局时,永远不要绑定宽度或高度。这种解决方案-或者切换到网格作为外部控件,两者都可以。但是,当我尝试添加标题(不会滚动)时,我遇到了被覆盖的问题(如果是网格),或者高度的相对值现在太长。有没有办法从上面的相对高度绑定中扣除标题的高度?无需绑定ScrollViewer的高度。如问题评论中所述,用网格替换外部StackPanel。一般来说,当你可以使用常规布局时,永远不要绑定宽度或高度。这种解决方案-或者切换到网格作为外部控件,两者都可以。但是,当我尝试添加标题(不会滚动)时,我遇到了被覆盖的问题(如果是网格),或者高度的相对值现在太长。有没有办法从上面的相对高度绑定中扣除标题的高度?您的代码隐藏将替换高度绑定,因此您也可以从XAML中删除绑定。除此之外,所有绑定或代码隐藏的东西都是完全多余的。您应该改为使用标准WPF布局机制。例如,用两行网格替换外部堆叠面板(并将第一行的高度设置为自动)。请看我的编辑。谢谢你的评论。我对WPF比较陌生,非常感谢您的输入和示例。我正在使用的窗口要复杂得多,涉及wazoo的多个部分和控件。许多动态元素都是基于用户输入动态构建的,因此stackpanels使这一点更容易实现