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