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

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”.
Pivot viewer silverlight 4 with Cricket World cup 2011
Cricket World Cup 2011 pivot viewer

I will explain whole topic with example in next post.

Thanks
Rajat Jaiswal

Silverlight Out Of Browser Application (OOB Apps) in simple steps

Hello friends,

As we have seen last night how to access Video capturing devices with Silverlight 4.0. Now today I thought why we don’t try for OOB Application means Out Of Browser Application.

Out of Browser application means you can run your Silverlight application just like an EXE we don’t require any browser like IE, Firefox etc to run our Silverlight application. So here is the step which we have to follow to get out of Browser application.

Step 1:- Check Silverlight project’s property page. On this page you will find a checkbox which is “Enable running application out of the browser” just check this checkbox as shown in below fig.

out of Browser application

Step 2:- Click on the button “Out-Of-Browser Settings…” and you will find below screen. In this screen you set title for the application, give description for the application, define icons for application.

Step3:- Be sure if you want to access local files of computer then check “Require elevated trust when running outside the browser” checkbox.  When this checkbox is checked then you can easily access the file from my documents and local directory easily it give full trust to your application.

Step4 :- you can  check whether the application is installed on machine or not with app.current.InstallState you can check Installation state if not installed the you can choose app.current.Install() method to install app.

OOB Application

Hope you will enjoy OOB application.

Thanks & Regards

Rajat Jaiswal

webcam access in website using silverlight

Hello friends,
Microsoft Silverlight 4.0 provided another great feature of Audio & Video capturing. Today I am interested in using one of these cool features which is video capturing.
With the help of the video & audio capturing feature we can get all the capturing devices and use them. In current example there is only one source which is my laptop webcam.

videocapture
So we are using 8 simple steps. With the help this simple we are capable of capturing webcam and stop capturing.
Step 1:- Create a new project of Silverlight with version Silverlight 4 version.
Step 2:- Draw a shape either rectangle or eclipse. The shape will hold the video.
Step 3:-  CaptureDeviceConfiguration provides GetAvailableVideoCaptureDevice &   GetDefaultvideoCaptureDevice methods.
The GetAvailableVideoCaptureDevice list out the entire available video capture device attached with your machine and GetDefaultVideoCaptureDevice provides default video capture device.

But before accessing any device from any machine we need to request device access and need to determine whether the device access is allowed or not. For determining the permission or request a device access we have following 2 methods
CaptureDeviceConfiguration.AllowedDeviceAccess   CaptureDeviceConfiguration.RequestDeviceAccess

silverlight permissions
It will prompt message for accessing the capturing device when you run the program.

   var webCam = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

Step 4:-
            Once you determine the capture device configuration then you need to assign it to assign as a video capture source device of capturesource.
  captureSource = new CaptureSource();
 
Step 5:- Once you assign the capture source’s video capture device then use a new brush utility provided by Silverlight which is Video Brush.  You just need to set source of video Brush which will be your capture source.
  var videoBrush = new VideoBrush();
      videoBrush.SetSource(captureSource);

Step 6:- Once the video Brush’s source is set then you can fill any shape with video brush.
          rectangle1.Fill = videoBrush;
     ellipse1.Fill = videoBrush;

Step 7:- now to start capturing from video source you need to call start method of capture source.
  captureSource.Start();

Step 8:- you can stop capturing video by stop method.

     captureSource.Stop();
 From the above description you can capture video from Webcam or any other video device which attached with your machine using Silverlight video capture facility. One more advantage is that you can take image also means image capturing is also possible. For this you have to define asynchronous image capture event.

silverlight 4.0

In this way you can access video capture device.  More than this you can download code from
http://cid-1eda2012469ff8ad.office.live.com/self.aspx/.Public/RajatJaiswal%5E_IndiandotnetVideoCaptureSilverlight4.0.zip

Enjoy Silverlight.
Thanks & Regards
Rajat  Jaiswal

WPF Windows Persentaion Foundation with me PART- II

Hello friends,
In this session we are going to take a look how do we connect a silver light application with database.
So here I would like to say that there are basically 4 options by which you can handle database in silver light application.
1) WCF for Silver light
2) Ado.net Data Services
3) Web services
4) RIA Services (need to explore more)

Here I will explain how to connect your WPF Silver light application with database using well know Web service.
It’s easy and I think we all already work on some part of Web services.

So let’s start with it.
We have added a silver light navigation project. In navigation silver light project part we have added 2 new pages employee, register page.
Employee page is for show employee list,And register page is for register employee.


Just see project structure as below.

projectPhoto

And In web part we have added a new web service with name my services.
Whose functionality to save, updates, Delete, and read all employee record.
As shown in below fig.

MyWebService

Now our next step is how to integrate this web service with silver light.
For this we add a services reference in our navigation project with the help of Add services reference menu as shown below.

AddServices

Now you can rename name space according to your choice.

If you do not get any error in referencing then till now you are ok with your work.
Now our next step is calling web method in our pages.
Here I am taking first page which is employee list
We are calling web method which returns all employee lists so here we go.

Private Sub EmployeePage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
Try
Dim myBinding As New ServiceModel.BasicHttpBinding()
Dim myEndPoint As New ServiceModel.EndpointAddress(New Uri(“http://localhost/MyTest/MyWebService.asmx&#8221;, UriKind.Absolute))
Dim proxy As New MyWebServiceSoapClient(myBinding, myEndPoint)
proxy.pub_ReadAllDataAsync()
AddHandler proxy.pub_ReadAllDataCompleted, AddressOf proxy_ReadAllEmployeeCompleted

Catch ex As Exception

End Try
End Sub

Private Sub proxy_ReadAllEmployeeCompleted(ByVal sender As Object, ByVal e As myService.pub_ReadAllDataCompletedEventArgs)
Try
Me.myGrid.ItemsSource = e.Result
Catch ex As Exception
Me.HeaderText.Text = ex.InnerException.Message.ToString
End Try
End Sub

Now things to remember here
1) Dim myBinding As New ServiceModel.BasicHttpBinding()
Its shows the binding is http binding
2) Dim myEndPoint As New ServiceModel.EndpointAddress(New Uri(“http://localhost/MyTest/MyWebService.asmx&#8221;, UriKind.Absolute))
Here the path can be absolute or relative.

3) Next you have to call web method like we have call here proxy.pub_ReadAllDataAsync()
4) once we have call the method asyncronously then we have to make a event handler like we have create here

AddHandler proxy.pub_ReadAllDataCompleted, AddressOf proxy_ReadAllEmployeeCompleted

5) when the asyncronous method is complete we have to take result complete argument and covert according to our requirement.
I have just bind the result to datagrid and get below screen.
Just see below.

employeeList

So friends in this way we can call web service in a Silverlight application.

Still we can use DataServices, RIA services, and WCF services for data manipulation application.

Hope in next few chapter we will take this example and work on it.

That’s all friends, thanks for reading the article.

Happy programming!

Thanks
Rajat

WPF Windows Persentaion Foundation with me PART- I

Hello friends,

Today we will discuss one of the most popular technologies which are silver light.
Before going forward you have some query in your mind. As I have so we will first solve that. See following questions.
1. What is Silver light?
Answer: – Silver Light is programmable web browser plug in, that enable feature such like vector graphics, animation and audio, video play back. It provide cross browser compatibility.
Its main aim to provide RIA (Rich Internet Application).Its Consistency with WPF (Windows Presentation Foundation). XAML (extensible Application Markup Language) is base of Silver light.
Its main use to provide end user a rich web application experience
Silver light basically used for RIA (Rich Internet Application) and with help of it we can make user friendly and all browser supported web sites.

2. What is XAML?
Answer: – XAML is core of Windows Presentation foundation. Its full form is Extensible Application Markup Language it’s just like a xml language with certain fixed tags. Like canvas, rectangle, grid etc…

3) From where I can download toolkit?
Answer: – We can download silver light 3.0 toolkits from http://www.silverlight.net site which is official site.

Here I will explain basic example of silver light. We are going to make a simple add 2 integer programs. I know you all aware of this but I started this for step by step progress in silver light.
For this you have to first install 3.0.
Once you have installed silver light 3.0 you will get following projects in asp.net new project window. Just select silver light application in this.

NewProject

Once you have selected this then next screen comes up for the web site or web application selection. As shown below. I have selected web application.

SilverlightOption

After selecting web application project you will get 2 projects in your solution explorer one is for silver light in which there will be .XAML file. And another one is web application which is used to call XAML file in the compile format which is called XAP.

ProjectExplore
Now we start our actual work of making 2 digit sums in silver light application
For this we have to select mainPage.xaml.
In this XAML page we have to put all the control which is requiring like textbox, label or Text Block and button.
Suppose we have to add a TextBlock in page then see below lines

 Here x:Name is like id in our ASPX page it should be unique. Grid.Row = 0 and grid.column =0 shows position in grid.

Now similarly if you want to add a label and Textbox and button then
You have to follow below code.
<dataInput:Label x:Name=”lblResult” Grid.Row=”3″ Grid.ColumnSpan=”2″ HorizontalAlignment=”Center”></dataInput:Label>

<TextBox x:Name=”txtSecond” Width=”100″ HorizontalAlignment=”Left” Grid.Row=”1″ Grid.Column=”1″></TextBox >

< Button Name=”btnAdd” Content=”Add” Click=”btnAdd_Click” Width=”100″Grid.Row=”2″ Grid.ColumnSpan=”2″ HorizontalAlignment = “Center” >
</Button >
So the main this which you have to concentrate for alignment, colors.
In Next post we will come up with some solid project base & tool kit understanding.

till than  happy programming.

Thanks
Rajat

Page Navigation in silverlight

Dear all,

When you are new guy in silverlight then you will find the problem  how to navigate in silverlight page.

even i am also get stucked in that for this reason i am writing this post to help people like me.

As you see the initial this how the default page set or load in silverlight application then you will answer in App.xaml file and you will find below code.

  Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
        Me.RootVisual = new Page()
    End Sub

 It means that when ever application start  it shows page.xaml  because you have assign RootVisual  Page class object.

now what if you want to navigate from a button click to  other page like rajat.xaml.

for this you have to right some simple code. like below

first in App.xaml Start up event

Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
        Dim tGrid As New Grid()
        tGrid.Children.Add(New Page())
        Me.RootVisual = tGrid
End Sub

 Then On the button click event of Page.xaml you have to write below code

 Private Sub btnNavigate_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim tmp = CType(Application.Current.RootVisual, Grid)
        tmp.Children.Insert(0, New Rajat()) ‘Assign Rajat.xaml page class object to grid child
        tmp.Children.RemoveAt(1) ‘ Remove old page which is page.xaml
        Application.Current.RootVisual = tmp ‘Assign Root visual again the page which we need to show

    End Sub

I hope it will be useful .

Thanks

Rajat