Archive for September 2013
Windows store apps development c# xaml Part 6 - Application Life cycle management, Current_Suspending, Current_Resuming, Local Settings
There are three possible states for every app in their life cycle. They are Running, Suspended, Termination.
When an app is launched after splash screen it will be in running state, if user moves to other app then that app state will be suspended.
If user open that old app which is in suspended state it will resume back to running state.
In suspended state the app is not running but snapshot is there in memory.
The suspended apps will be terminated automatically without any message by the operating system if the memory is running out. There is no event to handle the termination but we have event executed when app is going to suspended state to store information. If app is terminated it is no more exists.
Activation is bringing app front from suspended state.
An app can be activated in lot of ways like using tiles, secondary tiles(direct link for an app page), toast notification(swipes in from right side),...
onactivation event is available which also had a parameter that says type of activation.
Drag and drop a textbox named as textbox1 to the design page.
The c# and xaml code of this example is given below.
Csharp code in mainpage
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Loaded += MainPage_Loaded;
App.Current.Suspending += Current_Suspending;
}
private void Current_Suspending(object sender,
Windows.ApplicationModel.SuspendingEventArgs e)
{
Windows.Storage.ApplicationData.Current.RoamingSettings.Values
["MyData"] = textbox1.Text;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (!
Windows.Storage.ApplicationData.Current.RoamingSettings.Values.ContainsKey
("MyData"))
{ textbox1.Text = "Default_Value"; }
else
{
var _value =
Windows.Storage.ApplicationData.Current.RoamingSettings.Values["MyData"];
if (_value != null)
{ textbox1.Text = _value.ToString(); }
}
}
}
}
xaml code:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<TextBox x:Name="textbox1" Width="200" HorizontalAlignment="Left"
Margin="124,136,0,0" VerticalAlignment="Top"/>
</Grid>
</Page>
Add a menu bar - view- toolbars - debug location which gives options like suspend, resume and 'suspend and shutdown'
Launch the app and enter some text in the textbox.
When the app is suspended the value inside the textbox will be saved in roaming settings. The saved data will be loaded in textbox on mainpage load.
Select suspend and shutdown after execution to terminate the app.
Example 2 to save data when app is suspended and displayed when app is activated
create a blank xaml c# windows store app and use the below code in mainpage.xaml.cs
A textblock and textbox should be added in the design.
launch the app and then keep it aside. after some time that app will automatically go into suspend state.
on suspension of app the current system time is saved in local settings and displayed back when the app is resumed.
CSharp code
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
using System.ServiceModel.Channels;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace App2
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
ApplicationDataContainer settings;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Application.Current.Suspending += Current_Suspending;
Application.Current.Resuming += Current_Resuming;
settings = ApplicationData.Current.LocalSettings;
}
void Current_Suspending(object sender, Windows.ApplicationModel.SuspendingEventArgs e)
{
settings.Values["suspendedDateTime"] = DateTime.Now.ToString();
settings.Values["customTextValue"] = custom.Text;
}
void Current_Resuming(object sender, object e)
{
Msg.Text = "Resumed. Was suspended at\n\n" + settings.Values["suspendedDateTime"];
custom.Text = settings.Values["customTextValue"].ToString();
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
Application.Current.Resuming -= Current_Resuming;
Application.Current.Suspending += Current_Suspending;
}
}
}
When an app is launched after splash screen it will be in running state, if user moves to other app then that app state will be suspended.
If user open that old app which is in suspended state it will resume back to running state.
In suspended state the app is not running but snapshot is there in memory.
The suspended apps will be terminated automatically without any message by the operating system if the memory is running out. There is no event to handle the termination but we have event executed when app is going to suspended state to store information. If app is terminated it is no more exists.
Launched -> Resume -> Suspend -> Terminate
Activation
Launched is first time app is opened.Activation is bringing app front from suspended state.
An app can be activated in lot of ways like using tiles, secondary tiles(direct link for an app page), toast notification(swipes in from right side),...
onactivation event is available which also had a parameter that says type of activation.
State management guidelines
- Resume as user left it.
- Start fresh as a long period of time elapsed.
- Save data when suspending (5 seconds).
- Release exclusive resources.
Steps to create an example to save data when app is suspended and loading data when it is activated
Create a new blank object.Drag and drop a textbox named as textbox1 to the design page.
The c# and xaml code of this example is given below.
Csharp code in mainpage
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Loaded += MainPage_Loaded;
App.Current.Suspending += Current_Suspending;
}
private void Current_Suspending(object sender,
Windows.ApplicationModel.SuspendingEventArgs e)
{
Windows.Storage.ApplicationData.Current.RoamingSettings.Values
["MyData"] = textbox1.Text;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (!
Windows.Storage.ApplicationData.Current.RoamingSettings.Values.ContainsKey
("MyData"))
{ textbox1.Text = "Default_Value"; }
else
{
var _value =
Windows.Storage.ApplicationData.Current.RoamingSettings.Values["MyData"];
if (_value != null)
{ textbox1.Text = _value.ToString(); }
}
}
}
}
xaml code:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<TextBox x:Name="textbox1" Width="200" HorizontalAlignment="Left"
Margin="124,136,0,0" VerticalAlignment="Top"/>
</Grid>
</Page>
Add a menu bar - view- toolbars - debug location which gives options like suspend, resume and 'suspend and shutdown'
Launch the app and enter some text in the textbox.
When the app is suspended the value inside the textbox will be saved in roaming settings. The saved data will be loaded in textbox on mainpage load.
Select suspend and shutdown after execution to terminate the app.
Example 2 to save data when app is suspended and displayed when app is activated
create a blank xaml c# windows store app and use the below code in mainpage.xaml.cs
A textblock and textbox should be added in the design.
launch the app and then keep it aside. after some time that app will automatically go into suspend state.
on suspension of app the current system time is saved in local settings and displayed back when the app is resumed.
CSharp code
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
using System.ServiceModel.Channels;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace App2
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
ApplicationDataContainer settings;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Application.Current.Suspending += Current_Suspending;
Application.Current.Resuming += Current_Resuming;
settings = ApplicationData.Current.LocalSettings;
}
void Current_Suspending(object sender, Windows.ApplicationModel.SuspendingEventArgs e)
{
settings.Values["suspendedDateTime"] = DateTime.Now.ToString();
settings.Values["customTextValue"] = custom.Text;
}
void Current_Resuming(object sender, object e)
{
Msg.Text = "Resumed. Was suspended at\n\n" + settings.Values["suspendedDateTime"];
custom.Text = settings.Values["customTextValue"].ToString();
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
Application.Current.Resuming -= Current_Resuming;
Application.Current.Suspending += Current_Suspending;
}
}
}
Windows store apps development c# xaml Part 5 - Handling files with example code
Windows store apps are sandboxed apps. You have some limitations to access files and hardware. You cannot directly access files you have to access them through broker. WinRT has to allow the app to access files. It can be done asynchronously only. Any operation that takes more than 15 milliseconds to complete has to be asynchronous operation in windows store apps. Asynchronous operations will work in the background without affecting user experience.
System.IO.Files is no more in WinRT also namespaces used to interact with registry are no available in WinRT.
Windows.Storage is the namespace you have to use to work with files here.
Picker is used to access document library, skydrive or homegroup.
Windows.Storage.StorageFolder - Copy, Move, Rename, Delete
Windows.Storage.StorageFile - Copy, Move, Rename, Delete
Windows.Storage.FileIO - Read, Write, Append methods
Windows.Storage.Pickers - Folder, save/open file, Third Party to save data in skydrive.
Capabilities and strategies:
App Storage is where app is installed. They will deployed in this location and it is read only.
Syntax: ms-appx://folder/file
Local Storage is like isolated storage.
Local folder is where you can store images, database and other files in local folder.
Syntax: ms-appdata://local/folder/file
Roaming folder data can be roamed and can be accessed from anywhere.
Syntax: ms-appdata://roaming/folder/file
System.IO.Files is no more in WinRT also namespaces used to interact with registry are no available in WinRT.
Windows.Storage is the namespace you have to use to work with files here.
Picker is used to access document library, skydrive or homegroup.
Windows.Storage.StorageFolder - Copy, Move, Rename, Delete
Windows.Storage.StorageFile - Copy, Move, Rename, Delete
Windows.Storage.FileIO - Read, Write, Append methods
Windows.Storage.Pickers - Folder, save/open file, Third Party to save data in skydrive.
Capabilities and strategies:
App Storage is where app is installed. They will deployed in this location and it is read only.
Syntax: ms-appx://folder/file
Local Storage is like isolated storage.
Local folder is where you can store images, database and other files in local folder.
Syntax: ms-appdata://local/folder/file
Roaming folder data can be roamed and can be accessed from anywhere.
Syntax: ms-appdata://roaming/folder/file
Windows store apps development c# xaml Part 4 - Databinding with example code
Data binding to bind data to control, templates, child control,...
Curly braces are used in the value to say that it is a extension. Binding is the keyword used to say that it is a binding extension.
Data taken from object/Csharp class/control using properties and assigned to dependency property.
Viewmodel is a class that is responsible for shaping data that is retreived from one or more models.
In the below code you can see the static value is assigned as background color for grid.
<Grid Background="Black">
In the below code you can see how the static resource is binded as the background color for grid.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
Binding data from control
Steps for binding value of a control to other control
Drag and drop a slider and rectangle to your xaml design page and name them as slider1 and rectangle1.
Now go the properties of slider 1 - StepFrequency="0.1", Maximum="10", Minimum="0", Value="2".
Drag the edges of slider1 to have good width. eg: Width="1122"
Now go to the properties of rectangle1 - transform - select scalable icon - click on the binding small square icon to see the list of binding option for x value - select create data binding - select binding type as element name - select slider1 under grid - select path as value - click on ok.
Do the same with y to add value of slider1 as databinding value for rectangle1 y value.
And see the output. With a change in the value of slider1 the rectangle1 size is scaled. This is because the value of the slider1 is binded to the value of x and y of rectangle1.
Code of mainpage.xaml page for the above example is given below
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<Slider x:Name="Slider1"
HorizontalAlignment="Left" Margin="86,40,0,0"
VerticalAlignment="Top" Width="1122"
StepFrequency="0.1" Maximum="10" Minimum="0" Value="2"/>
<Rectangle x:Name="Rectangle1" Fill="blue"
Height="200" Width="200"
Margin="592,298,0,0"
RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleX="{Binding Value, ElementName=Slider1}"
ScaleY="{Binding Value, ElementName=Slider1}"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Page>
 |
