Статьи

Как создать панель приложения во время выполнения в Windows Phone

Октябрь 30, 2018

В этом уроке мы узнаем, как программно создавать панель приложений во время выполнения при разработке приложений для Windows Phone. Панель приложений представляет собой набор значков, которые можно настроить в нижней части приложения для каждой страницы, а также мы можем настроить его для нескольких страниц. Эти кнопки можно использовать для перехода к часто используемым страницам в приложении, что позволяет пользователям быстро и легко перемещаться. Чтобы получить четкое представление об использовании панели приложения, вы можете обратиться к статье « Работа с панелью приложения в WP7 ». Мы можем создать панель приложения напрямую, используя код XAML или используя код C # позади во время выполнения программно. Давайте посмотрим, как протестировать наше приложение на основе ориентации экрана в Windows Phone.

Для начала откройте Visual Studio 2010 IDE и создайте новый проект Silverlight для Windows Phone с допустимым именем проекта, как показано на экране ниже. После создания проекта добавьте некоторые элементы управления, которые используются для отображения деталей сетевых операций, как показано на экране ниже.

SNAGHTML1554af7c

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

образ

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

Код XAML:

<phone:PhoneApplicationPage
    x:Class="F5debugHowto36.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">

    <!–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="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="App Bar" 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"></Grid>
    </Grid>
 
    <!–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>–>

</phone:PhoneApplicationPage>

После того, как мы удалили код XAML панели приложения по умолчанию, теперь перейдите к коду позади и добавьте приведенный ниже код в конструктор страницы, который в основном создает панель приложения при загрузке страницы, как показано в коде ниже. Обратите внимание, что мы должны добавить с помощью Microsoft.Phone.Shell; обработчик вверху для создания экземпляра панели приложения.

Код позади:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace F5debugHowto36
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            this.ApplicationBar = new ApplicationBar();
            this.ApplicationBar.IsVisible = true;
            this.ApplicationBar.Opacity = 1;
            this.ApplicationBar.IsMenuEnabled = true;
            this.ApplicationBar.Mode = ApplicationBarMode.Minimized;
        }
    }
}

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace F5debugHowto36
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            this.ApplicationBar = new ApplicationBar();
            this.ApplicationBar.IsVisible = true;
            this.ApplicationBar.Opacity = 1;
            this.ApplicationBar.IsMenuEnabled = true;
            this.ApplicationBar.Mode = ApplicationBarMode.Minimized;

            ApplicationBarIconButton apButon = new ApplicationBarIconButton();
            apButon.IconUri = new Uri("/Images/home.png", UriKind.Relative);
            apButon.Text = "Home";
            this.ApplicationBar.Buttons.Add(apButon);

            ApplicationBarIconButton apButon1 = new ApplicationBarIconButton();
            apButon1.IconUri = new Uri("/Images/info.png", UriKind.Relative);
            apButon1.Text = "Info";
            this.ApplicationBar.Buttons.Add(apButon1);

            ApplicationBarMenuItem mItem = new ApplicationBarMenuItem();
            mItem.Text = "About";
            this.ApplicationBar.MenuItems.Add(mItem);
        }
    }
}

образ

Теперь, когда мы закончили с нашим кодом, просто запустите приложение, нажав F5 непосредственно на клавиатуре, или мы можем использовать опцию Build и выполнить проект из панели инструментов для запуска приложения. После успешного завершения сборки мы можем увидеть эмулятор Windows Phone с приложением и ожидаемые результаты, как показано на экранах ниже.

Экран вывода:

образ

Итак, в этом уроке мы узнали, как создать панель приложения во время выполнения, а также увидели создание кнопок и пунктов меню, которые включены в панель приложения. В нашем следующем уроке мы увидим более расширенный вариант повторного использования панели приложения с несколькими страницами вместо копирования одного и того же кода на все страницы внутри проекта приложения. Вот именно из этого урока на Windows Phone скоро увидимся в следующем уроке. Значит пока счастливого программирования !!!

33
Share: