Как: программно создать элемент управления панорамой в Windows Phone

В этом уроке мы узнаем, как программно создать динамический Panorama Control в Windows Phone 7 Application Development. В наших предыдущих сериях мы видели, что такое Panorama Control и как использовать этот элемент управления (см. Статью -), который объясняет использование элемента управления. Здесь мы увидим, как мы можем программно использовать элемент управления, предоставляя необходимые данные динамически, что будет очень полезно при разработке приложений, которые включают частые манипуляции с данными.

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

Перед началом кодирования нам нужно добавить ссылку на опцию Microsoft.Phone.Controls by Add reference и включить пространство имен в код XAML, а также удалить код по умолчанию из кода xaml, как показано на экране ниже.

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

Код:

private List<string> CreatePanoramaItems(string item)
        {
            List<String> Panoramaitems = null;
            switch (item)
            {
                case "Page1":
                    Panoramaitems = new List<string> { "Page1Item1", "Page1Item2", "Page1Item3"};
                    break;
                case "Page2":
                    Panoramaitems = new List<string> { "Page2Item1", "Page2Item2", "Page2Item3" };
                    break;
                case "Page3":
                    Panoramaitems = new List<string> { "Page3Item1", "Page3Item2", "Page3Item3" };
                    break;
            }
            return Panoramaitems;
        }

        private List<string> CreatePanoramaHeaders()
        {
            return new List<string> { "Page1", "Page2", "Page3" };
        }

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

Код:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
       {
           //Initializing the Panorama Control and Assigning base values
           Panorama panoramactrl = new Panorama();
           panoramactrl.Title = "F5Debug How To";
           panoramactrl.SelectionChanged += panoramaCtrl_SelectionChanged;
          
           //Initializing the Panorama Control Items
           PanoramaItem panoramaCtrlItem = new PanoramaItem();
           panoramaCtrlItem.Header = "Dynamic Panorama";

           //Initializing Textblock to display some text
           TextBlock textBlock = new TextBlock();
           textBlock.TextWrapping = TextWrapping.Wrap;
           textBlock.Text = "F5debug.Net – Building and Debugging the Technology";
           textBlock.FontSize = 20;
           panoramaCtrlItem.Content = textBlock;

           panoramactrl.Items.Add(panoramaCtrlItem);

           foreach (string Eachitems in CreatePanoramaHeaders())
           {
               panoramaCtrlItem = new PanoramaItem();
               panoramaCtrlItem.Header = Eachitems;
               panoramactrl.Items.Add(panoramaCtrlItem);
           }

           this.LayoutRoot.Children.Add(panoramactrl);
       }

       private void panoramaCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
       {
           Panorama panoramactrl = (Panorama)sender;
           PanoramaItem panoramaItem = (PanoramaItem)(panoramactrl.SelectedItem);

           if (panoramaItem.Content == null)
           {
               ListBox listBox = new ListBox();
               listBox.ItemsSource = CreatePanoramaItems(panoramaItem.Header.ToString());
               panoramaItem.Content = listBox;
           }
       } 

Полный код:

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;

namespace F5debugHowto43
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        private List<string> CreatePanoramaItems(string item)
        {
            List<String> Panoramaitems = null;
            switch (item)
            {
                case "Page1":
                    Panoramaitems = new List<string> { "Page1Item1", "Page1Item2", "Page1Item3"};
                    break;
                case "Page2":
                    Panoramaitems = new List<string> { "Page2Item1", "Page2Item2", "Page2Item3" };
                    break;
                case "Page3":
                    Panoramaitems = new List<string> { "Page3Item1", "Page3Item2", "Page3Item3" };
                    break;
            }
            return Panoramaitems;
        }

        private List<string> CreatePanoramaHeaders()
        {
            return new List<string> { "Page1", "Page2", "Page3" };
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //Initializing the Panorama Control and Assigning base values
            Panorama panoramactrl = new Panorama();
            panoramactrl.Title = "F5Debug How To";
            panoramactrl.SelectionChanged += panoramaCtrl_SelectionChanged;
           
            //Initializing the Panorama Control Items
            PanoramaItem panoramaCtrlItem = new PanoramaItem();
            panoramaCtrlItem.Header = "Dynamic Panorama";

            //Initializing Textblock to display some text
            TextBlock textBlock = new TextBlock();
            textBlock.TextWrapping = TextWrapping.Wrap;
            textBlock.Text = "F5debug.Net – Building and Debugging the Technology";
            textBlock.FontSize = 20;
            panoramaCtrlItem.Content = textBlock;

            panoramactrl.Items.Add(panoramaCtrlItem);

            foreach (string Eachitems in CreatePanoramaHeaders())
            {
                panoramaCtrlItem = new PanoramaItem();
                panoramaCtrlItem.Header = Eachitems;
                panoramactrl.Items.Add(panoramaCtrlItem);
            }

            this.LayoutRoot.Children.Add(panoramactrl);
        }

        private void panoramaCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Panorama panoramactrl = (Panorama)sender;
            PanoramaItem panoramaItem = (PanoramaItem)(panoramactrl.SelectedItem);

            if (panoramaItem.Content == null)
            {
                ListBox listBox = new ListBox();
                listBox.ItemsSource = CreatePanoramaItems(panoramaItem.Header.ToString());
                panoramaItem.Content = listBox;
            }
        }

    }
}

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

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

Итак, в этом уроке мы увидели, как программно загрузить динамический элемент управления Panorama с настроенными заголовками и элементами, и на сегодня все время заглядываю в мой блог, чтобы получать больше обновлений и информацию о них на Windows Phone. Удачного Программирования !!!