| xaml windows store apps binding value of one control to other control |
Converting data
Converters are used to change data during binding.
-IValueConvertor: Convert converts the Object Property data to a new format/value before assignment to the FrameworkElement property. ConvertBack converts the FrameworkElement Property data to a new format/value before assignment to the Object Property in two-way bindings. Often not implemented.
There are three types of binding. OneTime, OneWay, TwoWay.
In OneTime bindings data will be updated from the datasource only one time that is when binding is created.
In OneWay bindings data will be updated continuosly from the source to the target for every change and this is default binding mode.
In TwoWay bindings data will be updated from target to source and source to target continuously for every change.
Here is an example for databinding with two way mode.
In this example we will use two textboxes and the data entered in textbox1 will be immediately displayed in textbox2 with uppercase characters.
So databinding + convertion to uppercase letters
Steps for databinding with two way mode and data conversion example
Create a new blank c# xaml windows store app project
Add a new class to the project and name it as UpperCaseConvertor
Add this namespace using Windows.UI.Xaml.Data;
Inherit this class IValueConverter
Right click on the class name - implement interface - implement interface explicitly
Now the code generated looks should be modified as code below for convertion.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;
namespace App1
{
class UpperCaseConvertor:IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
{
if (!(value is string))
{
return string.Empty;
}
var valAsString=value as string;
return valAsString.ToUpper();
}
object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}
Now create XAML UI to use this UpperCaseConvert class.
Now build the project once to save the class name in resources.
Go to mainpage.xaml - drag and drop two textboxes to design page and name them as textbox1 and textbox2.
Go to the properties of textbox2 - click on the square box beside text property and select create data binding -
Binding type- ElementName, ElementName - textbox1, path - text,
Convertor - add value converter - select UpperCaseConvertor and click on ok and ok again.
Now in the output you can see that the text entered in textbox1 will be converted into uppercase and displayed in the textbox2.
xaml code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:UpperCaseConverter x:Key="UpperCaseConverter"/>
</Page.Resources>
<Grid Background="Black">
<TextBox x:Name="textbox1" Width="200" HorizontalAlignment="Left" Margin="124,136,0,0" Text="Hello" VerticalAlignment="Top"/>
<TextBox x:Name="textbox2" Width="200" HorizontalAlignment="Left" Margin="124,215,0,0"
Text="{Binding Text, Converter={StaticResource UpperCaseConverter}, ElementName=textbox1, Mode=OneWay }" VerticalAlignment="Top"/>
</Grid>
</Page>
-IValueConvertor: Convert converts the Object Property data to a new format/value before assignment to the FrameworkElement property. ConvertBack converts the FrameworkElement Property data to a new format/value before assignment to the Object Property in two-way bindings. Often not implemented.
There are three types of binding. OneTime, OneWay, TwoWay.
In OneTime bindings data will be updated from the datasource only one time that is when binding is created.
In OneWay bindings data will be updated continuosly from the source to the target for every change and this is default binding mode.
In TwoWay bindings data will be updated from target to source and source to target continuously for every change.
Here is an example for databinding with two way mode.
In this example we will use two textboxes and the data entered in textbox1 will be immediately displayed in textbox2 with uppercase characters.
So databinding + convertion to uppercase letters
Steps for databinding with two way mode and data conversion example
Create a new blank c# xaml windows store app project
Add a new class to the project and name it as UpperCaseConvertor
Add this namespace using Windows.UI.Xaml.Data;
Inherit this class IValueConverter
Right click on the class name - implement interface - implement interface explicitly
Now the code generated looks should be modified as code below for convertion.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;
namespace App1
{
class UpperCaseConvertor:IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
{
if (!(value is string))
{
return string.Empty;
}
var valAsString=value as string;
return valAsString.ToUpper();
}
object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}
Now build the project once to save the class name in resources.
Go to mainpage.xaml - drag and drop two textboxes to design page and name them as textbox1 and textbox2.
Go to the properties of textbox2 - click on the square box beside text property and select create data binding -
Binding type- ElementName, ElementName - textbox1, path - text,
Convertor - add value converter - select UpperCaseConvertor and click on ok and ok again.
Now in the output you can see that the text entered in textbox1 will be converted into uppercase and displayed in the textbox2.
xaml code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:UpperCaseConverter x:Key="UpperCaseConverter"/>
</Page.Resources>
<Grid Background="Black">
<TextBox x:Name="textbox1" Width="200" HorizontalAlignment="Left" Margin="124,136,0,0" Text="Hello" VerticalAlignment="Top"/>
<TextBox x:Name="textbox2" Width="200" HorizontalAlignment="Left" Margin="124,215,0,0"
Text="{Binding Text, Converter={StaticResource UpperCaseConverter}, ElementName=textbox1, Mode=OneWay }" VerticalAlignment="Top"/>
</Grid>
</Page>
Mode=OneWay for continuous datasource assignment
Mode=OneTime for one time datasource assignment when datasource is created.
Mode=OneTime for one time datasource assignment when datasource is created.
Windows store apps development c# xaml Part 3 - layouts(Canvas, stackpanel, grid) xaml code examples
Common top level containers we have are grid, canvas, stackpanel.
Canvas
Click here for XAML canvas layout control example codeStackpanel
Grid
ScrollViewer
Scrollviewer gives the ability to scroll the content.Scrollviewer has to be used with stackpanel and gridview to show the content by scrolling.
<ScrollViewer Margin="50"> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Fill="Red" Width="300" Height="400"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="400"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</ScrollViewer>
By default scrollviewer is vertical you can change it by specfying the scrollviewer direction.
We can also make scrollviewer visible only when the content is overflowing.ViewBox
viewbox had a property called stretch. If stretch is uniform then the content inside it is automatically scaled to fit everything inside the walls of the container without changing the aspect ratio.|If stretch is set to none then the content inside it will remain same with their original sizes.If stretch is set to fill then the content will be stretched to occupy the entire container in which viewbox is present.And finally uniformtofill is a combination of uniform and fill which fills the space with some elements uniformly.
Here is the code with three viewboxes inside gridview.
all the three viewboxes contain same stackpanel code but the way they are rendered is different because of the property stretch.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="None" >
<StackPanel Orientation="Horizontal" >
<Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</Viewbox>
<Viewbox Grid.Column="1" Stretch="Uniform" >
<StackPanel Orientation="Horizontal" >
<Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</Viewbox>
<Viewbox Grid.Column="2" Stretch="UniformToFill">
<StackPanel Orientation="Horizontal" >
<Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</Viewbox>
</Grid>
</Page>
xaml view box windows store apps example output
We can also make scrollviewer visible only when the content is overflowing.
ViewBox
viewbox had a property called stretch. If stretch is uniform then the content inside it is automatically scaled to fit everything inside the walls of the container without changing the aspect ratio.|
If stretch is set to none then the content inside it will remain same with their original sizes.
If stretch is set to fill then the content will be stretched to occupy the entire container in which viewbox is present.
And finally uniformtofill is a combination of uniform and fill which fills the space with some elements uniformly.
Here is the code with three viewboxes inside gridview.
all the three viewboxes contain same stackpanel code but the way they are rendered is different because of the property stretch.
Here is the code with three viewboxes inside gridview.
all the three viewboxes contain same stackpanel code but the way they are rendered is different because of the property stretch.
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="None" >
<StackPanel Orientation="Horizontal" >
<Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</Viewbox>
<Viewbox Grid.Column="1" Stretch="Uniform" >
<StackPanel Orientation="Horizontal" >
<Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</Viewbox>
<Viewbox Grid.Column="2" Stretch="UniformToFill">
<StackPanel Orientation="Horizontal" >
<Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
<Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
<Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
</StackPanel>
</Viewbox>
</Grid>
</Page>
|
| xaml view box windows store apps example output |
Introduction to .NET
In this Introduction to .NET we covered concepts of features of .net , .net ide , versions of visual studio and about visual studio .NET is a framework introduced by Microsoft in the year 2000. It is a collection of different technologies and languages. Microsoft has released .net with a great idea of adding all the technologies and programming languages of them inside the same .net framework . It is used for developing different types of applications. It is updated every year with new technologies which gives a great competition for all the other technologies. Java is a great competitor for it. We can create applications like console, windows, web, web services, windows services, windows phone applications, windows store apps and so on.
When dotnet was introduced JAVA is the most popular technology used for developing different kinds of applications and it is a free source too. So, to beat such a big competitor Microsoft came up with a great new creative programming and technologies. Even though .net is not a free product lot of companies are using it for developing a wide variety of applications. It has some great and unique features like language independency and simple development and deployment gave a great success in the technology world.
.NET supports programming languages like C# , VB , F# , E# , PHP Sharp , Synergy , net ruby and so on. So, any of the supported language can be used as code behind language for creating applications.
net features
1. Language Independency
.NET applications can be developed using any of the programming languages that DotNET supports. This feature is known as language independency.
2. Language Interoperability
The IL(Intermediate Language) code generated from one .NET language can be reused in any other .NET languages.
This is known as language interoperability.
C#.NET code ---(csc)----> Intermediate language code
VB.NET code ---(vbc)----> Intermediate language code
C#.NET code is converted into intermediate language code using CSC( C Sharp compiler) and VB.NET code is converted into intermediate language code using VBC( Visual Basic compiler).
3. Platform Independent
In .NET twice compilation takes place.
First source code is converted into Intermediate language code using language compilers.
Then IL code is converted into machine dependent code using CLR(Common language runtime).
4. Memory management
.NET Framework's garbage collector is used for automatic allocation and clearing of memory.
5. Easy development and deployment
Using Visual Studio and predefined methods DotNET applications can be easily developed and deployed.
Introduction to .NET IDE
IDE stands for Integrated development environment. IDE is a tool used to develop applications.
Visual studio is the IDE in DOTNET. Visual studio is a product of Microsoft.
It is a not a free source. Visual studio IDE is a powerful tool that simplifies the application development. For .NET Visual studio is the only Ide using which you can develop any type of DotNET applications.
For JAVA we have number of IDE s like Edit plus, NET beans, eclipse,..
Versions of MS VISUAL STUDIO
Product name with Supported framework versions
Visual Studio - 1.0
Visual Studio 2003 - 1.1
Visual Studio 2005 - 2.0
Visual Studio 2008 - 2.0, 3.0, 3.5
Visual Studio 2010 - 2.0, 3.0, 3.5, 4.0
Visual Studio 2012 - 2.0, 3.0, 3.5, 4.0, 4.5
Introduction to IDE Windows with shortcuts
1. Editing Window
used to design and code your .NET applications.
2. Solution Explorer
(ctrl + alt + L)
All the files in your project are explored using solution explorer under a root folder.
Double click on the file in solution explorer displays the file content in editing window.
3. Server Explorer
(ctrl + alt + S)
It explores all the sever connections.
4. Toolbar
(ctrl + alt + X)
Contains all controls used for designing your .NET applications.
You can drag and drop controls to your design pages.
automatically code is generated for that controls.
5. Properties
(F4)
It is used to modify the properties and appearances of the controls which is selected.
6. Error List
(ctrl + w+ e)
used to show the errors, warnings and messages with descriptions in the coding after compilation.
F5 is the shortcut key to start debugging and shift + F5 to stop debugging.
Intellisence
Generation of list keywords, methods,... which can be used in that context.
This a special feature in MS Visual studio that helps the developers to know the methods and other properties names which they can use in that context.
Introduction to .net code compilation
In .NET two compilations take place.
First the source code written by the developer is compiled using respective language compiler and converts into msil(microsoft intermediate language) code .
This msil code is compiled again to give native code using clr(common language runtime).
Actually JIT(Just In Time) compiler inside CLR is responsible for converting MSIL code to native code(Binary code) which is understandable by the system.
Microsoft .NET Framework
Before reading this article about what is .NET framework , first we have to understand about the history of technologies and programming languages we have before introducing .net . Microsoft introduced .net framework in the year 2000 with new features which are not available in any of the other technologies. It is a platform to develop and execute .net applications.
Microsoft has released different versions of .net framework . They are 1.0, 1.1, 2.0, 3.0, 3.5, 4.0, 4.5. It is a collection of technologies, programming languages and servers. It is an outline in which new technologies, programming languages are added in every update. Technologies inside .net framework are shown in the below figure followed by the explanation about each technology inside it. It will give you an overview knowledge about them. To use the latest features and technologies available in the framework you have to use the latest visual studio version. Visual studio comes with predefined application templates which helps the developers to work faster. Go through the last post to know more about visual studio IDE.
So, In the above image all the technologies available in different versions of .net framework are clearly shown. Each technology had its own importance and they are used for developing different types of applications. Base class library and common language runtime are the main component used for develop and execute .net applications respectively. Rest all available in the above diagram are explained below.
CLR (Common language runtime)
It is is used for executing DotNET applications.
BCL (Base class library)
It is a collection of predefined methods used for developing DotNET applications.
Win forms
It is a technology used to develop windows applications.
ASP.NET
ASP stands for active server pages.
It is a technology used to develop Web applications.
ADO.NET
ADO stands for Active X Data Objects.
It is a middleware technology used to connect front end and back end of DotNET applications.
WCF
WCF stands for Windows Communication Foundation.
It is used to create and deploy distributed applications.
WPF
WPF stands for Windows Presentation Foundation.
It is used to create rich windows applications contains rich graphics.
WF
WF stands for Windows Workflow Foundation.
It is used for developing work flow enabled applications on windows.
It targets a number of goals and offers a workflow framework for diverse applications and unifying system for human flow
Card Space
Used to store users information in digital format and present them in visual format.
It is used for identifying the users.
It is used for security.
Card space stores users information.
It stores references to users digital identities for them, presenting them to users as visual information cards.
It helps users in easy and secure accessing of applications and websites using their identities.
It also allow users to create personal cards which contains their personal information but third party issued cards are used for transactions.
LINQ
LINQ stands for Language Integrated Query.
It is written as LINQ but pronounced as link.
It is used for simplyfying the traditional querying.
It can be used along with C# code.
It is a single querying interface for multiple data sources.
ADO.NET ENTITY FRAMEWORK
It provides added features under the traditional ADO.NET.
It is used for developing data access applications by programming against a conceptual application model.
It decreases the lines of code and maintenance required for data oriented applications.
PARALLEL LINQ
Used for parallel implementation of LINQ objects.
TASK PARALLEL LIBRARY
It is a set of public types and api’s in the system.Threading and system.threading.tasks.
It is a library supports to perform tasks parallely.
LIGHTSWITCH
It is a technology used to create Line of Bussiness applications easily.
Windows Store Apps
It is a technology used to create touch based applications that are placed in the online store of Windows 8 apps.
When dotnet was introduced JAVA is the most popular technology used for developing different kinds of applications and it is a free source too. So, to beat such a big competitor Microsoft came up with a great new creative programming and technologies. Even though .net is not a free product lot of companies are using it for developing a wide variety of applications. It has some great and unique features like language independency and simple development and deployment gave a great success in the technology world.
.NET supports programming languages like C# , VB , F# , E# , PHP Sharp , Synergy , net ruby and so on. So, any of the supported language can be used as code behind language for creating applications.
net features
1. Language Independency
.NET applications can be developed using any of the programming languages that DotNET supports. This feature is known as language independency.
2. Language Interoperability
The IL(Intermediate Language) code generated from one .NET language can be reused in any other .NET languages.
This is known as language interoperability.
C#.NET code ---(csc)----> Intermediate language code
VB.NET code ---(vbc)----> Intermediate language code
C#.NET code is converted into intermediate language code using CSC( C Sharp compiler) and VB.NET code is converted into intermediate language code using VBC( Visual Basic compiler).
3. Platform Independent
In .NET twice compilation takes place.
First source code is converted into Intermediate language code using language compilers.
Then IL code is converted into machine dependent code using CLR(Common language runtime).
4. Memory management
.NET Framework's garbage collector is used for automatic allocation and clearing of memory.
5. Easy development and deployment
Using Visual Studio and predefined methods DotNET applications can be easily developed and deployed.
Introduction to .NET IDE
IDE stands for Integrated development environment. IDE is a tool used to develop applications.
Visual studio is the IDE in DOTNET. Visual studio is a product of Microsoft.
It is a not a free source. Visual studio IDE is a powerful tool that simplifies the application development. For .NET Visual studio is the only Ide using which you can develop any type of DotNET applications.
For JAVA we have number of IDE s like Edit plus, NET beans, eclipse,..
Versions of MS VISUAL STUDIO
Product name with Supported framework versions
Visual Studio - 1.0
Visual Studio 2003 - 1.1
Visual Studio 2005 - 2.0
Visual Studio 2008 - 2.0, 3.0, 3.5
Visual Studio 2010 - 2.0, 3.0, 3.5, 4.0
Visual Studio 2012 - 2.0, 3.0, 3.5, 4.0, 4.5
Introduction to IDE Windows with shortcuts
1. Editing Window
used to design and code your .NET applications.
2. Solution Explorer
(ctrl + alt + L)
All the files in your project are explored using solution explorer under a root folder.
Double click on the file in solution explorer displays the file content in editing window.
3. Server Explorer
(ctrl + alt + S)
It explores all the sever connections.
4. Toolbar
(ctrl + alt + X)
Contains all controls used for designing your .NET applications.
You can drag and drop controls to your design pages.
automatically code is generated for that controls.
5. Properties
(F4)
It is used to modify the properties and appearances of the controls which is selected.
6. Error List
(ctrl + w+ e)
used to show the errors, warnings and messages with descriptions in the coding after compilation.
F5 is the shortcut key to start debugging and shift + F5 to stop debugging.
Intellisence
Generation of list keywords, methods,... which can be used in that context.
This a special feature in MS Visual studio that helps the developers to know the methods and other properties names which they can use in that context.
Introduction to .net code compilation
In .NET two compilations take place.
First the source code written by the developer is compiled using respective language compiler and converts into msil(microsoft intermediate language) code .
This msil code is compiled again to give native code using clr(common language runtime).
Microsoft .NET Framework
Before reading this article about what is .NET framework , first we have to understand about the history of technologies and programming languages we have before introducing .net . Microsoft introduced .net framework in the year 2000 with new features which are not available in any of the other technologies. It is a platform to develop and execute .net applications.
Microsoft has released different versions of .net framework . They are 1.0, 1.1, 2.0, 3.0, 3.5, 4.0, 4.5. It is a collection of technologies, programming languages and servers. It is an outline in which new technologies, programming languages are added in every update. Technologies inside .net framework are shown in the below figure followed by the explanation about each technology inside it. It will give you an overview knowledge about them. To use the latest features and technologies available in the framework you have to use the latest visual studio version. Visual studio comes with predefined application templates which helps the developers to work faster. Go through the last post to know more about visual studio IDE.
So, In the above image all the technologies available in different versions of .net framework are clearly shown. Each technology had its own importance and they are used for developing different types of applications. Base class library and common language runtime are the main component used for develop and execute .net applications respectively. Rest all available in the above diagram are explained below.
CLR (Common language runtime)
It is is used for executing DotNET applications.
BCL (Base class library)
It is a collection of predefined methods used for developing DotNET applications.
Win forms
It is a technology used to develop windows applications.
ASP.NET
ASP stands for active server pages.
It is a technology used to develop Web applications.
ADO.NET
ADO stands for Active X Data Objects.
It is a middleware technology used to connect front end and back end of DotNET applications.
WCF
WCF stands for Windows Communication Foundation.
It is used to create and deploy distributed applications.
WPF
WPF stands for Windows Presentation Foundation.
It is used to create rich windows applications contains rich graphics.
WF
WF stands for Windows Workflow Foundation.
It is used for developing work flow enabled applications on windows.
It targets a number of goals and offers a workflow framework for diverse applications and unifying system for human flow
Card Space
Used to store users information in digital format and present them in visual format.
It is used for identifying the users.
It is used for security.
Card space stores users information.
It stores references to users digital identities for them, presenting them to users as visual information cards.
It helps users in easy and secure accessing of applications and websites using their identities.
It also allow users to create personal cards which contains their personal information but third party issued cards are used for transactions.
LINQ
LINQ stands for Language Integrated Query.
It is written as LINQ but pronounced as link.
It is used for simplyfying the traditional querying.
It can be used along with C# code.
It is a single querying interface for multiple data sources.
ADO.NET ENTITY FRAMEWORK
It provides added features under the traditional ADO.NET.
It is used for developing data access applications by programming against a conceptual application model.
It decreases the lines of code and maintenance required for data oriented applications.
PARALLEL LINQ
Used for parallel implementation of LINQ objects.
TASK PARALLEL LIBRARY
It is a set of public types and api’s in the system.Threading and system.threading.tasks.
It is a library supports to perform tasks parallely.
LIGHTSWITCH
It is a technology used to create Line of Bussiness applications easily.
Windows Store Apps
It is a technology used to create touch based applications that are placed in the online store of Windows 8 apps.
Tag :
References
Windows store apps development c# xaml Part 2 - xaml
xaml stands for extensible markup language and it is a structured xml used to design rich user interface of windows store apps.
Here i pasted the code of mainpage.xaml which is inside C# XAML windows store app created using blank app template.
I used visual studio 2013 preview to create this app.
XAML Code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
Page and Grid are the classes that are under the xaml namespaces.
xmlns stands for xml namespaces.
http://schemas.microsoft.com/winfx/2006/xaml/presentation is the default namespace in which grid and page are present.
Grid and page will also work without internet because this namespace is located locally.
xmlns:local="using:App1" - This is how we use classes under the same project by using local namespace.
Every class will have properties:
Here is the modified code in which value of background property is changed to blue which changes the background color of grid to blue.
Blue is the value which is converted into solidcolorbrush type automatically to apply the color to grid.
solidcolorbrush is the type of colors in xaml.
<Grid Background="Blue" >
</Grid>
I can do the same thing like changing background color of grid to blue with the below complex code in which i mentioned the type of the color. Here there is no need of converting value to that color type which is happened before.
<Grid >
<Grid.Background>
<SolidColorBrush Color="Blue"></SolidColorBrush>
</Grid.Background>
</Grid>
To use linear gradient colors you can use the below xaml code but you can also do it simply by modifying the properties of grid control.
For better and easy designing blend should be used
<Grid>
<Grid.Background>
<LinearGradientBrush >
<GradientStop Color="Blue" Offset="0.625"/>
<GradientStop Color="Red" Offset="0.628"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
Now i will show you how to add some content in the grid. I am adding button control inside the grid. Content on the button is click me. This can be done using below code.
<Grid Background="Black">
<Button>Click me</Button>
</Grid>
Dependency property
Now execute the application once and check for the user control in toolbox under the tab named with your project name.
and the code i got for using my usercontrol is as below.
<local:MyUserControl1 />
You can use this user control like other controls which are available in your toolbox.
Document outline window in visual studio is used to know about the hierarchy of controls in xaml page.
Here i pasted the code of mainpage.xaml which is inside C# XAML windows store app created using blank app template.
I used visual studio 2013 preview to create this app.
XAML Code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
xmlns stands for xml namespaces.
http://schemas.microsoft.com/winfx/2006/xaml/presentation is the default namespace in which grid and page are present.
Grid and page will also work without internet because this namespace is located locally.
xmlns:local="using:App1" - This is how we use classes under the same project by using local namespace.
Every class will have properties:
Here is the modified code in which value of background property is changed to blue which changes the background color of grid to blue.
Blue is the value which is converted into solidcolorbrush type automatically to apply the color to grid.
solidcolorbrush is the type of colors in xaml.
<Grid Background="Blue" >
</Grid>
I can do the same thing like changing background color of grid to blue with the below complex code in which i mentioned the type of the color. Here there is no need of converting value to that color type which is happened before.
<Grid >
<Grid.Background>
<SolidColorBrush Color="Blue"></SolidColorBrush>
</Grid.Background>
</Grid>
To use linear gradient colors you can use the below xaml code but you can also do it simply by modifying the properties of grid control.
For better and easy designing blend should be used
<Grid>
<Grid.Background>
<LinearGradientBrush >
<GradientStop Color="Blue" Offset="0.625"/>
<GradientStop Color="Red" Offset="0.628"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
Now i will show you how to add some content in the grid. I am adding button control inside the grid. Content on the button is click me. This can be done using below code.
<Grid Background="Black">
<Button>Click me</Button>
</Grid>
You can also add button inside a button using below code
<Grid Background="Black">
<Button>
<Button>Click me</Button>
</Button>
</Grid>
Simple syntax for adding content inside button is as follows
<Button Content="Click me" />
Below code creates a red color rectangle inside a button
Simple syntax for adding content inside button is as follows
<Button Content="Click me" />
Below code creates a red color rectangle inside a button
<Grid Background="Black">
<Button>
<Rectangle Width="100" Height="100" Fill="Red" ></Rectangle>
</Button>
</Grid>
But you cannot add two control inside a button ie., most of the controls will allow only one content inside it.
In this case you have to use stackpanel.
stackpanel is a control that can hold more than one child control inside it.
Using the below code i added three rectangles with different colors inside a button using stackpanel.
In this case you have to use stackpanel.
stackpanel is a control that can hold more than one child control inside it.
Using the below code i added three rectangles with different colors inside a button using stackpanel.
<Grid Background="Black">
<Button>
<StackPanel>
<Rectangle Width="100" Height="100" Fill="Red" ></Rectangle>
<Rectangle Width="100" Height="100" Fill="blue" ></Rectangle>
<Rectangle Width="100" Height="100" Fill="Green" ></Rectangle>
</StackPanel>
</Button>
</Grid>
Dependency property
property that is not existed till we mention a property for an item or a control is known as dependency property.
For example we have a listview for which we have binded 100 items. now every listview item will not have all default properties because it requires very huge memory to store those properties. In this case all the items will have dependency properties. The properties which we mentioned in the code are existing.
User control
User control is a reusable control which contain XAML UI that can used anywhere any no. of times.
To create xaml user control in xaml c# windows store app
Right click on the project name in the solution explorer and click on add new item to select user control from the list of available items.
I have created the usercontrol with the below code
For example we have a listview for which we have binded 100 items. now every listview item will not have all default properties because it requires very huge memory to store those properties. In this case all the items will have dependency properties. The properties which we mentioned in the code are existing.
User control
User control is a reusable control which contain XAML UI that can used anywhere any no. of times.
To create xaml user control in xaml c# windows store app
Right click on the project name in the solution explorer and click on add new item to select user control from the list of available items.
I have created the usercontrol with the below code
<UserControl
x:Class="App1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
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">
<Grid>
<StackPanel>
<Rectangle Fill="Red" Height="100"></Rectangle>
<Rectangle Fill="blue" Height="100"></Rectangle>
<Rectangle Fill="Green" Height="100"></Rectangle>
</StackPanel>
</Grid>
</UserControl>
Now execute the application once and check for the user control in toolbox under the tab named with your project name.
and the code i got for using my usercontrol is as below.
<local:MyUserControl1 />
You can use this user control like other controls which are available in your toolbox.
Document outline window in visual studio is used to know about the hierarchy of controls in xaml page.
Windows store apps development c# xaml Part 1
Windows store app has to created for desktop, laptops and arm devices like tablets.
On the right side we will have charms. In charms first one is search charm which is used to search everywhere or in a specific app.
share charm is used to share content with other apps by selecting the specific application with which you want to share.
devices charm is used to access devices.
settings charm have options to configure.
Windows store apps are different from windows applications. They will occupy full screen, two apps cannot overlap each other.
We can see live tiles on the start screen which displays information about updates coming from the apps.
They invites users to interact with the apps by displaying some important and interesting information.
Tiles contains logos of the apps and they are the starting point to launch the app.
Tiles
If it takes more than 5 seconds to launch the app it will be terminated after showing the splash screen.
Splash screen the first full screen image displayed when you click on the tile of an app.
Navigation in your app is done using navigation bar. Navigation bar is present at the top of the app which comes out with a mouse right click on with a swipe from the top edge.
App bar is used to display commands of the app in the bottom edge of the app. It contains context based commands and global commands. Global commands are displayed on the right side of the appbar whereas the context based commands are displayed on the left side of the appbar.
Windows store apps will not display all the content directly on the app. It should be clean with data which is required and the unnecessary data should be displayed when user navigated to that page.
Toast notifications are the messages which displays some important messages. They are also know as push notifications and this can be done using windows azure.
File picker is used to select files from the system or from other locations. Native file picker allows the user to select a file from hard disk or skydrive.
You can store data, settings and files in roaming folder which is a magical space in cloud that sync data in all devices and anywhere.
Every app will have app manifest file in which all the capabilities has to mentioned. It says where your app is using web, camera, ...
Windows design language is recommended but sometimes it is optional when you a good reason to violate them.
It is used to design your apps to give excellent and clean view same as windows 8 operating system.
Do more with less and give the enough room for the content to breath, Create good experience along with good gui, fast and fluid is required for every app which can be done using windows 8 default animations, Digitialization is required in design to explain more with simple 2d designs,
Windows store apps can be uploaded to store to make it visible to the world in the online store for every user who is using windows 8 and 8.1 operating system.
On the right side we will have charms. In charms first one is search charm which is used to search everywhere or in a specific app.
share charm is used to share content with other apps by selecting the specific application with which you want to share.
devices charm is used to access devices.
settings charm have options to configure.
Windows store apps are different from windows applications. They will occupy full screen, two apps cannot overlap each other.
We can see live tiles on the start screen which displays information about updates coming from the apps.
They invites users to interact with the apps by displaying some important and interesting information.
Tiles contains logos of the apps and they are the starting point to launch the app.
Tiles
If it takes more than 5 seconds to launch the app it will be terminated after showing the splash screen.
Splash screen the first full screen image displayed when you click on the tile of an app.
Navigation in your app is done using navigation bar. Navigation bar is present at the top of the app which comes out with a mouse right click on with a swipe from the top edge.
App bar is used to display commands of the app in the bottom edge of the app. It contains context based commands and global commands. Global commands are displayed on the right side of the appbar whereas the context based commands are displayed on the left side of the appbar.
Windows store apps will not display all the content directly on the app. It should be clean with data which is required and the unnecessary data should be displayed when user navigated to that page.
Toast notifications are the messages which displays some important messages. They are also know as push notifications and this can be done using windows azure.
File picker is used to select files from the system or from other locations. Native file picker allows the user to select a file from hard disk or skydrive.
You can store data, settings and files in roaming folder which is a magical space in cloud that sync data in all devices and anywhere.
Every app will have app manifest file in which all the capabilities has to mentioned. It says where your app is using web, camera, ...
Windows design language is recommended but sometimes it is optional when you a good reason to violate them.
It is used to design your apps to give excellent and clean view same as windows 8 operating system.
Do more with less and give the enough room for the content to breath, Create good experience along with good gui, fast and fluid is required for every app which can be done using windows 8 default animations, Digitialization is required in design to explain more with simple 2d designs,
Windows store apps can be uploaded to store to make it visible to the world in the online store for every user who is using windows 8 and 8.1 operating system.
Issue: Extension of file changing when it is saved from asp.net report viewer in ie8
Code to resolve this issue for Proper extension save report in either .PDF,.DOCX,.XLXSX
-------------------------------------------------------------------------------------
protected void Page_Init(object sender, EventArgs e)
{
ReportViewer1.LocalReport.DisplayName = "Reports";
}
-------------------------------------------------------------------------------------
protected void Page_Init(object sender, EventArgs e)
{
ReportViewer1.LocalReport.DisplayName = "Reports";
}
Tag :
ASP.NET
Visual studio 2012 Team Foundation server
Using Team Foundation Server you can connect with your team mates with visual studio where you can share your code within your team.
Link to install
Team Foundation Server 2012
with Update 3 90-day trial
http://www.microsoft.com/visualstudio/eng/downloads
link to install TFS 2013 RC
http://www.microsoft.com/visualstudio/eng/2013-downloads
link for visual studio 2013 feedback client download
http://www.microsoft.com/en-us/download/details.aspx?id=39339
Link to install
Team Foundation Server 2012
with Update 3 90-day trial
http://www.microsoft.com/visualstudio/eng/downloads
link to install TFS 2013 RC
http://www.microsoft.com/visualstudio/eng/2013-downloads
link for visual studio 2013 feedback client download
http://www.microsoft.com/en-us/download/details.aspx?id=39339
Tag :
References
Application Life cycle Management(ALM)
In MS office you can use the option called storyboarding to design the architecture of your app.
You can design the app structure and modules using the inbuilt storyboard shapes available in powerpoint.
Snapshot of my design using storyboarding is as follows
Team foundation server is used to create team projects using visual studio 2012.
Your project should start with the minimum features and other features can be updated in the later releases.
End to the day meetings required to check the day progress of the team mates and also to check wheather all the teammates are moving in the same direction to reach the goal.
If you find something going out there should be an immediate cut off for that.
Every small development should go through testing to get feedback immediately. so that they can be fixed easily to improve quality.
Every small iterations with high quality results in good quality of product output in less time.
You can design the app structure and modules using the inbuilt storyboard shapes available in powerpoint.
Snapshot of my design using storyboarding is as follows
Your project should start with the minimum features and other features can be updated in the later releases.
End to the day meetings required to check the day progress of the team mates and also to check wheather all the teammates are moving in the same direction to reach the goal.
If you find something going out there should be an immediate cut off for that.
Every small development should go through testing to get feedback immediately. so that they can be fixed easily to improve quality.
Every small iterations with high quality results in good quality of product output in less time.
Tag :
References
vbscript inputbox control (cannot mask text inside it like password texboxt)
 |
