Итак, в нашей жизни порой возникают ситуации, когда хочется что-нибудь взять и растянуть :). Допустим, ListBoxItem по ширине родительского ListBox'а в Silverlight-приложении для WindowsPhone.
Дано: типичный ListBox в XAML:
Синей рамочкой обведен ListBox, красной - ListItem'ы. Не очень красиво, правда? Гораздо приятнее будет, когда ширина каждого ListItem будет равна ширине родительского ListBox.
Какие "изкоробочные средства" можно использовать?
Логика подсказывает, что на ListBox можно привесить свойство HorizontalContentAlignment, установленное в "Stretch" - оно должно растянуть содержимое элемента по ширине до размеров этого элемента. Что делать, когда это не помогает? Ответ: задавать HorizontalContentAlignment не ListBox'у, а ListBoxItem через свойство ItemContainerStyle родительского ListBox. Сурово? :) Смотрите пример ниже - все будет понятно.
Это можно сделать как внутри описания ListBox, так и статическим ресурсом-стилем. Мне не было нужды выносить этот стиль куда-то еще, поэтому я сделал так:
Все ровненько и масштабируемо - растянется само, даже когда у нас поменяется ширина экрана.
Дано: типичный ListBox в XAML:
Как мы видим, ListItems представляют собой сложные элементы, размещенные в StackPanel. Как это все выглядит в сыром виде?
- <ListBox ItemsSource="{Binding SomeItems}" HorizontalAlignment="Stretch">
- <ListBox.ItemTemplate>
- <DataTemplate>
- <StackPanel>
- ...
- </StackPanel>
- </DataTemplate>
- </ListBox.ItemTemplate>
- </ListBox>
* This source code was highlighted with Source Code Highlighter.
Синей рамочкой обведен ListBox, красной - ListItem'ы. Не очень красиво, правда? Гораздо приятнее будет, когда ширина каждого ListItem будет равна ширине родительского ListBox.
Какие "изкоробочные средства" можно использовать?
Логика подсказывает, что на ListBox можно привесить свойство HorizontalContentAlignment, установленное в "Stretch" - оно должно растянуть содержимое элемента по ширине до размеров этого элемента. Что делать, когда это не помогает? Ответ: задавать HorizontalContentAlignment не ListBox'у, а ListBoxItem через свойство ItemContainerStyle родительского ListBox. Сурово? :) Смотрите пример ниже - все будет понятно.
Это можно сделать как внутри описания ListBox, так и статическим ресурсом-стилем. Мне не было нужды выносить этот стиль куда-то еще, поэтому я сделал так:
И вот что в итоге получилось:
- <ListBox
- ItemsSource="{Binding SomeItems}"
- HorizontalAlignment="Stretch">
- <ListBox.ItemContainerStyle>
- <Style TargetType="ListBoxItem">
- <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
- </Style>
- </ListBox.ItemContainerStyle>
- <ListBox.ItemTemplate>
- <DataTemplate>
- <StackPanel>
- ...
- </StackPanel>
- </DataTemplate>
- </ListBox.ItemTemplate>
- </ListBox>
* This source code was highlighted with Source Code Highlighter.
Все ровненько и масштабируемо - растянется само, даже когда у нас поменяется ширина экрана.
Комментариев нет:
Отправить комментарий