2

我创建了一个带有平铺数据模板的列表框。我现在想弄清楚的是,当鼠标悬停或选定事件发生时,如何正确地将缩放效果应用于每个列表框项,并让它在换行面板中正确呈现。我目前已将动画添加到 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>

我将不胜感激任何关于在哪里看的建议提前谢谢

当前结果的图像

在此处输入图像描述

4

2 回答 2

1

渲染转换器在布局发生后应用,Silverlight 布局引擎对它的纯图形任务知之甚少。您需要控制在缩放时实际上会增加它所需的大小并导致 Silverlight 更新其布局。

您需要的LayoutTransformer控件是Silverlight Toolkit中的控件。

将每个图块的内容放在 a 中LayoutTransformer,并将 a 分配ScaleTransform给它的LayoutTransform属性。现在你可以让你的动画来操纵变换,随着瓦片的增长,其他瓦片会流动。

于 2011-07-27T21:06:26.700 回答
1

通过这个工作,我将我的用户控件存储在 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>

//为简洁起见,其余编辑

然后在包含列表框的用户控件后面的代码中,我使用了以下内容:

 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 事件)。

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

再次感谢安东尼为我指明了正确的方向

于 2011-07-28T16:55:33.117 回答