Making animations In Store Apps

With the application development with XAML is little bit complex with user interface need animations , no matter which kind of application you gonna build. 

This post will demonstrate about how to make simple animation with XAML application with the help of Blend for Visual Studio(Former Microsoft Expression Blend). With visual studio 2012 onwards Blend for Visual Studio is free tool that installed with the Visual Studio.

1. Create your XAML based application in Visual Studio  (It may be WPF, Windows Phone or Windows Store App).
2. Open XAML interface in Design View and add relevant controllers to it. In here we just adding rectangle and we are going to create animation that  rectangle moves and rotate 360 degrees.
3. Select XAML (.xaml) file in  Solution Explorer and select Open in Blend Option

Here how its look like

4. Then select the rectangle and click on the  (+) button on the Object and Timeline window and add name to the animation (Storyboard) in here we named it as animationDemo

5. Now you can see the interface like the timeline.

6. Select the object you need to animate. this time its rectangle. then hold the Yellow color line on the timeline and drag it to the time period you need to appear the animation. (Ex : 5 msec) then drop it and make the changes that you need to  do within that time period to the object.

7. Then play it using play button and check the animation is done. and Save.
8. but not yet over. even animation created its not playing while the application run time. To do that go to code behind and place that where you need to play the animation . This case it need to play on the start.
go to place  where animation need to play  and paste this code .

animationDemo.Begin();

then You are done with it. See the code behind the XAML page. Blend does some serious codeing for you, in this case it like this.

<Storyboard x:Name="animationDemo">

            <DoubleAnimation Duration="0:0:5" To="767.164" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>

            <DoubleAnimation Duration="0:0:5" To="-10.448" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="rectangle">

                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="219.832"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

Full Code In Media Fire 
http://bit.ly/blendDemo

 

Read More

Universal Apps in Visual Studio

With Visual Studio 2013 Update 2 You can see the new changes in New project dialog box in Visual studio. One of them are new project type called Universal App.

With this kind of project template we can create Universal apps fro  Windows 8.1 and Windows Phone 8.1 once with same solution .

Once project  created in solution explorer you can see that there is  three separate projects

1. Windows 8.1
2. Windows Phone 8.1
3. Shared

With this templates it does is it shared separate section (such as project here) for Model (Coading part and data manipulation).
 All Projects in these ki of solution used that shared code for data manipulation.


With other two projects each one implements their platform specific User interfaces and functionalists with those projects. In here your Windows 8.1 UI codes should be in Windows 8.1 Project and Windows Phone UI codes must be in Windows Phone 8.1 Project.

 As you can see here each project refers the shared code base

And Specialty both Windows 8.1 and Windows Phone 8.1 Projects are sharing the same App.xaml and App.xaml.cs file. That means it defines the all application build settings to the each platform.

If you need to change something on Windows Phone 8.1 App you need to add that code in between 

#if WINDOWS_PHONE_APP

//Code 

#endif

In Compiling the project you can select which project need to be run like below with debug menu

And finally... Better to add 3rd party references separately with Windows 8.1 an Windows Phone 8.1 projects because there may be some derivations among libraries with two platforms..


Enjoy your Universal app with Visual Studio 203 update 2

Read More

Working with accelerometer Windows devices (8.1)

Previously on windows 8 developers can access the accelerometer function on windows devices with  the library Windows.Devices.Sensors 



using Microsoft.Devices.Sensors;

But with the Microsoft come up with the Windows 8.1  and Windows Phone 8.1 this Microsoft.Devices.Sensors library is missing and the methods that developers used are slightly changed with new library. 

Windows 8.1 and Windows Phone 8.1 developers can access the normal accelerometer with expanded Windows.Devices.Sensors library
 

using Windows.Devices.Sensors;

With this code it will demonstrate about the Windows Phone App. But this method is universal among Windows 8.1 and Windows Phone 8.1 Apps

Lets Begin .....

1. Define the Accelerometer and initialize it for initialize use Accelerometer.GetDefault()method

public Accelerometer accelerometer { get; set; }

accelerometer = Accelerometer.GetDefault();

2. Cehck the accelometer is working or not and f it is avilable create Accelerometer readig capturing event

if (accelerometer != null)

               {

                   // Select a report interval that is both suitable for the purposes of the app and supported by the sensor.

                   // This value will be used later to activate the sensor.

                   uint minReportInterval = accelerometer.MinimumReportInterval;

                   desiredReportInterval = minReportInterval > 16 ? minReportInterval : 16;

                   accelerometer.ReportInterval = desiredReportInterval;

                   //add event for accelerometer readings

                   accelerometer.ReadingChanged += new TypedEventHandler<Accelerometer, AccelerometerReadingChangedEventArgs>(ReadingChanged);

               }

               else

               {

                   MessageDialog ms = new MessageDialog("No accelerometer Found");

                   ms.ShowAsync();

               }

developer can assign any value to desiredReportInterval. to archive highest efficiency here we using method to get the minimum interval between two accelerometer report feeds.

With UI , its having three text boxes that named as corX,corY and corZ  to show the results of accelerometer readings. with the accelerometer reading event you can get the readings as follow

/// <summary>

        /// reading accelerometer changes

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="args"></param>

        private async void ReadingChanged(Accelerometer sender, AccelerometerReadingChangedEventArgs args)

        {

            await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>

            {

                AccelerometerReading reading = args.Reading;

                corX.Text = String.Format("{0,5:0.00}", reading.AccelerationX);

                corY.Text = String.Format("{0,5:0.00}", reading.AccelerationY);

                corZ.Text = String.Format("{0,5:0.00}", reading.AccelerationZ);

            });

        }

