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);
p_w_picpath1.Source = bmpSource;
}
else
{
p_w_picpath1.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="p_w_picpath1" 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="p_w_picpath1" 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);
- p_w_picpath1.Source = bmpSource;
- textBlock1.Text = e.OriginalFileName;
- }
- else
- {
- p_w_picpath1.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
- <!--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>
转载于:https://blog.51cto.com/linzheng/1079190