| vbscript inputbox |
It comes with a textbox and two buttons(ok and cancel)
vbscript code to take text from user from inputbox and displaying it in message box
strUser=Inputbox("Enter Username")
msgbox strUser
So in the above code strUser variable is used to store value entered in inputbox.
msgbox is used to display value present in the variable.
This vbscript inputbox cannot work like password box by masking text inside it.
But it is possible to mask inputbox text like password if you use IE object using the below code.
VBScript code to mask text inside it like password textbox
Dim bPasswordBoxWait ' A required global variable
wsh.echo "You entered:", PasswordBox("Enter your password")
Function PasswordBox(sTitle)
set oIE = CreateObject("InternetExplorer.Application")
With oIE
.FullScreen = True
.ToolBar = False : .RegisterAsDropTarget = False
.StatusBar = False : .Navigate("about:blank")
While .Busy : WScript.Sleep 100 : Wend
With .document
With .ParentWindow
.resizeto 400,100
.moveto .screen.width/2-200, .screen.height/2-50
End With
.WriteLn("<html><body bgColor=Silver><center>")
.WriteLn("[b]" & sTitle & "[b]")
.WriteLn("Password <input type=password id=pass> " & _
"<button id=but0>Submit</button>")
.WriteLn("</center></body></html>")
With .ParentWindow.document.body
.scroll="no"
.style.borderStyle = "outset"
.style.borderWidth = "3px"
End With
.all.but0.onclick = getref("PasswordBox_Submit")
.all.pass.focus
oIE.Visible = True
bPasswordBoxOkay = False : bPasswordBoxWait = True
On Error Resume Next
While bPasswordBoxWait
WScript.Sleep 100
if oIE.Visible Then bPasswordBoxWait = bPasswordBoxWait
if Err Then bPasswordBoxWait = False
Wend
PasswordBox = .all.pass.value
End With ' document
.Visible = False
End With ' IE
End Function
Sub PasswordBox_Submit()
bPasswordBoxWait = False
End Sub
Tag :
vbscript
wcf service to insert data into database from asp.net webform
Create a new webservice which creates two files in appcode folder. they are service and iservice.
operationcontract is the method that is shared.
code in iservice.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data;
using System.Data.SqlClient;
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IConnectService" in both code and config file together.
[ServiceContract]
public interface IConnectService
{
[OperationContract]
string InsertUserRegDetails(string emailid,string pwd,string gender);
}
code inside service.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the
class name "ConnectService" in code, svc and config file together.
public class ConnectService : IConnectService
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings
["ConStr"].ConnectionString);
public string InsertUserRegDetails(string emailid, string pwd, string gender)
{
string Status;
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlCommand cmd = new SqlCommand("insert into tbl_Register values
(@emailid,@pwd,@gender)", con);
cmd.Parameters.AddWithValue("@emailid", emailid);
cmd.Parameters.AddWithValue("@pwd", pwd);
cmd.Parameters.AddWithValue("@gender", gender);
int result = cmd.ExecuteNonQuery();
if (result == 1)
{
Status = emailid + " registered successfully";
}
else
{
Status = emailid + " could not be registered";
}
con.Close();
return Status;
}
}
code in asp.net web form class to use webservice
operationcontract is the method that is shared.
code in iservice.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data;
using System.Data.SqlClient;
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IConnectService" in both code and config file together.
[ServiceContract]
public interface IConnectService
{
[OperationContract]
string InsertUserRegDetails(string emailid,string pwd,string gender);
}
code inside service.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the
class name "ConnectService" in code, svc and config file together.
public class ConnectService : IConnectService
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings
["ConStr"].ConnectionString);
public string InsertUserRegDetails(string emailid, string pwd, string gender)
{
string Status;
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlCommand cmd = new SqlCommand("insert into tbl_Register values
(@emailid,@pwd,@gender)", con);
cmd.Parameters.AddWithValue("@emailid", emailid);
cmd.Parameters.AddWithValue("@pwd", pwd);
cmd.Parameters.AddWithValue("@gender", gender);
int result = cmd.ExecuteNonQuery();
if (result == 1)
{
Status = emailid + " registered successfully";
}
else
{
Status = emailid + " could not be registered";
}
con.Close();
return Status;
}
}
code in asp.net web form class to use webservice
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ConnectServiceNamespace;
/// <summary>
/// Summary description for ConnectClass
/// </summary>
public class ConnectClass
{
ConnectServiceClient c = new ConnectServiceClient();
public ConnectClass()
{
//
// TODO: Add constructor logic here
//
}
public string C_Register(string emailid, string pwd, string gender)
{
string status = c.InsertUserRegDetails(emailid,pwd,gender);
return status ;
}
}
sql queries
create database db_connect
use db_connect
create table tbl_Register(sno bigint identity primary key,emailid varchar(50) unique,pwd varchar(15),gender varchar(10))
insert into tbl_Register(emailid,pwd,gender) values('sudhir@gmail.com','sudhir','Male')
select * from tbl_Register
 |
