Как я могу создать ListBox, который показывает только выбранный элемент, когда не в фокусе

Question

Я хочу воспроизвести ListBox, используемый в календаре Windows Phone 7. Если в списке нет фокуса, отображается только выбранный элемент. Когда список становится сфокусированным, он плавно увеличивается (по вертикали), показывая все элементы.

Мой ограниченный талант Silverlight и Blend подводит меня. Я думал, что смогу достичь всего этого через ItemContainerStyle, но группа FocusStates предназначена для каждого элемента, а не для списка, верно?

Какой подход мне выбрать?

Answer 1

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

Вариант 1

Если вы хотите внести изменения на основе состояний, которых еще нет в элементе управления, лучше создать пользовательский элемент управления. В этом случае вы могли бы поймать состояния фокуса с помощью 2 поведений ControlStoryboardAction, которые используют 2 раскадровки для перемещения элемента управления в / из фокуса. Вероятно, я бы использовал второй (не список) элемент управления для несфокусированного состояния и привязал бы его к выбранному элементу ListBox.

Вариант 2

Вы можете создать подкласс существующего элемента управления (в данном случае ListBox), но это больше работы, так как вам нужно предоставить шаблоны по умолчанию. Вы можете добавить Фокус / Нефокусированные состояния.

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

Надеюсь, это поможет.

Answer 2

Нет, нет, нет людей !! Никакого изменения размера, никаких пользовательских элементов управления или, что еще хуже, подклассов! Просто создайте стиль для ListBoxItem, который устанавливает его свойство Visibility в «Collapsed», а его свойство «IsEnabled» - в «false», когда IsSelected объекта ListBoxItem имеет значение false, а сам ListBox не имеет фокуса. (Лучший способ сделать это с помощью MultiTrigger.) Наконец, установите в списке значение auto-size для его содержимого. Готово и сделано! И это тоже чистый XAML!

Мы используем эту технику для быстрой «фильтрации» списков и даже TreeViews достаточно эффективно, за исключением того, что мы связываем видимость со свойством IsFiltered в нашей ViewModel.

Лучшая часть, так как вы не привязываетесь к коллекции ObservableCollection, из которой вы постоянно добавляете и удаляете вещи, все свойства, которые доступны только для просмотра (например, IsExpanded), точно такие же, как вы оставили их при показе элементов Опять же, все без необходимости отслеживать их в ViewModel! Это чисто пользовательский интерфейс. Все «Просмотр».

Я уже говорил, что это чистый XAML ??? Ох ... я сделал. Просто убедитесь, что вы знаете, что это чистый XAML !!!

И снова ... сделайте уверенным , чтобы установить для 'IsEnabled' значение false, когда вы скрываете ListBoxItem (используйте триггер или привязку, чтобы сделать это для вас), иначе навигация с помощью клавиатуры не будет работать!

Answer 3

Я использовал Реализация Алекса Яхнина , которая просто изменяет размеры ListBox до высоты одного элемента, при этом выбранный элемент отображается, остальные элементы просто выше и ниже, но не в области просмотра.