我有这种情况,我无法适应UI来填补空间 . 我会尝试解释这个场景 .
我有一个具有项控件的主用户控件 . 此项控件具有扩展器项 . 每个扩展器使用用户控件(子) . 基于数据的该用户将是文本框或将是列表框 . 辅助UC中文本框/列表框中的数据在运行时从db异步恢复
我想要的是当我在items控件中有多个项目时,我会看到多个扩展器 Headers . 当扩展时,如果辅助用户控件应该显示一个文本框,那么我希望它扩展到文本框的高度(一些边距) . 其他兄弟扩张器应该保持倒塌和可见 .
但是当辅助用户控件应该显示一个列表框时 . 我希望扩展器只扩展到可用空间,内部列表框有一个滚动条,如果需要的话 . 兄弟扩展器应该折叠并且 Headers 可见 . 扩展的扩展器内容应仅占用可用空间 .
发生的事情是,当我点击一个扩展器时,如果我有很长的值列表,它只会下降并且不适合可用空间 . 它只是将所有东西都向下推,并且不适合可用的空间 . 如果物品较少,它只会扩展到物品的可用高度 . 这是不希望的 . 在任何情况下,如果它是一个列表框,它应占用可用空间(无论是否有项目) .
我尝试过Stack Panel和Dock Panel作为ItemsPanelTemplate . 堆栈面板只是向下推动列表,并且不再显示sibiling扩展器 . 单击扩展器时,堆栈面板也不平滑 . 它只是创建闪烁的动画 . 在案例或Dock面板中,就扩展时UI而言,它是流畅的体验,但它总是只显示一个项目(无论你有多少项目,我只看到一个扩展器)
我想要的行为如下:
** Assumption Expander 1 & 3 contains listbox whereas Expander 2 has a textbox
All Collapsed
===================
Expander1 - {collapsed}
Expander2 - {collapsed}
Expander3 - {collapsed}
.
.
. { blank}
.
.
------------------------------
Expander 1 Expanded
===================
Expander1 - {expanded}
.
.
. { expander content}
.
.
Expander2 - {collapsed}
Expander3 - {collapsed}
------------------------------
Expander 2 Expanded
===================
Expander1 - {collapsed}
Expander2 - {expanded}
. {expander content}
Expander3 - {collapsed}
.
.
. { blank}
.
------------------------------
Expander 3 Expanded
===================
Expander1 - {collapsed}
Expander2 - {collapsed}
Expander3 - {expanded}
.
.
. {expander content}
.
.
------------------------------
Note : at any given time frame only one expander would be expanded, others collapsed.
以下是我的代码 . 任何建议都会有很大帮助 .
此致,Girija Shankar
<UserControl x:Class="FilterWKPS.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:local="clr-namespace:Sample"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<ItemsControl ItemsSource="{Binding FuncData}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding Caption}"
ExpandDirection="Down" HorizontalAlignment="Left" IsExpanded="{Binding ShowHide}">
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Foreground="Black" Text="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=Header}"
Width="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=ActualWidth}">
</TextBlock>
</DataTemplate>
</Expander.HeaderTemplate>
<local:UCFunc DataContext="{Binding DataContext.FuncVM, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}"/>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
2 回答
将VerticalAlignment设置为contentpresenter标记中扩展器控件内的顶部 . 这解决了我的问题 .
尝试使用
VerticalScrollBarVisibility="Auto"
将UCFunc元素包装到ScrollViewer
中