Vanguarsoft Developers blog

Ing. Javier Leal -Desarrollador CPANAX C.A / Microsoft Student Partners – VENEZUELA

Programar Cámara de Windows Phone 7.1

Deja un comentario

imageHola amigos hoy les traigo un poco de programación en Windows Phone 7.1 donde se vera lo facil que es trabajar con estas tecnologías de ultima generación, Comenzamos creando un nuevo proyecto de Windows Phone 7.1 lo pual puedes crearlo desde Blend o desde Visual Studio, es indiferente donde lo hagas igual el mismo proyecto puede ser pasado de un lado a otro.

Una vez creado el nuevo proyecto le colocaremos su titulo  y haremos un diseño segun tu lo desees. la aplicacion solo iniciara la cámara y capturara una imagen en la pantalla del teléfono y a pesar que emula la cámara en el dispositivo funcionara perfectamente.

image

Lo que hice acá fue colocarle un titulo y Subtitulo, Le coloque un degradado de fondo para que se viera mas agradable, Un objeto Imagen al que se le establece la propiedad x:Name=”Imagen” para que a nivel de programación llamarlo con ese nombre, un botón que permitirá iniciar la cámara Web del teléfono, al tomar una fotografía se mostrara en el objeto imagen agregado.

Ya todo lo que haremos será Código por lo tanto pasaremos el proyecto s Visual Studio 2010, como puedes observar yo utilizo las herramientas para lo que son Expression Blend para diseño y Visual Studio para el código de lógica, pero podrías hacerlo sin problema hacer código desde Blend pero no tendría la ayuda que te da visual Studio para mantener un buen código, así como puedes hacer un diseño desde Visual Studio pero no tendrías la versatilidad que existe en Blend para hacer animaciones y Excelente diseños.

Código XAML del diseño:

<phone:PhoneApplicationPage
    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" d:DesignWidth="480" d:DesignHeight="800"
    x:Class="DemoCamaraWP.MainPage"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" shell:SystemTray.IsVisible="True" UseLayoutRounding="True">

    <!--LayoutRoot es la cuadrícula raíz donde se coloca todo el contenido de la página-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contiene el nombre de la aplicación y el título de la página-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Demo Ing. Javier Leal" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Cámara WP" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel: coloque aquí el contenido adicional-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.799*"/>
                <RowDefinition Height="0.201*"/>
            </Grid.RowDefinitions>
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF1000FF" Offset="1"/>
                    <GradientStop Color="Black"/>
                    <GradientStop Color="Black" Offset="0.22"/>
                    <GradientStop Color="#FF1D195E" Offset="0.704"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Image x:Name="Imagen" Margin="5,5,5,5"/>
            <Button Click="cmdCamara_Click" x:Name="cmdCamara" Content="Iniciar Camara" Margin="50,20,50,20" Grid.Row="1"/>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

 


image

Una vez ya tengas el diseño, Presionas Click derecho sobre el proyecto y seleccionas editar en Visual Studio.

Lo primero que haremos es declarar una variable de tipo CameraCaptureTask inicializando la instancia de la clase esto lo haremos de manera global para poder usar esta variable de clase en todo la clase de la pantalla actual.

Con este código  inicializamos la clase CameraCaptureTask y para inicialízalo programaremos el botón Iniciar Cámara con el Método Show de la clase de la siguiente manera:

 

Microsoft.Phone.Tasks.CameraCaptureTask CamaraWP = new Microsoft.Phone.Tasks.CameraCaptureTask();

 

        private void cmdCamara_Click(object sender, RoutedEventArgs e)
        {
            CamaraWP.Show();
        }

Para capturar la imagen se debe llamar al método Complete de la clase CameraCaptureTask que este es el método que se ejecuta al tomar una fotografía y donde se capturara la imagen para ello llamamos al método Complete colocando += de esta manera tendremos el método que se ejecuta ese evento .

image

El el nuevo método ejecutamos en siguiente código.

        void CamaraWP_Completed(object sender, Microsoft.Phone.Tasks.PhotoResult e)
        {
            BitmapImage bmp = new BitmapImage();
            bmp.SetSource(e.ChosenPhoto);
            Imagen.Source = bmp;
        }

para Usar la clase BitmapImage debes hacer una importación a using System.Windows.Media.Imaging; esta clase la declaramos en una variable llamada bmp y la inicializamos con el constructor new, luego le asignamos el Sourse de esa BitmapImagen a la foto que viene como resultado en el evento en la propiedad ChosePhoto, luego al Sourse de el objeto imagen se le asigna ese BitmapImage.

Código completo:

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

namespace DemoCamaraWP
{
    public partial class MainPage : PhoneApplicationPage
    {
        Microsoft.Phone.Tasks.CameraCaptureTask CamaraWP = new Microsoft.Phone.Tasks.CameraCaptureTask();

        public MainPage()
        {
            InitializeComponent();
            CamaraWP.Completed += new EventHandler<Microsoft.Phone.Tasks.PhotoResult>(CamaraWP_Completed);
        }

        void CamaraWP_Completed(object sender, Microsoft.Phone.Tasks.PhotoResult e)
        {
            BitmapImage bmp = new BitmapImage();
            bmp.SetSource(e.ChosenPhoto);
            Imagen.Source = bmp;
        }

        private void cmdCamara_Click(object sender, RoutedEventArgs e)
        {
            CamaraWP.Show();
        }
    }
}

Una vez que esta listo el código podemos compilar y probar nuestra aplicación.

image

Al presionar sobre Iniciar Cámara iniciara valga la redundancia la cámara del dispositivo, como se trata de un emulador no se vera una imagen sino un recuadro en blanco y negro moviéndose.

image

Como puedes observar la cámara del emulador va titilando y mostrando un recuadro en blanco y negro en un dispositivo real se vería la imagen si funciona en el emulador en el dispositivo funcionara perfectamente. Podemos tomar una foto con el botón de arriba. y la aplicación te captura esa foto pero antes te muestra un recuadro indicando si quieres aceptar esa foto o repetir para tomar otra foto al darle aceptar muestra la foto.

image

Existe una propiedad en Expression Blend que pueden utilizar para mantener la aplicacion asi se voltee el teléfono en otra posición de esta forma mantienen la aplicación en cualquier posición que es esta:

image

la puedes visualizar seleccionando la pantalla o por código lo puedes ver subrayado y de color azul este código lo debes colocar en la propiedades de la phoneApplicationPage esto permitirá dar una gran flexibilidad a las aplicaciones desarrolladas ya que se adaptaran a la posición en que el usuario tenga el teléfono detallen el siguiente código y como se coloca la propiedad SopportedOrientatiions:

<phone:PhoneApplicationPage
    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" d:DesignWidth="480" d:DesignHeight="800"
    x:Class="DemoCamaraWP.MainPage"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape"
Orientation="Portrait" shell:SystemTray.IsVisible="True" UseLayoutRounding="True">

ahora esta se adapta a la forma el que tengas el teléfono:

image

image

image

Esto es todo espero que le guste Risa

Autor: Ing. Javier J. Leal H.

Desarrollador en CPANAX C.A, Microsoft Student Partners de Venezuela Amantes de nuevas Tecnologías Desarrollador es Silverlight 5, Windows 8, Windows Phone, Influenciador y Orador en Actividades Tecnológicas Microsoft

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s