Aplikasi Sample Photo Effect Windows Phone


Iseng-iseng bikin aplikasi sederhana (baca : sangat sangat sederhana) yang berjalan di OS windows phone 7.0 dan atau OS windows phone 7.5. Aplikasi yang dibuat, saya namakan dengan Sample Photo Effect, sesuai dengan namanya aplikasi ini bertujuan untuk manipulasi image / photo dengan effect ala kadarnya saja yaitu, filter Red (warna merah), Green (warna hijau), Blue (warna biru), dan Custom (gabungan dari Red,Green dan Blue).

Aplikasi ini saya buat dengan bantuan :

1. Microsoft Visual Studio 2010 Service Pack 1 (download di sini)

2. Windows Phone SDK 7.1 (download di sini)

Dengan modul-modul yang sudah disediakan oleh Windows Phone SDK 7.1, aplikasi ini mengambil image / photo dari dua sumber, yaitu bisa dari image galery dan bisa dari camera.

main page

Berikut codenya :

1.  MainPage.xaml


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

    <!--LayoutRoot is the root grid where all page content is placed-->
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
    <Grid Background="Transparent" Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Margin="12,17,0,28" Name="TitlePanel">
            <TextBlock Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}" Text="SAMPLE PHOTO EFFECT" />
        </StackPanel>
        <Grid Grid.RowSpan="2" Margin="12,60,12,12" Name="ContentPanel">
            <Button Click="btnLoadPhoto_Click" Content="Load Photo" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="btnLoadPhoto" VerticalAlignment="Top" Width="210" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="17,78,0,0" Name="txtMessage" Text="" VerticalAlignment="Top" Width="422" />
            <Image Height="306" HorizontalAlignment="Left" Margin="17,376,0,0" Name="imgImage" Stretch="Fill" VerticalAlignment="Top" Width="422" />
            <RadioButton Checked="rbRed_Checked" Content="Red" Height="72" HorizontalAlignment="Left" Margin="12,136,0,0" Name="rbRed" VerticalAlignment="Top" />
            <RadioButton Checked="rbGreen_Checked" Content="Green" Height="72" HorizontalAlignment="Left" Margin="166,136,0,0" Name="rbGreen" VerticalAlignment="Top" />
            <RadioButton Checked="rbBlue_Checked" Content="Blue" Height="72" HorizontalAlignment="Left" Margin="327,136,0,0" Name="rbBlue" VerticalAlignment="Top" />
            <Button Click="btnOpenCamera_Click" Content="Open Camera" Height="72" HorizontalAlignment="Right" Margin="0,0,17,0" Name="btnOpenCamera" VerticalAlignment="Top" Width="210" />
            <Slider Height="84" HorizontalAlignment="Left" Margin="17,214,0,0" Maximum="255" Name="sliderRed" SmallChange="10" ValueChanged="sliderRed_ValueChanged" VerticalAlignment="Top" Width="422" />
            <Slider Height="84" HorizontalAlignment="Left" Margin="17,260,0,0" Maximum="255" Name="sliderGreen" SmallChange="10" ValueChanged="sliderGreen_ValueChanged" VerticalAlignment="Top" Width="422" />
            <Slider Height="84" HorizontalAlignment="Left" Margin="17,304,0,0" Maximum="255" Name="sliderBlue" SmallChange="10" ValueChanged="sliderBlue_ValueChanged" VerticalAlignment="Top" Width="422" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

2.  MainPage.xaml.cs


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

namespace SamplePhotoEffectPhoneApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        CameraCaptureTask cameraCamptureTask;
        PhotoChooserTask photoChooserTask;
        BitmapImage bitmapImage;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            cameraCamptureTask = new CameraCaptureTask();
            photoChooserTask = new PhotoChooserTask();
            cameraCamptureTask.Completed += new EventHandler(cameraCamptureTask_Completed);
            photoChooserTask.Completed += new EventHandler(photoChooserTask_Completed);
        }

        private void cameraCamptureTask_Completed(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                bitmapImage = new BitmapImage();
                bitmapImage.SetSource(e.ChosenPhoto);
                imgImage.Source = bitmapImage;
                imgImage.Stretch = Stretch.Uniform;
            }
        }

        private void photoChooserTask_Completed(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                txtMessage.Text = System.IO.Path.GetFileName(e.OriginalFileName);
                bitmapImage = new BitmapImage();
                bitmapImage.SetSource(e.ChosenPhoto);
                imgImage.Source = bitmapImage;
            }
        }

        private void btnLoadPhoto_Click(object sender, RoutedEventArgs e)
        {
            photoChooserTask.Show();
        }

        private void btnOpenCamera_Click(object sender, RoutedEventArgs e)
        {
            cameraCamptureTask.Show();
        }

        private void rbRed_Checked(object sender, RoutedEventArgs e)
        {
            WriteableBitmap wbTemp = new WriteableBitmap(bitmapImage);
            ImageHelper.SetColorFilter(wbTemp, ImageHelper.ColorFilterTypes.Red);
            imgImage.Source = wbTemp;
        }

        private void rbGreen_Checked(object sender, RoutedEventArgs e)
        {
            WriteableBitmap wbTemp = new WriteableBitmap(bitmapImage);
            ImageHelper.SetColorFilter(wbTemp, ImageHelper.ColorFilterTypes.Green);
            imgImage.Source = wbTemp;
        }

        private void rbBlue_Checked(object sender, RoutedEventArgs e)
        {
            WriteableBitmap wbTemp = new WriteableBitmap(bitmapImage);
            ImageHelper.SetColorFilter(wbTemp, ImageHelper.ColorFilterTypes.Blue);
            imgImage.Source = wbTemp;
        }

        private void sliderRed_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
        {
            WriteableBitmap wbTemp = new WriteableBitmap(bitmapImage);
            ImageHelper.SetColorFilter(wbTemp, sliderRed.Value, sliderGreen.Value, sliderBlue.Value);
            imgImage.Source = wbTemp;
        }

        private void sliderGreen_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
        {
            WriteableBitmap wbTemp = new WriteableBitmap(bitmapImage);
            ImageHelper.SetColorFilter(wbTemp, sliderRed.Value, sliderGreen.Value, sliderBlue.Value);
            imgImage.Source = wbTemp;
        }

        private void sliderBlue_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
        {
            WriteableBitmap wbTemp = new WriteableBitmap(bitmapImage);
            ImageHelper.SetColorFilter(wbTemp, sliderRed.Value, sliderGreen.Value, sliderBlue.Value);
            imgImage.Source = wbTemp;
        }
    }
}

3.  ImageHelper.cs

Saya bikin satu class dengan nama ImageHelper yang berisi fungsi-fungsi untuk manipulasi image-nya (effect)


using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace SamplePhotoEffectPhoneApp
{
    public class ImageHelper
    {
        public enum ColorFilterTypes
        {
            Red,
            Green,
            Blue
        }

        public static WriteableBitmap SetColorFilter(WriteableBitmap wb, ColorFilterTypes colorFilterType)
        {
            Color c;
            for (int i = 0; i < wb.PixelWidth; i++)
            {
                for (int j = 0; j < wb.PixelHeight; j++)
                {
                    c = wb.GetPixel(i, j);
                    int nPixelA = 0;
                    int nPixelR = 0;
                    int nPixelG = 0;
                    int nPixelB = 0;
                    if (colorFilterType == ColorFilterTypes.Red)
                    {
                        nPixelA = c.A;
                        nPixelR = c.R;
                        nPixelG = c.G - 255;
                        nPixelB = c.B - 255;
                    }
                    else if (colorFilterType == ColorFilterTypes.Green)
                    {
                        nPixelA = c.A;
                        nPixelR = c.R - 255;
                        nPixelG = c.G;
                        nPixelB = c.B - 255;
                    }
                    else if (colorFilterType == ColorFilterTypes.Blue)
                    {
                        nPixelA = c.A;
                        nPixelR = c.R - 255;
                        nPixelG = c.G - 255;
                        nPixelB = c.B;
                    }

                    nPixelR = Math.Max(nPixelR, 0);
                    nPixelR = Math.Min(255, nPixelR);

                    nPixelG = Math.Max(nPixelG, 0);
                    nPixelG = Math.Min(255, nPixelG);

                    nPixelB = Math.Max(nPixelB, 0);
                    nPixelB = Math.Min(255, nPixelB);

                    wb.SetPixel(i, j, Color.FromArgb((byte)nPixelA, (byte)nPixelR, (byte)nPixelG, (byte)nPixelB));
                }
            }
            return wb;
        }

        public static WriteableBitmap SetColorFilter(WriteableBitmap wb, double red, double green, double blue)
        {
            Color c;
            for (int i = 0; i < wb.PixelWidth; i++)
            {
                for (int j = 0; j < wb.PixelHeight; j++)
                {
                    c = wb.GetPixel(i, j);
                    double nPixelA = 0;
                    double nPixelR = 0;
                    double nPixelG = 0;
                    double nPixelB = 0;
                    nPixelA = c.A;
                    nPixelR = c.R + red;
                    nPixelG = c.G + green;
                    nPixelB = c.B + blue;

                    nPixelR = Math.Max(nPixelR, 0);
                    nPixelR = Math.Min(255, nPixelR);

                    nPixelG = Math.Max(nPixelG, 0);
                    nPixelG = Math.Min(255, nPixelG);

                    nPixelB = Math.Max(nPixelB, 0);
                    nPixelB = Math.Min(255, nPixelB);

                    wb.SetPixel(i, j, Color.FromArgb((byte)nPixelA, (byte)nPixelR, (byte)nPixelG, (byte)nPixelB));
                }
            }
            return wb;
        }
    }
}

Berikut screenshoot dari aplikasi yang telah dijabarkan di atas :

effect redeffect greeneffect blueeffect custom

Source code dapat diunduh di sini

Semoga bermanfaat :)

Sumber

1. www.codeproject.com

2. create.msdn.com/en-US/

3. www.microsoft.com/en-us/default.aspx

4. msdn.microsoft.com/en-US/

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s