Опубликован: 01.03.2010 | Доступ: свободный | Студентов: 957 / 46 | Оценка: 4.38 / 4.31 | Длительность: 09:26:00
Дополнительный материал 1:

Практикум

< Лекция 7 || Дополнительный материал 1: 12345678910111213

Элемент ListBox

Добавляем новый пользовательский элемент управления ListBoxControl.xaml (Add/New Item). Размещаем его в каталоге \Controls.

Создание пользовательского элемента управления ListBox

увеличить изображение
Рис. P.12. Создание пользовательского элемента управления ListBox

Добавим стандартный элемент ListBox:

<ListBox 
    x:Name="_listbox"
    Margin="0,0,-2,0" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Bottom">
    Width="229" 
    Height="230"
    <StackPanel Orientation="Horizontal">
        <Image Height="100" Width="100" Source="1.jpg"/>
        <TextBlock 
            Text="Ferrari F430" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Center"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Image Height="100" Width="100" Source="2.jpg"/>
        <TextBlock 
            Text="Fisker Karma" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Center"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Image Height="100" Width="100" Source="3.jpg"/>
        <TextBlock 
            Text="Lamborghini Murcielago LP 640" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Center"/>
    </StackPanel>
</ListBox>

И добавим 3 пункта, с помощью шаблона. Шаблон содержит элемент <StackPanel/>, который содержит рисунок <Image/> и текст <TextBlock/>.

Добавляем страницу ListBoxPage.xaml для размещения этого элемента, страницу поместим в каталог \Views проекта.

Создание страницы для элемента управления ListBox

увеличить изображение
Рис. P.13. Создание страницы для элемента управления ListBox

На странице ListBoxPage.xaml добавляем пространство имен класса SilverlightControls:

xmlns:local="clr-namespace:SilverlightControls"

и в сетку страницы сам элемент управления ListBox:

<local:ListBoxControl 
    VerticalAlignment="Top" 
    HorizontalAlignment="Center"/>

После компиляции проекта мы увидим список автомобилей с их изображениями:

Внешний вид пользовательского элемента управления ListBox

увеличить изображение
Рис. P.14. Внешний вид пользовательского элемента управления ListBox

Заключение

На данном практическом занятии мы научились создавать пользовательские элементы управления на основе стандартных элементов, входящих в состав Silverlight framework. Увидели как любой элемент может содержать внутри себя другие вложенные элементы (шаблоны), а также, применили стиль к элементу управления.

< Лекция 7 || Дополнительный материал 1: 12345678910111213