将WrapPanel的项展开到WPF中的其他项上

我正在尝试创建一个项目列表，其中项目可以在悬停/单击/某些其他事件上展开到其他项目上

目前我正在使用WrapPanel并将项绑定到ItemsControl的ItemsSource属性。项目看起来不错，当其大小发生变化时，WrapPanel工作得很好，但是我想不出一个项目能够在WrapPanel中的其他项目之外扩展的方式

也许一张图片会让它更清晰

这是项目的外观：

这就是我想在项目悬停/单击时实现的目标：

当然，当鼠标离开物品时，物品需要恢复到原来的大小

这是我正在使用的代码：

名单：

项目：

我建议您使用带负
边距的
扩展器
。通过这个巧妙的小技巧，
ui元素
不会改变其大小，但可以在外部呈现内容

以下
样式应该适合您

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ItemsControl ItemsSource="{Binding Images}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- Bind IsExpanded to MouseOver to expand it automatically -->
                <Expander Width="100" IsExpanded="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}, Mode=OneWay}">
                    <!-- Normal View -->
                    <Expander.Header>
                        <StackPanel>
                            <Image Height="70" Width="70"/>
                            <Label Content="Title"/>
                        </StackPanel>
                    </Expander.Header>
                    <!-- Details displayed underneath, with same width as the preview -->
                    <StackPanel Height="80" Background="LightGray" Width="{Binding Path=Width, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}">
                        <Label Content="DETAILS"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet" TextWrapping="Wrap"/>
                    </StackPanel>
                    <!-- Set negative Margin to render Details outside of the Boundaries -->
                    <Expander.Style>
                        <Style TargetType="{x:Type Expander}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <!-- Note: The Margin must be the same as the Detail Height -->
                                    <Setter Property="Margin" Value="0,0,0,-80"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Expander.Style>
                </Expander>                      
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <!-- Bring Item to front when Mouse is over it -->
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="{x:Type ContentPresenter}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Panel.ZIndex" Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>


您是否尝试过使用
扩展器
或链接到
鼠标进入
/
鼠标离开
事件的
弹出窗口
？@LittleBit我尝试过使用扩展器，虽然它确实展开了，但它只在项目范围内展开。我没有尝试弹出窗口，但感谢您的建议。我认为出现这种情况是因为您在项目中设置了
边框的
宽度
和
高度
。设置这些值会冻结
边框
大小，并且当内容大小发生变化时，边框不会进行调整。@LittleBit我尝试不设置
宽度
和
高度
，当扩展器完全展开时，整行项目都会展开，以适合新项目，较大的项目而不是显示在其他项目前面的扩展器。是否计划将容器元素（如
边框
）的大小设置为固定大小？如果是的话，我可以给你一个解决方案。谢谢你的回答。虽然“详细信息”面板确实超出了项的边界，但它在到达列表控件的末尾时停止。您知道该项是否也可能超出列表的边界吗？在您通过弹出窗口提出建议后，我通过添加它并设置触发器来更改其
IsOpen
属性来解决问题。您是对的，我没有测试
控件底部的元素。这将比使用
弹出窗口
复杂得多，因此我很高兴您已经根据自己的一些提示找到了解决方案。
    <Border  Style="{StaticResource WorkoutsButton}" Height="150" Width="250">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <Image Grid.Row="0" Height="70" Width="70"/>
            <Grid  Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Horizontal">
                    <TextBlock [...]/>
                    <TextBlock [...]/>
                </StackPanel>
                <TextBlock Grid.Column="1" [...]/>
                <StackPanel Grid.Column="2" Orientation="Horizontal">
                    <TextBlock [...]/>
                    <TextBlock [...]"/>
                </StackPanel>
            </Grid>
        </Grid>
    </Border>

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ItemsControl ItemsSource="{Binding Images}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- Bind IsExpanded to MouseOver to expand it automatically -->
                <Expander Width="100" IsExpanded="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}, Mode=OneWay}">
                    <!-- Normal View -->
                    <Expander.Header>
                        <StackPanel>
                            <Image Height="70" Width="70"/>
                            <Label Content="Title"/>
                        </StackPanel>
                    </Expander.Header>
                    <!-- Details displayed underneath, with same width as the preview -->
                    <StackPanel Height="80" Background="LightGray" Width="{Binding Path=Width, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}">
                        <Label Content="DETAILS"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet" TextWrapping="Wrap"/>
                    </StackPanel>
                    <!-- Set negative Margin to render Details outside of the Boundaries -->
                    <Expander.Style>
                        <Style TargetType="{x:Type Expander}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <!-- Note: The Margin must be the same as the Detail Height -->
                                    <Setter Property="Margin" Value="0,0,0,-80"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Expander.Style>
                </Expander>                      
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <!-- Bring Item to front when Mouse is over it -->
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="{x:Type ContentPresenter}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Panel.ZIndex" Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>