Here is Screen shot

Full Code In Media Fire 
http://bit.ly/1xxeQhn

 

Read More

AutoSuggestBox in Winows Phone 8.1

This is completely new controller for windows store app development that comes with Windows Phone 8.1 . But this still not available to Windows 8.1 or 8.1 Update 1.

Very cool feature feel like combo box and text box both are in together.


Here is the XAML code for controller.

<AutoSuggestBox x:Name="suggestions" HorizontalAlignment="Left" Margin="52,62,0,0" 
ItemsSource="{Binding }" VerticalAlignment="Top" 
Width="296" TextChanged="suggestions_TextChanged" 
SuggestionChosen="suggestions_SuggestionChosen"/>

You need to bind observationCollection with AutoSuggestBox .

You can define what will happen when text changed and item selected as this

 private void suggestions_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
            {
                Suggestions.Clear();
                Suggestions.Add(sender.Text + "1");
                Suggestions.Add(sender.Text + "2");
                Suggestions.Add(sender.Text + "3");
                Suggestions.Add(sender.Text + "4");
            }
        }

private void suggestions_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
        {
            suggestions.Text = "Choosen";
        }

Here is screen Shot

Full Code In Media Fire 
http://bit.ly/TOOVCO

 

Read More

Roslyn (Next Version of C# Compiler ) part 01

This article is about what is available in C# 6.0 with next version of compiler. You can have the binaries from roslyn.codeplex.com and use it. Here im going to demonstrate some key futures that useful in day to day programming .

1. Indexed Members and Element Initializers

There is several versions of it. Here is example for assign collection when it initialize in the code,
Ex : List<Ttype,Tvalue>

 Dictionary<string, string> sampleDemo = 
    new Dictionary<string, string>()
  {
    {"Mango", "Yellow"},
    {"Banana", "Green"},
    {"Pineapple", "Orange"},
    {"Apple", "Red"}
  };

//You can access each element like here
var c = sampleDemo ["Mango"];

indexed Members with $ mark

 Dictionary<string, string> sampleDemo = 
    new Dictionary<string, string>()
  {
    $Mango="Yellow",
    $Banana="Green",
    $Pineapple="Orange",
    $Apple="Red"
  };

//You can access each element like here
var c = sampleDemo.$Mango;

indexing with Json data

Code:

string JsonData =@"{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}";



//You can access each element like here
JObject jObject = JObject.Parse(JsonData );
  var output = jObject.$window.$Keyword);

Thanks and enjoy... Meet with next post with another feature

Read More

Web service with DB interaction (Entity framework 6), Part 1

Lot of people have problems with database interaction with Web services. connection problems with databases , retrieving, inserting etc. In this post I will show you hoe to connect DB and manage connections efficiently with Web service.

To archive this goal entity frame work is very helpful tool.


Lets see how to use it.

Here is my SQL server table that im going to use. Insted of SQL server You can use any Database type such as Oracle, Mysql etc.

Lets Code . :)

1. Create new WCF application in Visual Studio

2. R-Click on Solution and add -> new Item -> ADO.NET Entity data Model

 

 3. then select EF designer from database

 4. Connect your database with New Connection button and select relevant schema that you going to use

5. Then -> NEXT and select Entity framework version.. here im using 6.0 then click NEXT again

 6. Select relevant Tables , Views or stored procedures you need to use and click FINISH
 

 7. Then you can see that it automatically added classes and additional libraries that need to use the database . and also it will have separate classes for each Tables, Stored procedures and Views that you selected in the initialization space. Check  those classes in your project

8. Then create separate function for our database select and add it to interface([OperationContract]). In here I need to output all the data in the Contact table. Entity Framework creates relevant mapped class for my table. I just need to do is use that class as my return type. Like this , My function will return all the contacts because of that I'm using list of that contact objects

IEFDemo.cs:

 public interface IEFDemo
    {
        [OperationContract]
        string DoWork();


        [OperationContract]
        List<Contact> myContacts();
    }

EFDemo.svc.cs:

 public List<Contact> myContacts()
        {

        }

9. Then we need to create instance of database connection and initialize the instance. than open the connection using that instance and get the data from database then close the connection. We are done
Here is full code.

 public class EFDemo : IEFDemo
    {
        //instance of database entities 
        private demoEntities DB;
        public string DoWork()
        {
            return "hello";
        }

        public List<Contact> myContacts()
        {
            DB = new demoEntities();

            //database connection open and close
            DB.Database.Connection.Open();

            //add all items in DB to items variable
            var items = DB.Contacts;
            DB.Database.Connection.Close();

            return items.ToList();
        }
    }

Run it and test ...

Here is my results,

Enjoy.







Full Code In Media Fire 
http://bit.ly/1qDPrBF

 

Read More

Cross platform Development With Xamarin

Having a same App on all major platforms and all of them are shared a same  source code is dream. But today it is not. There is several tools to do that  here few of them,

• Xamarin
• PhoneGap
• Rho Mobile
• Appcelerator
• Widget Pad
• Whoop
• MoSync

  Importance of Xamarin is ,

• Share code between platforms
• Using .NET skills
• C# Language
• Let developers create UI’s that are unique to each platform.

Xamarin is cross platform development tool that created by Xamarin Studio and it supports to build applications on Windows , iOS and Android platforms.

 Most importantly it have integration with rich IDE , Visual Studio.

You can download Xamarin Trial version here.
https://store.xamarin.com/account/my/subscription/computers

Try it and Enjoy.

Read More