Question

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

当前，我正在使用WrapPanel，并且将Items绑定到ItemsControl的ItemsSource属性。物品看起来不错，并且当其大小更改时WrapPanel可以很好地工作，但是我想不出一种方法可以使它比WrapPanel中的其他物品扩展超出其原始范围。

也许图像会使其更清晰。

这是物品的样子：

这就是我要在鼠标悬停/点击时实现的目标：

当然，当鼠标离开时，该项目需要恢复其原始大小。

这是我正在使用的代码：

列表：

    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:WorkoutsListItem/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

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

ITEM：

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

感谢帮助！

Answer 1

我建议您使用带有负Expander的{{1}}。有了这个巧妙的小技巧，Margin不会更改其大小，但可以在外部渲染内容。

以下UIElement应该为您工作

Style

将WrapPanel的项目扩展到WPF中的其他项目

1 个答案: