Palewar Techno Solutions

Simple Animation using MS Expression Blend

Aditi Paliwal — Wed, 14 Sep 2011 11:06:05 +0000

In this blog we will we learn “How to Rotate an Ellipse”. To create this project please open a New project in Microsoft Expression Blend. Choose a WPF project with Framework 3.5.

You will get a New Window. Add an Ellipse from the Assets tab on the right >> Shapes to the New Window. After you add ellipse on the form, color the Ellipse with the color you want by selecting the ellipse control first and color from the properties windows. Your ellipse will look like Ellipse below on the Window (Refer the Steps from image to get a clear view).

Add a new StoryBoard. A StoryBoard is like a timeline to create animation. To add a StoryBoard click on the Add button which is shown in the image below. After you click on the Add button a dialog appears, asking you the name of the StoryBoard write down name as ‘RotateEllipse’, press OK button.

Now to animate the Ellipse, we will add keyframes. Keyframes are added on a particular time. Select the ellipse from the window and press the button ‘Keyframe’ as labelled in the image below. This keyframe is added to record how ellipse will look at 0 second.

As shown in the image below, click on the ‘Render Transform’ Tab in the transform b0x and set X and Y value to 1.

Now click on 2 sec from timeline (Refer the arrow below).

After clicking on 2 from above click on ‘Keyframe’ again, a new keyframe should be added for 2 second. Again change ‘RenderTransform’ properties change X value to -1. As in the image below.

Now you should have two ‘keyframes’ as in the image below. Click on ‘RotateEllipse’ and from the properties of the Story board, select RepeatBehaviour to ‘Forever’ (refer image below for steps). Now ‘Stop Recording’ the Story board and build the project and run it.

You will get a Rotating Ellipse. I will get back to you soon with more simple animations. Till then Happy Coding

Subversion to Mercurial

Anagha Deshpande — Wed, 17 Aug 2011 10:15:17 +0000

Source control is an important tool of the modern software development process. Developers use it to manage source code. When two or more developers are working on same project then these tools help in identifying the modifications made by team members and merge them properly. It keeps track of all prior versions of project files, allowing developers to move backward or forward in their code to determine when and where bugs were introduced.

Initially, we were using Subversion with Tortoise SVN client for source control. Subversion works by maintaining a central repository, hosted on a server, which contains project files. The team members make local copies of that repository on their personal computers in a process called Checkout. Each person has full control over their local copy and makes changes and copy back to repository in a process called Commit. Other people can then see these changes when they update their local copy. But there were some complications while using Subversion. The merging and branching of code is painful. Sometime back we came to know about a source control tool called Mercurial and we decided to give it a try. And mercurial proved to be much better than our earlier source control.

In Mercurial, every developer has his own repository on his own computer. Thus, he can commit code on his private repository whenever he wants. When the developer feels the code is ready, he can push (save) it to the central repository (server). The other project team members can then pull (retrieve) the code from the repository.

Subversion and Mercurial work differently. Mercurial is distributed whereas Subversion is centralized source control. Distributed source control helps to make branching easy. Thus, in Mercurial merging and branching the code is comparatively efficient. In terms of speed and repository size Mercurial is considered to be the best. It is fast with both additions and modifications, and keeps repository growth under control at the same time.

We came across a great and very interesting tutorial of Mercurial at – hginit.com, its first chapter is targeted for existing Subversion users. There are many great hosting options available for Mercurial. Kiln is one such great service, Bitbucket is another great service, specially helpful if you have a small team or working on an open-source project as you can use their services for free in both the cases.

Looking at the advantages we opted for Mercurial. Thus switching from our Subversion to Mercurial was tedious job. But when we realized the importance of Mercurial, we read the tutorial of it and made ourselves familiar with it. Our difficulties were resolved and we are now satisfied with our new source control Mercurial.

I would like to know which Source-Control tool you use and why? Please leave your answers in comments.

Adding a Title bar & Close button (WPF Series Final)

Aditi Paliwal — Wed, 29 Jun 2011 12:40:01 +0000

In my previous blog we have learned – Creating a window and adding a gradient effect, But from the previous blog we don’t get a fully functional window.

To make a functional window we need to add many features like:

A Title Bar.
A Close Button.
Title Bar Dragging Enabled.

We will proceed further with our first feature.

Adding a title bar.

To add a title bar open the project that we have created from the Creating a window and adding a gradient effect blog. Add a rectangle from the tool box. Change the following properties Name=”RctTitle”, Fill=”White”, StrokeThickness=”2″, RadiusX=”20″, RadiusY=”20″, Stroke=”Black”, StrokeThickness=”2″ and VerticalAlignment=”Top”of the rectangle.

Code will be as below:

2. Adding the Close button.

It can be done in many ways but for a rounded close button we will follow three simple steps:

Select a Border and a Label control from the toolbox.
Place the Label control inside the Border control. To do this just drag the label onto the border control.
Now change the properties of the both controls.

Border Properties:

Height=”49″,Width=”49″, Name=”BrdCloseButton”, VerticalAlignment=”Top”, CornerRadius=”20,20,20,20″, HorizontalAlignment=”Right”, BorderThickness=”2″ and BorderBrush=”Black”.

And also add the gradient effect to the border.

Label Properties:

Name=”LblClosebutton”, HorizontalAlignment=”Stretch”, VerticalAlignment=”Stretch”, HorizontalContentAlignment=”Center”, VerticalContentAlignment=”Center”, FontSize=”20″, Foreground=”White”, Height=”34″ and Content=”X”

The code will be:

Similarly to follow the third step to create a draggable window of the RctTitle. Code on the Left mouse button down event of the RctTitle :

private void RctTitle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.DragMove();
}

Add the following code on the event Left mousebutton down of the BrdCloseButton:

private void LblClosebutton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.Close();
}

Adjust the Rectangle(the titlebar) on the top of the window and the close button on it, so that both matches the image below.

Happy Coding.

Gradient Background (WPF Series Part 2)

Aditi Paliwal — Wed, 20 Apr 2011 07:59:13 +0000

In this blog I will let you know how to add gradient background to the window that we have created in my pervious blog named Rounded Corner window.

I normally use Microsoft Expression Blend to design user interfaces rather than VS itself as Blend has widened WPF functionality with a lot of innovations in the form design, 3-D animations( only with .Net Framework 4 ) and replaced many hard to code lines with only few clicks such as creating a storyboard, adding a trigger, giving style to a listbox etc.

After I finish designing I use the XAML generated by Blend in VS for my further coding.

To add a gradient background follow these steps:

Create a new WPF Application in Microsft Expression Blend.
Add a rectangle control in the window.
In Properties window of a rectangle select Fill and set its Brush to Gradient Brush (refer to the image below):
Now ,we click on the gradient stop that appears on the left and change its color code to #FFB69383. To add a next gradient stop click on bar shown in the image as “Click on this to add gradient stops“. After that set its color code to #FFBA9087 and so on (add as many stops as you want). I added 6 gradient stops. After adding stops we see a gradient effect in the rectangle but it appears horizontally.
To make the gradient diagonal select the Gradient tool from tools and rotate it as you want.

The XAML in the Blend will look like below:

Now open the project that was made in the previous blog. Remove Fill=”Blury Wood”, remove the closing tag of the rectangle, copy the code for Rectangle.Fill from code generated from Expression Blend and also close the Rectangle tag so that your final XAML looks like this:

The window should look like the image below:

In my next blog we will learn how to add Title Bar, Close Button and Drag Drop to this window.

Happy Coding.

Rounded Corner Window (WPF Series Part 1)

Aditi Paliwal — Sat, 16 Apr 2011 14:12:45 +0000

I hope all of you .net coders out there are using WPF (Windows Presentation Foundation) for your desktop development and not the good old windows form. WPF makes it really easy to come up with great looking user interfaces. We believe Microsoft may eventually phase out windows forms in future releases of VS.NET. We have completely switched to WPF for desktop development in our company.

My journey with WPF started when I joined ‘PALEWAR TECHNO SOLUTIONS’. The first task that I got was rounding the corners of the window. Exploring how to make a curved window was very interesting and its just few lines of XAML(Extensible Application Markup Language). A Window can be shaped in any way you can imagine using WPF.

In this post lets see how we can create a window with rounded corners.

We start a WPF Application project in Visual Studio (I am using VS 2008). We get a window and a grid control already setup for us and our XAML will look something like this:

Grid is our container for all the controls but since we can not make its corners rounded we add a Rectangle control and place all the controls on top of it. Now we just go to Properties window for the Rectangle and change 2 properties. We set RadiusX = 30 and RadiousY=30 to get rounded corners for our rectangle. We also need to give a color to our Rectangle, so we also set Fill=BurlyWood. You can select any color your like for your rectangle.

Now we have our Rectangle with rounded corners but our window is visible behind it so it does not look like we want. So we just need to make our window transparent and our rectangle will start looking like a window to the user. To achieve this we change a few properties for our window control. We set WindowStyle=None, AllowsTransparency=True and Background=Transparent and we are done. Whatever we do in design gets reflected in our XAML, we can directly change XAML as well to change our design.

Our final XAML for our window will look like this:

And the output window will look like this image below:

Watch out for my next post where we will talk about using a gradient background instead of a plain color like above.

Happy Coding.

Developing for MeeGo on MeeGo

Neha Purohit — Sun, 10 Apr 2011 12:53:04 +0000

When we got to know about the Intel AppUp contest to develop apps for MeeGo OS, we were keen to participate. I first downloaded and installed Meego SDK for Windows on my laptop.

QT Creator is the IDE to code for Meego.We have 2 options to run Meego Code:

Emulator (QEMU)
Run on a connected Meego Device

Unfortunately, the Emulator ‘Qemu’ was very very slow on my machine, so I shifted to second approach and started executing on Meego device. We have a netbook with Meego OS and we could run code on it via LAN.We found this approach to work better for us.

But soon we faced another problem as more developers were assigned to Meego development. Multiple developers trying to run code on same Meego netbook was not practical. We decided to dual-boot our machines with Meego beside existing Windows OS. Bob Duffy’s blog post helped us in installing Meego on our machines. Meego installation was easy and quick and I was able to boot into Meego in under 20 mins. I really like Meego on my laptop, it boots and shuts down very fast and performs very well when compared to Windows.

Its always a good idea to use and get familiar with a platform before developing for it so using Meego as my primary OS was really helpful. I got a real feel for the OS and its various features.

Now we wanted to install Meego SDK on Meego and we followed instructions from Meego’s official website. We managed to install but somehow QT won’t compile our code. We struggled for days then found this Intel forum discussion which mentioned a few alternate approaches. However those didn’t work for us either. Looks like Meego toolchain keeps changing as its still under development and sometime it breaks a few things.

After trying for a few more days we finally managed to compile on Meego. This approach has a major advantage that you don’t need to use any emulator or a separate Meego device as you can compile and run on the same machine. Here I am including steps to install Meego SDK with QT Creator on Meego Netbook OS incase somebody else is looking to develop for Meego using Meego itself.

You need to first open Terminal application and then run following commands in given sequence. These commands will be downloading and installing various files and tools on your machine so be patient as some commands will take a while to finish.

sudo zypper refresh
sudo zypper install yum
sudo zypper install pattern:development-tools
sudo zypper install pattern:x-software-development
sudo zypper install qt-creator
sudo zypper install qt-devel

After this you should be able to code meego apps in QT creator. As of now AppUp SDk is only available for windows so once we finish coding our Meego Apps we open our same code in Windows QT creator to integrate with AppUp SDK, which is necessary if you want to make your apps available on soon to be launched AppUp for Meego.

We have developed 11 apps for Meego so far. As a trainee, I got an opportunity to develop for Meego. I am really thankful to Sachin Sir for having complete faith in me and for giving me this opportunity.

Exciting journey with MeeGo

Anagha Deshpande — Mon, 04 Apr 2011 13:00:06 +0000

I was very excited when I first heard about MeeGo. There are MeeGo devices being commercially distributed and we undertook the development of some really interesting apps. Also, Intel organized contest for rewarding first hundred MeeGo apps and thus came the deadline 1 month 10 apps. Quickly, we took job of installing Qt Creator on our machines. We also dual booted our machines with MeeGo as our default OS and other as Windows.

Installing Qt was comparatively tedious job (may be we were new to this platform). We tried several ways but no luck. Even we called Intel person and asked him for help. After slogging on it, we found solution. We spend couple of days knowing the syntax and UI of Qt. As a team we distributed the work and started working on code.

As the work was progressing, we were enjoying working on MeeGo. We got to know many new concepts. All efforts helped in understanding different aspects of this platform and lot of new ideas came and we implemented. When the apps were near to completion, we used to test it on our new Netbook gifted to our company by Intel.

We worked hard to make sure the apps run best and are liked by the people. Kavita, Aditi and Neha were great help to me. As a trainee, I got an opportunity to know about new technology, MeeGo. Till date, we have developed 9 apps and are planning for more.

PS: Meego is an OS by Intel and our apps will be available for Meego Netbooks via AppUp – the app-store for netbooks and desktops.