| MS Dotnet Ninja |
Tag :
ASP.NET
sql server stored procedure variables parameters and if condition
sql queries in ms sql server for creating a table used to store registration data using stored procedure which takes inputs using input parameters.
Before inserting the email id given as input is checked wheather it is already existing in the table or not.
To check select command which returns the count of rows existing with that emailid.
The count returned by select command is stored in a variable named as u.
Variable u is created using a keywork declare.
In the below example i also used if condition to check the value present in variable u.
sql queries in ms sql server
create database db_connect
use db_connect
create table tbl_Register(sno bigint identity primary key,emailid varchar(50) unique,pwd varchar(15),gender varchar(10))
insert into tbl_Register(emailid,pwd,gender) values('sudhir@gmail.com','sudhir','Male')
select * from tbl_Register
alter procedure sp_register
@emailid varchar(50),
@pwd varchar(15),
@gender varchar(10)
as begin
--check emailid is unique
declare @u int=0
select @u=(select count(emailid) from tbl_Register where emailid=@emailid )
--register with unique emailid only
if(@u=0)
begin
insert into tbl_Register values(@emailid,@pwd,@gender )
end
end
exec sp_register 'govind@gmail.com','rani','Female'
Before inserting the email id given as input is checked wheather it is already existing in the table or not.
To check select command which returns the count of rows existing with that emailid.
The count returned by select command is stored in a variable named as u.
Variable u is created using a keywork declare.
In the below example i also used if condition to check the value present in variable u.
sql queries in ms sql server
create database db_connect
use db_connect
create table tbl_Register(sno bigint identity primary key,emailid varchar(50) unique,pwd varchar(15),gender varchar(10))
insert into tbl_Register(emailid,pwd,gender) values('sudhir@gmail.com','sudhir','Male')
select * from tbl_Register
alter procedure sp_register
@emailid varchar(50),
@pwd varchar(15),
@gender varchar(10)
as begin
--check emailid is unique
declare @u int=0
select @u=(select count(emailid) from tbl_Register where emailid=@emailid )
--register with unique emailid only
if(@u=0)
begin
insert into tbl_Register values(@emailid,@pwd,@gender )
end
end
exec sp_register 'govind@gmail.com','rani','Female'
|
| MS Dotnet ninja |
Tag :
sql server
vbscript code to RunActiveXControlsAndPlug-ins in ie settings
Copy the below code in a text document ie., in notepad.
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable RunActiveXControlsAndPlug-ins in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1200"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable RunActiveXControlsAndPlug-ins in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1200"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
Tag :
vbscript
vbscript code to enable download_signed_ActiveX_component in ie settings
Copy the below code in a text document ie., in notepad.
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable download_signed_ActiveX_component in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1001"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable download_signed_ActiveX_component in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1001"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
Tag :
vbscript
vbscript code to enable download_Unsigned_ActiveX_component in ie settings
Copy the below code in a text document ie., in notepad.
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable download_Unsigned_ActiveX_component in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1004"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable download_Unsigned_ActiveX_component in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1004"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
Tag :
vbscript
vbscript code to enable download_signed_ActiveX_component in ie settings
Copy the below code in a text document ie., in notepad.
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable download_signed_ActiveX_component in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1001"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it to modify ie settings
vbscript code to enable download_signed_ActiveX_component in ie settings
HKEY_CURRENT_USER = &H80000001
strComputer = "."
Set objReg = GetObject("winmgmts:\\" & strComputer & "\root\default:StdRegProv")
strKeyPath = "Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1"
objReg.CreateKey HKEY_CURRENT_USER, strKeyPath
ValueName = "1001"
dwValue = 0
objReg.SetDWORDValue HKEY_CURRENT_USER, strKeyPath, ValueName, dwValue
Tag :
vbscript
VBScript code to add trusted sites in ie settings
vbscript code to add trusted sites in ie.
Copy the below code in a text document ie., in notepad.
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it and add site links into trusted sites in ie settings
vbscript code for adding trusted site in ie settings:
AddTrustedSite "http://ipds.gujarat.gov.in"
AddTrustedSite "http://pds.gujarat.gov.in"
Function AddTrustedSite(strDomainName)
Set WshShell = Wscript.CreateObject("Wscript.Shell")
strRegKey = "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Domains\"
WshShell.RegWrite strRegKey & strDomainName & "\", "", "REG_SZ"
WshShell.RegWrite strRegKey & strDomainName & "\*", "2", "REG_DWORD"
End Function
Copy the below code in a text document ie., in notepad.
go through the code and replace the urls with your custom urls.
save it with .vbs extension.
double click on that vbs file to execute it and add site links into trusted sites in ie settings
vbscript code for adding trusted site in ie settings:
AddTrustedSite "http://ipds.gujarat.gov.in"
AddTrustedSite "http://pds.gujarat.gov.in"
Function AddTrustedSite(strDomainName)
Set WshShell = Wscript.CreateObject("Wscript.Shell")
strRegKey = "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Domains\"
WshShell.RegWrite strRegKey & strDomainName & "\", "", "REG_SZ"
WshShell.RegWrite strRegKey & strDomainName & "\*", "2", "REG_DWORD"
End Function
Tag :
vbscript
Creating HTML5 game using Construct 2 gaming tool
 |
| Construct 2 html5 gaming tool |
Steps to create game:
construct 2 used to create w8 game:
it is one of the engine to create.
gamemaker is alternative.
scirra.com to download construct 2
new project - new empty project
rename project name-bulbbattle
rename layout name-main
rename eventsheets- mainevents
you can have any no.of layouts and event sheets
one event should map one layout.
event sheet is used to write js code.
white place is layout. dashed line is the window. ctrl + for zoomin.select the project(bulbbattle and change the properties)
window size-1366,768
and
same layout for main.
use corel draw x6 for designing assets.
open corel draw x6 - create a new black document with default size.
design object and export it in .png format(take care about the size and large size helps not to get blur).
bring the assets to game by simply drag and drop them to construct 2 window layout.
or right click - insert new object - sprite - enter name click on insert to open a windows - load a png image which is already created - click on last tool to set points for collision polygon.
click on second last option to set origin point - specify point and close it.
now after adding to objects on the window.
click on the object to select it. properties - behaviour - 8 direction (to move the character which is controlled by user using arrow keys on the keyboard).
to increase the speed - select object - prop - max speed, acceleration - increase
now click f5 to see the output on the browser and use arrow keys to control but character goes outside the window by default.
object - prop - behaviour - add - boundtolayout
events are programming logic of your game.
go to main events - add event - click on system - click on every x seconds(last)-interval=0.5; - create a condition with a click on add action - select system- create an object -object to create - layer 0,100,100
select second object - add behaviour - bullet motion to move it in linear.
now for every half second second object is created and moved with bullet behaviour.
now modify x,y by double click on create object and x=-100,y=-100 to move object away from screen
right click on the window- add global variable - Name:spawnlocation,type:text - ok
click on add action below system event -system - next - set value(for global variable) - choose("T","R","B","L")
create sub event :
right click on the space before system(event) - add - add sub event - system -
compare variable - spanvariable - equalto - "T"
click on add action beside second system event - select second object - click on next - set postion
x= random(0,LayoutWidth)
y=0
click on add action below set postion event - select second object - set angle of motion - random(45,135) - this is general downward direction.
now select the whole second event (system with spawnvariable="T",setposition,setbulletangle)
copy and paste it three more times and change spawnvariable =R,B,L
check the tree structure
-global variable with no number at top.
-system main event - 1
-sub events below system -2,3,4
forspawnlocation="R" -modifysetposition to
x: LayoutWidth
y: random(0,LayoutHeight)
angle of motion: random(135,215)
forspawnlocation="B" -modifysetposition to
x: random(0,LayoutWidth)
y:LayoutHeight
angle of motion: random(225,315)
forspawnlocation="L" -modifysetposition to
x:0
y:random(0,LayoutHeight)
angle of motion: random(45,-45)
right click on the window to create a global variable - name:initialsize, number, 4, constant
create another global variable -
name: scalemultiplier
intialvalue: 0.04, number, constant
now go to main windows - select first object-
properties - add instance variable -
name:size,number,0
select second object - prop - add instance variable -
name:size,number,0
Create a new main event with a click on new event link
-system - on start of layout - drag and drop this event to starting below global variable - no. as 1 above every 0.5 sec event
click on add action for on start of layout event - select first object- set value - size: initialsize
now to set the size of the second objects:
click on the link - add action - below - set spawnvariable to choose("T","R","B","L") ie., below every o.5 sec event
select object2 - next - set value - next - size,random(1,10) -done
create a new event(3) - system - every tick
add action to it - first object - set scale - scale_multiplier * self.size
add one more action for the same 3rd event - second object - set scale - scale_multiplier * secondobjectname.size
to implement collision - create a new event-
first object - on collision with another object - click to choose -
second object - done
create a sub event - system - compare two values - firstobject.size >= secondobject.size - add action - secondobject - destroy
to add else event:
right click on the space before system(size greater than other)
create add else event which comes under collision event - add action - first object - set value - size: initialsize
add action below destroy - object one - add to - size - 3
 |
