Главная » Разработка для Windows Phone 7 » Замена панели Windows Phone 7

0

Как было показано ранее в этой главе при рассмотрении деревьев визуальных элементов, для отображения всех элементов ItemsControl использует ItemsPresenter. Одним из основных элементов отображения списков является панель. По умолчанию используется StackPanel (или VirtualizingStackPanel для ListBox) с вертикальной ориентацией. Вертикальная стек- панель является таким естественным выбором для реализации этой задачи, что менять ее на что-то другое просто не приходит в голову.

Но заменить ее можно. Для этого в качестве значения свойства ItemsPanel класса ItemsControl задается другой шаблон. Обычно он предельно прост.

Проект HorizontalltemsControl (Горизонтальный элемент управления списками) во многом повторяет предыдущий проект. В нем также есть ссылки и объявления пространств имен для Petzold.Silverlight.Phone и ElPasoHighSchool и абсолютно идентичная коллекция Resources. Отличие в применение StackPanel с горизонтальной ориентацией в ItemsControl. DataTemplate для учащихся в данном приложении также довольно сильно отличается, в нем за базовую взята альбомная ориентация телефона.

Поскольку ItemsControl теперь отображает элементы горизонтально, а не вертикально, поведение ScrollViewer по умолчанию необходимо полностью изменить. ScrollViewer должен обеспечивать прокрутку в горизонтальном направлении:

Проект Silverlight: HorizontalItemsControl Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<ScrollViewer VerticalAlignment="Center"

HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"> <ItemsControl ItemsSource="{Binding

Source={StaticResource sortedStudents}}"> <ItemsControl.ItemTemplate> <DataTemplate>

<Border BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="1"

CornerRadius="12" Margin="2"> <Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions>

<ContentControl Grid.Row="0"

HorizontalAlignment="Center" Foreground="{Binding Sex,

Converter={StaticResource sexToBrushConverter}}">

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding LastName}" /> <TextBlock Text=", " />

<TextBlock Text="{Binding FirstName}" /> <TextBlock Text=", " />

<TextBlock Text="{Binding MiddleName}" /> </StackPanel> </ContentControl>

<Image Grid.Row="1"

Source="{Binding PhotoFilename}" Height="2 4 0" Width="18 0" Margin="6" />

<StackPanel Grid.Row="2"

Orientation="Horizontal" HorizontalAlignment="Center"> <TextBlock Text="GPA=" />

<TextBlock Text="{Binding GradePointAverage}" /> </StackPanel> </Grid> </Border> </DataTemplate> </ItemsControl.ItemTemplate>

<ItemsControl.ItemsPanel> <ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel>

</ItemsControl> </ScrollViewer> </Grid>

В конце разметки ItemsControl можно увидеть свойство ItemsPanel. В качестве его значения задан объект типа ItemsPanelTemplate, включающий производный от Panel, который мы хотим использовать.

Не все типы панелей подходят для элементов управления списками. Как правило, используется панель, дочерние элементы которой организовываться на основании порядка их расположения в коллекции Children, а не на основании присоединенных свойств.

Часто разработчики создают пользовательские панели для ListBox или ItemsControl. Иногда эти панели приобретают даже форму каруселей. В конце этой главы я приведу пример пользовательской панели для отображения учащихся.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии