Отображение данных в DataGrid при помощи LINQ и WCF в Silverlight - Создание приложения Silverlight

Создание приложения Silverlight

Следующим шагом будет создание приложения Silverlight , которое будет взаимодействовать с веб-сервисом. Для этого, щелкните правой кнопкой мыши по ссылкам в проекте Silverlight и выберите Add Service Reference (добавить ссылку на сервис)

Рис. 3-13. Добавление ссылки на веб-сервис

Когда появится Add Service Reference нажмите на Discover и выберите Services in Solution. Сервис который вы создали будет найден. До нажатия на OK обратите внимание на Service, оперцию , которую вы создали (GetCustoemrByLastName будет найдена

Рис. 3-14. Выбор тех операций, которые необходимо добавить (Add)

Нажав на OK вы добавляете сервис в ваш проект. Вы сможете осуществить доступ к веб-сервисе (и его метод) через его ссылку.

Рис. 3-15. Сссылка добавлена в ваш проект

Создание XAML

В Page.xaml я создал очень простой пользовательский интерфейс , который состоит из верхней строки для ввода фамилии пользователя и нижней строки для отображения результатов. Для начала, я расположу строки и колонки элемента Grid:

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
   <Grid.RowDefinitions>
     <RowDefinition Height="10" /> <!--0 Margin-->
     <RowDefinition Height="50" /> <!--1 Prompts-->
     <RowDefinition Height="*" /> <!--2 DataGrid-->
     <RowDefinition Height="10" /> <!--3 Margin-->
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="10" /> <!--0 Margin-->
     <ColumnDefinition Width="*" /> <!--1 Controls-->
     <ColumnDefinition Width="10" /> <!--2 Margin-->
   </Grid.ColumnDefinitions>
</Grid> 

Обратите внимание на то, что я установил ShowGridLines в значение True во время работы для того чтобы обеспечить себе факт получения ожидаемых результатов, а также посмотрите на то, что третья строка и вторая колонка используют звездочку для определения размера - это означает, что они должны занимать все оставшееся пространство.

Grid имеет небольшие отступы со всех сторон и две строки - верхнюю и нижнюю:

Рис. 3-16. Табличная сетка в режиме дизайнера (design mode)

Добавляем элементы управления в верхнюю строку

Я хочу расположить Textblock (для запроса), TextBox (для ввода) и кнопку в верхней строке. Наиболее легким путем будет реализация при помощи StackPanel, и я обрамлю все рамкой для разделения всего от результатов.

<Border BorderBrush="Black" BorderThickness="2" Grid.Row="1" Grid.Column="1"/>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
   <TextBlock Text="Last name to search for: " VerticalAlignment="Bottom"
    FontSize="18" Margin="15,0,0,0" />
   <TextBox x:Name="LastName" Width="250" Height="30" Margin="2,0,0,4"
    VerticalAlignment="Bottom"/>
   <Button x:Name="Search" Width="75" Height="30"
   Margin="20,0,0,4" Content="Search"
   VerticalAlignment="Bottom" Background="Blue" FontWeight="Bold"
   FontSize="14" />
</StackPanel> 

Наконец, перетащите DataGrid из Toolbox на XAML.

<my:DataGrid x:Name="theDataGrid" AlternatingRowBackground="Beige" AutoGenerateColumns="True" Width="700" Height="500" Grid.Row="2" Grid.Column="1" CanUserResizeColumns="True" />

Вы заметите то, что он получил префикс my и то, что объявлено новое пространство имен для поддержки:

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Написание обработчика события для кнопки поиска (Search)

Когда пользователь нажимает кнопку поиска нам надо получить текст в TextBox и передать его веб-сервису и получить в результате набор клиентов. Давайте настроим шаблон кода обработчика события в файле page.xaml.cs:

public Page()
{
   InitializeComponent();
   Loaded += new RoutedEventHandler(Page_Loaded);
}
 
void Page_Loaded(object sender, RoutedEventArgs e)
{
   Search.Click += new RoutedEventHandler(Search_Click);
}
 
void Search_Click(object sender, RoutedEventArgs e)
{
   
}