суббота, 7 июля 2012 г.

Растягиваем ListBoxItem во всю ширину ListBox

Итак, в нашей жизни порой возникают ситуации, когда хочется что-нибудь взять и растянуть :). Допустим, ListBoxItem по ширине родительского ListBox'а в Silverlight-приложении для WindowsPhone.
Дано: типичный ListBox в XAML:

  1. <ListBox ItemsSource="{Binding SomeItems}" HorizontalAlignment="Stretch">
  2.     <ListBox.ItemTemplate>
  3.         <DataTemplate>
  4.             <StackPanel>
  5.                 ...
  6.             </StackPanel>
  7.         </DataTemplate>
  8.     </ListBox.ItemTemplate>
  9. </ListBox>
* This source code was highlighted with Source Code Highlighter.
Как мы видим, ListItems представляют собой сложные элементы, размещенные в StackPanel. Как это все выглядит в сыром виде?



Синей рамочкой обведен ListBox, красной - ListItem'ы. Не очень красиво, правда? Гораздо приятнее будет, когда ширина каждого ListItem будет равна ширине родительского ListBox.
Какие "изкоробочные средства" можно использовать?
Логика подсказывает, что на ListBox можно привесить свойство HorizontalContentAlignment, установленное в "Stretch" - оно должно растянуть содержимое элемента по ширине до размеров этого элемента. Что делать, когда это не помогает? Ответ: задавать HorizontalContentAlignment не ListBox'у, а ListBoxItem через свойство ItemContainerStyle родительского ListBox. Сурово? :) Смотрите пример ниже - все будет понятно.
Это можно сделать как внутри описания ListBox, так и статическим ресурсом-стилем. Мне не было нужды выносить этот стиль куда-то еще, поэтому я сделал так:

  1.     <ListBox
  2.         ItemsSource="{Binding SomeItems}"
  3.         HorizontalAlignment="Stretch">
  4.  
  5.         <ListBox.ItemContainerStyle>
  6.             <Style TargetType="ListBoxItem">
  7.                 <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
  8.             </Style>
  9.         </ListBox.ItemContainerStyle>
  10.  
  11.         <ListBox.ItemTemplate>
  12.             <DataTemplate>
  13.                 <StackPanel>
  14.                     ...
  15.                 </StackPanel>
  16.             </DataTemplate>
  17.         </ListBox.ItemTemplate>
  18.     </ListBox>
* This source code was highlighted with Source Code Highlighter.
И вот что в итоге получилось:

Все ровненько и масштабируемо - растянется само, даже когда у нас поменяется ширина экрана. 

Комментариев нет:

Отправить комментарий