Easy steps to call WCF service in Windows Phone 7

Dear All,

Today we will learn how to connect WCF service with Windows phone.

So let’s start with step by step I am using one of the best templates which Windows Phone 7 support it is data bound template.

We add WCF service project to same solution.

We have created a WCF service which returns Category Id, Category name, Category description from Games database. For this we have created a custom data contract as shown in below fig

Now we added the reference of this service to our windows phone project using add service reference menu which comes when we right click on windows phone project.

Once the service reference is added we won half battle now the next challenge is call the method of this service in our windows phone 7 projects. As you know the first step is to create an object of this service which we can do with following code.

 DataServiceFreeTips.CategoryInterfaceClient proxy = new DataServiceFreeTips.CategoryInterfaceClient();

Now all the services which we call using service reference always support asynchronous calling so.

We first create a handler which give us hint when the service get all the data to do this we write following code. And after this service call we call the actual service asynchronous method.

   proxy.GetCategoryCompleted += new EventHandler<DataServiceFreeTips.GetCategoryCompletedEventArgs>(proxy_GetCategoryCompleted);
            proxy.GetCategoryAsync();

Now we are good to go and now we will run it and see. We will get the entire category game list as shown in below fig.

In this way we can call a WCF service.

For detail you can download the code from

You can download the code at https://skydrive.live.com/?cid=1eda2012469ff8ad&id=1EDA2012469FF8AD!243

Thanks & Best Regards,

Rajat Jaiswal

 

 

HelperClass.com

Hello friends,

Just wanted to updated you that we have started a new way to connect with each other with HelperClass.com.

Please register yourself and contribute.

 

 

A new milestone 125th post on Indiandotnet.wordpress.com so far so good

Dear Friends,
This post is different post from my regular technical articles and it is my 125th post on Indiandotnet.wordpress.com.

I would like to thank all of my friends, family members, colleges & most valuable the reader of this blog who continuously giving feedback and improving my skill also.
So thank you very very much.
Keep reading, Keep commenting, and keep giving feedback.
I need more improvement and I know you people will help me in sharing my thoughts.
God bless you all.

Happy Holidays.

Merry Christmas.
Thanks
Rajat Jaiswal

Create Silverlight Gallery in easy steps part-II

Hello Friends,
Today I am going to share Silverlight Image gallery no 2.

 If you don’t have idea of Silverlight Image gallery no 1 then please refer link. part-1
So, here we go.

 The concept is same as we did earlier. We will show image thumbnails on left side in a wrap panel (new control in Silverlight 4 just downloads the Silverlight 4 toolkit if you don’t have) and right side panel we will show large image with some fade in/fade out feature as we did in our earlier Silverlight image gallery.
Although I am doing this thing with some fix values but you can use XML instead of that that will be great idea with quick steps.
Step 1:-
So basic concept is I copied all the images in a folder in Silverlight project and rename then with numbers like 1.jpg, 2.jpg and so on.
Step 2:-
Just design a page with two panels. Left panel is wrap panel and right panel is stack panel. In right panel we have a image control with some fade in /out feature using by Storyboard.
Step 3:-
  Add image controls at runtime in wrap panel according to image count as shown below.
For intI = 1 To 8
Dim Img As New Image
Dim imgsource As ImageSource
imgsource = New BitmapImage(New Uri("images/" + intI.ToString() + ".jpg", UriKind.Relative))
Img.Width = 100
Img.Height = 100
Img.Margin = New Thickness(10)
Img.Name = "img" + intI.ToString()
Img.SetValue(Image.SourceProperty, imgsource)
Dim ef As New Effects.DropShadowEffect()
ef.ShadowDepth = 10
Img.Effect = ef
AddHandler Img.MouseEnter, AddressOf img_MouseEnter
Me.spCollection.Children.Add(Img)
NextWe have added handler also on this image controls “Basically Mouse enter”
Step 4:-
On mouse enter event of image control we start the animation of fade in/fade out and replace the center image source with the new image source (The thumbnail on which we have clicked)
Private Sub img_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
        Me.StoryImage.Begin()
        Me.imgMain.Source = CType(sender, Image).Source
    End Sub

Step 5:-
  For auto image change we use a dispatcher Timer function which changes the center image in each 50 sec.  And increase the image counter by one and if image counter reached to max value then reset to 0.
Private Sub TimerClick(ByVal sender As System.Object, ByVal e As EventArgs) Handles timer.Tick
        If intcounter >= 8 Then
            intcounter = 0
        End If
        Me.StoryImage.Begin()
        Dim imgsource As ImageSource
        imgsource = New BitmapImage(New Uri(“images/” + intcounter.ToString() + “.jpg”, UriKind.Relative))
        Me.imgMain.Source = imgsource
        intcounter = intcounter + 1
    End Sub

Step 6:- run it.
For more information you can download the code from link.

I hope you will enjoy Silverlight Image Gallery part –II.

 
Code
Soon I will share more samples related to image gallery.
Enjoy Silverlight
Thanks & Best Regards
Rajat Jaiswal

Create Silverlight Gallery in easy steps part-1

Hello friends,

Most of the time we require picture gallery in our websites & especially when the website in Silverlight then expectation is very high.

Although there are various design pattern which we can use in gallery design like spider design, 3 D rotation box design, grid view design, scroll design etc. I am concentrating 3 simplest designs and try to explain them one by one.

So here are the three basic gallery designs.

1. Scroll images thumbnail in bottom and on click or some other event show enlarge image in center of the page. For reference see below fig.

2.Show all thumbnails in grid view and when we click on individual thumbnail it enlarge. For reference see below fig

3. Show the entire images thumbnails on left side with in a grid and when click on individual thumbnail it enlarge on right side. For reference see below fig.

 

So let start with first gallery design which is scroll at the bottom and on click or mouse over see the enlarge image in center.

So here are the steps.

1)      Create a new Silverlight project

2)      Now according to our design just add two rows in the grid where first row will contain related to enlarge or big image  view while second row is related with thumbnails which scroll from right to left.

3)      In grid’s first row I have added an image control.

4)      In grid’s second row I have added a stack panel because all the images we will ad at run time in the stack panel.

5)      Now we are adding some image effects in big image view control currently we have used drop shadow effect.

6)      Now as you know we have to apply some kind of logic to move image from one position to another position for these we can use translate transformation (As you know Transformation is part of animation). Translate transformation help in movement of image from one position to another position.

7)      Once our design is fixed now we will add image dynamically from code behind. Just like as shown below code.

Dim intI As Integer

        Me.stakImages.Children.Clear()

        For intI = 1 To 8

            Dim Img As New Image

            Dim imgsource As ImageSource

            imgsource = New BitmapImage(New Uri(“images/” + intI.ToString() + “.jpg”, UriKind.Relative))

            Img.Width = 100

            Img.Height = 100

            Img.Margin = New Thickness(10)

            Img.Name = “img” + intI.ToString()

            Img.SetValue(Image.SourceProperty, imgsource)

            Dim ef As New Effects.DropShadowEffect()

            ef.ShadowDepth = 10

            Img.Effect = ef

            AddHandler Img.MouseEnter, AddressOf img_MouseEnter

            Me.stakImages.Children.Add(Img)

        Next

        Me.dbAniTransform.From = 800

        Me.dbAniTransform.To = -600

        Me.photos.Begin()

8)      Here you find that I have added image handler on Mouse Enter event you can use different event as per your choice.

9)      We have added drop shadow effect also so the image looks bit emboss.

So in this way we have finished basic image gallery. Here the major points to understand are only image translate transformation. If we understand this then we can design it easily.

You can download the code from

download code
Enjoy weekend with Silverlight.

Thanks & Best Regards,

Rajat Jaiswal

“Unable to start debugging. The Silver light Developer Runtime is not installed. Please install a matching Version.” How to resolve it?

Dear Friends,
I was configuring the Silver light project on my new laptop. I just got the error popup “Unable to start debugging. The Silver light Developer Runtime is not installed. Please install a matching version.”

The simplest solution for this you need to install the Developer version of Silver light from link http://go.microsoft.com/fwlink/?LinkID=188039
After installing the developer version everything working fine.

Thanks & Best Regards
Rajat Jaiswal

PSD TO XAML in few easy steps

Hello Friends,
I am a developer and most of the time i am facing the issues related to designing so, today I am interested in sharing one of the effective features of Silverlight expression blend tool. Most of the time we are in dilemma how to design our XAML pages.  Now no worries if you have PSD (Photo shop  Layered image ) file for web template then you just need to import that PSD file  in your expression blend file and  few clicks and you will get your  XAML ready. Isn’t it easy for a programmer?
Just see below steps to import PSD TO XAML
Step1: Choose the PSD file which you want to convert in XAML and import in your project with import PSD option (Expression blend) as shown in below fig.

Step2: Check the layers images according to your need and the press ok.

Step 3: Once you press ok you will get XAML file for the PSD file as shown in below fig

Step 4: Make changes according to you requirements and run it.

I hope it will help us (programmers) to make a solid, cool XAML.
Enjoy Silverlight
Thanks & best Regards
Rajat Jaiswal

Its really great feature Silverlight realtime augment toolkit

Dear Friends,
Today is Sunday. I am sure you have many plans for the day even I have also. My plan is to share one awesome feature of Silverlight which is Augment Reality. I am very excited for this.
A new toolkit is introduced which is SLAR toolkit. The Silverlight Augment reality by the name it is clear that it’s more about reality work.
The current sample project we match pattern of an image. We just move the corresponding images in front of our web cam and if the pattern matches we put some kind of marker like text box, images.
Is it interesting? , Really it is when you tried it you will enjoy the functionality more.
I tried this toolkit and I am very much impressed with this new utility. With this utility you can try various feature programs, games and make the things more interesting more live.

You can download this new feature toolkit from http://slartoolkit.codeplex.com/releases/view/45629
I am going to show you an existing sample to you which is mainly for recognizing the pattern images.
Although I am not going to do something extra it’s exactly same which is provided by SLAR Toolkit.
So here are the steps
1) Create a new Silverlight project in VS 2010 (don’t include  host Silverlight option)
2) Copy Matrix3DEx.dll, SLARToolkit.dll in bin folder of the project and add reference of the DLL in the project.
3) Now add pat files in projects (the pat files are basically pattern file which you can create for an image. The pattern file can be create from photo shop or other image editing tool)
4) The structure of the project now looks like as below.

5) On main page XAML put following coding

<UserControl x:Class=”SLARTest.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006”
mc:Ignorable=”d”
d:DesignHeight=”300″ d:DesignWidth=”400″ Loaded=”UserControl_Loaded”>
<Grid x:Name=”LayoutRoot” Background=”White”>
<StackPanel>
<TextBlock Text=”IndianDotnet.wordpress.com ” HorizontalAlignment=”Center” />
<Grid Width=”640″ Height=”480″>
<Rectangle Name=”Viewport” Stroke=”Black” StrokeThickness=”2″ />
<Canvas>
<TextBox Name=”Txt” Text=”SLAR toolkit test with Indiandotnet” Width=”300″ Height=”300″ TextWrapping=”Wrap” AcceptsReturn=”True” FontSize=”16″ />
</Canvas>
</Grid>
<Button Content=”Start Fun” HorizontalAlignment=”Center” Click=”Button_Click” />
</StackPanel>
</Grid>
</UserControl>

On Main page ‘s code behind we  need to write below code
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
// Initialize the webcam
captureSource = new CaptureSource();
captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

// Fill the Viewport Rectangle with the VideoBrush
var vidBrush = new VideoBrush();
vidBrush.SetSource(captureSource);
Viewport.Fill = vidBrush;

//  Initialize the Detector
arDetector = new CaptureSourceMarkerDetector();
// Load the marker pattern. It has 16×16 segments and a width of 80 millimeters
var marker = Marker.LoadFromResource(“Marker_Hiro_16x16segments_80width.pat”, 16, 16, 80);
// The perspective projection has the near plane at 1 and the far plane at 4000
arDetector.Initialize(captureSource, 1, 4000, marker);

// Attach the AR detection event handler
// The event is fired if at least one marker was detected
arDetector.MarkersDetected += (s, me) =>
{
// Change to UI thread in order to manipulate the text control’s projection
Dispatcher.BeginInvoke(() =>
{
// Calculate the projection matrix
var dr = me.DetectionResults;
if (dr.HasResults)
{
// Center at origin of the TextBlock
var centerAtOrigin = Matrix3DFactory.CreateTranslation(-Txt.ActualWidth * 0.5, -Txt.ActualHeight * 0.5, 0);
// Swap the y-axis and scale down by half
var scale = Matrix3DFactory.CreateScale(0.5, -0.5, 0.5);
// Calculate the complete transformation matrix based on the first detection result
var world = centerAtOrigin * scale * dr[0].Transformation;

// Calculate the final transformation matrix by using the camera projection matrix from SLARToolkit
var vp = Matrix3DFactory.CreateViewportTransformation(Viewport.ActualWidth, Viewport.ActualHeight);
var m = Matrix3DFactory.CreateViewportProjection(world, Matrix3D.Identity, arDetector.Projection, vp);

// Apply the final transformation matrix to the TextBox
Txt.Projection = new Matrix3DProjection { ProjectionMatrix = m };
}
});
};
}

private void Button_Click(object sender, RoutedEventArgs e)
{
// Request webcam access and start the capturing
if (CaptureDeviceConfiguration.RequestDeviceAccess())
{
captureSource.Start();
}
}

Now when you will run the code you are surprised by the working functionality of the page.
In our example we have taken “Hiro.pat” file
So when we run this if we put hiro image pattern print out the image is captured and the textbox comes in front of the image.

Thanks & Regards
Rajat Jaiswal

Pivot Viewer Example ” Cricket World Cup 2011″

Hello friends,
We have left the last topic with definition of Pivot Viewer now in this post we are going to make a sample which use pivot viewer. Our sample is “Cricket World Cup 2011” so here we go
Step 1:- First checks on your machine following things are installed if not then please installed them
a) Silverlight 4 (http://silverlight.codeplex.com/ )
b) Pivot collection tool (http://www.silverlight.net/learn/pivotviewer/collection-tools/)
Step 2:- Once you have installed above tools then create a pivot collection first. The pivot collection can also be generate using code also (at run time) but here I am using excel pivot collection generator.
Step 3:- For generating collection just open excel book go to pivot collection menu when you click pivot collection just below the menu new pivot collection tools will be visible. Then just create new collection button as shown in above image.

Excel Pivot Collection

Step 4:- When you click the new collection button you will get new excel object as shown in below fig

Pivot Collection Template

Step 5:- Now add the data according to your need as I added following columns
a) Team
b) Name
c) Bating Style
d) Bowling style
e) Is Captain
f) 100’s
g) 50’s
h) Runs
i) Average
j) URL
k) Description
l) Image
Step 6: Just fill the data as per the filtration column as shown in below fig

Step 7: Now once your data is fill then just click on publish collection button on toolbar
It will generate a “CXML” file which is collection Xml file with   deep zoom images collection.

Step8:- Now your collection is ready so next thing is how to use it. So first create a VS2010 Silverlight web application project.

Step 9: Copy CXML & and images folder to your web project first
Step 10: Once you copied the CXML and Images then open your Silverlight project and drag drop Pivot control or if it is not exist in your tool manually add for that just add reference as shown below.

xmlns:pivot=”clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot”

Step 11:- Now in the code behind just assign the collection URL to pivot control. (The URL nothing but the CXML URL which you already copied in your web project in step 9) as shown below.
this.pivot.LoadCollection(“http://localhost:54210/CricketWorldCup2011.cxml“, “”);

Step 12: Now run the project you will get following screen. On left side you will get filter criteria when you change that your data will also change in center.

Cricket World Cup 2011 Pivot

Hope the steps will be helpful and you can download code from.

Excel Data Cricket World Cup Team 2011 Data

Solution of Pivot Viewer Download Solution
Thanks & Esteemed Regards
Rajat Jaiswal

What is Pivot Viewer in Silverlight 4?

Hi Folks,

Sorry for such a late post. I know you were waiting for the new post from last 2 week. So here I am with a new interesting area which will help in data visualization. “Pivot Viewer” control is great tool supported by Silverlight 4. I know that I am bit late to explore such a great control.

I really want to thank Microsoft Pivot team for this they did such a great job.

Again our 3 basic questions WWH means,

what is Pivot Viewer control?

Why Pivot Viewer control?

And lasts but not the least How we can use & utilize it?
So, we first start with pivot viewer. “Pivot Viewer” is new control supported with Silverlight 4.

It is a representational control you can use this control where you want a BI functionality. Or we can say that it provide a unique way to represent data to analyse. You can filter data on the basis of various filters which you define and the transition from one filter to another filter is so smooth you worth to watch it. You can change view from normal grid view to column view.

Now if you are aware of BI (Business Intelligence) tools then I am just saying here it is one of the BI tools which help end user to get the result by applying multiple filters. You can define facts & fact category (facts are actual data & fact categories are the fields on which you can apply filter to get desire result).

Now I know you are most interested in where & how can we use?  So I am taking very interesting topic which is “Cricket World Cup 2011”.

Cricket World Cup 2011 pivot viewer

I will explain whole topic with example in next post.

Thanks
Rajat Jaiswal