Статьи

Понимание синтаксиса XAML

Во вчерашнем сообщении в блоге я впервые познакомился с XAML. Я бы хотел продолжить в том же духе.

XAML — это язык программирования, созданный таким образом, что он сосредоточен на определении дизайна или макета для приложения Silverlight. Характеризуется серией открывающих и закрывающих тегов.

XAML-файлы имеют иерархическую структуру.

В зависимости от их порядка один или несколько элементов могут влиять на макет и поведение интерфейса. Каждый элемент имеет только одного родителя, но может иметь неограниченное количество дочерних элементов. Только для нескольких элементов количество дочерних элементов ограничено, например, у полосы прокрутки нет дочерних элементов. Обычно в приложениях XAML корневым объектом является Panel, которая отвечает за позиционирование и рендеринг. Панель может содержать другие панели.

Все, что создано или реализовано в XAML, может быть выражено с использованием более традиционного языка .NET, такого как C # или VisualBasic.NET. Тем не менее, ключевым аспектом этой технологии является уменьшенная сложность, необходимая инструментам для обработки XAML, поскольку она основана на XML. И благодаря этому разработчики и дизайнеры могут свободно обмениваться и редактировать контент между собой, не требуя компиляции.

Основная идея заключается в том, что вы хотите использовать XAML для создания интерфейса ваших приложений Silverlight для Windows Phone 7.

XAML не является эксклюзивным для Silverlight, даже для определения пользовательского интерфейса. Может использоваться и в других продуктах.

Если вы дизайнер и хотите создать пользовательский интерфейс для приложения Silverlight, вы можете использовать другой инструмент вместо Visual Studio, чтобы помочь вам определить пользовательский интерфейс, например Expression Blend для Windows Phone 7. Он содержит дополнительные Инструменты создания XAML, которые больше ориентированы на пользовательский интерфейс и взаимодействие с пользователем, чем Visual Studio 2010 Express. Это создает хорошее разделение между работой, которую делает дизайнер, и работой, которую сделает разработчик.

Итак, давайте посмотрим на XAML. Я создал новый проект и перетащил кнопку в мою основную форму. Я посмотрю, как выглядит пустой документ XAML, прежде чем добавлять какие-либо элементы управления, кроме одной этой кнопки:

 

    <phone:PhoneApplicationPage
        x:Class="XamlBasics.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        shell:SystemTray.IsVisible="True">

Это начальный тег, и когда я прокручиваю вниз до конца, я вижу конечный тег:

    </phone:PhoneApplicationPage>

Все остальное будет содержаться в этой PhoneApplicationPage. Я вижу «телефон:» в самом начале. Это означает, что мой PhoneApplicationPage принадлежит пространству имен, на которое наложен псевдоним этого «телефона». Если я просматриваю код, то вижу, что в строке 5 будет определено, что на самом деле представляет собой это сокращение пространства имен. Пространство имен xml «телефон» действительно из пространства имен clr Microsoft.Phone.Controls и содержится в файле, сборке, называемой Microsoft.Phone.dll.

Таким образом, в XAML всякий раз, когда после слова стоит двоеточие, это определяет пространства имен. Очень похоже на то, как пространства имен определяются в операторе using в C #.

Далее в моем XAML я определил свой макет:

<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
 
    <!–TitlePanel contains the name of the application and page title–>
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
 
    <!–ContentPanel – place additional content here–>
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Button Content="Button"
                Height="72"
                HorizontalAlignment="Left"
                Margin="6,6,0,0"
                Name="button1"
                VerticalAlignment="Top"
                Width="160" />
    </Grid>
</Grid>

Использование сеток и панелей — основной метод позиционирования элементов управления и текста в приложении Windows Phone 7 Silverlight.

Этот блок содержит определение макета, StackPanel (который является еще одним элементом управления макетом) и элементы управления, в моем случае только кнопку.

Эта корневая сетка содержит StackPanel, но также и ContentPanel.

Этот конкретный StackPanel содержит имя приложения и имя страницы в текстовых блоках. Я мог бы изменить имена непосредственно в этом блоке кода XAML вместо изменения содержимого в окне свойств.

В основном ContentPanel — это то место, где живет тело приложения.

Ниже есть большой закомментированный раздел:

    <!–Sample code showing usage of ApplicationBar–>
    <!–<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>–>

Это дает хороший маленький шаблон для добавления ApplicationBar. Конечно, я могу использовать свои собственные значки, писать свой собственный код.

Пока осталось упомянуть только одну вещь. И файл MainPage.xaml, и файл MainPage.xaml.cs являются двумя частями целого. Другими словами, работа, которую я делаю в файле XAML, и работа, которую я делаю в файле C #, компилируются. Они встроены компилятором в один класс, который определяет как внешний вид, так и поведение MainPage в моем приложении.

Еще один взгляд на мой файл C #:

    public partial class MainPage : PhoneApplicationPage

«Частичный» означает, что часть этого класса определена в C #, а часть — в XAML.

 

Продолжение следует…

Источник: 
http://andreahaubner.blog.com/2011/02/19/understanding-the-xaml-syntax/