| HTML5 Construct 2 game example with step by step explanation |
Tag :
HTML5 gaming
HTML5 Javascript Windows Store apps WebView Control
WebView control in HTML5 javascript windows store apps is used to display a webpage on the app.
It is same like iframe control but it is having some new features which iframe doesn't have they are as follows:It is far more compatible, No more frame busting, Independent navigation stack, navigateToString.
It is like a browser running inside an app which is having its own navigation stack.
You can send some html code from a string as a source to webview control.
Html code
<x-ms-webview src="http://codefoster.com" height="1000" width="1000"></x-ms-webview>
This is used to display codefoster.com website home page in a control inside store app.
You can also give source as html content in string from to display it as web content in webview control using the below html5 and javascript code.
Html code of webview control
<x-ms-webview ></x-ms-webview>
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
element.querySelector("x-ms-webview").navigateToString("This is an <b>arbitrary</b> HTML string that I can navigate my WebView to.");
}
});
})();
HTML5 Javascript Windows store apps Appbar Control
App bar means application bar which is used to display commands at the bottom of the app.
If you add the appbar at the top of your app it is known as navigation bar which contains all the content present in appbar but used to navigation from one page to other page.To bring app bar out:
With Mouse: right click
With Touch: swipe from bottom edge of the device
You can create an appbar winjs control by using attribute data-win-control="WinJS.UI.AppBar".We can create appbar button using attribute data-win-control="WinJS.UI.AppBarCommand".
data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}
The above attribute in appbar button describes about appbar button features.
id - used to control the appbar button in the javascript code.
label - this is the text displayed below the appbar button.
icon - the value of this attribute gives the inbuilt icon image for the button so this should be inbuilt keyword.
section - global is used to display this button on the right side of the appbar which is known as global commands displaying location.
tooltip - message displayed when the user cursor is hover the button.
type - seperator is used to divide two appbar command buttons with a line between them.
In the app bar we also added custom content by adding an attribute called
type - content is used to add custom content like paragraph or other controls inside appbar.
Users expect the appbar to be very simple with common commands but we can also use custom content in appbar violation rules if you think it will be very useful for your app to improve user experience.
The code i have given here is created in html5 windows store app using navigation app:
html5 code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0.Preview/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to SudhirHTML5App!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="MessageLabel"></div>
<div class="appbarcommand_appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}">
</button>
<hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}">
</button>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'textButton',type:'content',section:'selection',firstElementFocus:select('p')}">
<div style="width: 100px; height: 100px; border: solid 1px green;">
<p>hi</p>
</div>
</div>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'inputButton',type:'content',section:'selection',firstElementFocus:select('input')}">
<div style="width: 100px; height: 100px; border: solid 1px green;">
<input style="width: 90px; border: solid 1px gray;" />
</div>
</div>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'inputButton',type:'content',section:'selection',firstElementFocus:select('.boatType')}">
<div style="width: 100px; height: 100px; border: solid 1px green;">
<select class="boatType" style="width: 90px;">
<option>Sudhir</option>
<option>Ram</option>
<option>Gopi</option>
<option>Vishal</option>
</select>
</div>
</div>
<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'videoButton',type:'content',section:'selection'}">
<video src="/demos/html5video/butterfly.mp4" autoplay loop controls style="width: 100px; height: 100px;"></video>
</div>
</div>
</section>
</div>
</body>
</html>
Javascript code
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
document.getElementById("cmdAdd").addEventListener(
"click", doClickAdd, false);
document.getElementById("cmdRemove").addEventListener(
"click", doClickRemove, false);
document.getElementById("cmdDelete").addEventListener(
"click", doClickDelete, false);
document.getElementById("cmdCamera").addEventListener(
"click", doClickCamera, false);
}
});
// Command button functions
function doClickAdd() {
MessageLabel.innerText= "Add button pressed";
}
function doClickRemove() {
MessageLabel.innerText = "do button pressed";
}
function doClickDelete() {
MessageLabel.innerText = "delete button pressed";
}
function doClickCamera() {
MessageLabel.innerText = "camera button pressed";
}
})();
 |
| Windows Store HTML5 javascript app with appbar control |