Question

我创建了一个带有平铺数据模板的列表框。我现在要弄清楚的是，当鼠标悬停或选定事件发生并在包装面板中正确渲染时，如何正确地将缩放效果应用于每个列表框项目。我目前已将动画添加到ListBoxItemTemplate的可视状态。

一些想法：调用动画时，包装面板中的切片不会重新定位，以允许正确查看缩放项目。我想让包裹面板中的物品重新定位，以允许缩放的项目可见。

另外我注意到缩放后的项目超出了包裹面板的边界，是否有一种方法可以在缩放约束到包裹面板的可视区域时保留该项目？

搜索视图中使用的代码

<Grid x:Name="LayoutRoot">
    <ListBox x:Name="ResultListBox"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             Background="{x:Null}"
             BorderThickness="0"
             HorizontalContentAlignment="Stretch"
             ItemContainerStyle="{StaticResource TileListBoxItemStyle}"
             ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}" 
             ItemsSource="{Binding SearchResults[0].Results}"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>

            <DataTemplate>
                <formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch" Margin="2.5">
                    <!--  Person Template  -->
                    <formatter:TypeTemplateSelector.PersonTemplate>
                        <DataTemplate>
                            <qr:ucTilePerson />
                        </DataTemplate>
                    </formatter:TypeTemplateSelector.PersonTemplate>

                    <!--  Incident Template  -->
                    <formatter:TypeTemplateSelector.IncidentTemplate>
                        <DataTemplate>
                            <qr:ucTileIncident />
                        </DataTemplate>
                    </formatter:TypeTemplateSelector.IncidentTemplate>

                </formatter:TypeTemplateSelector>

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>

ResultsItemsControlPanelTemplate在app.xaml中定义为

        <ItemsPanelTemplate x:Key="ResultsItemsControlPanelTemplate">
        <toolkit:WrapPanel x:Name="wrapTile"/>
    </ItemsPanelTemplate>

我非常感谢任何关于在哪里寻找的建议提前致谢

当前结果的图像

enter image description here

Answer 1

渲染变换器在布局发生后应用，它是纯粹的图形化任务，Silverlight布局引擎对此知之甚少。你需要的是控制当缩放实际上增加它所需的大小并导致Silverlight更新它的布局。

您需要的控件是来自Silverlight Toolkit的LayoutTransformer控件。

将每个图块的内容放在LayoutTransformer内，并为其ScaleTransform属性分配LayoutTransform。现在，您可以获取动画来操纵变换，随着图块的增长，其他图块将会流动。

Answer 2

完成此操作后，我将用户控件存储在Listbox数据窗口中，该窗口也是项目中引用的userControl。我想我已经启动了部分解决方案，所以现在我需要继续调整正在发生的事情。由于我使用的是数据模板，我必须在用户控件上设置一个绑定引用到Layouttrasnformation

 <ListBox x:Name="ResultListBox"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             Background="{x:Null}"
             BorderThickness="0"
             HorizontalContentAlignment="Stretch"
             ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}"
             ItemContainerStyle="{StaticResource TileListBoxItemStyle}" 
             ItemsSource="{Binding SearchResults[0].Results}"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled">     
        <ListBox.ItemTemplate>
            <DataTemplate>
                <formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch" Margin="2.5">
                    <!--  Person Template  -->
                    <formatter:TypeTemplateSelector.PersonTemplate>
                        <DataTemplate >
                            <layoutToolkit:LayoutTransformer x:Name="PersonTransformer">
                                    <layoutToolkit:LayoutTransformer.LayoutTransform>
                                        <ScaleTransform x:Name="personScale"/>
                                    </layoutToolkit:LayoutTransformer.LayoutTransform>
                                        <qr:ucTilePerson MouseEnter="ucTilePerson_MouseEnter" Tag="{Binding ElementName=PersonTransformer}"  />
                                </layoutToolkit:LayoutTransformer>
                        </DataTemplate>
                    </formatter:TypeTemplateSelector.PersonTemplate>

//为了简洁而编辑休息

然后在包含列表框的usercontrol后面的代码中，我使用了以下内容：

 private void ucTilePerson_MouseEnter(object sender, MouseEventArgs e)
    {
        var ps = ((UserControl)sender).Tag as LayoutTransformer;
        if (ps != null)
        {
            var transform = ps.LayoutTransform as ScaleTransform;
            transform.ScaleX = (transform.ScaleX + 1.2);
            transform.ScaleY = (transform.ScaleY + 1.2);
            Dispatcher.BeginInvoke(() => { ps.ApplyLayoutTransform(); });
        }

我仍然需要调整一些，因为它似乎不像我喜欢的那样流畅（我还必须设置mouseLeave事件）。

不确定这是否是最合适的方法，我将不胜感激任何有关替代品的反馈。

再次感谢安东尼指出我正确的方向

一个wrappanel中的Silverlight缩放列表框项

2 个答案: