Silverlight 3: Отображение данных SQL Server - Программирование интерфейса

ОГЛАВЛЕНИЕ

Программирование интерфейса

Теперь все на месте! Осталось запрограммировать интерфейс клиентского приложения Silverlight и добавить код на Visual Basic, извлекающий данные, и отобразить их в интерфейсе.
В проводнике решения найдите файл MainPage.xaml и дважды щелкните по нему для открытия файла в редакторе XAML.

Открыв файл MainPage.xaml в редакторе XAML, вы заметите, что он является пользовательским управляющим элементом. Это очевидно из начального и конечного тегов <UserControl>. Как сказано ранее, AdventureWorksTestPage.aspx является веб-страницей запуска, загружаемой при запуске приложения, но в нее встроен пользовательский управляющий элемент MainPage.xaml. Интерфейс, программируемый в пользовательском управляющем элементе MainPage.xaml, является реальным интерфейсом, появляющимся на веб-странице при запуске программы.

Конфигурирование главной сетки

Сначала надо найти тег <Grid и добавить атрибут Margin, присвоив ему значение 10. Это создаст рамку в 10 вокруг всех четырех сторон пользовательского управляющего элемента. Установите ShowGridLines=”True”, чтобы линии сетки были видны при программировании интерфейса. Это будет удалено позже, но пока позволит видеть сетку по мере работы.

<Grid x:Name="LayoutRoot" 
      Margin="10" ShowGridLines="True" >
</Grid>

Затем надо разбить интерфейс на два раздела: раздел шапки вверху и раздел данных, заполняющий остальную страницу. Чтобы сделать это, сконфигурируйте Grid так, чтобы она имела один столбец и две строки:

<Grid x:Name="LayoutRoot" 
      Margin="10" ShowGridLines="True" >

      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
   
      <Grid.RowDefinitions>
          <RowDefinition Height="50" />
          <RowDefinition Height="*" />
      </Grid.RowDefinitions>

Звездочка (“*”) указывает оставшееся свободное пространство. Это заставит ширину столбца автоматически подстраиваться под ширину Grid. Теперь запустите приложение (F5). Так как приложение запущено впервые, предложат включить отладку, когда откроется следующее окно:

 

Оставьте выбранный по умолчанию пункт и нажмите кнопку OK.

Как только приложение запустится и загрузится веб-страница, можно будет увидеть, как веб-страница разделена на два отдельных раздела: шапка вверху и раздел данных, заполняющий остальную страницу. Страница выглядит так:

 

Закройте Internet Explorer и вернитесь в редактор MainPage.xaml. Удалите ShowGridLines=”True” из тега Grid.

Сконфигурировать сетку шапки

В раздел шапки главной сетки (строка 0) будет добавлена другая сетка, устанавливающая заголовок страницы и кнопку, извлекающую и загружающую данные.

Прежде чем добавить сетку, добавьте приятную темно-красную рамку толщиной “1”. Эта рамка будет охватывать сетку.

<Border BorderBrush="Maroon" BorderThickness="1" >
</Border>

Добавьте сетку внутри тегов Border и задайте бледно-желтый цвет фона. Добавьте расширенные атрибуты к сетке, приказывающие ей разместиться в разделе шапки (первый столбец (столбец 0); верхняя строка (строка 0)) главной сетки.

<Border BorderBrush="Maroon" BorderThickness="1" >
    <Grid Background="LightYellow" Grid.Column="0" Grid.Row="0" >
    </Grid>
</Border>

Определите два столбца для сетки: Первый столбец будет иметь ширину “*” и будет хранить заголовок. Второй столбец будет иметь ширину “100” и будет хранить кнопку, загружающую данные.

<Border BorderBrush="Maroon" BorderThickness="1" >
    <Grid Background="LightYellow" Grid.Column="0" Grid.Row="0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
    </Grid>
</Border>

Добавьте TextBlock для отображения заголовка страницы. Установите Text в “Контакты AdventureWorks”. С помощью расширенных атрибутов сетки разместите TextBlock в столбце 0, строке 0.

Далее добавьте Button, служащую для отображения данных. Установите ее Name в btnLoad, Content в “Загрузить”, и с помощью расширенных атрибутов сетки разместите Button в столбце 1, строке 0. Установите атрибут Click в “btnLoad_Click”.

<Border BorderBrush="Maroon" BorderThickness="1" >
    <Grid Background="LightYellow" Grid.Column="0" Grid.Row="0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <TextBlock Padding="10,0,0,0"
           VerticalAlignment="Center" 
           Text="AdventureWorks Contacts"
           FontSize="28"
           Foreground="Maroon"  
           Grid.Row="0" Grid.Column="0" />

        <Button x:Name="btnLoad" Content="Load"
                VerticalAlignment="Center"
                Margin="10"
                Grid.Row="0" Grid.Column="1"
                Click="btnLoad_Click"/>
    </Grid>
</Border>

Вот и конец шапки! Прежде чем идти дальше, найдите атрибут Click кнопки Button и щелкните правой кнопкой мыши по “btnLoad_Click”, затем выберите “Перейти к обработчику события”, чтобы создать соответствующую подпрограмму. После создания подпрограммы вернитесь в редактор XAML.

Сконфигурировать сетку данных

Надо добавить DataGrid Silverlight к интерфейсу. Чтобы сделать это, отобразите панель инструментов, найдите управляющий элемент DataGrid, перетащите его в редактор XAML и опустите его сразу под тегом </Border>.

Установите Name в “dataGrid1”; AutoGenerateColumns в “False”, потому что столбцы будут добавляться вручную; Visibility в “Collapsed”, потому что сетка должна быть скрыта при загрузке страницы; и потом с помощью расширенных атрибутов главной сетки разместите DataGrid в столбце 0, строке 1 (являющейся нижней частью главной сетки).

<data:DataGrid x:Name="dataGrid1"  
                AutoGenerateColumns="False"
                Visibility="Collapsed"
                Grid.Row="1" Grid.Column="0" >
</data:DataGrid>

Теперь надо добавить к DataGrid три текстовых столбца: один для имени, один для фамилии, и один для электронной почты.

Каждый столбец привязывается к источнику данных путем установки атрибута Binding. Значением атрибута Binding является строковое выражение, заключенное в фигурные скобки {}, использующее ключевое слово Binding и имя свойства в источнике данных, к которому привязывается.

<data:DataGrid x:Name="dataGrid1"  
                AutoGenerateColumns="False"
                Visibility="Collapsed"
                Grid.Row="1" Grid.Column="0" >

    <data:DataGrid.Columns>

        <data:DataGridTextColumn
            Binding="{Binding FirstName}"
            Header="First Name" />

        <data:DataGridTextColumn
            Binding="{Binding LastName}"
            Header="Last Name" />

        <data:DataGridTextColumn
            Binding="{Binding Email}"
            Header="Email Address" />

    </data:DataGrid.Columns>

</data:DataGrid>

Сохраните проект (Меню Файл | Сохранить все). Потом запустите приложение (F5). Конечный результат должен выглядеть так:

Закройте Internet Explorer и вернитесь в редактор XAML, когда закончите.

Добавление кода Visual Basic

Осталось добавить код Visual Basic, чтобы связать все вместе и заставить работать. Щелкните правой кнопкой мыши по редактору XAML и выберите “Просмотреть код”, чтобы перейти в окно кода.

Вверху окна кода с помощью ключевого слова WithEvents добавьте объявление службы WCF:

'Создать новый экземпляр службы WCF
Private WithEvents mService As New ServiceReference1.Service1Client()

Перейдите к выпадающему списку Имя класса вверху окна кода и выберите “mService”; далее перейдите к выпадающему списку Имя метода вверху окна кода и выберите “GetContactsCompleted”.

Выбор “GetContactsCompleted” из выпадающего списка имя метода создаст обработчик события mService_GetContactsCompleted. Внутри этого обработчика события добавьте всего две строки кода: одну для загрузки DataGrid с данными, и одну, делающую сетку видимой:

Private Sub mService_GetContactsCompleted( _
    ByVal sender As Object, _
    ByVal e As ServiceReference1 _
            .GetContactsCompletedEventArgs) _
    Handles mService.GetContactsCompleted

    dataGrid1.ItemsSource = e.Result

    dataGrid1.Visibility = Windows.Visibility.Visible

End Sub

Обработчик события GetContactsCompleted выполняется после того, как служба WCF извлекла данные из SQL Server и готова передать данные клиенту Silverlight.

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

Private Sub btnLoad_Click( _
        ByVal sender As System.Object, _
        ByVal e As System.Windows.RoutedEventArgs)
    mService.GetContactsAsync()
End Sub

Полное окно кода должно выглядеть так:

Partial Public Class MainPage
    Inherits UserControl

    'Создать новый экземпляр службы WCF
    Private WithEvents mService As New ServiceReference1.Service1Client()

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub btnLoad_Click( _
        ByVal sender As System.Object, _
        ByVal e As System.Windows.RoutedEventArgs)

        mService.GetContactsAsync()

    End Sub

    Private Sub mService_GetContactsCompleted( _
        ByVal sender As Object, _
        ByVal e As ServiceReference1 _
                .GetContactsCompletedEventArgs) _
        Handles mService.GetContactsCompleted

        dataGrid1.ItemsSource = e.Result

        dataGrid1.Visibility = Windows.Visibility.Visible

    End Sub

End Class

Вот и все!

Сохраните проект (Меню Файл | Сохранить все). Потом запустите приложение (F5). Когда приложение откроется, нажмите кнопку “Загрузить”, чтобы извлечь данные из базы данных AdventureWorks SQL Server, и загрузить их в сетку данных Silverlight. Если все сработало правильно, отобразится следующее:

 

Заключение

Статья показала, как создать службу WCF, использующую LINQ для SQL для извлечения данных из таблицы Person.Contact базы данных AdventureWorks, как обновить конфигурацию конечной точки службы файла web.config, чтобы дать возможность службе WCF вернуть результаты клиентскому приложению Silverlight, а также как сослаться на службу WCF из клиентского приложения Silverlight, и как запрограммировать интерфейс клиента Silverlight для отображения извлеченных данных в сетке данных Silverlight.