Спонсор: Microsoft
Опубликован: 01.03.2010 | Доступ: свободный | Студентов: 942 / 39 | Оценка: 4.38 / 4.31 | Длительность: 09:26:00
Лекция 7:

Дизайн и разработка приложений Silverlight в Visual Studio 2008

Элемент управления TextBlock

Элемент управления TextBlock используется в приложениях Silverlight для отображения текста. В самом простом случае, для отображения текст достаточно применить TextBlock с заданным свойством Text. Например:

<TextBlock Text="1234" />

Размер текста можно менять, задавая свойство FontSize (в пикселах). Используемый шрифт определяется свойством FontFamily ; например, XAML-код для вывода текста шрифтом Arial Black размером 20 выглядел бы так:

<TextBlock Text="1234" FontFamily="Arial Black" FontSize="20"/>

Свойство FontStyle определяет, как будет выведен текст, курсивом или обычным шрифтом. Чтобы текст отображался курсивом, свойству FontStyle задается значение Italic:

<TextBlock 
Text="1234" 
FontFamily="Arial Black" 
FontSize="20" 
FontStyle="Italic"/>

Чтобы использовать обычный шрифт, можно задать свойству FontStyle значение Normal или просто оставить его незаданным.

Разрывы строк и использование разных шрифтов для отображения текста реализуется с помощью подэлементов TextBlock: <LineBreak> и <Run>. Как следует из его имени, <LineBreak> создает разрывы в тексте с переносом остального текста на новую строку. Однако TextBlock не является элементом управления для представления содержимого, как некоторые из элементов управления, которые были представлены в данной главе ранее. Поэтому если необходимо представить текст иначе, чем все остальное содержимое свойства Text, используется элемент управления Run:

<TextBlock Width="400" Text="My first text"> 
  <LineBreak/> 
  <Run>My Second Text</Run> 
  <LineBreak/> 
  <Run>My Third Text</Run> 
  <LineBreak/> 
  <Run>My Fourth Text</Run>
</TextBlock>

Элемент управления Run поддерживает те же свойства шрифта, размера, цвета и т.д., что и TextBlock. Таким образом, он предоставляет тот же уровень управления его содержимым, что и TextBlock. Это означает, что текст TextBlock и текст, отображаемый с помощью Run, полностью согласованы.

Silverlight руководствуется правилами замещения системных шрифтов, поэтому если шрифт представлен в системе, текст будет отображен этим шрифтом; если шрифт недоступен в системе, будет использоваться резервный шрифт, определенный операционной системой.

Элемент управления TextBox

Элемент управления TextBox обеспечивает пользователям область для ввода текста. В самой простой форме TextBox предоставляет область, в которую пользователь может ввести одну строку текста. Чтобы элемент управления TextBox могли принимать многостроковый ввод, надо задать высоту или поместить их в контейнер, обеспечивающий ему нестандартную высоту. Затем свойству AcceptsReturn (Допускаются символы возврата каретки) потребуется задать значение True, благодаря чему элементы управления TextBox сможет принимать символы возврата каретки. Свойство Text такого TextBox возвращает объект типа String, в котором каждая строка будет отделена символом "\r".

Элементы управления TextBox позволяют выбирать подстроки Text и также обеспечивают возможность настроить то, как выглядит выбранный текст. Для задания или возвращения выбранного в настоящий момент текста используется свойство SelectedText (Выбранный текст). Начало выбранной подстроки можно получить с помощью свойства SelectionStart (Начало выбранной подстроки), ее длину - с помощью свойства SelectionEnd (Конец выбранной подстроки). При любом изменении выбора подстроки формируется событие SelectionChanged (Выбранный элемент изменен). Рассмотрим следующий пример:

Во-первых, XAML-код:

<TextBox 
    Height="100" 
    AcceptsReturn="True" 
    Text="ABCDEFGHIJKLMNOPQRSTUVWXYZ" 
    SelectionChanged="TextBox_SelectionChanged"/>

Здесь определяется событие SelectionChanged, для которого определен обработчик события TextBox_SelectionChanged. Рассмотрим:

private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
{
  TextBox t = sender as TextBox; 
  int st = t.SelectionStart; 
  int ln = t.SelectionLength; 
  string strT = t.SelectedText;
}

В данном случае, переменная st типа int содержит индекс начального символа выбранной подстроки (отсчитываемой от нуля), ln - длина выбранной подстроки, и strT - строка, содержащая выбранную подстроку. Итак, например, если выбрана подстрока, как показано на рис. 7.11, st будет равна 9, ln равна 8, и strT будет равна JKLMNOPQ.

Пример оформления элемента управления TextBox

Рис. 7.11. Пример оформления элемента управления TextBox

Также в TextBox можно использовать разные шрифты, точно так же как это делается в TextBlock.

Элемент управления PasswordBox

