Добавление элементов управления на страницу xaml

Обратите внимание, что Visual Studio по умолчанию отображает и дизайн, и XAML код страницы.

Если вы переходили к просмотру других файлов решения, двойным щелчком перейдите на файл MainPage.xaml.

В XAML код файла MainPage.xaml внутрь элеметна Grid с именем ContentPanel вставьте элемент управления Button:

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Button Content="Нажми меня" Name="MyButton" FontSize="18" Width="175" Height="75" />

</Grid>

В окне дизайна кнопка отобразится сразу приблизительно в центре интерфейса. Обратили внимание на атрибут Name? Это уникальный идентификатор элемента, который помогает ссылаться на него в коде. Считайте это ID атрибутом элемента управления. Давайте теперь добавим какие-нибудь действия при нажатии на эту кнопку. Есть два способа привязать событие к кнопке Button (или любому другому элементу управления). В XAML, прямо в определении Button, можно добавить атрибут Click Рис. 1.12 и система InteliSense автоматически спросит, хотим ли мы сгенерировать новый обработчик событий:

Рис. 1.12.  Добавление атрибута Click

Можно связать обработчик событий напрямую в коде страницы Home.xaml.cs не указывая его в XAML файле:

public MainPage()

{

InitializeComponent();

MyButton.Click +=new RoutedEventHandler(MyButton_Click);

}

Оба способа работают. Можете использовать любой из них. Для упрощения здесь будет использоваться определение метода в XAML. Теперь в функции MyButton_Click можно написать управляемый код, который будет изменять интерфейс или вызывать другие функции. Завершим наш пример приложения, добавив код, который будет изменять текст вTextBlock PageTitle (PageTitle – это Name, так что можно ссылаться на неё напрямую в коде) на "привет wp7". Чтобы сделать это допишем следующий код в функцию:

private void MyButton_Click(object sender, RoutedEventArgs e)

{

PageTitle.Text = "привет wp7";

}

Выберем в настройках проекта Windows Device Emulator:

Рис. 1.13.  Выбор Windows Device Emulator

И запустим приложение, нажав на зеленый треугольник или копку F5. После запуска приложения и нажатия на кнопку "Нажми меня", вид экрана должен быть аналогичным снимку экрана на:

Рис. 1.14.  Вид экрана эмулятора

Добавление новых страниц в проект

Только самое простое приложение состоит из одной страницы. Мы хотим научиться писать сложные многостраничные приложения. Мы можем использовать шаблоны Pivot, Panorama, можем использовать шаблон проектирования MVVM (Model-View-ViewModel), а сначала научимся добавлять новые страницы в проект и переходить между ними.

В окне Solution Explorer щелкнем правой кнопкой мыши по названия проекта, и в отобразившемся меню выберем, Add, далее New Item, в открывшемся диалоговом окне выберем Windows Phone Portrait Page и назовем её SecondPage.xaml:

Рис. 1.15.  Создание новой страницы в проекте

Теперь у нас есть пустая XAML страница, точная копия страницы MainPage.xaml до того, как мы её отредактировали.

Чтобы лучше различать страницы, перейдем к XAML коду страницы SecondPage и у элемента TextBlock с Name PageTitle отредактируем свойство Text, как показано ниже:

<TextBlock Name="PageTitle" Text="second page"

Margin="9,-7,0,0"

Style="{StaticResource PhoneTextTitle1Style}"/>