Windows Phone 7 使用选择器（Chooser）

Chooser选择器：调用Windows Phone 7的应用程序选择所需要的信息（例如照片，电话等）

Chooser的功能是去选择某一些东西；例如说一张图片、一个联络人资讯等等；而要使用Chooser 要先引入Microsoft.Phone.Task 的命名空间。

下面列出各种Chooser的种类——

CameraCaptureTask：启动照相界面，拍照后返回照片图像。

EmailAddressChooserTask：启动选Email地址界面，选择后返回Email地址。

PhoneNumberChooserTask：启动电话号码选择界面，选择后返回电话号码。

PhotoChooserTask：启动图片选择界面，选择后返回图像信息。

SaveEmailAddressTask：启动保存Email地址界面，选择后返回保存是否成功。

SavePhoneNumberTask：启动保存电话号码界面，选择后返回保存是否成功。

1、CameraCaptureTask

上面这三个画面中，最左侧的画面是呼叫出CameraCaptureTask 之后的拍照画面，右上角的图案就是拍照的按钮了，在您实际使用的时候会有白色的方框以及一个小黑色方框(例如最右侧的画面是取得拍照后的图片效果) 作为模拟的拍照画面，按下拍照按钮之后，便会出现中间的画面，要您确认拍照的结果或是重新拍一张新的照片，确认之后便会回到应用程式中，并且显示出拍摄到的画面，下面简单的来看一下程式码的部分

首先记得要引入相关的命名空间

using Microsoft.Phone.Tasks;

using System.Windows.Media.Imaging;

之后做Chooser 的宣告以及初始化的动作，例如

CameraCaptureTask cct ;

public CamerChooser()

{

InitializeComponent();

//挂载完成事件，建议要在初始化完成之后便挂载事件，与application lift cycle 有关

cct = new CameraCaptureTask();

cct.Completed += new EventHandler<PhotoResult>(cct_Completed);

}而怎么去呼叫 Chooser 出来呢？这部分相当的简单，只要呼叫Show 的方法就可以了，例如下面笔者是在Button 的Click 事件中

去做呼叫

private void btnShot_Click(object sender, RoutedEventArgs e)

{

//呼叫 Chooser

cct.Show();

}

而在Chooser 的使用上，最主要的部份就是处理Completed 的事件，例如下面

void cct_completed(object sender, PhotoResult e)

{

//判断结果是否成功

if (e.TaskResult == TaskResult.OK)

{

BitmapImage bmpSource = new BitmapImage();

bmpSource.SetSource(e.ChosenPhoto);

image1.Source = bmpSource;

}

else

{

image1.Source = null;

}

在处理Completed 的事件当中，必须要先判断TaskResult 属性，在这个属性当中，可以取得拍照动作的结果，例如当使用者按下确定(Accept) 的按钮时，会回应OK，而如果使用者按下返回键呢？这时候回传的就会是Cancel 的状态了；由这个状态，可以去判断接下来应用程式当中要处理的动作。

而怎么取得拍摄的照片呢？主要便是利用ChoosenPhoto 的属性；ChoosenPhoto 是一个Stream，是指向实体照片位置的资料流，还记得Isolated Storage 吗？拍照后图片是不会直接的储存到应用程式所属的隔离储存区中的，因为Chooser 所叫出的是另外的应用程式，不同应用程式之间是不能去交叉存取隔离储存区中的档案的；因此Chooser 会由这种方式来让我们的应用程式取得结果。

详细的代码如下：

View Code

<!--LayoutRoot contains the root grid where all other 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="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="Chooser Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="CamerCapture" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Image Height="489" HorizontalAlignment="Left" Margin="21,19,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="447" />
            <Button Content="Take a photo" Height="82" HorizontalAlignment="Left" Margin="191,535,0,0" Name="btnShot" VerticalAlignment="Top" Width="283" Click="btnShot_Click" />
        </Grid>
    </Grid>

2、EmailAddressChooserTask
EmailAddressChooserTask主要是用来取得联络人的电子邮件资料，先来看看执行时的画面效果

代码如下：

View Code

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.Tasks;

namespace ChooserDemo
{
    public partial class EmailAddressChooser : PhoneApplicationPage
    {
        EmailAddressChooserTask eac;

        public EmailAddressChooser()
        {
            InitializeComponent();

            eac = new EmailAddressChooserTask();
            eac.Completed += new EventHandler<EmailResult>(eac_Completed);
        }

        void eac_Completed(object sender, EmailResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                textBox1.Text = e.Email;
            }
        }

        private void btnEmailaddress_Click(object sender, RoutedEventArgs e)
        {
            eac.Show();
        }
    }
}

3、PhoneNumberChooserTask
接下来是PhoneNumberChooserTask，主要是用来选择联络人的电话号码，先来看一下执行的效果

代码如下：

View Code

 <!--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="Chooser Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Phone Number" 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="Choose Phone number" Height="87" HorizontalAlignment="Left" Margin="12,6,0,0" Name="button1" VerticalAlignment="Top" Width="438" Click="button1_Click" />
            <TextBox Height="75" HorizontalAlignment="Left" Margin="24,130,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="323" />
            <TextBlock Height="39" HorizontalAlignment="Left" Margin="37,108,0,0" Name="textBlock1" Text="Choosen Phone Number:" VerticalAlignment="Top" Width="334" />
        </Grid>
    </Grid>

View Code

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.Tasks;

namespace ChooserDemo
{
    public partial class PhoneNumberChooser : PhoneApplicationPage
    {
        PhoneNumberChooserTask pnc;

        public PhoneNumberChooser()
        {
            InitializeComponent();
            pnc = new PhoneNumberChooserTask();
            pnc.Completed += new EventHandler<PhoneNumberResult>(pnc_Completed);
        }

        void pnc_Completed(object sender, PhoneNumberResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                textBox1.Text = e.PhoneNumber;
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            pnc.Show();
        }
    }
}

4、PhotoChooserTask
PhotoChooserTask是用来选择图片用的，这部分使用上跟CameraCaptureTask是极其相似的，使用时您可以参考CameraCaptuerTask的相关程式码，下面这边来看看执行时的效果

到目前为止的动作都与CameraCaptureTask相同，下面来看看在PhotoChooser中特殊的属性，首先是ShowCamera的属性，ShowCamera的属性是一个布尔型态，当设定为真时，在选择图片的画面中，会出现拍照的按钮，让使用者也可以透过照相机来做为图片的来源，会向下图的样子（您可以看到多出了应用程序栏中并且多了照相的按钮）

接下来是PixelHeight，PixelWidth的属性，这两个属性是让使用者可以裁切原始的图形，比如说，现在应用程式要让使用者设定大头贴，大头贴的尺寸只需要100* 10，这时候过大的图形并没有用处，因此您就可以设定这两个属性，设定之后当使用者选定照片之后会出现裁切的方框，方框会依照您设定的长宽比例做调整，例如下方左图笔者是设定3:8的比例，而右图就是裁切之后的效果了

代码如下：

View Code

 <!--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="Chooser Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Photo" 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="Choose photo" Height="85" HorizontalAlignment="Left" Margin="24,23,0,0" Name="button1" VerticalAlignment="Top" Width="417" Click="button1_Click" />
            <Image Height="336" HorizontalAlignment="Left" Margin="38,139,0,0" Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="394" />
            <TextBlock Height="90" HorizontalAlignment="Left" Margin="38,490,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="394" TextWrapping="Wrap" />
        </Grid>
    </Grid>

View Code

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.Tasks;
using System.Windows.Media.Imaging;

namespace ChooserDemo
{
    public partial class PhotoChooser : PhoneApplicationPage
    {
        PhotoChooserTask pc;

        public PhotoChooser()
        {
            InitializeComponent();
            pc = new PhotoChooserTask();
            pc.Completed += new EventHandler<PhotoResult>(pc_Completed);
        }

