Monday, September 7, 2015

Windows Phone Controls - Example

   <StackPanel>
            <!--TextBlock Control-->
            <TextBlock Text=" Text Block" FontSize="28"></TextBlock>

            <!--TextBox Control-->
            <TextBox x:Name="txtName" Text="TextBox"></TextBox>

            <!--Border Control-->
            <Border   CornerRadius="10" Background="Red"
                      Height="50" BorderBrush="Yellow" ></Border>

            <!--CheckBox Control-->
            <CheckBox IsChecked="True"></CheckBox>

            <!--ComboBox (Dropdown) Control-->
            <ComboBox>
                <ComboBoxItem Content="India" IsSelected="True" ></ComboBoxItem>
                <ComboBoxItem Content="USA"></ComboBoxItem>
                <ComboBoxItem Content="Srilanka"></ComboBoxItem>
                <ComboBoxItem Content="UK"></ComboBoxItem>
            </ComboBox>
         
            <!--Image Control-->
            <Image Source="Images\images.jpg" Height="100"></Image>

            <!--Image Control-->
            <Rectangle Height="50"  Fill="Yellow" />

            <!--Time Control-->
            <TimePicker >          
            </TimePicker>
         
      </StackPanel>


Windows Phone Layout Panels

Grid
Grid is the default container where we can arrange the elements in table format.

<Grid>  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition Width="*"></ColumnDefinition>  
        <ColumnDefinition Width="*"></ColumnDefinition>  
        <ColumnDefinition Width="*"></ColumnDefinition>  
    </Grid.ColumnDefinitions>  
    <Grid.RowDefinitions>  
        <RowDefinition Height="*"></RowDefinition>  
        <RowDefinition Height="*"></RowDefinition>  
        <RowDefinition Height="*"></RowDefinition>  
    </Grid.RowDefinitions>  
    <Button Grid.Row="0" Grid.Column="0" Content="0-0" HorizontalAlignment="Center" Background="Black"></Button>  
    <Button Grid.Row="2" Grid.Column="2" Content="2-2" HorizontalAlignment="Center" Background="Green"></Button>  
    <Button Grid.Row="1" Grid.Column="1" Content="1-1" HorizontalAlignment="Center" Background="Yellow"></Button>  
</Grid>  



StackPanel
By using StackPanel we can arrange the elements vertically or horizontally.We can arrange child elements in a panel without affecting the size of the lements.

 <StackPanel Background="White" Height="500px">
            <!-- Horizontal Menu-->
            <StackPanel Background="Gray" Orientation="Horizontal" Height="199">
                <TextBlock Text="Text 1" FontSize="30" Margin="2 40" Foreground="Black"></TextBlock>
                <TextBlock Text="Text 2" FontSize="30" Margin="2 40" Foreground="Red"></TextBlock>
            </StackPanel>

            <!-- Vertical Menu-->
            <StackPanel Background="LightCyan" Orientation="Vertical" Height="199">
                <TextBlock  Text="Text 1" FontSize="30"  Foreground="Black" SelectionHighlightColor="#FF531BD4"></TextBlock>
                <TextBlock Text="Text 2" FontSize="30"  Foreground="Red"></TextBlock>
            </StackPanel>
        </StackPanel>

  



Canvas
Canvas is used to place the control by specifying the position in pixel format.We can use Canvas.Left, Canvas.Right,Canvas.Bottom and Canvas.Top.

 <Canvas x:Name="canvaslayout" Width="300px" Height="600px" Background="GreenYellow"  >
            <Button Canvas.Left="90px" Canvas.Top="250px" Background="Gray" Content="Button Control"   FontSize="30"></Button>
            <TextBlock Canvas.Left="40px" Canvas.Top="100px" Text="TextBlock" FontSize="40"></TextBlock>
        </Canvas>


Apply Inner and Global Style's To Windows Phone Controls

Open Visual Studio 
File --> Project --> New Project
Select Windows Phone Apps



After Create Project, Open the Main.xaml
Create TextBlock Control


Write Inner Style in Page

 <Page.Resources>
        <Style x:Key="tbInnerStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Sege UI"></Setter>
            <Setter Property="FontSize" Value="28"></Setter>
        </Style>
    </Page.Resources>

We can apply Inner Style to TextBlock control
  <TextBlock Text="Hello Windows Phone" Style="{StaticResource tbInnerStyle}" >
            </TextBlock>



Press F5 and See Inner Style Output here.



Now we are going apply Global Style to Button Control
Open the App.xaml file and write global style

 <Application.Resources>
        <Style x:Key="tbGlobalStyle" TargetType="Button">
            <Setter Property="FontFamily" Value="Sege UI"></Setter>
            <Setter Property="Width" Value="250"></Setter>
            <Setter Property="Foreground" Value="Green"></Setter>
        </Style>
    </Application.Resources>


After that style key name: tbGlobalStyle apply to button 
 <Button Style="{StaticResource tbGlobalStyle}" Content="Global Style Button" >
 </Button>



Press F5 See Global Style Button Output.



WPF Interview Questions and Answers

What is WPF?
WPF stands for Windows Presentation Foundation. It is an application programming Interface for developing rich UI on Windows. WPF is introduced in .NET 3.0. By the use of WPF we can create two and three dimensional graphics, animations etc.


What is XAML and how it is related to WPF?
XAML is a new mark up language which is used for defining UI elements and its relationships with other UI elements. The XAML is introduced by WPF in .NET 3.0 WPF uses XAML for UI design.


Does XAML file compiled or Parsed?
By default XAML files are compiled, But we do have options to let it be parsed.


What is the root namespace used for Animations and 3D rendering in WPF?
System.Windows.Media namespace.


What are the names of main assemblies used by WPF?
a)WindowsBase
b)PresentationCore
c)PresentationFoundation


Describe the types of documents supported by WPF?
There are two kinds of document supported by WPF

a)Flow format:Flow format document adjusts as per screen size and resolution
b)Fixed Format:Fixed Format document does not adjust as per screen size and resolution


What namespaces are needed to host a WPF control in Windows form application?
The following namespaces needs to be referenced:

a)PresentationCore.dll
b)PresentationFramework.dll
c)UIAutomationProvider.dll
d)UIAutomationTypes.dll
e)WindowsBase.dll


What is dependency property?
 A property that is support by the WPF property system is known as a dependency property.

Example:

<StackPanel Canvas.Top="50" Canvas.Left="50"  DataContext="{Binding Source={StaticResource XmlTeamsSource}}">
  <Button Height=”30” width=”80” Content="{Binding XPath=Team/@TeamName}" Background="Red"  Style="{StaticResource GreenButtonStyle}"/>
</StackPanel>

Here Height, width, Baground etc are regular property but DataContext, Style, ‘Canves.Lef’t, ‘Canves .right ‘are the dependency on this example, that is call dependency property. I thing, all WPF binding control are dependency property.


What is routed event in wpf?
A routed event is a CLR event that is support by an instance of the Routed Event class and is processed by the Windows Presentation Foundation (WPF) event system.

For example:
 Event bubbling is good concept routed event.

<StackPanel Background="LightGray" Orientation="Horizontal" Button.Click="CommonClickHandler"> 
    <Button Name="YesButton" Width="Auto" >Yes</Button>
</StackPanel>
// Provide CLR accessors for the event
public event RoutedEventHandler Tap
{
        add { AddHandler(TapEvent, value); }
        remove { RemoveHandler(TapEvent, value); }
}


What does mean "x:" prefix in xaml code?
It is an xml namespace that usually refers to the xaml namespace.
Example:
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"


What is XBAP Stands?
XBAP Stands for XAML Browser application.


What is a .baml file?
An XAML file is compiled in .net, become a file with a .baml extension, which stand for binary XAML.


Types of window in wpf?
Normal window
Navigate window
Page Window


What is dispatcher Object?
It is the main of all WPF controls which Take care UI Thread.


What are the method in DependencyObject in WPF?
ClearValue
SetValue
GetValue


What types of control in wpf?
Content control
Layout control
Item control


Can you create Window service in WPF?
No! , It use for UI, we create a cervices using c# or other language.


What is XBAP?
XBAP is stand for XAML Browser Application which is a new Windows technology used for creating Rich Internet Applications.
While windows applications are normally compiled to an .exe file, browser applications are compiled to an extension .xbap and can be run inside Internet Explorer.
Xbap applications are run within a security sandbox to prevent untrusted applications from controlling local system resources. (e.gdeleting local files)


What is the differenece between System.Windows.dll and System.Windows.Browser.dll?
1)System.Windows.dll:-This Assembly includes many of the classes for building Silverlight user interfaces,including basic elements,Shapes and Brushes,classes that support animation and databinding,and the version of the FileOpenDialog that works with isolated storage.
2)System.Windows.Browser.dll:-This Assembly contains classes for interacting with HTML Elements.
Name the Classes that contains arbitrary content in WPF?
1)ContentControl:- A single arbitrary object.
2)HeaderedContentControl:- A header and a single item, both of which are arbitrary objects.
3)ItemsControl:- A collection of arbitrary objects.
4)HeaderedItemsControl:- A header and a collection of items, all of which are arbitrary objects.


Name the Events that are implemented by NavigationService?
1)Navigating:- Occurs when a new navigation is requested. Can be used to cancel the navigation.
2)NavigationProgress:- Occurs periodically during a download to provide navigation progress information.
3)Navigated:- Occurs when the page has been located and downloaded.
4)NavigationStopped:- Occurs when the navigation is stopped (by calling StopLoading), or when a new navigation is requested while a current navigation is in progress.
5)NavigationFailed:- Occurs when an error is raised while navigating to the requested content.
6)LoadCompleted:- Occurs when content that was navigated to is loaded and parsed, and has begun rendering.
7)FragmentNavigation:- Occurs when navigation to a content fragment begins, which happens:
a)Immediately, if the desired fragment is in the current content.
b)After the source content has been loaded, if the desired fragment is in different content.


What is the default Orientation of Stack Panel?
The Default Orientation of Stack Panel is 'Vertical'.


What are the major subsystems of the Windows Presentation Foundation?
1) Object
2) Threading.DispatcherObject
3) Windows.DependancyObject
4) Windows.Media.Visuals
5) Windows.UIElements
6) Windows.FrameworkElement
7) Windows.Controls.Control


In Which NameSpace you will find a 'Popup' and 'Thumb' control in WPF?
In 'system.windows.controls.primitives' namespace

Name Some Methods of MediaElement in WPF?

MediaElement has the following methods :-
1)Play:-Plays media from the current position.
2)Stop:-Stops and resets media to be played from the beginning.
3)Pause:-Pauses media at the current position.
4)Close:-Closes the media.


How to Set Window Title Bar Name at RunTime in WPF?
this.Title="TitleName";
In Which of the Following Definitions element you will find a 'Width' and 'Height' of a Grid(TAG)

1)<Grid.RowDefinitions >
2)<Grid.ColumnDefinitions>
In <Grid.RowDefinitions > you will find a 'Height'
eg: <Grid.RowDefinitions >
<RowDefinition Height="50" />
</Grid.RowDefinitions>
In <Grid.ColumnDefinitions> you will find a 'Width'
eg:<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>


What are the Features of WPF?
The Features of WPF are:-
1)Device Independent Pixel (DPI).
2)Built-In Support for Graphics and Animation.
3)Redefine Styles and Control Templates.
4)Resource based Approach for every control.
5)New Property System & Binding Capabilities.


Name the Layout Panels of WPF?
These are the five most layout panels of WPF:-
1)Grid Panel
2)Stack Panel
3)Dock Panel
4)Wrap Panel
5)Canvas Panel


What are the difference between CustomControls and UserControls in WPF?
CustomControl (Extending an existing control):-

1)Extends an existing control with additional features.
2)Consists of a code file and a default style in Themes/Generic.xaml.
3)Can be styled/templated.
4)The best approach to build a control library.
UserControl (Composition):
1)Composes multiple existing controls into a reusable "group".
2)Consists of a XAML and a code behind file.
3)Cannot be styled/templated.
4)Derives from UserControl.


What are the Advantages of XAML?
1)XAML code is short and clear to read.
2)Separation of designer code and logic.
3)Graphical design tools like Expression Blend require XAML as source.
4)The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.
Which class of the WPF is the base class of all the user-interactive elements?
Control class is the base class of all the user-interactive elements in WPF.


What is Markup Extensions?
The most common markup extensions used in WPF application programming are Binding, used for data binding expressions, and the resource references StaticResource and DynamicResource.

<StackPanel>
  <Border Style="{StaticResource PageBackground}"></Border>
</StackPanel>


What is type convertor?
In the section, it was stated that the attribute value must be able to be set by a string. The basic, native handling of how strings are converted into other object types or primitive values is based on the String type itself, in addition to native processing for certain types such as DateTime or Uri. But many WPF types or members of those types extend the basic string attribute processing behavior, in such a way that instances of more complex object types can be specified as strings and attributes.

About The X: prefix?

The prefix x: was used to map the XAML namespace http://schemas.microsoft.com/winfx/2006/xaml, which is the dedicated XAML namespace that supports XAML language constructs. This x: prefix is used for mapping this XAML namespace in the templates for projects.
x:Key: Sets a unique key for each resource in a ResourceDictionary.

Example:
 <object x:Key="stringKeyValue".../>
x:Class: Specifies the CLR namespace and class name for the class that provides code-behind for a XAML page.

Example:
<object x:Class="namespace.classname".../>
x:Name: Specifies a run-time object name for the instance that exists in run-time code after an object element is processed.

Example:
<object x:Name="XAMLNameValue".../>
x:Static: Enables a reference that returns a static value that is not otherwise a XAML-compatible property.

Example:
<object property="{x:Static prefix:typeName.staticMemberName}" .../>
x:Type: Constructs a Type reference based on a type name.

Example:
<object property="{x:Type prefix:typeNameValue}" .../>
This example shows you how to create a simple Binding.
In this example, you have a Person object with a string property named PersonName. The Person object is defined in the namespace called SDKSample.
The following example instantiates the Person object with a PersonName property value of Anil. This is done in the Resources section and assigned an x:Key.

XAML
<Window  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:ak="clr-namespace:SDKSample"
  Title="Simple Data Binding Sample">
  <Window.Resources>
    <ak:Person x:Key="myDataSource" PersonName="Anil"/>
  </Window.Resources>
  <Grid>
   <TextBlock Text="{Binding Path=PersonName, Source={StaticResource myDataSource}}"/>
  </Grid>
</Window>
As a result, the TextBlock appears with the value "Anil".
MultiBinding:
<TextBlock Name="textBox2" DataContext="{StaticResource NameListData}">
  <TextBlock.Text>
    <MultiBinding Converter="{StaticResource myNameConverter}"
                  ConverterParameter="FormatLastFirst">
      <Binding Path="FirstName"/>
      <Binding Path="LastName"/>
    </MultiBinding>
  </TextBlock.Text>
</TextBlock>
 </TextBlock >


Create First WPF Project " Hello World "

Create First WPF Project " Hello World "


Open Visual Studio
File--> New --> New Project



















After Create project, See below screen look like comes project.



















Open MainWindow.xamlpage and drag&drop TextBlock control to design



See final Output

Windows Presentation Foundation (WPF) Intro


Windows Presentation Foundation (WPF) is a UI framework that creates desktop client applications. The WPF development platform supports a broad set of application development features, including an application model, resources, controls, graphics, layout, data binding, documents, and security. It is a subset of the .NET Framework, so if you have previously built applications with the .NET Framework using ASP.NET or Windows Forms, the programming experience should be familiar. WPF uses the Extensible Application Markup Language (XAML) to provide a declarative model for application programming.



WPF Architecture





Button On Click Event Using JQuery

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits=".demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script>

        /*  Button On Click Functions Using JQuery */
        $(document).ready(function () {


            /*  HTML Button Click Event */
            $("#btnHTML").click(function () {

                alert("You clicked on HTML Button");

            });


            $("#<%=btnaspnet.ClientID %>").click(function () {
                alert("You clicked on Asp.Net Button");
            });



        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%--This is HTML Button--%>
        <input type="button" value="HTML Button" id="btnHTML" />
        <%--This is Asp.Net Button--%>
        <asp:Button runat="server" ID="btnaspnet" Text="Asp.Net" />
    </div>
    </form>
</body>
</html>