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

Я создал список с плиточным шаблоном данных. Сейчас я пытаюсь понять, как правильно применить эффект масштабирования к каждому элементу списка при наведении курсора мыши или выбранном событии и правильно отобразить его на панели переноса. В настоящее время у меня есть анимация, добавленная к визуальным состояниям 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>

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

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

введите описание изображения здесь


datatemplate silverlight wrappanel
person rlcrews    schedule 27.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Вам нужен элемент управления LayoutTransformer из Silverlight Toolkit.

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

person AnthonyWJones    schedule 27.07.2011
comment
Спасибо, Энтони, это именно то, что я искал. Вопрос: Поскольку я работаю с загрузкой шаблонов данных в список, куда мне добавить LayoutTransformer? Я пытался обернуть это вокруг каждого пользовательского элемента управления, но не увидел никаких изменений? Может ли на это повлиять табличка с данными? - person rlcrews; 28.07.2011
comment
@Randyc: Где твои Раскадровки? - person AnthonyWJones; 28.07.2011
comment
Спасибо, что указали мне правильное направление. Я опубликовал продолжение, чтобы дать немного больше информации о макете, в основном у меня есть представление, которое содержит элемент управления пользователем (searchresultcollection.xaml). Searchresultcollection содержит шаблон данных, который загружает правильный элемент управления пользователем в представлении списка на основе типа, возвращенного в моей коллекции (21 возможный возврат) Я был бы признателен за любое понимание, если это неправильный подход. - person rlcrews; 28.07.2011

arrow_upward
1
arrow_downward

Работая с этим, я храню свои пользовательские элементы управления в таблице данных 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).

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

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

person rlcrews    schedule 28.07.2011