WPF макет жидкости и список - PullRequest
Новая
       19

WPF макет жидкости и список

0 голосов
/ 25 июня 2010

Я изучаю, как повлиять на мое приложение WPF 4.0, где у меня есть список, который может переключаться из представления списка (то есть вертикального стека моих собственных элементов) в представление сетки (мозаичный список слева направо) черезанимация (не прыжок туда и обратно).

Я изучал Fluid Layout в Blend 4 и возился с ним, но не очень-то везло.

У кого-нибудь естьидеи относительно того, как я мог бы создать визуальное состояние, которое меняет компоновку списка в виде сетки (также изменяя шаблон элементов на меньшие версии эскизов) с хорошей анимацией?

Я знаю, это звучит какмного, но это было бы большим эффектом в моем приложении!

Большое спасибо за любую помощь, которую вы можете оказать, Я напишу обратно, если я что-нибудь найду:)

Марк

Ответы [ 2 ]

2 голосов
/ 07 июля 2010

Я загрузил простую версию, которую вы можете скачать здесь: текст ссылки

Здесь показаны два пользовательских состояния с переходом.Вот схема того, что я сделал:

  1. Создайте два элемента управления ListBox и свяжите их с одним и тем же источником данных.Вы можете создавать любые шаблоны данных, которые вам нужны для каждого из них, мой образец - это просто список изображений.

  2. Чтобы сделать это эффектом вида сетки, я заменил ItemsPanel GridList с помощьюПользовательский шаблон.Все, что я сделал, это заменил StackPanel на UniformGrid.

  3. Перейдите на панель «Состояния» и создайте новую пользовательскую группу состояний.Внутри него создайте два пользовательских состояния:

    A.VerticalState - это состояние устанавливает ширину панели Grid равной 0, а ширину списка Vertical - 175.

    B.GridState - это состояние отменяет это и устанавливает ширину панели «Сетка» равной 300, а «Список» - 0.

  4. Чтобы обеспечить эффект анимации, установите время перехода по умолчанию.Я использовал 2 секунды, чтобы вы могли реально увидеть, как это происходит.

  5. Чтобы вызвать состояния, я просто использовал ToggleButton и поведение GoToState.Когда кнопка отмечена, я перехожу к GridState, а когда не отмечен, я перехожу к VerticalState.

  6. Как только у меня работает переход между состояниями, я устанавливаю ширину GridPanel по умолчанию.в 0 (мне пришлось сбросить ширину в GridState после того, как я это сделал)

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

К сожалению, обзор законченного Решения не показывает, как это сделать в Blend.Проверьте Blend-O-Rama , выходящий через пару недель, я постараюсь показать что-то подобное.На данный момент, это, мы надеемся, продвинет вас дальше.

0 голосов
/ 06 июля 2010

Создайте два визуальных состояния, которые вы хотите, и используйте что-то вроде Width = 0, чтобы «скрыть» ListBox или Grid, которые вы не хотите показывать в данном состоянии.Затем просто добавьте переход в ваши состояния, что должно дать ему довольно плавную анимацию.Возможно, вам придется поиграть с другими параметрами размера и местоположения.Перспективы были бы хорошей возможностью в этом случае.

...