Элементы списка со списком масштабирования Silverlight в оболочке

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>

Буду очень признателен за любые предложения о том, где искать Заранее спасибо

Изображение текущего результата

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

// Остальное отредактировано для краткости

Затем в коде позади 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).

Не уверен, что это наиболее подходящий подход, и я был бы признателен за любые отзывы об альтернативах.

Еще раз спасибо Энтони за то, что он указал мне правильное направление

Answer 2

Преобразователи рендеринга применяются после создания макета, это чисто графическая задача, о которой движок компоновки Silverlight знает очень мало.Вам нужен элемент управления, который при масштабировании фактически увеличивает желаемый размер и заставляет Silverlight обновлять макет.

Необходимый элемент управления - это элемент управления LayoutTransformer из Silverlight Toolkit .

Поместите содержимое каждой плитки в LayoutTransformer и присвойте ScaleTransform свойству LayoutTransform.Теперь вы можете использовать анимацию для управления преобразованием, и по мере роста плитки другие плитки будут течь.