Очень похож на TextBox элемент управления PasswordBox (Поле пароля). PasswordBox во многих отношениях практически идентичен TextBox. С помощью свойства PasswordChar (Символ пароля) этого элемента управления можно задать символ, который будет использоваться вместо любого введенного символа для отображения нажатия клавиши. Например, PasswordBox, в котором вводимые символы заменяются символом #, описывается следующим XAML-кодом:

<PasswordBox PasswordChar="#" x:Name="pw"/>

Кроме того, следует отметить, что вводимое пользователем содержимое сохраняется в свойстве Password (Пароль), а не в свойстве Text, поэтому для получения ввода пользователя должно использоваться свойство Password.

Элемент управления DataGrid

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

При добавлении элемента управления TheDataGrid в окно редактирования XAML, получаем такой XAML-код:

<UserControl 
  xmlns:data=
    "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  
  x:Class="BusinessApplication1.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
    <data:DataGrid 
        Name="TheDataGrid" 
        SelectionChanged="DataGrid_SelectionChanged" 
        SelectionMode="Extended">            
    </data:DataGrid>
  </Grid>
</UserControl>

private ProductContext _productContext = new ProductContext();
public MainPage()
{
  InitializeComponent();
  LoadOperation<Product> loadOp = 
    this._productContext.Load(this._productContext.GetProductQuery());
  this.TheDataGrid.ItemsSource = loadOp.Entities;
}

Метод _productContext.GetProductQuery() выбирает из базы данных AdventureWorks все содержимое таблицы Product.

В DataGrid возможны два режима выбора: одиночный, при котором можно выбирать по одной строке, и множественный, при котором при удержании клавиш Ctrl и/или Shift может быть выбрано несколько строк.

Эти режимы задаются с помощью свойства SelectionMode (Режим выбора), которое принимает значения DataGridSelectionMode.Single для одиночного выбора и DataGridSelectionMode.Extended для множественного.

Итак, для единичного выбора выбранные данные могут быть получены this.TheDataGrid.SelectedItem. Когда установлен режим множественного выбора, можно использовать свойство SelectedItems, возвращающее коллекцию списков:

System.Collections.IList listOfItems = this.TheDataGrid.SelectedItems;

В данном случае, свойство SelectedItems возвращает System.Collections.IList. После этого можно перебрать элементы этого списка.

Пример оформления элемента управления DataGrid

Рис. 7.12. Пример оформления элемента управления DataGrid

Элементы управления Calendar и DatePicker

Возможность использования дат в приложениях Silverlight обеспечивается элементами управления Calendar (Календарь) и DatePicker (Элемент выбора дат). Элемент управления Calendar выводит на экран дни заданного месяца или месяцы заданного года и предоставляет кнопки со стрелками для перемещения по месяцам или годам. DatePicker сочетает это представление с текстовым полем, в которое пользователь может вводить дату в соответствующем формате, или выпадающим списком, в котором можно выбрать определенную дату (см. рис. 7.13).

Пример оформления элементов управления Calendar и  DatePicker

Рис. 7.13. Пример оформления элементов управления Calendar и DatePicker

Код XAML:

<controls:Calendar Name="d1"/>
<controls:DatePicker Name="d2"/>

Коллекция BlackoutDates (Недоступные даты) позволяет задавать диапазон дат, которые не могут быть выбраны. Эта коллекция содержит тип CalendarBlackoutDatesCollection (Коллекция диапазона дат календаря), в который могут добавляться диапазоны дат. Все даты, попадающие в этот диапазон, будут отображаться неактивными и, таким образом, не могут быть выбраны.

CalendarBlackoutDatesCollection _blackoutDates = d2.BlackoutDates;

Элемент управления DatePicker сочетает функциональность календаря с текстовым полем. Свойство Text этого поля содержит все, что пользователь вводит в качестве даты. Если невозможно выполнить синтаксический разбор введенных пользователем данных, формируется ошибка TextParseError (Ошибка синтаксического разбора текста). Визуальное представление элемента управления DatePicker включает текстовое поле с датой, и справа от него располагается значок, выбор которого обеспечивает отображение элемента управления Calendar для выбора даты. Когда пользователь щелкает этот значок, формируется событие CalendarOpened (Календарь открыт). Когда пользователь закрывает его, формируется событие CalendarClosed (Календарь закрыт). Элементы управления Calendar и DatePicker обеспечивают базовые средства для создания приложений, в которых ввод основывается на датах и которые могут отображать информацию календаря.

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

Обработка фокуса

Элементы, которые могут принимать ввод, формируют события GotFocus и LostFocus. События GotFocus и LostFocus формируются каждый раз, когда пользователь переходит на или покидает элемент управления, либо наводя курсором мыши, либо используя клавишу Tab. Оба этих события являются событиями, передающимися вверх по иерархии (bubbling events). Это означает, что элемент управления принимает событие, но не обрабатывает его. Событие передается его родителю и так далее вверх по иерархии до тех пор, пока не будет перехвачено обработчиком события.

Атанас Маринов
Атанас Маринов
Болгария
Pavel Pelevin
Pavel Pelevin
Украина, Одесса