Опубликован: 22.12.2012 | Доступ: свободный | Студентов: 423 / 14 | Длительность: 07:20:00
Лекция 9:

Проектирование информационной системы для Windows Store. Обработка данных

< Лекция 8 || Лекция 9: 123 || Лекция 10 >

Привязка к коллекции

При привязке простых свойств обычно не возникает проблем. Но привязка коллекций требует дополнительных усилий. Расширим класс Employee, перегрузив метод ToString:

public override string ToString()
{
return String.Format("{0} {1}", fi rstName, lastName);
}

Этот метод нам понадобится при заполнении одного из элементов управления коллекцией элементов типа Employee.

Коллекции способны принимать только те элементы, которые являются наследниками ItemsControl. Среди таких элементов можно выделить и ListBox, который способен отображать список элементов.

Прежде чем писать код, необходимо определить со свойствами, которые используются при привязке коллекции к элементу. Тут существуют три свойства:

  • ItemsSource -задает коллекцию элементов. Если не задан DisplayMemberPath, то каждый элемент попытается вызвать метод ToString. Вот почему мы и предопределили ToString;
  • ItemTemplate - используется для задания шаблона отображения конкретного элемента;
  • DisplayMemberPath - задает конкретное свойство для отображения в элементе управления.

Теперь перейдем к коду. Сначала расширим интерфейс, отобразив ListBox:

<Page x:Class="Chapter5_Binding.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:Chapter5_Binding">
<StackPanel>
<ListBox Height="300" Name="lstEmp"></ListBox>
<Grid x:Name="LayoutRoot" Background="White" Width="400"
DataContext="{Binding SelectedItem, ElementName=lstEmp}">
<Grid.RowDefi nitions>
<RowDefi nition Height="Auto"></RowDefi nition>
<RowDefi nition Height="Auto"></RowDefi nition>
<RowDefi nition Height="Auto"></RowDefi nition>
<RowDefi nition Height="Auto"></RowDefi nition>
</Grid.RowDefi nitions>
<Grid.ColumnDefi nitions>
<ColumnDefi nition></ColumnDefi nition>
<ColumnDefi nition></ColumnDefi nition>
</Grid.ColumnDefi nitions>
<TextBlock Text="First Name:" Grid.Row="0" Grid.Column="0">
</TextBlock>
<TextBox Text="{Binding Path=FirstName}" Grid.Row="0"
Grid.Column="1">
</TextBox>
<TextBlock Text="Last Name:" Grid.Row="1" Grid.Column="0">
</TextBlock>
<TextBox Text="{Binding Path=LastName}" Grid.Row="1"
Grid.Column="1">
</TextBox>
<TextBlock Text="EMail:" Grid.Row="2" Grid.Column="0">
</TextBlock>
<TextBox Text="{Binding Path=EMail}" Grid.Row="2"
Grid.Column="1">
</TextBox>
<TextBlock Text="Age:" Grid.Row="3" Grid.Column="0">
</TextBlock>
<TextBox Text="{Binding Path=Age}" Grid.Row="3"
Grid.Column="1">
</TextBox>
</Grid>
</StackPanel>
</Page> 

Контекст для формы с детальными данными выбираем из элемента ListBox, используя привязку. Теперь реализуем код, создающий список элементов. В качестве структуры данных можно выбрать любой класс - главное, чтобы он реализовывал интерфейс IEnumerable.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
List<Employee> employeeList = new List<Employee>();
Employee emp = new Employee();
emp.FirstName = "Sergiy";
emp.LastName = "Baydachnyy";
emp.EMail = "sbaidachni@gmail.com";
emp.Age = 31;
employeeList.Add(emp);
emp = new Employee();
emp.FirstName = "Sergii";
emp.LastName = "Lutai";
emp.EMail = "sergii.lutai@dct.ua";
emp.Age = 27;
employeeList.Add(emp);
lstEmp.ItemsSource = employeeList;
}

Рис. 8.1.

Следует отметить, что вместо класса List лучше использовать коллекцию ObservableCollection. Дело в том, что если Вы решите добавлять или удалять элементы из списка, то столкнетесь с необходимостью реализации интерфейса INotifyCollectionChanged. А ObservableCollection уже реализует этот интерфейс.

Вот еще пример.


Рис. 8.2.
<ListBoxItem Background="LightCoral" Foreground="Red" 
             FontFamily="Verdana" FontSize="12" FontWeight="Bold">                
        <CheckBox Name="CoffieCheckBox">
            <StackPanel Orientation="Horizontal">
            <Image Source="coffie.jpg" Height="30"></Image>
            <TextBlock Text="Coffie"></TextBlock>
        </StackPanel>
    </CheckBox>
</ListBoxItem>
<ListBoxItem Background="LightGray" Foreground="Black" 
             FontFamily="Georgia" FontSize="14" FontWeight="Bold">
    <CheckBox Name="TeaCheckBox">
        <StackPanel Orientation="Horizontal">
            <Image Source="tea.jpg" Height="30"></Image>
            <TextBlock Text="Tea"></TextBlock>
        </StackPanel>
    </CheckBox>
</ListBoxItem>
<ListBoxItem Background="LightBlue" Foreground="Purple" 
             FontFamily="Verdana" FontSize="12" FontWeight="Bold">
    <CheckBox Name="OrangeJuiceCheckBox">
        <StackPanel Orientation="Horizontal">
            <Image Source="OrangeJuice.jpg" Height="40"></Image>
            <TextBlock Text="OrangeJuice"></TextBlock>
        </StackPanel>
    </CheckBox>
</ListBoxItem>
<ListBoxItem Background="LightGreen" Foreground="Green" 
             FontFamily="Georgia" FontSize="14" FontWeight="Bold">
    <CheckBox Name="MilkCheckBox">
        <StackPanel Orientation="Horizontal">
            <Image Source="Milk.jpg" Height="30"></Image>
            <TextBlock Text="Milk"></TextBlock>
        </StackPanel>
    </CheckBox>
</ListBoxItem>
<ListBoxItem Background="LightBlue" Foreground="Blue" 
             FontFamily="Verdana" FontSize="12" FontWeight="Bold">
    <CheckBox Name="IcedTeaCheckBox">
        <StackPanel Orientation="Horizontal">
            <Image Source="IcedTea.jpg" Height="30"></Image>
            <TextBlock Text="Iced Tea"></TextBlock>
        </StackPanel>
    </CheckBox>
</ListBoxItem>
<ListBoxItem Background="LightSlateGray" Foreground="Orange"
             FontFamily="Georgia" FontSize="14" FontWeight="Bold">
    <CheckBox Name="MangoShakeCheckBox">
        <StackPanel Orientation="Horizontal">
            <Image Source="MangoShake.jpg" Height="30"></Image>
            <TextBlock Text="Mango Shake"></TextBlock>
        </StackPanel>
    </CheckBox>
</ListBoxItem> 
< Лекция 8 || Лекция 9: 123 || Лекция 10 >
Максим Иванов
Максим Иванов
а, ВЭГУ
Василий Вячин
Василий Вячин
Россия, Москва, НПО Информ-Система, Специалист-разработчик