具有用户控件的项控件中的 WPF + 扩展器.适合可用空间

本文关键字:控件 空间 扩展器 WPF 用户 | 更新日期: 2023-09-27 18:37:25

>我有这种情况,我无法容纳UI来填充空间。我将尝试解释这种情况。

我有一个具有项控件的"主要用户"控件。此项控件具有展开器的项。每个扩展器都使用一个用户控件(子控件)。基于数据的此用户将是文本框或列表框。辅助 UC 中的文本框/列表框中的数据在运行时异步从数据库中检索

我想要的是,当我在项目控件中有多个项目时,我会看到多个扩展器标题。展开时,如果次要用户控件应该显示一个文本框,那么我希望它扩展到文本框的高度(+一些边距)。其他同级扩展器应保持折叠和可见。

但是,当次级用户控件应该显示列表框时。我希望扩展器仅扩展到可用空间,并且如果需要,内部列表框具有滚动条。同级扩展器应折叠且标题可见。扩展的扩展器内容应仅占用可用空间。

但是,正在发生的事情是,如果我在单击扩展器时有很长的值列表,它就会下降并且不适合可用空间。它只是将所有内容都推低,不适合可用空间。如果项目较少,它只会扩展到项目的可用高度。这是不希望的。在任何情况下,如果它是一个列表框,它都应该占用可用空间(无论它是否有项目)。

我已经尝试了堆栈面板和停靠面板作为项目面板模板。堆栈面板只是将列表向下推,同级扩展器不再可见。当我单击扩展器时,堆栈面板也不平滑。它只是创建闪烁的动画。在 Dock 面板中,当我展开时,就 UI 而言,它是流畅的体验,但它总是只显示一个项目(无论您有多少项目,我只看到一个扩展器)

我想要的行为如下:

假设扩展器 1 和 3 包含列表框,而扩展器 2 有一个文本框

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.

下面是我的代码。任何建议都会有很大帮助。

问候吉里贾·香卡尔

<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> 

具有用户控件的项控件中的 WPF + 扩展器.适合可用空间

将"垂直对齐方式"设置为内容演示者标记中展开器控件内的顶部。这解决了我的问题。

 <ContentPresenter **VerticalAlignment="Top"** x:Name="ExpanderContent" ContentSource="Content" />
尝试使用

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