第一个WP8程序，照相机

安装win8 64位，vs2013(包含wp8 sdk)，百度各种得到学生开发者账户之后，终于可以试一下将自己的app部署到手机上的感觉了。

首先来个简单练练手的照相机功能

照相

即从主界面进入到照相机界面，进行拍照，并对照片进行保存

相册

对已拍照片管理，查看，删除

界面设计

MainPage.xaml

<phone:PhoneApplicationPage

    x:Class="OpenCamera.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"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

    <Grid>

        <Button Width="200" Height="200" Content="拍照" Click="ButtonBase_OnClick"></Button>

    </Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage

    {

        // 构造函数

        public MainPage()

        {

            InitializeComponent();

        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)

        {

            this.NavigationService.Navigate(new Uri("/Camera.xaml", UriKind.RelativeOrAbsolute));

        }

    }

意思就很简单了，点击拍照，就进入照相界面

下面拍照界面Camera.xaml

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition Height="200"/>

        </Grid.RowDefinitions>

        <Canvas>

            <Canvas.Background>

                <VideoBrush x:Name="VideoBrush"></VideoBrush>

            </Canvas.Background>

        </Canvas>

        <StackPanel Grid.Row="1">

            <Button Width="200" Height="200" Content="拍照" Click="ButtonBase_OnClick">

            </Button>

        </StackPanel>

    </Grid>

一个Canvas用于显示照相机捕捉到的图像
一个按钮，用于拍照

PhotoCamera

上MSDN查询：http://msdn.microsoft.com/zh-cn/library/microsoft.devices.photocamera(v=vs.92).aspx

备注中提到一些实用方法，其中提到了几个方法

OnNavigatedTo(导航到本页面时触发)

OnNavigatedFrom(离开本页面后触发)

OnNavigatingFrom(离开本页面之前触发)

在Camera.xaml.cs中依次重写了3个方法，都打上断点，看执行顺序，发现执行过程是点击拍照按钮=》OnNavigatedTo=》点击返回=>OnNavigatingFrom=》OnNavigatedFrom

好，现在就明白了，在OnNavigatedTo中来初始化PhotoCamera对象实例，并捕捉图像到Canvas上

protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            _cam = new PhotoCamera(CameraType.Primary);

            VideoBrush.SetSource(_cam);

            base.OnNavigatedTo(e);

        }

好，此刻已按捺不住激动的心情了，编译，在模拟器中调试....，但是，程序出错。再次查看MSDN，发现这里
第一个WP8程序，照相机

有个东西需要设置一下

第一个WP8程序，照相机

好，现在在编译，运行，模拟器中如下

第一个WP8程序，照相机

心想，这该没有什么问题了吧，插上手机，部署

第一个WP8程序，照相机

运行，果然能够显示图像了。有点小兴奋。

拍照

拍照就很简单了，调用一个方法即可

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)

        {

            _cam.CaptureImage();

        }

保存照片

调用了CaptrueImage方法，本以为会返回照片，但是继续查看MSDN发现需要注册一个事件，来获得图片。

这里还用到了一个类MediaLibrary：http://msdn.microsoft.com/query/dev12.query?appId=Dev12IDEF1&l=ZH-CN&k=k(Microsoft.Xna.Framework.Media.MediaLibrary);k(TargetFrameworkMoniker-WindowsPhone,Version%3Dv8.0);k(DevLang-csharp)&rd=true

但是，这里需要注意一下，使用MediaLibrary来保存数据还需要这一步设置，如下图：

第一个WP8程序，照相机

这样，MediaLibrary才能正常使用（MSDN上没有说明这个：坑呀）

这里注册图片可用事件

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

        {

            if (_cam != null)

            {

                _cam.Dispose();

                _cam.Initialized -= _cam_Initialized;

                _cam.CaptureCompleted -= _cam_CaptureCompleted;

                _cam.CaptureImageAvailable -= _cam_CaptureImageAvailable;

                _cam.CaptureThumbnailAvailable -= _cam_CaptureThumbnailAvailable;

            }

            base.OnNavigatingFrom(e);

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            _cam = new PhotoCamera(CameraType.Primary);

            _library = new MediaLibrary();

            VideoBrush.SetSource(_cam);

            _cam.Initialized += _cam_Initialized;

            _cam.CaptureCompleted += _cam_CaptureCompleted;//照相完成事件

            _cam.CaptureImageAvailable += _cam_CaptureImageAvailable;//图片可用事件

            _cam.CaptureThumbnailAvailable += _cam_CaptureThumbnailAvailable;//缩略图可用事件

            base.OnNavigatedTo(e);

        }

在OnNvaigatingForm中取消订阅事件
现在主要关注CaptureImageAvailable事件，该事件当照相生成的图片可以使用时触发，先不要关注注释部分的代码，这样就能将照片保存到手机相册里了

void _cam_CaptureImageAvailable(object sender, ContentReadyEventArgs e)

        {

            string fileName = string.Format("{0}-{1}-{2}", DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second) + ".jpg";

            _library.SavePictureToCameraRoll(fileName, e.ImageStream);

            #region 独立存储

            //string floderName = "Photo";

            //string fileName = string.Format("{0}-{1}-{2}", DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second) + ".jpg";

            //string fullName = Path.Combine(floderName, fileName);

            //using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())

            //{

            //    if (!file.DirectoryExists(floderName))

            //    {

            //        file.CreateDirectory(floderName);

            //    }

            //    if (!file.FileExists(fullName))

            //    {

            //        using (IsolatedStorageFileStream fileStream = file.OpenFile(fullName, FileMode.Create, FileAccess.Write))

            //        {

            //            byte[] readBuffer = new byte[4069];

            //            int bytesRead = -1;

            //            while ((bytesRead = e.ImageStream.Read(readBuffer, 0, readBuffer.Length)) > 0)

            //            {

            //                fileStream.Write(readBuffer, 0, bytesRead);

            //            }

            //        }

            //    }

            //}

            #endregion

            e.ImageStream.Close();

        }

但是，我们要制作自己的相册，就需要独立存储。

独立存储

独立存储这一块请看MSDN吧，http://msdn.microsoft.com/zh-cn/library/system.io.isolatedstorage.isolatedstoragefile(v=vs.110).aspx

注释部分的代码就是将图片保存到独立存储中，而不是手机的相册中。

相册

相册就是将所拍的照片展示出来，暂时用ListBox实现

界面Photo.xaml

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitlePanel 包含应用程序的名称和页标题-->

        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="12,17,0,28">

            <TextBlock Text="相册" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

            <Image x:Name="TestImage"></Image>

        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->

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

            <ListBox ItemsSource="{Binding AllPhoto}">

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel>

                            <Image Source="{Binding}"></Image>

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

        </Grid>

    </Grid>

Photo.xaml.cs

#region 字段

        private ObservableCollection<BitmapImage> _allPhoto;

        #endregion

        #region 属性

        public ObservableCollection<BitmapImage> AllPhoto

        {

            get

            {

                return _allPhoto;

            }

            set

            {

                _allPhoto = value;

                OnPropertyChanged("AllPhoto");

            }

        }

        #endregion

        public Photos()

        {

            InitializeComponent();

            this.DataContext = this;

            AllPhoto=new ObservableCollection<BitmapImage>();

        }

        #region 导航事件

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            using(IsolatedStorageFile file=IsolatedStorageFile.GetUserStoreForApplication())

            {

                if (file.DirectoryExists("PhotoTH"))

                {

                    string[] fileNames = file.GetFileNames("/PhotoTH/");

                    foreach (var fileName in fileNames)

                    {

                        using (IsolatedStorageFileStream fileStream = file.OpenFile("/PhotoTH/" + fileName, FileMode.Open))

                        {

                            BitmapImage bitmapImage=new BitmapImage();

                            bitmapImage.SetSource(fileStream);

                            AllPhoto.Add(bitmapImage);

                        }

                    }

                }

            }

            base.OnNavigatedTo(e);

        }

        #endregion

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this,new PropertyChangedEventArgs(propertyName));

            }

        }

这样就能将图所拍照片的图片显示出来了。

相片删除

这里一般都是长按相片，然后弹出菜单可以选择“删除”选项，这个就用到类似于WPF的ContextMenu，但是弄死在WP8项目中就是没有ContextMenu，各种百度之后，得知需要引用MicroSoft.Phone.Control.ToolKit

该Dll在http://www.nuget.org/packages/wptoolkit

下载之后，我们的Photo界面就要稍微修改，下面是修改之后的Photo.xaml

<!--LayoutRoot 是包含所有页面内容的根网格-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitlePanel 包含应用程序的名称和页标题-->

        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="12,17,0,28">

            <TextBlock Text="相册" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

            <Image x:Name="TestImage"></Image>

        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->

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

            <ListBox ItemsSource="{Binding AllPhoto}">

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <Button Width="200" Height="200">

                            <Button.Template>

                                <ControlTemplate TargetType="Button">

                                    <Grid>

                                        <Grid.Background>

                                            <ImageBrush ImageSource="{Binding Source}">

                                                <ImageBrush.RelativeTransform>

                                                    <CompositeTransform CenterX="0.5" CenterY="0.5" Rotation="90"></CompositeTransform>

                                                </ImageBrush.RelativeTransform>

                                            </ImageBrush>

                                        </Grid.Background>

                                    </Grid>

                                </ControlTemplate>

                            </Button.Template>

                            <toolkit:ContextMenuService.ContextMenu>

                                <toolkit:ContextMenu>

                                    <toolkit:MenuItem Header="删除" Click="MenuItem_OnClick" Tag="{Binding}"></toolkit:MenuItem>

                                </toolkit:ContextMenu>

                            </toolkit:ContextMenuService.ContextMenu>

                        </Button>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

        </Grid>

    </Grid>

这里需要注意一下，一开始我们直接绑定的BitmapImage来获取图片，但是这样在删除的时候，不仅要从集合中删除BitmapImage，还要从独立存储中删除该图片，而BitmapImage获取UriSource不到（希望有同学解释一下），这里只能变通一下，创建类Photo

public class Photo

    {

        public string FileName

        {

            get;

            set;

        }

        public string FullName

        {

            get;

            set;

        }

        public BitmapImage Source

        {

            get;

            set;

        }

    }

这样我们集合中存储的就是该Photo类型的变量，有文件名，还有包含整个路径的文件名，还有BitmapImage对象，这样删除的时候，就非常容易了，下面是删除图片的代码

private void MenuItem_OnClick(object sender, RoutedEventArgs e)

        {

            MenuItem item = sender as MenuItem;

            Photo photo = item.Tag as Photo;

            AllPhoto.Remove(photo);

            using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())

            {

                if (file.FileExists(photo.FullName))

                {

                    file.DeleteFile(photo.FullName);

                }

            }

        }

好了，至此，大致的功能就完成了。以为是一个很简单的东西，其实其中还包含了一些未知的东西，如独立存储，还有配置文件（勾选相机功能可用的那个）等等，目前也就是学了个大概，后面还要慢慢深入。

Demo:http://files.cnblogs.com/HelloMyWorld/OpenCamera.rar

人生还有无限可能，不要放弃努力。

秒客网

第一个WP8程序，照相机

相关文章