Hola 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.
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>
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 .
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.
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.
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.
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:
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:
Esto es todo espero que le guste