        void pc_Completed(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                BitmapImage bmpSource = new BitmapImage();
                bmpSource.SetSource(e.ChosenPhoto);
                image1.Source = bmpSource;
                textBlock1.Text = e.OriginalFileName;
            }
            else
            {
                image1.Source = null;
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            //是否裁切相片，並設定裁切後相片的最大高度以及寬度
            pc.PixelHeight = 30;
            pc.PixelWidth = 80;

            //設定是否出現拍照的按鈕(位於Application Bar)
            //pc.ShowCamera = true;

            pc.Show();
        }
    }
}

5、SaveEmailAddressTask，SavePhoneNumberTask
SaveEmailAddressTask是用来储存联络人中电子邮件的相关资料，而SavePhoneNumberTask则是用来储存联络人的电话号码，这两种选择器使用的方式是相同的，下面先来看看执行时的效果

启动了SaveEmailAddressTask之后，在上面中间这张图，您可以选择要将这个电子邮件储存到哪一个联络人，或是说要建立新的联络人都可以，而选择联络人之后就会出现右侧的这个画面，让您确认资料无误，按下确认（打勾）的按钮后，则进入到下一个步骤，大致会像下面这样的效果

代码如下：

View Code

  <!--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="Chooser Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Save Email Address" 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">
            <TextBox Height="76" HorizontalAlignment="Left" Margin="0,72,0,0" Name="txtEmail" Text="" VerticalAlignment="Top" Width="444" />
            <TextBlock HorizontalAlignment="Left" Margin="12,33,0,0" Name="textBlock1" Text="Email address" Width="350" Height="33" VerticalAlignment="Top" />
            <Button Content="Save" Height="84" HorizontalAlignment="Left" Margin="249,167,0,0" Name="button1" VerticalAlignment="Top" Width="183" Click="button1_Click" />
        </Grid>
    </Grid>

View Code

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.Tasks;

namespace ChooserDemo
{
    public partial class SaveEmailAddress : PhoneApplicationPage
    {
        SaveEmailAddressTask sea;

        public SaveEmailAddress()
        {
            InitializeComponent();
            txtEmail.InputScope = new InputScope()
            {
                Names = { new InputScopeName() { NameValue = InputScopeNameValue.EmailNameOrAddress } }
            };

            sea = new SaveEmailAddressTask();
            sea.Completed += new EventHandler<TaskEventArgs>(sea_Completed);
        }

        void sea_Completed(object sender, TaskEventArgs e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                //Success
                MessageBox.Show("儲存成功!");
            }
            else
            {
                MessageBox.Show("儲存失敗!");
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            sea.Email = txtEmail.Text;
            sea.Show();
        }
    }
}

View Code

 <!--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="Chooser Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Save Phone Number" 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">
            <TextBox Height="76" HorizontalAlignment="Left" Margin="10,49,0,0" Name="txtPhoneNo" Text="" VerticalAlignment="Top" Width="444" />
            <TextBlock Height="33" HorizontalAlignment="Left" Margin="22,10,0,0" Name="textBlock1" Text="Phone number" VerticalAlignment="Top" Width="350" />
            <Button Content="Save" Height="84" HorizontalAlignment="Left" Margin="259,144,0,0" Name="button1" VerticalAlignment="Top" Width="183" Click="button1_Click" />
        </Grid>
    </Grid>

View Code

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.Tasks;

namespace ChooserDemo
{
    public partial class SavePhoneNumber : PhoneApplicationPage
    {
        SavePhoneNumberTask spn;

        public SavePhoneNumber()
        {
            InitializeComponent();
            txtPhoneNo.InputScope = new InputScope()
            {
                Names = { new InputScopeName() { NameValue = InputScopeNameValue.TelephoneNumber } }
            };

            spn = new SavePhoneNumberTask();
            spn.Completed += new EventHandler<TaskEventArgs>(spn_Completed);
        }

        void spn_Completed(object sender, TaskEventArgs e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                MessageBox.Show("儲存成功!");
            }
            else
            {
                MessageBox.Show("儲存失敗!");
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            spn.PhoneNumber = txtPhoneNo.Text;
            spn.Show();
        }
    }
}

posted on 2011-02-13 20:52 linzheng 阅读(1266) 评论(1) 编辑收藏举报

刷新页面返回顶部

Windows Phone 7 使用选择器（Chooser）

导航

公告