Question

我有这种情况，我无法适应UI来填补空间。我会尝试解释这个场景。

我有一个具有项控件的主用户控件。此项控件具有扩展器项。每个扩展器使用用户控件（子）。基于数据的该用户将是文本框或将是列表框。辅助UC中文本框/列表框中的数据在运行时从数据库中异步恢复

我想要的是当我在items控件中有多个项目时，我会看到多个扩展器标题。当扩展时，如果辅助用户控件应该显示一个文本框，那么我希望它扩展到文本框的高度（+一些边距）。其他兄弟扩张器应该保持倒塌和可见。

但是当辅助用户控件应该显示列表框时。我希望扩展器只扩展到可用空间，内部列表框有一个滚动条，如果需要的话。兄弟扩展器应该折叠并且标题可见。扩展的扩展器内容应该只占用可用空间。

发生的事情是，当我点击一个扩展器时，如果我有很长的值列表，它就会下降并且不适合可用空间。它只是将所有东西都向下推，并且不适合可用空间。如果物品较少，它只会扩展到物品的可用高度。这是不希望的。在任何情况下，如果它是一个列表框，它应该占用可用空间（无论是否有项目）。

我尝试过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>

Answer 1

将verticalAlignment设置为contentpresenter标记中扩展器控件内的顶部。这解决了我的问题。

 <ContentPresenter **VerticalAlignment="Top"** x:Name="ExpanderContent" ContentSource="Content" />

Answer 2

尝试使用ScrollViewer

将UCFunc元素包装到VerticalScrollBarVisibility="Auto"

WPF + Expander in Items控件，具有用户控件。适合可用空间

2 个答案: