1. What is WPF?

The Windows Presentation Foundation is Microsofts next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher.

WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework. Its vector based rendering engine uses hardware acceleration of modern graphic cards. This makes the UI faster, scalable and resolution independent.

2. What is XAML?

Extensible Application Markup Language, or XAML (pronounced "zammel"), is an XML-based markup language developed by Microsoft. XAML is the language behind the visual presentation of an application that you develop in Microsoft Expression Blend, just as HTML is the language behind the visual presentation of a Web page. Creating an application in Expression Blend means writing XAML code, either by hand or visually by working in the Design view of Expression Blend.

3. What is MVVM Pattren?

Model-View-ViewModel (MVVM) pattern splits the User Interface code into 3 conceptual parts - Model, View and ViewModel.

Model is a set of classes representing the data coming from the services or the database.

View is the code corresponding to the visual representation of the data the way it is seen and interacted with by the user.

ViewModel serves as the glue between the View and the Model. It wraps the data from the Model and makes it friendly for being presented and modified by the view. ViewModel also controls the View's interactions with the rest of the application

4. What is the difference between MVVM and MVC patterns?

MVVM Model-View ViewModel is similar to MVC, Model-View Controller.

The controller is replaced with a View Model. The View Model sits below the UI layer. The View Model exposes the data and command objects that the view needs. You could think of this as a container object that view goes to to get its data and actions from. The View Model pulls its data from the model.

5. What are the similarities and differences between WPF and Silverlight?

Similarities between Silverlight and WPF

1. Silverlight and WPF both use XAML.
2. Silverlight and WPF share same syntax, code and libraries.

Difference between WPF and Silverlight

1. WPF is tool for writing full-featured desktop applications that run on Windows while Silverlight is for web application.

2. WPF competes with Windows Forms only for writing desktop applications while Silverlight competes with Flash, Java web apps etc.

6. What is the need of layout panels in WPF?

Layout of controls is critical to an applications usability. Arranging controls based on fixed pixel coordinates may work for an limited enviroment, but as soon as you want to use it on different screen resolutions or with different font sizes it will fail. WPF provides a rich set built-in layout panels that help you to avoid the common pitfalls.

7. What are the different types of layout panels in WPF?

There are mainly 5 types of layout panels in WPF. These are:

Grid Panel
Stack Panel
Dock Panel
Wrap Panel
Canvas Panel

Best Practices

Avoid fixed positions - use the Alignment properties in combination with Margin to position elements in a panel
Avoid fixed sizes - set the Width and Height of elements to Auto whenever possible.
Don't abuse the canvas panel to layout elements. Use it only for vector graphics.
Use a StackPanel to layout buttons of a dialog
Use a GridPanel to layout a static data entry form. Create a Auto sized column for the labels and a Star sized column for the TextBoxes.
Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists. Use the SharedSize feature to synchronize the label widths.

Vertical and Horizontal Alignment

Use the VerticalAlignment and HorizontalAlignmant properties to dock the controls to one or multiple sides of the panel. The following illustrations show how the sizing behaves with the different combinations.

Margin and Padding

The Margin and Padding properties can be used to reserve some space around of within the control.

The Margin is the extra space around the control.
The Padding is extra space inside the control.
The Padding of an outer control is the Margin of an inner control.

Height and Width

Alltough its not a recommended way, all controls provide a Height and Width property to give an element a fixed size. A better way is to use the MinHeight, MaxHeight, MinWidth and MaxWidth properties to define a acceptable range.
If you set the width or height to Auto the control sizes itself to the size of the content.

Overflow Handling

Clipping

Layout panels typically clip those parts of child elements that overlap the border of the panel. This behavior can be controlled by setting the ClipToBounds property to true or false.

Scrolling

When the content is too big to fit the available size, you can wrap it into a ScrollViewer. The ScrollViewer uses two scroll bars to choose the visible area.

The visibility of the scrollbars can be controlled by the vertical and horizontal ScrollbarVisibility properties.

<ScrollViewer>
    <StackPanel>
        <Button Content="First Item" />
        <Button Content="Second Item" />
        <Button Content="Third Item" />
    </StackPanel>
</ScrollViewer>

Grid Panel

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control

Define Rows and Columns

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinitionitems to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. The following example shows a grid with three rows and two columns.

The size can be specified as an absolute amount of logical units, as a percentage value or automatically.

Fixed	Fixed size of logical units (1/96 inch)
Auto	Takes as much space as needed by the contained control
*Star ()**	Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3/5 means the same as 30/50. Remember that star-sizing does not work if the grid size is calculated based on its content.

 
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
</Grid>

How to add controls to the grid

To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row- and columndefinitions must precced any definition of child controls.

The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" 
            MinWidth="80" Margin="3" Content="Send"  />
</Grid>

Resizable columns or rows

WPF provides a control called the GridSplitter. This control is added like any other control to a cell of the grid. The special thing is that is grabs itself the nearest gridline to change its width or height when you drag this control around.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Label Content="Left" Grid.Column="0" />
    <GridSplitter HorizontalAlignment="Right" 
                  VerticalAlignment="Stretch" 
                  Grid.Column="1" ResizeBehavior="PreviousAndNext"
                  Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" />
</Grid>

The best way to align a grid splitter is to place it in its own auto-sized column. Doing it this way prevents overlapping to adjacent cells. To ensure that the grid splitter changes the size of the previous and next cell you have to set theResizeBehavior to PreviousAndNext.

The splitter normally recognizes the resize direction according to the ratio between its height and width. But if you like you can also manually set the ResizeDirection to Columns or Rows.

<GridSplitter ResizeDirection="Columns"/>

How to share the width of a column over multiple grids

The shared size feature of the grid layout allows it to synchronize the width of columns over multiple grids. The feature is very useful if you want to realize a multi-column listview by using a grid as layout panel within the data template. Because each item contains its own grid, the columns will not have the same width.

By setting the attached property Grid.IsSharedSizeScope to true on a parent element you define a scope within the column-widths are shared.

To synchronize the width of two columndefinitions, set the SharedSizeGroup to the same name.

 
<ItemsControl Grid.IsSharedSizeScope="True" >
  <ItemsControl.ItemTemplate> 
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/>
        <TextBlock Text="{Binding Path=Value}" Grid.Column="1" TextWrapping="Wrap"/>
      </Grid>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Useful Hints

Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size. This often helps to resolve the problem.

Using GridLenghts from code

If you want to add columns or rows by code, you can use the GridLength class to define the differenz types of sizes.

Auto sized	`GridLength.Auto`
Star sized	`new GridLength(1,GridUnitType.Star)`
Fixed size	`new GridLength(100,GridUnitType.Pixel)`

Grid grid = new Grid();
 
ColumnDefinition col1 = new ColumnDefinition();
col1.Width = GridLength.Auto;
ColumnDefinition col2 = new ColumnDefinition();
col2.Width = new GridLength(1,GridUnitType.Star);
 
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);

WPF StackPanel

Introduction

The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. This is very useful to create any kinds of lists. All WPF ItemsControls like ComboBox,ListBox or Menu use a StackPanel as their internal layout panel.

 
<StackPanel>
  <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>

Stack Items horizontally

A good example for a horizontal stack panel are the "OK" and "Cancel" buttons of a dialog window. Because the size of the text can change if the user changes the font-size or switches the language we should avoid fixed sized buttons. The stack panel aligns the two buttons depending on their desired size. If they need more space they will get it automatically. Never mess again with too small or too large buttons.

 
<StackPanel Margin="8" Orientation="Horizontal">            
   <Button MinWidth="93">OK</Button>
   <Button MinWidth="93" Margin="10,0,0,0">Cancel</Button>
</StackPanel>

Dock Panel

Introduction

The dock panel is a layout panel, that provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached property DockPanel.Dock. To dock an element to the center of the panel, it must be the last child of the panel and the LastChildFill property must be set to true.

 
<DockPanel LastChildFill="True">
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>

Multiple elements on one side

The dock panel layout supports multiple elements on one side. Just add two or more elements with the same dock side. The panel simply stacks them.

 
<DockPanel LastChildFill="True">
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>

Change the stacking order

The order of the elements matters. It determines the alignment of the elements. The first elements gets the whole width or height. The following elements get the remaining space.

Wrap Panel

Introduction

The wrap panel is similar to the StackPanel but it does not just stack all child elements to one row, it wraps them to new lines if no space is left. The Orientation can be set to Horizontal or Vertical.

The WrapPanel can be used to arrange tabs of a tab control, menu items in a toolbar or items in an Windows Explorer like list. The WrapPanel is often used with items of the same size, but its not a requirement.

 
<WrapPanel Orientation="Horizontal">
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
</WrapPanel>

Canvas Panel

Introduction

The Canvas is the most basic layout panel in WPF. It's child elements are positioned by explicit coordinates. The coordinates can be specified relative to any side of the panel usind the Canvas.Left, Canvas.Top, Canvas.Bottom andCanvas.Right attached properties.

The panel is typically used to group 2D graphic elements together and not to layout user interface elements. This is important because specifing absolute coordinates brings you in trouble when you begin to resize, scale or localize your application. People coming from WinForms are familiar with this kind of layout - but it's not a good practice in WPF.

 
<Canvas>
    <Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41" Fill="Blue"  />
    <Ellipse Canvas.Left="130" Canvas.Top="79" Width="58" Height="58" Fill="Blue"  />
    <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue" 
          Stretch="Fill" Data="M61,125 L193,28"/>
</Canvas>

Override the Z-Order of Elements

Normally the Z-Order of elements inside a canvas is specified by the order in XAML. But you can override the natural Z-Order by explicity defining a Canvas.ZIndex on the element.

 
<Canvas>
    <Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"    
             Canvas.ZIndex="1"/>
    <Ellipse Fill="Blue"  Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>
</Canvas>

8. How to create a User Control and then how to use it in a WPF application?

User Controls are commonly used in a WPF application. So you should know this concept and you should be able to write a simple program to show how usercontrols are created and used in WPF application. I am sharing a link which created and uses usercontrol in very simple manner. Have a look

1. Create a User Control

I created a new WPF based Windows application. My WPF application name is WpfApplication3. You may want to give your application name like "MyWPFControlsLibrary" or something like that.

Add a new item by selecting Visual C# in the left pane and User Control (WPF) in the right pane. See Figure 1. This action will add a UserControl.xaml file and a code behind file to your project. You may change the name of this file to whatever you want.

In my application, I added four User Controls (Header, Footer, Left bar, Right bar). Put whatever code u want in your user controls.

The following code shows the header user control XAML contents.

In my application, I added four User Controls (Header, Footer, Left bar, Right bar). Put whatever code u want in your user controls.

The following code shows the header user control XAML contents.

Header.xaml

<UserControl x:Class="WpfApplication3.Header"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Height="100" Width="600">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" HorizontalAlignment="Center" Grid.Column="0">This is header</TextBlock>

</Grid>

</UserControl>

Now compile and build your application.

Your user controls are ready to use.

2. Use a User Control

In previous part of this article, I discussed how to create a user control in WPF. In this part, let's see how use a user control, which we just created.

To test this, we can use same Windows WPF application or you can create a new application. If you create a new application, you need to add a reference to the above assembly (DLL) to your application.

Once an assembly reference is added, we need to add namespace support to the XAML code using following code.

xmlns:local="clr-namespace:WpfApplication3"

Once the namespace reference is added, you should be able to access the Header user control we created in the previous section.

Here is my final window1.xaml code looks like. As you can see from this code below, I am accessing the header control in the commented section. Similarily, I add all four controls I created in the above section.

<Window x:Class="WpfApplication3.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="600" Width="600"

xmlns:local="clr-namespace:WpfApplication3">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<local:Header HorizontalAlignment="Left" Grid.Row="0" Margin="2,2,2,2"Grid.Column="0" Grid.ColumnSpan="3"></local:Header>

<local:Footer HorizontalAlignment="Left" Grid.Row="2" Margin="2,2,2,2"Grid.Column="0" Grid.ColumnSpan="3"></local:Footer>

<local:Leftbar HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0"Margin="2,2,2,2"></local:Leftbar>

<local:Rightbar HorizontalAlignment="Left" Grid.Row="1" Grid.Column="2"Margin="2,2,2,2"></local:Rightbar>

</Grid>

</Window>

Now build and run the application.

The result looks like this. As you can see from Figure 2, all of my four controls are available on this window. As I mentioned earlier, you controls can have any functionality on them.

Figure 2.

3. Adding a User Control to Toolbox

Here comes the good part. You can add your user control to Visual Studio Toolbox manually so the User Control is available all the time.

The following steps show how to do this.

1. Right click on Toolbox window.

2. Click Choose Items... menu on context menu.

3. Select WPF components tab on Choose Toolbox Items dialog window.

4. Click Browse... button, select your project assembly.

5. Select and add your user control to toolbox.

Figure 3.

9. What is the difference between UserControl and CustomControl in WPF?

UserControl (Composition)

Composes multiple existing controls into a reusable "group"
Consists of a XAML and a code behind file
Cannot be styled/templated
Derives from UserControl

CustomControl (Extending an existing control)

Extends an existing control with additional features
Consists of a code file and a default style in Themes/Generic.xaml
Can be styled/templated
The best approach to build a control library

DOTNET WPF FACULTY TRAINER DEVELOPER GURU MANOHAR GOUD

Friday, 1 November 2013

WPF INTERVIEW QUESTIONS - MANOHAR GOUD 9866550012

Best Practices

Vertical and Horizontal Alignment

Margin and Padding

Height and Width

Overflow Handling

Clipping

Scrolling

Grid Panel

Define Rows and Columns

How to add controls to the grid

Resizable columns or rows

How to share the width of a column over multiple grids

Useful Hints

Using GridLenghts from code

WPF StackPanel

Introduction

Stack Items horizontally

Dock Panel

Introduction

Multiple elements on one side

Change the stacking order

Wrap Panel

Introduction

Canvas Panel

Introduction

Override the Z-Order of Elements

No comments:

Post a Comment