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

これを実行すると、プロジェクト内で参照される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イベントも設定する必要があります）。

これが最も適切なアプローチであるかどうかはわかりません。代替案についてのフィードバックをいただければ幸いです。

私を正しい方向に向けてくれたAnthonyにもう一度感謝します

于 2011-07-28T16:55:33.117 に答える