您可以让扩展器覆盖 WPF 中的其他可视树元素吗？答案

【问题标题】：Can you have an expander do an overlay overtop of other visual tree elements in WPF?您可以让扩展器覆盖 WPF 中的其他可视树元素吗？
【发布时间】：2017-07-19 17:15:28
【问题描述】：

这个问题不仅仅是一个数据问题。有没有一种简单的方法来放置

的元素

<Expander>(contents)</Expander>

在弹出窗口或其他内容中使其仅覆盖在其他元素之上？

XAML：（我只是做了一个简单的 For 循环来填充构造函数中 ViewModel 中“Locs”的绑定，否则大部分 VM 是空白的）

<Window x:Class="MainWindow"
        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:MVVM"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="800">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid>
      <Expander ExpandDirection="Down" IsExpanded="True" HorizontalAlignment="Stretch">
        <Expander.Header>
          <TextBlock TextAlignment="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOCATIONS" FontWeight="Bold"/>
        </Expander.Header>
        <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Height="300" HorizontalAlignment="Stretch">
          <ItemsControl ItemsSource="{Binding Locs}" >
            <ItemsControl.ItemTemplate>
              <DataTemplate>
                <CheckBox Margin="5" Content="{Binding}" />
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
        </ScrollViewer>
      </Expander>
    </Grid>
    <Label Grid.Row="1" Height="100" Content="Test Content" FontSize="32" />
  </Grid>
</Window>

应用程序启动，看起来不错。

单击扩展器，现在它会折叠，但会向上跳转文本。我知道在可视化树中这是默认行为，但是有没有一种简单的方法可以将其包装在某个覆盖层中，例如弹出窗口，当它折叠时不会使其他文本跳转？

【问题讨论】：

标签： c# wpf vb.net xaml expander

【解决方案1】：

您可以将Expander 的Height 属性设置为固定值，以预先保留其垂直空间。

或者您可以将ScrollViewer 放入Popup，例如：

<Expander x:Name="expander" ExpandDirection="Down" IsExpanded="True" HorizontalAlignment="Stretch">
    <Expander.Header>
        <TextBlock TextAlignment="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOCATIONS" FontWeight="Bold"/>
    </Expander.Header>
    <Popup PlacementTarget="{Binding ElementName=expander}"
                   Placement="Bottom"
                   IsOpen="{Binding IsExpanded, ElementName=expander}">
        <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Height="300" HorizontalAlignment="Stretch"
                              Background="White">
            <ItemsControl>
                <CheckBox Margin="5" Content="1" />
                <CheckBox Margin="5" Content="2" />
                <CheckBox Margin="5" Content="3" />
                <CheckBox Margin="5" Content="4" />
                <CheckBox Margin="5" Content="5" />
            </ItemsControl>
        </ScrollViewer>
    </Popup>
</Expander>

<Label Grid.Row="1" Height="100" Content="Test Content" FontSize="32" />

您可能希望阅读此内容以便能够在 Expander 移动时移动弹出窗口：

How can I move a WPF Popup when its anchor element moves?

【讨论】：