Спонсор: Microsoft
Опубликован: 13.12.2011 | Доступ: свободный | Студентов: 982 / 29 | Оценка: 4.29 / 4.57 | Длительность: 13:56:00
Самостоятельная работа 1:

Размещение элементов управления

< Лекция 1 || Самостоятельная работа 1: 123 || Лекция 2 >

Шаг 2. Создаем Twitter-приложение

Теперь мы вполне можем приступить к разработке настоящего приложения.

Вот как выглядит наше будущее приложение в эскизе

Рис. 2.11. Вот как выглядит наше будущее приложение в эскизе

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

Мы поступили дальновидно, выбрав шаблон с навигацией. Внесем некоторые изменения в файле MainPage.xaml. Около строки 29 удалим логотип приложения (<ContentControl Style="{StaticResource LogoIcon}"/>), а также изменим текст для ApplicationnameTextBlock на Twitter Search Monitor.

Оставим на минутку наш проект и займемся его структурой. В окне Solution Explorer найдите папку Views, и при помощи контекстного меню создайте новую страницу под именем Search.xaml. Для этого щелкните правой кнопкой на папке Views, далее выберите команды Add | New Item... и в следующем диалоговом окне выберите шаблон Silverlight Page:

Выбор шаблона Silverlight Page

Рис. 2.12. Выбор шаблона Silverlight Page

У нас появится пустая XAML-страница с сеточной разметкой Grid (по умолчанию). На этой странице мы создадим окно поиска, эскиз которого был показан выше.

Шаг 3. Навигация

Изучим основные особенности навигации, используемой в нашем шаблоне. Мы видим, что шаблон состоит из файла MainPage.xaml и дополнительных элементов Home, About. Навигация состоит из трех важных состаляющих: UriMapper, Frame и Page.

UriMapper

В двух словах сложно объяснить, что такое UriMapper. Считайте, что это удобный способ сокращения ссылок. Например, вместо использования строки /Views/Home.xaml, вы можете настроить приложение таким образом, что ссылка будет выглядеть как /Home. Разработчики PHP могут найти тут сходство с настройкой файла .htaccess. UriMapper является частью элемента Frame в MainPage.xaml:

<navigation:Frame x:Name="ContentFrame"
                  Style="{StaticResource ContentFrameStyle}" 
                  Source="/Home" Navigated="ContentFrame_Navigated" 
                  NavigationFailed="ContentFrame_NavigationFailed">
  <navigation:Frame.UriMapper>
    <uriMapper:UriMapper>
        <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
        <uriMapper:UriMapping Uri="/{pageName}" 
                   MappedUri="/Views/{pageName}.xaml"/>
    </uriMapper:UriMapper>
  </navigation:Frame.UriMapper>
</navigation:Frame>
Frame

Frame - это область для навигации. Вы сначала настраиваете эту область по умолчанию, а затем она меняется при навигации. Если посмотреть на код, приведенный выше, то увидите, что значением атрибута Source для элемента Frame является /Home.

Page

И, наконец, последний важный элемент навигации - это элемент Page, который мы создали сами. Данный элемент является контейнером для содержимого, который выводится в Frame. Можете рассматривать его как элемент UserControl, который вы можете добавлять в проект.

Шаг 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):

Вид приложения в Blend

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

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

Шаг 5. Изменяем UriMapper для Search.xaml

Мы практически закончили работать над интерфейсом страницы поиска. Так как она является лицом нашего приложения, то неплохо бы сделать ее главной. Внесем некоторые изменения в файле MainPage.xaml. Найдите в нем Frame и поменяйте в нем строчку таким образом, чтобы по умолчанию открывалась наша поисковая страница, а не Home.xaml:

<navigation:Frame x:Name="ContentFrame" 
                  Style="{StaticResource ContentFrameStyle}" 
                  Source="/Search" Navigated="ContentFrame_Navigated" 
                  NavigationFailed="ContentFrame_NavigationFailed">
    <navigation:Frame.UriMapper>
        <uriMapper:UriMapper>
            <uriMapper:UriMapping Uri="" MappedUri="/Views/Search.xaml"/>
            <uriMapper:UriMapping Uri="/{pageName}" 
                       MappedUri="/Views/{pageName}.xaml"/>
        </uriMapper:UriMapper>
    </navigation:Frame.UriMapper>
</navigation:Frame>

Нам больше не нужен файл Home.xaml, поэтому смело удаляем его из проекта. Далее добавим новый файл History.xaml и изменим в MainPage.xaml область LinksBorder, чтобы включить ссылку на него:

<Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}">
  <StackPanel x:Name="LinksStackPanel" Style="{StaticResource 
                LinksStackPanelStyle}">

    <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}" 
         NavigateUri="/Search" TargetName="ContentFrame" Content="home"/>

    <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>

    <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}" 
         NavigateUri="/History" TargetName="ContentFrame" Content="history"/>

    <Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>

    <HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" 
         NavigateUri="/About" TargetName="ContentFrame" Content="about"/>

  </StackPanel>
</Border>

Сейчас программа выглядит следующим образом:

Вид приложения в браузере

Рис. 2.14. Вид приложения в браузере

Краткие итоги

Мы создали первое приложение на Silverlight. Разобрали способы размещения элементов управления на таких панелях как Canvas, StackPanel и Grid. Познакомились с составляющими навигациии: UriMapper, Frame и Page.

< Лекция 1 || Самостоятельная работа 1: 123 || Лекция 2 >
Игорь Ключников
Игорь Ключников
Россия
Михаил Ковязо
Михаил Ковязо
Россия, Москва, ВЗМИ, 1982