Создание просто Silverlight - приложения для Windows Phone 7

Разбить на страницы

Показывать лекцию целиком

1.Запустим Visual Studio 2010 (или Microsoft Visual Studio 2010 Express for Windows Phone). После чего создадим проект Silverlight for Windows Phone на основе шаблона Windows Phone Application и назовем его, к примеру, FirstPhoneApplication:

(рис 30.1)

Откроется окно Visual Studio 2010 с шаблоном проекта для приложения Windows Phone:

(рис 30.2)

2.Создадим простой калькулятор. Первым делом изменим заголовок нашего приложения. Для этого выберем "MY APPLICATION" , и назовем его "Мое приложение" (Свойство Text ):

(рис 30.3)

Аналогично заменим "PAGE NAME" на "Простой калькулятор":

(рис 30.4)

Проект должен выглядеть теперь следующим образом:

(рис 30.5)

3.По умолчанию, для размещения элементов управления используется контейнер "Grid":

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

Мы будем использовать для размещения элементов управления контейнер "Canvas", т.к в нем более удобно определять расположения элементов управления, при смене ориентации (горизонтальный, вертикальный) экрана телефона:

<Canvas x:Name=" ContentPanel"  Grid.Row=" 1" >
    ...             
   </Canvas>

4.Добавим на форму проекта 6 элементов управления, 1 – TextBox, 5 – Button, и расположим их следующим образом:

(рис 30.6)

XAML код размещенных на форму элементов управления:

<Canvas x:Name=" ContentPanel"  Grid.Row=" 1" >
  <TextBox Canvas.Left=" 12" Canvas.Top=" 6" Height=" 71" Name=" textBox1"
      Text=" TextBox"  Width=" 460"  /> 
  <Button Canvas.Left=" 21" Canvas.Top=" 83" Content=" Button" Height=" 71"
      Name=" button1"  Width=" 84"  />
  <Button Canvas.Left=" 269" Canvas.Top=" 83" Content=" Button" Height=" 71"
      Name=" button2"  Width=" 84"  />
  <Button Canvas.Left=" 384" Canvas.Top=" 83" Content=" Button" Height=" 71"
      Name=" button3"  Width=" 84"  />
  <Button Canvas.Left=" 139" Canvas.Top=" 83" Content=" Button" Height=" 71"
      Name=" button4"  Width=" 84"  />
  <Button Canvas.Left=" 12" Canvas.Top=" 179" Content=" Button" Height=" 71"
      Name=" button5"  Width=" 460"  />    </Canvas>

Изменим элементы управления следующим образом:

(рис 30.7)

XAML код после изменения:

<Canvas x:Name=" ContentPanel"  Grid.Row=" 1" >
  <TextBox Canvas.Left=" 12"  Canvas.Top=" 6"  Height=" 71"
     Name="ResultTextBox"  Text=" "  Width=" 460"  />
  <Button Canvas.Left=" 21"  Canvas.Top=" 83"  Content=" +"
     Height=" 71"  Name=" PlusButton"  Width=" 84"  />
  <Button Canvas.Left=" 269"  Canvas.Top=" 83"  Content=" *"
     Height=" 71"  Name=" MultiplicationButton"  Width=" 84"  />
  <Button Canvas.Left=" 384"  Canvas.Top=" 83"  Content=" /"
     Height=" 71"  Name=" DivideButton"  Width=" 84"  />
  <Button Canvas.Left=" 139"  Canvas.Top=" 83"  Content=" -"
     Height=" 71"  Name=" MinusButton"  Width=" 84"/>
  <Button Canvas.Left=" 12"  Canvas.Top=" 179"  Content=" ="
     Height=" 71"  Name=" button5"  Width=" 460"  />
</Canvas>

5.Добавим событие "Click" на каждую из кнопок, через вкладку "Events" окно "Properties":

(рис 30.8)

В конечном итоге файл MainPage.xam.l.cs:

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 FirstPhoneApplication
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void PlusButton_Click(object sender, RoutedEventArgs e)
        {

        }

        private void MinusButton_Click(object sender, RoutedEventArgs e)
        {
        }
        private void MultiplicationButton_Click(object sender, RoutedEventArgs e)
        {
        }

        private void DivideButton_Click(object sender, RoutedEventArgs e)
        {
        }

        private void EquallyButton_Click(object sender, RoutedEventArgs e)
        {
        }
    
     
    }
}

6.Добавим в файл MainPage.xaml.cs код:

private double a;
        private double b;
        private double c;
        private string opertaiontype;
        private void PlusButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                a = Convert.ToDouble(ResultTextBox.Text);
                opertaiontype = " Plus" ;
                ResultTextBox.Text = " " ;
            }
            catch { MessageBox.Show(" Введен не числовой элемент." );}
        }

        private void MinusButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                a = Convert.ToDouble(ResultTextBox.Text);
                opertaiontype = " Minus" ;
                ResultTextBox.Text = " " ;
            }
            catch { MessageBox.Show(" Введен не числовой элемент." );}
        }

        private void MultiplicationButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                a = Convert.ToDouble(ResultTextBox.Text);
                opertaiontype = " Multiplication" ;
                ResultTextBox.Text = " " ;
            }
            catch { MessageBox.Show(" Введен не числовой элемент." );}
        }

        private void DivideButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                a = Convert.ToDouble(ResultTextBox.Text);
                opertaiontype = " Dividide" ;
                ResultTextBox.Text = " " ;
            }
            catch { MessageBox.Show(" Введен не числовой элемент." );}
        }

        private void EquallyButton_Click(object sender, RoutedEventArgs e)
        {
            b = Convert.ToDouble(ResultTextBox.Text);
            switch (opertaiontype)
            {
                case " Plus" :
                c = a + b;
                break;
                case " Minus" :
                c = a - b;
                break;
                case " Multiplication" :
                c = a * b;
                break;
                case " Dividide" :
                c = a / b;
                break;
            }
            ResultTextBox.Text = c.ToString();
        }

7.Запустим приложение. Откроется окно эмулятора с созданным приложением:

(рис 30.9)

Простой калькулятор, выполняющий базовые математические операции готов:

(рис 30.10)

8.Добавим в приложение поддержку горизонтальной ориентации приложения. Для этого изменим свойство PhoneApplicationPage - SupportedOrientations c "Portrait" на "PortraitOrLandscape":

(рис 30.11)

9.Добавим событие OrientationChanged:

(рис 30.12)

10.В созданное событие добавим код:

if ((e.Orientation == PageOrientation.LandscapeRight)
          ||(e.Orientation == PageOrientation.LandscapeLeft))
       {
              TitlePanel.Visibility = Visibility.Collapsed;
       }
       else if ((e.Orientation == PageOrientation.PortraitDown)
          ||(e.Orientation == PageOrientation.PortraitUp))
       {
              TitlePanel.Visibility = Visibility.Visible;
       }

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

11.С помощью боковой панели изменим ориентацию приложения:

(рис 30.13)

В итоге должно получиться следующее:

(рис 30.14)

Страницы: