Управление списками в Silverlight

Все элементы управления списками являются производными от класса ItemsControl, который в свою очередь является наследником класса Control. Все они содержат коллекцию элементов. Элементы могут быть напрямую добавлены в коллецию, возможна также привязка некоторого массива данных к коллеции.

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

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

Все элементы управления списками поддерживают выделение входящих элементов. Выделенный элемент(ы) можно получить с помощью свойств SelectedItem(SelectedItems), а получить индекс выделенного элемента - с помощью свойства SelectedIndex. Свойство SelectedValue позволяет получить значение выделенного элемента.

ListBox

Представляет собой обычный список. Содержит коллецию элементов ListBoxItem. Также ListBox может содержать любые другие элемент, например,

  <ListBox Name="list">
            <TextBlock FontWeight="Bold" TextDecorations="Underline">Отборочная группа</TextBlock>
            <ListBoxItem Background="LightGray">Россия</ListBoxItem>
            <ListBoxItem>Ирландия</ListBoxItem>
            <ListBoxItem Background="LightGray">Словакия</ListBoxItem>
            <ListBoxItem>Армения</ListBoxItem>
            <ListBoxItem Background="LightGray">Македония</ListBoxItem>
            <ListBoxItem>Андорра</ListBoxItem>
  </ListBox>

Но все эти элементы будут находиться в коллеции list.Items и таким образом по счетчику можно к ним обращаться, например, list.Items[0] - первый элемент ListBox.

ListBox поддерживает множественный выбор. Для этого нужно установить свойство SelectionMode="Multiple" или SelectionMode="Extended". В последнем случае, чтобы выделить несколько элементов, необходимо держать нажатой клавишу Ctrl или Shift. По умолчанию SelectionMode="Single", то есть допускается только единственное выделение.

Также надо отметить, что элементы ListBoxItem представляют элементы управления содержимым, поэтмоу могут включать не только текст, но и сложное содержимое - другие элементы и объекты.

ComboBox

Cодержит коллекцию элементов ComboBoxItems и образует выпадающий список. Если задать свойство IsEditable="True", то в поле выбора ComboBox можно ввести текст для поиска. Элемент ComboBoxItem должен содержать текст. Например,

	<ComboBox Height="25" Width="90" IsEditable="True">
            <ComboBoxItem>Первый</ComboBoxItem>
            <ComboBoxItem>Второй</ComboBoxItem>
            <ComboBoxItem>Третий</ComboBoxItem>
    </ComboBox>

Посокльку элемент ComboBoxItem, как и ListBoxItem, является элементом управления содержимым, мы можем вложить в него более сложный контент, но в этом случае свойство IsEditable должно быть равно False:

		<ComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Ellipse Width="10" Height="10" Fill="Black" HorizontalAlignment="Left" />
                    <TextBlock HorizontalAlignment="Right">Первый</TextBlock>
                </StackPanel>
     </ComboBoxItem>

TabControl и TabItem

Для создания вкладок в Silverlight предназначен элемент TabControl, а отдельная вкладка представлена элементом TabItem. Чтобы использовать вкладки, надо добавить в декларации пространство имен System.Windows.Controls: xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" или подключить sdk: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk".

Затем надо определить в элементе TabControl несколько элементов TabItem :

<controls:TabControl>
            <controls:TabItem>
                <controls:TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                    <Ellipse Height="10" Width="10" Fill="Black" />
                        <TextBlock Margin="3">Вкладка 1</TextBlock>
                    </StackPanel>
                </controls:TabItem.Header>
                <controls:TabItem.Content>
                    <StackPanel>
                    <RadioButton IsChecked="True">Россия</RadioButton>
                    <RadioButton>Словакия</RadioButton>
                    <RadioButton>Ирландия</RadioButton>
                    </StackPanel>
                </controls:TabItem.Content>
            </controls:TabItem>
            <controls:TabItem>
                <controls:TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Height="10" Width="10" Fill="Black" />
                        <TextBlock Margin="3">Вкладка 2</TextBlock>
                    </StackPanel>
                </controls:TabItem.Header>
            </controls:TabItem>
        </controls:TabControl>

TreeView

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

TreeView также находится в пространстве имен System.Windows.Controls, поэтому перед использованием дерева надо подключить это пространство (в данном случае оно отображается на префикс controls) или пространство имен sdk:

      <controls:TreeView>
            <controls:TreeViewItem Header="Социальные сети">
                <controls:TreeViewItem Header="Одноклассники" />
                <StackPanel Orientation="Horizontal">
                    <Image Source="twitter.png"></Image>
                    <TextBlock>Twitter</TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Image Source="facebook.png"></Image>
                    <TextBlock>Facebook</TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Image Source="vkontakte.png"></Image>
                    <TextBlock>VKontakte</TextBlock>
                </StackPanel>
                <controls:TreeViewItem Header="Google+" />
            </controls:TreeViewItem>
            <controls:TreeViewItem Header="Языки программирования">
                    <controls:TreeViewItem Header="C-языки">
                    <controls:TreeViewItem Header="C#" />
                    <controls:TreeViewItem Header="C/C++" />
                    <controls:TreeViewItem Header="Java" />
            </controls:TreeViewItem>
            <controls:TreeViewItem Header="Basic">
                    <controls:TreeViewItem Header="Visual Basic" />
                    <controls:TreeViewItem Header="VB.Net" />
                    <controls:TreeViewItem Header="PureBasic" />
                </controls:TreeViewItem>
            </controls:TreeViewItem>
        </controls:TreeView>

DataGrid

DataGrid представляет собой таблицу с возможностью редактирования содержимого. Для использования этого элемента надо добавить в xaml пространство имен sdk: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" или System.Windows.Controls.Data, где собственно DataGrid и находится.

Итак, допустим, нам надо вывести на таблицу с некоторыми данными. В качестве модели определим класс Team, который содержит поля для занимаемого места в турнире, количества очков и названия страны:

public class Team
    {
        public string country { get; set; }
        public byte place { get; set; }
        public byte score { get; set; }

        public Team(string _country, byte _place, byte _score)
        {
            this.country = _country;
            this.place = _place;
            this.score = _score;
        }
    }

Теперь добавим в приложение DataGrid. Чтобы DataGrid автоматически разбивал таблицу на столбцы, установим свойство AutoGenerateColumns="True":

<UserControl x:Class="TestApplication.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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="250">
    <Grid x:Name="LayoutRoot">
        <sdk:DataGrid x:Name="datagrid1" AutoGenerateColumns="True">
            
        </sdk:DataGrid>
    </Grid>
</UserControl>

Теперь свяжем его с некоторым источником данных в конструкторе окна:

List<Team> teams;
        public MainPage()
        {
            InitializeComponent();

            teams = new List<Team>();
            teams.Add(new Team("Russia", 1, 23));
            teams.Add(new Team("Ireland", 2, 18));
            teams.Add(new Team("Armenia", 3, 17));
            teams.Add(new Team("Slovakia", 4, 15));
            datagrid1.ItemsSource = teams;
        }

Здесь мы определили глобальную переменную teams и добавили в нее четыре записи. Запустим приложение и увидим, что таблица добавила наши записи:

Некоторые полезные свойства DataGrid

Свойство	Описание
RowBackground и AlternatingRowBackground	Устанавливают фон строки. Если установлены оба свойства, цветовой фон чередуется: RowBackground - для четных строк и AlternatingRowBackground - для нечетных
ColumnHeaderHeight	Устанавливает высоту строки названий столбцов.
ColumnWidth	Устанавливает ширину столбцов.
RowHeight	Устанавливает высоту строк.
GridLinesVisability	Устанавливает видимость линий, разделяющих столбцы и строки. Имеет четыре значения: All - видны все линии, Horizontal - видны только горизонтальные линии, Vertical - видны только вертикальные линии, None - линии отсутствуют
HeadersVisability	Задает видимость заголовков
HorizontalGridLinesBrush и VerticalGridLinesBrush	Задает цвет горизонтальных и вертикальных линий соответственно

Предыдущий пример. хотя и работает, но имеет ряд недостатков. Во-первых, столбцы идут в том порядке, в каком объявлены переменные в классе Team. Во-вторых, названия столбцов соответствуют именам переменных. Попробуем это изменить. Мы также можем настроить не только внешний вид, но тип столбцов. Например, мы можем задать тип столбца, отличный от текстового. DataGrid поддерживает следующие варианты столбцов:

DataGridTextColumn	Отображает элемент TextBlock или TextBox при редактировании
DataGridCheckBoxColumn	Отображает элемент CheckBox
DataGridTemplateColumn	Позволяет задать специфичный шаблон для отображения столбца

Перепишем предыдущий пример с учетом новой информации (код в файле отделенного кода останется тем же):

  <UserControl x:Class="TestApplication.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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="250">
    <Grid x:Name="LayoutRoot">
        <sdk:DataGrid x:Name="datagrid1" AutoGenerateColumns="False">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="Место" Binding="{Binding Path=place}" Width="50"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Header="Страна" Binding="{Binding Path=country}" Width="80"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Header="Очки" Binding="{Binding Path=score}" Width="50"></sdk:DataGridTextColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>

Среди свойств DataGrid одним из самых интересных является RowDetailsTemplate. Оно позволяет задать шаблон отображения дополнительной информации касательно данной строки. Добавим в разметку элемента DataGrid следующий код:

    <sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=score}" />
                        <TextBlock Text=" очков набрала команда в шести матчах" />
                    </StackPanel>
                </DataTemplate>
    </sdk:DataGrid.RowDetailsTemplate>