Шаг 4. Размещаем элементы для страницы поиска

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

Поместим на страницу Grid с двумя рядами: первый ряд для поисковой строки и кнопки, а второй ряд для вывода результатов. В верхнем ряду расположим элемент StackPanel и добавим на него текстовое поле и кнопку. Чтобы элементы располагались друг за другом, присвоим у StackPanel значение Orientation=Horizontal.

Далее добавим элемент DataGrid, предназначенный для работы с данными, во второй ряд сетки. Код для страницы будет выглядеть следующем образом:

<navigation:Page x:Class="SilverlightHelloWorld.Views.Search"
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
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480"
Title="Twitter Search Page"
xmlns:data="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Left" Margin="0,-32,0,0"
VerticalAlignment="Top" Grid.Row="1" Orientation="Horizontal">
<TextBox x:Name="SearchTerm" FontSize="14.667" Margin="0,0,10,0"
Width="275" TextWrapping="Wrap"/>
<Button x:Name="SearchButton" Width="75" Content="SEARCH"/>
</StackPanel>
<data:DataGrid x:Name="SearchResults" Margin="0,8,0,0" Grid.Row="1" />
</Grid>
</navigation:Page>

Обратите внимание на запись xmlns:data в начале кода. Так можно добавлять свои элементы управления в XAML, после добавления ссылки на сборку. Сейчас приложение выглядит следующим образом (в Blend):

Рис. л. р. 1.10. Вид приложения в Blend.

Для идентификации мы дали имена x:Name для текстового поля (SearchTerm), кнопки (SearchButton) и DataGrid (SearchResults). Можно приступать к написанию кода.

Дата добавления: 2015-08-13