Question

我一直在寻找一段时间，但我找到的所有解决方案只能解决我的问题。我想要一个ItemsControl，每个项目都包含一个Expander。在扩展时，扩展器的内容应显示为与ItemsControl中的其他项重叠的叠加层，而不是将它们向下移动。

以下XAML-Code与一个大问题完全相同：Expander的内容与其他项目不重叠，但隐藏在它们后面。我想这是由于ZIndex，因为ItemsControl中的以下项目是在Expander的内容之后添加的。

我设法使用样式触发器将单个Expander的ZIndex设置为99，但这似乎是一个太复杂且容易出错的解决方案。有什么想法吗？

<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">

  <Window.Resources>

    <x:Array x:Key="items"
             Type="sys:String" 
             xmlns:sys="clr-namespace:System;assembly=mscorlib">
      <sys:String>One</sys:String>
      <sys:String>Two</sys:String>
      <sys:String>Three</sys:String>
      <sys:String>Four</sys:String>
    </x:Array>

    <DataTemplate x:Key="template">
      <Grid Background="Red" Margin="0,0,0,10">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Text="{Binding}" />
        <Canvas Height="25" Grid.Row="1">
          <Expander ExpandDirection="Down" Header="Header" Grid.Row="1">
            <Expander.Content>
              <TextBlock Height="80" Text="Content" Background="Yellow" />
            </Expander.Content>
          </Expander>
        </Canvas>
      </Grid>
    </DataTemplate>

  </Window.Resources>

  <Grid>
    <ScrollViewer>
      <ItemsControl ItemsSource="{StaticResource items}"
                    ItemTemplate="{StaticResource template}"
                    HorizontalContentAlignment="Stretch">
      </ItemsControl>
    </ScrollViewer>
  </Grid>
</Window>

Answer 1

以你尝试的方式实现这一目标会很棘手。问题是嵌套结构 - 因为每个Canvas都嵌套在Grid内，所以你无法控制其相对于其他Canvas元素的z-index。为了说明这一点，下面是您当前标记创建的可视树的示意图：

<StackPanel>              <!-- items panel -->
    <ContentPresenter>    <!-- item wrapper -->
        <Grid>
            <Canvas>
            </Canvas>
        </Grid>
    </ContentPresenter>
    <ContentPresenter>    <!-- item wrapper -->
        <Grid>
            <Canvas>
            </Canvas>
        </Grid>
    </ContentPresenter>
</StackPanel>

参考上述内容，您的目标是让Canvas元素出现在其父ContentPresenter的兄弟姐妹面前。在此层次结构中这是不可能的，因为ZIndex仅适用于相同父元素的兄弟节点。现在，可能有一些方法可以将上述内容按到平面结构中，以便您可以根据需要应用ZIndex扩展内容。

但是，我认为更简单，更自然的方法是使用Popup元素来扩展内容。 Popup是一个位于可视树之外的框架基元，并且始终位于其他内容之上。您可以使用ToggleButton或类似的东西来创建＆＃34;展开＆＃34;影响。例如：

<StackPanel Grid.Row="1">
    <ToggleButton x:Name="PopupToggle" Content="Expand" />
    <Popup IsOpen="{Binding IsChecked,ElementName=PopupToggle}">
        <TextBlock Height="80" Text="Content" Background="Yellow" />
    </Popup>
</StackPanel>

ItemsControl中使用的WPF扩展器覆盖

1 个答案: