Часть 2-8. Использование Microsoft Silverlight для предоставления динамического контента
Описание работы:
В этой лабораторной работе будет рассмотрено, как приступить к программированию в Visual Studio и Silverlight, создав простое приложение.Рассматриваются следующие понятия:
Создание динамического макета с помощью элементов управления Grid и
StackPanel.
Добавление основных элементов управления и элементов управления Silverlight
SDK.
Добавление обработчика событий.
Добавление логики кода.
Упражнение 1 - Создание проекта Silverlight
Создайте новый проект приложения Silverlight с именем HelloSilverlight на языке Visual C#. Снимите флажок Разместить приложение Silverlight на новом веб-сайте.
Откройте обозреватель решений и обратите внимание, что существуют файлы App.xaml иMainPage.xaml. App.xaml позволяет указать ресурсы и код, который применяется ко всему приложению. MainPage.xaml определяет страницу, аналогичную странице на веб-сайте.
В обозревателе решений разверните узел MainPage.xaml. MainPage.xaml.vb или MainPage.xaml.cs представляет собой файл с выделенным кодом, в который записывается управляемый код. Эта модель аналогична модели, используемой в ASP.NET.
Если MainPage.xaml еще не открыт, дважды щелкните его в обозревателе решений. В центре Visual Studio отображается белая прямоугольная область. Эта область называется представлением конструктора. Можно перетащить элементы управления из панели элементов и определить положение элементов для создания макета.
Упражнение 2. Определение макета сетки
В представлении XAML найдем элемент Grid, изменим цвет.
В открывающем теге Grid добавим свойство ShowGridLines и присвойте ему значение true
Добавим следующий XAML для определения трех строк и двух столбцов в
элементе Grid:
<Grid x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="220"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" /> <ColumnDefinition Width="325"/>
</Grid.ColumnDefinitions>
</Grid>
Рис. 1. Сетка
Из панели элементов перетащим элемент управления TextBlock в расположение
сразу после закрывающего тега </Grid.ColumnDefinitions> в представлении XAML.
После TextBlock имени добавим другой TextBlock с Text="Date:"
После TextBlock даты добавим другой TextBlock с Text="Message:"
В открывающем теге для TextBlock имени добавим следующие свойства:
Grid.Row="0" Grid.Column="0"
В открывающем теге для TextBlock даты добавим следующие свойства.
Grid.Row="1" Grid.Column="0"
В открывающем теге для TextBlock сообщения добавим следующие свойства.
Grid.Row="2" Grid.Column="0"
Добавим следующее присоединенное свойство ColumnSpan в TextBlock сообщения, чтобы текст мог распространяться по обоим столбцам.
Grid.ColumnSpan="2"
В открывающем теге зададим следующие свойства:
<TextBox Text="Your Name" Grid.Row="0" Grid.Column="1"></TextBox>
В открывающем теге элемента TextBox зададим свойства:
Width="150"
HorizontalAlignment="Left"
В открывающем теге для StackPanel добавим следующие свойства:
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical">
</StackPanel>
Из панели элементов перетащим элемент управления Calendar в элемент
StackPanel в представлении XAML.
Зададим свойство:
<sdk:Calendar SelectionMode="SingleDate"
HorizontalAlignment="Left"></sdk:Calendar>
Добавим BUTTON и зададим свойство:
<Button Width="75" Height="25" HorizontalAlignment="Left" Content="OK"></Button>
Рис. 2