WPF +项目中的扩展器控件用户控件。适合可用空间

我有这种情况下，我无法适应用户界面来填补空间。我会尝试解释这种情况。WPF +项目中的扩展器控件用户控件。适合可用空间

我有一个具有项目控件的主用户控件。此Item控件具有扩展器的项目。每个扩展器使用一个用户控件（子）。这个基于数据的用户将是一个文本框或将成为一个列表框。在辅助UC中的文本框/列表框中的数据在运行时从db异步撤销

我想要的是，当项目控件中有多个项目时，我会看到多个扩展器标题。如果Secondary usercontrol应该显示一个文本框，那么我希望它展开到文本框的高度（+一些边距）。其他兄弟扩展器应该保持折叠并且可见。

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

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

我已经尝试了StackPanel和Dock Panel作为ItemsPanelTemplate。 “堆叠面板”只是将列表推下，并且同级展开器不再可见。当我点击扩展器时，堆叠面板也不平滑。它只是创建闪烁的动画。在扩展的情况下，对于UI而言，只要显示一个项目（无论您拥有多少项目，我只看到一个扩展器），在案例或Dock Panel中都可以获得流畅的体验。

我想要的行为是如下：

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

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

问候，吉里贾·尚卡尔

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

来源

2016-03-04 Shankar

设置VerticalAlignment在contentpresenter标签扩展控制内顶。这解决了我的问题。

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

来源

2016-05-17 06:04:44

尝试包装你的UCFunc元素为ScrollViewer与VerticalScrollBarVisibility="Auto"

来源

2016-05-17 06:18:59 xkillah

WPF +项目中的扩展器控件用户控件。适合可用空间

回答

相关问题