Статьи

Панель приложений в Windows Phone

Этот пост о панели приложений. Это похоже на меню. Он имеет как значки в самом верху, так и кнопку с многоточием, что, когда пользователь нажимает на нее, он открывается и показывает несколько текстовых опций меню под ним. Разработчик может использовать их для выполнения некоторых операций на данной странице XAML или для навигации пользователя по совершенно другой области в приложении. Выбор за разработчиком.

Панель приложений остается в основном скрытой. Это остается в стороне от основного использования приложения. Но когда пользователю нужны эти дополнительные параметры, их можно легко найти с помощью этой кнопки с многоточием.

Давайте прямо в это. Я создал новый проект. И первое, что я собираюсь сделать, это определить папку, в которой будут храниться мои значки:

1

Я собираюсь назвать эту папку «Изображения». Следующая вещь идет в Windows Explorer и перейдите к поиску некоторых изображений, которые уже находятся на моем жестком диске. Когда я установил Visual Studio 2010 Express для Windows Phone, также был установлен SDK для Windows Phone 7. Этот SDK имеет несколько значков, которые я могу использовать. Они тематические для телефона. Если вы работаете в 64-битной ОС, вы найдете их в папке «Program Files (x86)», если вы работаете в 32-битной ОС, как я, вы найдете их в папке «Program Files». В этой папке я нахожу подпапку «Microsoft SDK» и ее подпапку «Windows Phone», и снова ее подпапку «v7.0». Там я могу найти подпапку «Значки», и там я собираюсь выбрать подпапку «темный». В моем приложении есть ряд файлов png, которые были созданы в виде значков, которые имеют правильный размер для панели приложения.Я собираюсь выбрать «минус» и «новый» значок:

1a

Я собираюсь перетащить их в созданную папку изображений в обозревателе решений:

1б

Теперь я выбираю их обоих и изменяю действие Build с Resource на Content:

1c

Важно изменить это, потому что иначе мое приложение не найдет эти изображения.

Хорошо, теперь, когда у меня есть несколько изображений в моем приложении, мне просто нужно сослаться на них в моей панели приложений.

Я собираюсь на свой код XAML. Там я вижу, что по умолчанию панель приложения уже создана, она только что закомментирована:

<!–<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>–>

 

Итак, я удаляю эти комментарии, и это позволяет мне видеть панель приложения на моей поверхности дизайнера:

2

Когда я запускаю это, я вижу две иконки в моей панели приложений, но они оба содержат «x». Это происходит, когда по какой-либо причине приложения не могут найти ссылку на эти значки. Когда я нажимаю кнопку с многоточием, отображаются параметры меню:

2а

Все, что мне нужно было сделать, это раскомментировать предопределенную панель приложения. И теперь мне просто нужно изменить ссылки на некоторые изображения.

Давайте продолжим и добавим туда мои изображения. Я просто собираюсь редактировать XAML напрямую:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton
            IconUri="/Images/appbar.minus.rest.png" Text="Remove"/>
        <shell:ApplicationBarIconButton
            IconUri="/Images/appbar.new.rest.png" Text="Add"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Contacts"/>
            <shell:ApplicationBarMenuItem Text="Calendar"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

 

Когда я запускаю его сейчас, он отображает изображения, а когда я нажимаю кнопку с многоточием, он также отображает пункты меню:

3     3a

Конечно, я хочу, чтобы что-то действительно происходило при нажатии на один из значков:

  1.  
      <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton
                IconUri="/Images/appbar.minus.rest.png" Text="Remove"
                Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton
                IconUri="/Images/appbar.new.rest.png" Text="Add"
                Click="ApplicationBarIconButton_Click_1"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Contacts"
                  Click="ApplicationBarMenuItem_Click"/>
                <shell:ApplicationBarMenuItem Text="Calendar"
                  Click="ApplicationBarMenuItem_Click_1"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

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

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

 

To be continued…

Source: http://andreahaubner.blog.com/2011/03/29/the-application-bar/