WPF Windows Based Controls

1. Button Control In WPF

2. Border Control In WPF
3. Label Control in WPF
4. TextBox Control In WPF
5. Canvas Control In WPF
6. CheckBox Control In WPF
7. ComboBox In WPF
8. Stack Panel Control
9. Expander Control
10. DockPanel Control
11. Document Viewer Control
12. Ellipse Control
13. Content Control
14. Frame Control
15. GroupBox Control
16. Grid Control
17. Progressbar Control
18. Menu Control
19. ListView Control
20. Adding Item in ListView Dynamically
21. Formatting And Style Of ListView
22. RadioButton Control
23. Tab Control
24. PasswordBox Control
25. Scroll Viewer Control
26. Slider Control
27. ViewBox Control
28. Separator Control
29. TreeView Control
30. UniformGrid Control
31. WrappedPanel Control
32. Image Control
33. Rectangle Control

Button Control In WPF
The Button element represents a WPF Button control in XAML.
<Button></Button>
The Width and Height attributes of the Button element represent the width and the
height of a Button. The Content property of the Button element sets the text of a
button. The x:Name attribute represents the name of the control, which is a unique
identifier of a control.


<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1">
<Grid>
<Button Margin="71,136,77,86" Name="button1">Button</Button>
</Grid>
</Window>

Adding a Button Click Event Handler
The Click attribute of the Button element adds the click event handler. The following
code adds the click event handler for a Button.

<Button x:Name="Random Number" Click="RandomNumber_Click">

</Button>

The Code of the Windows.xaml :

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button Height="23" Margin="94,0,108,80" Name="OK"
VerticalAlignment="Bottom" Click="button1_Click">Button</Button>
<TextBlock Height="21" Margin="61.812,42.723,96.354,0"
Name="textBlock1" VerticalAlignment="Top" />
</Grid>
</Window>

Code for Button Click Event-

private void button1_Click(object sender, RoutedEventArgs e)
{
Random generator = new Random();
int randomValue;
randomValue = generator.Next(1, 10);
textBlock1.Text += " " + randomValue.ToString();
}

Properties of Button
Name Description
AllowDrop
Gets or sets a value indicating whether this
element can be used as the target of a drag-and-
drop operation.
AreAnyTouchesCaptured
Gets a value that indicates whether at least one
touch is captured to this element.
AreAnyTouchesCapturedWithin
Gets a value that indicates whether at least one
touch is captured to this element or to any child
elements in its visual tree.
AreAnyTouchesDirectlyOver
Gets a value that indicates whether at least one
touch is pressed over this element.
AreAnyTouchesOver
Gets a value that indicates whether at least one
touch is pressed over this element or any child
elements in its visual tree.
CacheMode
Gets or sets a cached representation of the
UIElement.
ClickMode Gets or sets when the Click event occurs.
Clip
Gets or sets the geometry used to define the
outline of the contents of an element.
ClipToBounds
Gets or sets a value indicating whether to clip the
content of this element (or content coming from
the child elements of this element) to fit into the
size of the containing element.
Command
Gets or sets the command to invoke when this
button is pressed.
CommandBindings
Gets a collection of CommandBinding objects
associated with this element. A CommandBinding
enables command handling for this element, and
declares the linkage between a command, its
events, and the handlers attached by this
element.
CommandParameter
Gets or sets the parameter to pass to the
Command property.
CommandTarget
Gets or sets the element on which to raise the
specified command.
Content Gets or sets the content of a ContentControl.
ContentStringFormat
Gets or sets a composite string that specifies
how to format the Content property if it is
displayed as a string.
ContentTemplate
Gets or sets the data template used to display
the content of the ContentControl.
ContentTemplateSelector
Gets or sets a template selector that enables an
application writer to provide custom template-
selection logic.
InputBindings
Gets the collection of input bindings associated
with this element.
InputScope
Gets or sets the context for input used by this
FrameworkElement.

Border Control In WPF
The controls in WPF do not have border property so WPF provides a border control. Similar
to other WPF elements, the Border has Width, Height, Background, and Horizontal
Alignment and Vertical Alignment properties. Besides these common properties, Border has
two properties that make Border a border.
BorderThickness -The BorderThickness property represents the thickness of the border.
BorderBrush.- The BorderBrush property represents the brush that is used to draw the
border.
The Corner Radius property represents the degree to which the corners of a Border are
rounded.


Code for Border-

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Border BorderThickness="5"

BorderBrush="Green"

CornerRadius="10"

Background="LightGray"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="270"

Height="250">
<Canvas Background="LightCyan" >

<Rectangle Canvas.Left="30" Canvas.Top="20"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Red" />

</Canvas>

</Border>
</Grid>
</Window>

Output will like this-

Label Control in WPF

Code for label control

<Label Name="Label1"

Content="Hello! I am Label Control"

Width="200" Height="30"

Canvas.Left="10" Canvas.Top="10"

FontSize="14" FontFamily="Georgia"

FontWeight="Bold"

Background="Black"

Foreground="Orange"

VerticalAlignment="Center"

HorizontalAlignment="Center"

/>

Output

Adding Contents to a Label Control
The Content property of the Label control allows you to set any other controls as the
content of a Label control. The code snippet in Listing 3 adds some ellipse controls to a
Label control.

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid Width="331.785">
<Label Canvas.Left="10" Canvas.Top="50">

<StackPanel Orientation="Horizontal">

<Ellipse Width="100" Height="100" Fill="Red" />

<Ellipse Width="80" Height="80" Fill="Orange" />

<Ellipse Width="60" Height="60" Fill="Yellow" />

<Ellipse Width="40" Height="40" Fill="Green" />

<Ellipse Width="20" Height="20" Fill="Blue" />

<Ellipse Width="15" Height="15" Fill="Indigo" />

<Ellipse Width="10" Height="10" Fill="Violet" />

</StackPanel>

</Label>
</Grid>
</Window>

Output-

Formatting a Label
The BorderBrush property of the Label sets a brush to draw the border of a Label. You may
use any brush to fill the border.
Setting Image as Background of a Label

<Label Height="28" HorizontalAlignment="Left" Margin="10,10,0,0"
Name="label1" VerticalAlignment="Top"
Width="120"></Label>
<Image Source="F:\Anilnewtopic\images\border1.JPG" Stretch="Fill"
Height="18"
Margin="84.537,94.536,83.628,0" VerticalAlignment="Top">
</Image>

Output


TextBox Control In WPF

Setting Background and Foreground Colors
The Background and Foreground attributes set the background and foreground colors of text
box.

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TextBox Width="200" Height="40" Canvas.Top="50"
Canvas.Left="20"
Background="Red" Foreground="Yellow">
This is TextBox !!
</TextBox>
</Grid>
</Window>

Output-

Wrapping and Scrolling Text
The TextWrapping attributes sets the wrapping of text and VerticalScrollBarVisibility and
HorizontalScrollBarVisibility sets the vertical and horizontal scroll bars visible.

TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility
="Visible"

Restricting Input Text
MaxHeight, MaxWidth, MaxLines, and MaxLength attributes of text box restricts the
maximum height, maximum width, maximum number of lines, and maximum length of the
text box. Similarly MinHeight, MinWidht, MinLines, and MinLength restricts the minimum
height, minimum width, minimum number of lines, and minimum length of the text box.
Setting IsReadOnly attribute to true makes the text box non editable.
Canvas Control In WPF
A Canvas panel is used to position child elements by using coordinates that are relative to
the canvas area. Here are some of the properties of Canvas panels. The default values of
Height and Width properties of a Canvas are 0. If you do not set these values, you will not
see a canvas unless child elements are automatically resizable.
Child elements on a Canvas are never resized. The vertical and horizontal alignments on
child elements do not work. Child elements are placed on positions set by the Canvas Left,
Top, Right, and Bottom properties.
Margin does work partially. If Left property of Canvas is set, Right property does not work.
If Top property of Canvas is set, Bottom property does not work.
Properties
The Canvas control has three properties. The Left property represents the distance between
the left side of a control and its parent container Canvas. The Top property represents the
distance between the top of a control and its parent container Canvas.

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="396.25" Width="453.75">
<Grid Height="343.75" Width="332.5">
<Canvas Background="LightCyan" >

<Rectangle

Canvas.Left="10" Canvas.Top="10"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Red" />



<Rectangle

Canvas.Left="60" Canvas.Top="60"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Blue" />



<Rectangle

Canvas.Left="110" Canvas.Top="110"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Green" />



</Canvas>
</Grid>
</Window>

Output

CheckBox Control In WPF


The Content attribute represents the text of a CheckBox.

The Name attribute represents the name of the control, which is a unique identifier of a
control.

The Foreground attribute defines the foreground color of the text of the CheckBox.

The Content attribute defines the text of the CheckBox.

FontFamily, FontStyle, FontWeight, FontSize and FontStretch are font related attribute

The IsChecked property represents the state of the CheckBox control. The IsThreeState
property represents whether the CheckBox has two or three states. Three states are
checked, unchecked, or indeterminate.
Code for CheckBox Control is given Below-

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="396.25" Width="453.75">
<Grid>
<CheckBox Name="McCheckBox" Foreground="Orange"

Canvas.Left="20" Canvas.Top="10" Content="Check Me"

FontFamily="Georgia" FontSize="20" FontWeight="Bold">

</CheckBox>
</Grid>
</Window>

Output

Adding Events on CheckBox
The Checked and Unchecked attributes of the CheckBox element adds the checked and
unchecked event handler. These events are fired when a CheckBox state is changed to
checked and unchecked respectively.

<CheckBox Name="McCheckBox"

Canvas.Left="10" Canvas.Top="10"

Content="Check Me"

IsChecked="True" IsThreeState="True"

Checked="McCheckBox_Checked"
Unchecked="McCheckBox_Unchecked">

</CheckBox>

Output



ComboBox In WPF
The Width and Height properties represent the width and the height of a ComboBox. The
x:Name property represents the name of the control, which is a unique identifier of a
control. The Margin property sets the location of a ComboBox on the parent control. The
HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical
alignments.

<ComboBox Name="ComboBox1" Width="200" Height="30"

VerticalAlignment="Top" HorizontalAlignment="Left"

Margin="10,10,0,0">

</ComboBox

Adding ComboBox Items and Event-


<ComboBox Height="25" Margin="147.5,106.25,163.75,0" Name="comboBox1"
VerticalAlignment="Top"
SelectionChanged="comboBox1_SelectionChanged">
<ComboBoxItem Background="Tomato" BorderBrush="Cyan"
>Infosis</ComboBoxItem>
<ComboBoxItem Background="SpringGreen"
BorderBrush="Bisque">TCS</ComboBoxItem>
<ComboBoxItem Background="SteelBlue" BorderBrush="Brown">Tech
Mahindra</ComboBoxItem>
<ComboBoxItem Background="Violet" BorderBrush="Chartreuse">Birla
Soft</ComboBoxItem>
<ComboBoxItem Background="YellowGreen"
BorderBrush="Chocolate">AMDOCS</ComboBoxItem>
<ComboBoxItem Background="SteelBlue"
BorderBrush="DimGray">Nagarro</ComboBoxItem>
</ComboBox>

Output-

Code For Event In ComboBox-

private void comboBox1_SelectionChanged(object sender,
SelectionChangedEventArgs e)
{

comboBox2.IsEnabled = true;
comboBox2.Items.Clear();
if (comboBox1.SelectedIndex == 0)
{
comboBox2.Items.Add("Java");
comboBox2.Items.Add(".Net");
comboBox2.Items.Add("PHP");
comboBox2.Items.Add("Mainframe");
}
else if (comboBox1.SelectedIndex == 1)
{
comboBox2.Items.Add("SAP");
comboBox2.Items.Add("ERP");
comboBox2.Items.Add("Networking");
comboBox2.Items.Add("C/C++");
}
else
{

comboBox2.Items.Add("Networking");
comboBox2.Items.Add("C/C++");
}
}


Stack Panel Control in WPF

As with the other layout panels, the StackPanel has a collection of Children that it literally
shoves one after the other. You set the orientation to either horizontal or vertical to control
where the items go. As shown in picture above.
You might use the StackPanel if you have a series of controls with a set width or height
that you want to show up in a row. For example, you might use StackPanel when you have
a series of controls in a side panel (like the accordion control in Microsoft Outlookyou can
expand/contract sections for mail, calendar, tasks, and so on). The controls can all change
size, and the other controls will automatically be moved to accommodate the space.
Code for Stack Panel

<StackPanel Orientation="Vertical">
<Button Width="200">First</Button>
<Button HorizontalAlignment="Left">Second</Button>
<Button Padding="10 4">Third</Button>
<Button Margin="20 20">Fourth</Button>
<Button Padding="10 4"
HorizontalAlignment="Right">Fifth</Button>
<Button HorizontalAlignment="Stretch">Sixth</Button>
</StackPanel>


Adding scrolling support
Adding scrolling is easy, and, once you get used to the idea of control composition, fairly
intuitive. We simply put the StackPanel (or anything else we want to automatically scroll)
inside a ScrollViewer.
Code for this

<ScrollViewer>
<StackPanel Orientation="Vertical">
<Button Width="200" >First</Button>
<Button HorizontalAlignment ="Left">Second</Button>
<Button Padding="10 4">Third</Button>
<Button Margin="20 20">Fourth</Button>
<Button Padding="10 4"
HorizontalAlignment="Right">Fifth</Button>
<Button HorizontalAlignment="Stretch">Sixth</Button>
</StackPanel>
</ScrollViewer>



Expander Control in WPF
StackPanel is with expanding panelswhen the panels expand or contract, everything else
changes size automatically. The WPF team has
been nice enough to provide an expanding/contracting control which makes this behavior
easy to demonstrate.
The Expander control works similarly to the sections in Windows Explorer that allow you to
show or hide different sections

Code For this is given below-

<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">

<Expander Header="My Documents" BorderThickness="3"
BorderBrush="Aquamarine"
Background="Chocolate">
<StackPanel Background="Aqua" >
<Label >Books</Label>
<Label>Data</Label>
<Label>Personal</Label>
<Label>Movies</Label>
<Label>Songs</Label>
</StackPanel>
</Expander>



<Expander Header="My Computers" BorderThickness="3"
BorderBrush="AntiqueWhite"
Background="Chocolate">
<StackPanel>
<Button>Local Disk C:</Button>
<Button>Local Disk D:</Button>
<Button>Local Disk E:</Button>
<Button>Local Disk F:</Button>
<Button>Local Disk G:</Button>
<Button>Local Disk H:</Button>
</StackPanel>
</Expander>
</StackPanel>

</ScrollViewer>

The Expander can only contain one thing: its contents. If we want to add multiple items, we
have to put something inside the Expander that can hold some number of other things. The
StackPanel, as with all the other layout panels, can hold multiple items, so we can add
another StackPanel.
The StackPanel itself solves some specific layout scenarios, but its quite flexible. It could be
used, for example, to build a calculator. You should be able to see how this would work
one vertical StackPanel containing a number of vertical StackPanels for the buttons. It
wouldnt be easy, but it would be possible. In the next section, we will talk about the
DockPanel. The DockPanel can be used to solve some of the same problems but in a
different way. As with the StackPanel, the DockPanel, while flexible, is designed to handle a
different set of scenarios.
The DockPanel layout in WPF
A DockPanel is useful when you want to position various elements on the edges of your
window. For example, you might put a menu and a toolbar at the top, an explorer bar at the
left, and a status bar at the bottom. The remaining space would contain the main content
with which the user interacts. As with a StackPanel, if you put a series of items on the same
side, they will stack one after the other. In fact, if you add all the items at the top or the
left, the behavior will be similar to that of a StackPanel.

Defining Dock Panel In XAML

<DockPanel x:Name="dockPanel1">

<ToolBarTray Background="White"
DockPanel.Dock="Top">
<ToolBar Band="1" BandIndex="1">
<Button>File</Button>
<Button>Edit</Button>
<Separator/>
<Button>Gelp</Button>
</ToolBar>
</ToolBarTray>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem>
<TextBlock>Ready</TextBlock>
</StatusBarItem>
</StatusBar>
<StackPanel DockPanel.Dock="Left">
<Expander Header="Useful">
<StackPanel>
<Button>Don't</Button>
<Button>Press</Button>
<Button>Me!</Button>
</StackPanel>
</Expander>


<Expander Header="Less useful"></Expander>
<Expander Header="Silly"></Expander>
</StackPanel>
<Button Padding="10 10">
<TextBlock TextWrapping="Wrap"
TextAlignment="Center">This is all
of the remaining space that is not docked</TextBlock>
</Button>
</DockPanel>

Document Viewer Control in WPF
The DocumentViewer provides a very easy way to display the contents of a document, edit
a template's form fields and to navigate around a document within a web browser. The
server component returns standard web file formats (HTML, CSS, JS and JPG etc.), thus
documents can be displayed in the browser without having to install any third party plugins,
nor extensions.
WPF does not support functionality to view Microsoft Word documents but there is a work
around this problem. WPF DocumentViewer control is used to display fixed documents such
as an XPS (XML Paper Specification) document. We can open a Word document if we can
convert a Word document to an XPS document. This conversion is possible by using Office
Interop and Office Tools frameworks that is used to work with Office documents.
Add Reference to XPS and Office Interop Assemblies
Before we do any actual work, we must add reference to the following assemblies.

ReachFramework.dll
Microsoft.Office.Tools.v9.0.dll
Microsoft.Office.Tools.Word.v9.0dll
Microsoft.VisualStudio.Tools.Office.Runtime.v9.0.dll
Microsoft.Office.Interop.Word.dll

The first assembly, ReachFramework.dll hosts the functionality for XPS documents and rest
of the assemblies hosts the functionality Office Interop and Office Tools support.
To add reference to these assemblies, you right click on Add Reference on the project
name in Solution Explorer. On the .NET Framework, select ReachFramework and other
assemblies from the list and click OK button. a sshown in Figure below-

You may have multiple assemblies installed on your machine. Make sure you select Version
12 for Microsoft.Office.Interop.Word assemblies as you see in Figure bellow, otherwise your
conversion will fail.


Once you have added the reference to assemblies, you must import the following
namespaces to your code behind.

using System.IO;
using Microsoft.Office.Interop.Word;
using Microsoft.Win32;
using System.Windows.Xps.Packaging;
Convert Doc to XPS

The SaveAs method of Document class available in OfficeInterop allows us to save a word
document as an XPS document. However, you must make sure you have version 12 of
assembly added to your project as I mentioned before.
The ConvertWordDocToXPSDoc method takes a full path of a word document file and new
full path of XPS document and converts doc file to an xps file.

private XpsDocument ConvertWordDocToXPSDoc(string wordDocName, string
xpsDocName)
{
// Create a WordApplication and add Document to it
Microsoft.Office.Interop.Word.Application
wordApplication = new Microsoft.Office.Interop.Word.Application();
wordApplication.Documents.Add(wordDocName);
Document doc = wordApplication.ActiveDocument;
// You must make sure you have Microsoft.Office.Interop.Word.Dll version
12.
// Version 11 or previous versions do not have
WdSaveFormat.wdFormatXPS option
try
{
doc.SaveAs(xpsDocName, WdSaveFormat.wdFormatXPS);
wordApplication.Quit();
XpsDocument xpsDoc = new XpsDocument(xpsDocName,
System.IO.FileAccess.Read);
return xpsDoc;
}
catch (Exception exp)
{
string str = exp.Message;
}
return null;
}

DocumentViewer Control in XAML

<Grid>
<DocumentViewer HorizontalAlignment="Left" Margin="0,42,0,0"
Name="documentViewer1" VerticalAlignment="Top" Height="508" Width="766"
/>
<TextBox Height="29" HorizontalAlignment="Left" Margin="6,6,0,0"
Name="SelectedFileTextBox" VerticalAlignment="Top" Width="276" />
<Button Content="Browse" Height="30" HorizontalAlignment="Right"
Margin="0,6,353,0"
Name="BrowseButton" VerticalAlignment="Top" Width="122"
Click="BrowseButton_Click" />
</Grid>

Ellipse Control in WPF
The Ellipse object represents an ellipse shape and draws an ellipse with the given height
and width. The Width and Height properties of the Ellipse class represent the width and
height of an ellipse. The Fill property fills the interior of an ellipse. The Stroke property sets
the color and Stroke Thickness represents the width of the outer line of an ellipse.
Creating an Ellipse
The Ellipse element in XAML creates an ellipse shape. The following code snippet creates an
ellipse by setting its width and height properties to 200 and 100 respectively. The code also
sets the black stroke of width 4.

<Ellipse

Width="200"

Height="100"

Fill="Blue"

Stroke="Black"

StrokeThickness="4" />

Output-

Content Control in WPF
A ContentControl has a limited default style. If you want to enhance the appearance of the
control, you can create a new DataTemplate. Another typical scenario is to use the
ContentControl to show more information about an item selected in an ItemsControl control.
Content Model: ContentControl is the class from which other content controls inherit.
XAML Code

> ContentControl Margin = " 1,09,07,,0 " Name = " contentControl1 " </
> Button Height = " 97 " Margin = " 1,09,1,1 " Name = " button1 "
VerticalAlignment = " Top "
HorizontalAlignment = " Left " Width = " 90 " < Button /> Button <
> Button Height = " 97 " Margin = " 1,09,71,1 " Name = " button2 "
VerticalAlignment = " Top "
HorizontalAlignment = " Right " Width = " 17 " < Button /> Button <
> Button Height = " 97 " HorizontalAlignment = " Right " Margin = " 1,09,07,1 "
Name = " button3 "
VerticalAlignment = " Top " Width = " 19 " < Button /> Button <
> Button HorizontalAlignment = " Left " Margin = " 1,77,1,011 " Name = " button4 "
Width = " 90 " < Button /> Button <
> Button Margin = " 1,77,71,011 " Name = " button5 "
HorizontalAlignment = " Right " Width = " 17 " < Button /> Button <
> Button HorizontalAlignment = " Right " Margin = " 1,77,07,011 " Name = " button6 "
Width = " 19 " < Button /> Button <
> Button Height = " ,0 " Margin = " 1,1,07,,0 " Name = " button7 "
VerticalAlignment = " Bottom " < Button /> Button <

Output-

Frame Control in WPF
The Frame control in WPF supports content navigation within content. A Frame can be
hosted within a Window, NavigationWindow, Page, UserControl, or a FlowDocument control.

XAML code -

<Window x:Class="WpfApplication5.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid Width="224">
<TextBlock>Outside area of frame</TextBlock>

<Frame Source="Page1.xaml">

</Frame>
</Grid>
</Window>

The Window looks like as below in picture. The Blue area is the Page1.xaml and white area
is outside of the Frame.

Now you can manage contents of a frame the way you want. For example, the following
code rotates the contents of frame to 45 angle.

<Frame Source="Page1.xaml">

<Frame.LayoutTransform>

<RotateTransform Angle="45" />

</Frame.LayoutTransform>

</Frame>

Output -

GroupBox Control in WPF
The GroupBox element in XAML represents a GroupBox control.
XAML Code for GroupBox Control

<Window x:Class="WpfApplication5.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<GroupBox Header="GroupBox" Margin="13,28,34,43" Name="groupBox1">
<CheckBox Height="21" Name="checkBox1">CheckBox</CheckBox>
</GroupBox>
<CheckBox Height="16" Margin="19,82,139,0" Name="checkBox2"
VerticalAlignment="Top">CheckBox</CheckBox>
<Button Height="23" Margin="125,96,79,0" Name="button1"
VerticalAlignment="Top">
Button</Button>
</Grid>
</Window>


Grid Control In WPF Window Based
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 grid consists of rows and columns . To setup this, use the following definition:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>



A Grid has RowDefinitions and ColumnDefinitions that specify the height (specific to the
row), the width (specific to the column), and possibly other dimensional aspects. Normally,
you would expect to see a combination of row/cell or row/column
objects to lay out the grid; however, WPF
works differently. Each control has a Grid.Row and Grid.Column, which specifies the
row/column to render in.
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 in Grid:

The grid has one row and column by default. To create additional rows and columns, you
have to add RowDefinition items 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, percentally divided over all star-sized columns.
Star-sizes are like percentages, except that the sum of all star columns does not have to be
100%. Remember that star-sizing does not work if the grid size is calculated based on its
content.
How to Add Control To 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>


Example of Grid Control-


XAML Code

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid Height="284" Background="Beige" Width="343">

<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="25" />
<RowDefinition Height="Auto" MinHeight="27" />
<RowDefinition Height="174*" />
<RowDefinition Height="31.447*" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="61" />
<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" Content="Comment:" Grid.RowSpan="2"
/>
<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"
Grid.RowSpan="2" />


<Button Grid.Column="1" Grid.Row="4"
HorizontalAlignment="Right"
MinWidth="80" Margin="3" Content="Discard
" />

<Button Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Right"
MinWidth="80" Margin="0,5.999,-79.547,0" Content="Send"
Height="21.277"
Grid.RowSpan="2" VerticalAlignment="Top" Width="80" />


</Grid>
</Window>

Progressbar Control Using WPF Window Based
The ProgressBar tag in XAML represents a WPF ProgressBar control.
<ProgressBar></ProgressBar>
The Width and Height properties represent the width and the height of a ProgressBar. The
Name property represents the name of the control, which is a unique identifier of a control.
The Margin property tells the location of a ProgressBar on the parent control. The
HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical
alignments.
Syntax of ProgressBar:
<ProgressBar Margin="10,10,0,13" Name="ListView1" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="300" Height="30" />
Setting up ProgressBar Value :
The Value property of ProgressBar sets up the current value of a ProgressBar control. In the
following code, I set the Value property to 60 .

<ProgressBar Margin="10,10,0,13" Name="PBar" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="300" Height="30" Value="60" >

</ProgressBar>

Next up, we are going to add an animation that will automatically fill and unfill the progress
bar. So we are going to add a Trigger that fires after our progress bar has loaded. That
trigger will fire a storyboard with an animation. The animation will be set to increase the
ProgressBar.Value from 0 to 100 over the course of 1 second. We set the autoreverse
property to true, to allow the animation to go forwards and backwards. The xaml to do this
would be:

.XAML Code:


<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid Background="Beige">

<ProgressBar Margin="119,136,126,0" Name="ProgressBar1" Height="24"
VerticalAlignment="Top">

<ProgressBar.RenderTransform>

<RotateTransform Angle="0" CenterX="75" CenterY="12" />

</ProgressBar.RenderTransform>

<ProgressBar.Triggers>

<EventTrigger RoutedEvent="ProgressBar.Loaded">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="ProgressBar1"

Storyboard.TargetProperty="Value"

From="0" To="100" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever" />

<DoubleAnimation

Storyboard.TargetName="ProgressBar1"

Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"

From="0" To="360" Duration="0:0:2"

AutoReverse="False" RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</ProgressBar.Triggers>





</ProgressBar>



</Grid>
</Window>


Menu Control Using WPF Window Based
A Menu is a collection of menu items with a command associated with each menu items. A
menu item may have children menu items called submenus. This article discusses how to
work with menus in XAML and WPF applications.
The Menu tag in XAML creates a menu control.

The Name property defines the name of the menu and Height and Width represents the
height and width of a menu control.
Syntax Of Menu Control:
<Menu Margin="37,15,63,0" Name="menu1" Height="22"
VerticalAlignment="Top" />
This Tag Creates a Menu Control.
Important Properties:
Name --> Defines the name of the menu.
Height --> Defines the Height of the menu
Width --> Defines the width of the menu
Margin --> Defines the position of the menu
Background--> Defines backcolor of the menu
HorizontalAlignment --> Defines the horizontal alignment of the menu inside the parent
control.
HorizontalContentAlignment --> Defines the horizontal alignment for the menu content.
VerticalAlignment --> Defines the vertical alignment of the menu inside the parent control.
VerticalContentAlignment --> Defines the content alignment for the menu content.
ToolTip --> defines the tooltip for the menu.

A MenuItem can have other MenuItem tags within it as child/sub menus and can go up to
several levels. The following code adds three children menu items to first menu item.

<MenuItem Header="_File">

<MenuItem Header="_Open"
IsCheckable="true"/>

<MenuItem Header="_Close"
IsCheckable="true"/>

<MenuItem Header="_Save"
IsCheckable="true"/>
</MenuItem>





Adding Tooltips to Menus:


The MenuItem.ToolTip tag adds a tooltip to a menu item. The following code adds a tooltip
to the Open menu item.
<MenuItem Header="_Open"
IsCheckable="true">

<MenuItem.ToolTip>

<ToolTip>

Open a file.

</ToolTip>

</MenuItem.ToolTip>

</MenuItem>

Adding an Event Trigger to a MenuItem:

The Click event is used to add the menu item click event handler. The following code adds a
click event handler for a menu item.

<MenuItem IsCheckable="true" Header="_Open" Click="MenuItem_Click">
The event handler is defined like following in the code behind. I added a message box when
the menu item is clicked.


private void MenuItem_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("Menu item clicked");

}

XAML Code Of Menu Control:

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid>

<Menu IsMainMenu="True" Background="WhiteSmoke">
<MenuItem Header="_File" Click="MenuItem_Click" FontSize="15"
Foreground="Blue">
<MenuItem Header="_Open" IsCheckable="true"
Click="MenuItem_Click">
<MenuItem.ToolTip>

<ToolTip>

Open a file.

</ToolTip>

</MenuItem.ToolTip>
</MenuItem>

<MenuItem Header="_Close" IsCheckable="true"/>

<MenuItem Header="_Save" IsCheckable="true"/>
</MenuItem>
<MenuItem Header="_Edit" Click="MenuItem_Click_1"
Foreground="Blue" FontSize="15" />
<MenuItem Header="_View" Click="MenuItem_Click_2"
Foreground="Blue" FontSize="15" />
<MenuItem Header="_Window" FontSize="15" Foreground="Blue"
/>
<MenuItem Header="_Help" Click="MenuItem_Click_3"
Foreground="Blue" FontSize="15" />
</Menu>


</Grid>
</Window>


ListView Control Using WPF Window Based
The ListView tag represents a WPF ListView control in XAML.
<ListView></ListView>
The Width and Height properties represent the width and the height of a ListView. The
Name property represents the name of the control, which is a unique identifier of a control.
The Margin property tells the location of a ListView on the parent control. The
HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical
alignments.
The following code snippet sets the name, height, and width of a ListView control. The code
also sets horizontal alignment to left and vertical alignment to top.

Syntax:
<ListView Margin="10,10,0,13" Name="ListView1" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="194" Height="200" />

Adding ListView Items:
A ListView control hosts a collection of ListViewItem. The following code snippet adds items
to a ListView control.
XAML CODE:

<ListView Margin="35,40,0,97" Name="ListView1"
HorizontalAlignment="Left" Width="183">

<ListViewItem Content="C"></ListViewItem>

<ListViewItem Content="C++"></ListViewItem>

<ListViewItem Content="Java"></ListViewItem>

<ListViewItem Content=".Net"></ListViewItem>

<ListViewItem Content="Oracle"></ListViewItem>

<ListViewItem Content="SilverLight"></ListViewItem>
<ListViewItem Content="SharePoint"></ListViewItem>

<ListViewItem Content="WPF"></ListViewItem>

<ListViewItem Content="WCF"></ListViewItem>


</ListView>

Output:

Adding Item in ListView Dynamically Using WPF Window
Based
private void button1_Click(object sender, RoutedEventArgs e)

{

ListView1.Items.Add(textBox1.Text);

}
On button click event handler, we add the content of TextBox to the ListView by calling
ListView.Items.Add method. Now if you enter text in the TextBox and click Add Item button,
it will add contents of the TextBox to the ListView.
Example:

Deleting ListView Items:

The button click event handler looks like following. On this button click,
we find the index of the selected item and call ListView.Items.RemoveAt method as
following.


private void button2_Click(object sender, RoutedEventArgs e)
{
ListView1.Items.RemoveAt( ListView1.Items.IndexOf(ListView1.SelectedItem));
}


Example:
After press Delete Button it Will Delete From ListBox:


Formatting and Style of Listview Using WPF Window Based
The following code sets background and foreground color of a ListViewItem.

<ListViewItem Background="LightCoral" Foreground="Red"
Content="Coffie"></ListViewItem>

Example:

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid Background="Beige">
<ListView Margin="8,47,0,80" Name="ListView1"
HorizontalAlignment="Left" Width="127">

<ListViewItem Content="C" Background="LightPink" Foreground="Blue"
></ListViewItem>

<ListViewItem Content="C++" Background="Violet" Foreground="Blue"
></ListViewItem>

<ListViewItem Content="Java" Background="Silver" Foreground="Blue"
></ListViewItem>

<ListViewItem Content=".Net" Background="CadetBlue"
Foreground="Blue" ></ListViewItem>

<ListViewItem Content="Oracle"></ListViewItem>

<ListViewItem Content="SilverLight" Background="MediumSpringGreen"
Foreground="Blue" ></ListViewItem>
<ListViewItem Content="SharePoint" Background="DarkOrange"
Foreground="Blue" ></ListViewItem>

<ListViewItem Content="WPF" Background="Bisque" Foreground="Blue"
></ListViewItem>

<ListViewItem Content="WCF" Background="Gold" Foreground="Blue"
></ListViewItem>


</ListView>
<TextBox Height="23" HorizontalAlignment="Left" Margin="8,14,0,0"

Name="textBox1" VerticalAlignment="Top" Width="127" />

<Button Height="23" Margin="140,14,0,0" Name="button1"
VerticalAlignment="Top"

HorizontalAlignment="Left" Width="76" Click="button1_Click">

Add Item

</Button>
<Button Height="23" Margin="140,47,0,0" Name="button2"
VerticalAlignment="Top"
Click="button2_Click" HorizontalAlignment="Left" Width="76">Delete
Item</Button>
</Grid>

</Window>


RadioButton Control Using WPF Window Based
RadioButton controls are usually grouped together to offer user a single choice among
Different options (only one button at a time can be selected).
<RadioButton> </RadioButton> tag is used to create the radio button in XAML File.

Syntax of RadioButton:
<RadioButton Height="18" Margin="92,58,0,0" Name="radioButton1"
VerticalAlignment="Top"
HorizontalAlignment="Left" Width="82">RadioButton</RadioButton>
In the following tag I create the RadioButton in which Height is height of the RadioButton,
Name is the name of the RadioButton, text in the between the RadioButton tag is the
content visible to user. The Background and Foreground properties represent the
background and foreground colors of a RadioButton. The following code sets the name,
height, and width of a RadioButton control.
The code also sets horizontal alignment to left and vertical alignment to top

> RadioButton Height = " 07 " Margin = " 7,,,7,1,1 " Name = " radioButton1 "
VerticalAlignment = " Top "











HorizontalAlignment = " Left " Width = " 7, " < RadioButton /> RadioButton <
Example:






XAML Code



<Window x:Class="WpfApplication7.Window1"

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


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






Title="Window1" Height="370" Width="417"><Grid>





<RadioButton Height="18" Margin="92,58,0,0"
Name="radioButton1" VerticalAlignment="Top"

HorizontalAlignment="Left" Width="82"
Background="Crimson"
Foreground="DarkBlue">M.Tech</RadioButton>






<RadioButton Height="17" Margin="92,85,126,0"
Name="radioButton2" VerticalAlignment="Top"





Checked="radioButton2_Checked" Background="Crimson"
Foreground="DarkBlue">B.Tech</RadioButton>






<RadioButton Height="17" Margin="92,115,126,0"
Name="radioButton3" VerticalAlignment="Top"
Checked="radioButton3_Checked"
Background="Crimson" Foreground="DarkBlue">MCA</RadioButton>





<RadioButton Height="20" Margin="92,141,126,0"
Name="radioButton4" VerticalAlignment="Top"






Background="Crimson"
Foreground="DarkBlue">BCA</RadioButton>





<Label Height="32" Margin="20,15,0,0" Name="label1"
VerticalAlignment="Top"
HorizontalAlignment="Left" Width="171" FontSize="18"
Foreground="DarkGreen">Plese Select
Course</Label>





<Button Height="22.861" HorizontalAlignment="Right"
Margin="0,53.139,18,0" Name="button1"
VerticalAlignment="Top" Width="102"
Click="button1_Click">Find Selected Item</Button>





<UniformGrid Margin="110,123,84,109" Name="uniformGrid1"
/>





</Grid>

</Window>


.XAML.CS Code:

private void button1_Click(object sender, RoutedEventArgs e)

{






if (radioButton1.IsChecked == true)
{





MessageBox.Show("Your Selected Course is " +
radioButton1.Content);
}





else if (radioButton2.IsChecked == true)
{





MessageBox.Show("Your Selected Course is " +
radioButton2.Content);
}





else if (radioButton3.IsChecked == true)
{





MessageBox.Show("Your Selected Course is " +
radioButton3.Content);
}





else if (radioButton4.IsChecked == true)
{





MessageBox.Show("Your Selected Course is " +
radioButton4.Content);
}
}










private void radioButton3_Checked(object sender,
RoutedEventArgs e){}





private void radioButton2_Checked(object sender,
RoutedEventArgs e) {}





Tab Control Using WPF Window Based
Each TabControl can contain Multiple collection of TabItem elements. TabItem has two
specific attributes. Header is the string value that you see on top of each tab and IsSelected
is a Boolean value that specifies if a tab is selected. Bassically only one tab can be selected
at a time otherwise the first tab in list will be selected.
Two elements play main roles in Creating a tab control: TabControl and TabItem.
TabControl is the container of one or more TabItem elements.
Syntax of TabControl:
<TabControl Margin="41,46,0,0" Name="tabControl1" Height="100"
VerticalAlignment="Top"
HorizontalAlignment="Left" Width="200" />
In the following tag I create the TabControl in which Height is height of the
TabControl ,
Name is the name of the TabControl ,
The Background and Foreground properties represent the background and foreground colors
of a TabControl.

The following code sets the name, height, and width of a RadioButton control. The code
also sets horizontal
alignment to left and vertical alignment to top
<TabControl>
<TabItem Header="Tab 1">Home</TabItem>
<TabItem Header="Tab 2">Services</TabItem>
<TabItem Header="Tab 3">Help</TabItem>
<TabItem Header="Tab 4">Contact Us</TabItem>
</TabControl>
Example

XAML Code for Tab Control-


<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid>
<TabControl Margin="19,21,0,0" Name="tabControl1" Height="267"
VerticalAlignment="Top"
HorizontalAlignment="Left" Width="256" IsTabStop="True">
<TabItem Header="Home" IsSelected="True" IsTabStop="False">
<Image ></Image>

</TabItem>
<TabItem Header="Courses" IsSelected="True"
Background="Goldenrod">
<TextBlock Background="Gray">
</TextBlock>
</TabItem>
<TabItem Header="Contact Us" IsSelected="True">


</TabItem>
</TabControl>

</Grid>

</Window>
Password Control in WPF Window Based
The password box control is a special type of TextBox designed to enter passwords. The
typed in characters are replaced by asterisks. Since the password box contains a sensible
password it does not allow cut, copy, undo and redo commands.
The PasswordBox control allows you to hide the characters and limit the number of
characters to be typed in the editable area.
Properties:

Password property contains the password in the PasswordBox and PasswordChar is the
masking character for the password.

Following tag create the Password Box control with the masking character as * and
maximum password length of 50 characters.
The MaxLength property is used to get and set the maximum number of characters you can
enter in a PasswordBox.

> PasswordBox Height = " ,7 " Margin = " 11,91,007,1 " Name = " PasswordBox1 "
VerticalAlignment = " Top "
PasswordChar = "*" MaxLength = " ,1 " </


Event: To handle the event add the PasswordChanged="Password1_OnPasswordChanged"
in the xaml and write the handler as
PasswordChanged event is main event of the control and is raised when password property
has been changed

protected void Password1_OnPasswordChanged(object sender, RoutedEventArgs e)

{

Console.WriteLine(PasswordBox1.Password);

}
Example

XAML Code-

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid Background="AliceBlue">
<PasswordBox Height="23" Margin="85,91,0,0"
Name="passwordBox1" VerticalAlignment="Top"
HorizontalAlignment="Left" Width="102" Password="gupta" />
<TextBox Height="23" Margin="85,56,113,0" Name="textBox1"
VerticalAlignment="Top"
HorizontalAlignment="Left" Width="102
" />
<Label Height="23" HorizontalAlignment="Left" Margin="17,56,0,0"
Name="label1"
VerticalAlignment="Top" Width="81">Username</Label>
<Label Height="23" HorizontalAlignment="Left" Margin="17,91,0,0"
Name="label2"
VerticalAlignment="Top" Width="81">Password</Label>
<Button Margin="85,130,0,0" Name="button1" Click="button1_click"
HorizontalAlignment="Left"
Width="85" Height="29" VerticalAlignment="Top">Login</Button>
</Grid>

</Window>
ScrollViewer Control In WPF Window Based
WPF provides a ScrollViewer control that is a container for other controls and creates a
scrollable area. It is simple to create and add to a XAML file. The developer can choose to
display a horizontal and/or vertical scroll bar. For this article, I chose to hide the scoll bar so
that the user must scroll by clicking on the content in the ScrollViewer..In WPF scrolling or
you can say the ScrollViewer is used when we want to fit the large amounts of content in a
limited amount of space. The ScrollViewer control provides a convenient way to enable
scrolling of content in WPF. ScrollViewer encapsulated the ScrollBars within it and displays it
whenever it is required. As the ScrollViewer implements IScrollInfo is the main scrolling
area inside the scrollviewer. ScrollViewer also responds to mouse and keyboard commands.
Syntax of ScrollViewer:

<ScrollViewer HorizontalScrollBarVisibility="Visible" >
</ScrollViewer>


Example:

XAML Code-

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible" >
<Grid Background="Aqua">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Margin="5" Grid.Column="0" Grid.Row="0">List of Student
:</Label>
<Label Margin="5" Grid.Column="0" Grid.Row="1">Address:</Label>
<Label Margin="5" Grid.Column="0"
Grid.Row="2">Comment:</Label>
<RichTextBox Margin="5" Grid.Column="1" Grid.Row="0"
MinWidth="100" />
<RichTextBox Margin="5" Grid.Column="1" Grid.Row="1"
MinWidth="100" />
<RichTextBox Margin="5" Grid.Column="1" Grid.Row="2"
MinWidth="100" />
</Grid>
</ScrollViewer>

</Grid>
</Window>
Slider Control in WPF Window Based
Slider can be used as a selector for Diffrent values. These values (which are double) can
have a minimum and maximum. You can put different tick values for these values to split
this interval. On the other hand you can set some values for intervals and delays between
movements and clicks on ticks.
Important Properties :
AutoToolTipPlacement: Specifies if a ToolTip must be shown and where it will be
displayed.
Delay: A value in milliseconds that specifies how long RepeatButton should wait
before an decrease or increase.
Interval: a value in milliseconds that specifies the time for waiting between repeats.
LargeChange: The amount that should be added or subtracted to or from Value
attribute when user clicks on scrollbar.
Maximum: Maximum value for slider.
Minimum: Minimum value for slider.
Orientation: Gets to values, Horizontal or Vertical and specifies the orientation of
slider Control.
SmallChange: The amount that should be added or subtracted to or from Value
attribute when user clicks on thumb.
TickPlacement: Determines the place that ticks should be placed.
Ticks: A required attribute and a set of double values for ticks.
Value: ByDefault selected value for tick.
Syntax Of Slider Control:

<Slider Name="Slider1" Width="200"
Height="20"

Background="Gray" Maximum="80"
Minimum="0">

</Slider>



In Above Code The Width and Height property represent the width and the height of the
control. The Name property represents name of the control, which is a unique identifier of
the control. The Background property is used to set the background color of the control. The
Minimum and Maximum properties represent the minimum and maximum values of the
slider range.
Example:
Original Image:

When we increase the slider the image zooms.

XAML Code -

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid Background="LightCoral">
<Grid.RowDefinitions>

<RowDefinition Height="200" />

<RowDefinition Height="30" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Rectangle Width="250" HorizontalAlignment="Left" Margin="25,0,0,0"
Height="200" VerticalAlignment="Top">

<Rectangle.Fill>

<ImageBrush x:Name="imageBrush" ImageSource="D:\Documents
and Settings\All Users\
Documents\My Pictures\Sample Pictures\Sunset.jpg"/>

</Rectangle.Fill>

</Rectangle>



<Slider Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10"

Value="1"

Delay="100"

Interval="5"

TickPlacement="BottomRight"

Minimum="1"

Maximum="10" AutoToolTipPlacement="BottomRight"

ValueChanged="slider_ValueChanged"

Grid.Row="1" Margin="25,0,0,0" HorizontalAlignment="Left"
Width="250"
Height="30" VerticalAlignment="Top">

</Slider>
</Grid>
</Window>

.CS Code-

private void slider_ValueChanged(object sender,
RoutedPropertyChangedEventArgs<double> e)
{
double value = e.NewValue;



ImageBrush imageBrush = this.FindName("imageBrush") as
ImageBrush;

imageBrush.Viewbox = new Rect(0.3, 0.3, 1 / value, 1 / value);
}

ViewBox control in WPF Window Based
The Viewbox element automatically scales its content to fill the space available.the Viewbox
control, which expands a control to fill the available space (while keeping the aspect ratio)
but the control can assume absolute size. The view box could only have one child; else if a
view box contains more than one child, an argument exception will be thrown. Viewbox and
Viewport are the properties of ImageBursh, DrawingBrush, TileBrush and VisualBrush
elements in Windows Presentation Foundation. With these two attributes we can crop
images and shapes.
Example of ViewBox Control In WPF
Real Image:

Figure 2: See the image after selecting an area in ViewBox Control.


XAML Code-

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="400" />

</Grid.RowDefinitions>



<Grid.ColumnDefinitions>

<ColumnDefinition Width="400" />

</Grid.ColumnDefinitions>



<Rectangle Grid.Row="0" Grid.Column="0" Stretch="Uniform"
>

<Rectangle.Fill>

<!-- Here By passing the four value in ViewBox I will select
a area from Real Image-->

<ImageBrush ImageSource="D:\Documents and
Settings\All Users\Documents\My Pictures
\Sample Pictures\Sunset.jpg" Viewbox="0.2,0.3,0.1,0.5" />

</Rectangle.Fill>

</Rectangle>

</Grid>
</Window>

After set the property Stretch="Uniform" of image we will get:

Separator Control in WPF Window Based
This article explains how to draw a separator in a GroupBox. The separator separates the
OK and Cancel buttons from the rest of the content in that GroupBox. This is a UI design
seen relatively often in WPF Windows Application..
Example:

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417">
<Grid Height="260" Width="302">
<GroupBox Name="settingsGroupBox"
Header="Select Course"
Margin="4,4,32,99" Background="Azure">
<StackPanel Height="141" Width="259"
Background="Honeydew">
<StackPanel.Resources>
<!-- Give the CheckBoxes some room to breath. -->
<Style TargetType="CheckBox">
<Setter Property="Margin" Value="4" />
</Style>
</StackPanel.Resources>

<!-- Some CheckBoxes that represent settings. -->
<CheckBox Name="chk1" >
.Net FrameWork With C#
</CheckBox >
<CheckBox Name="chk2">
java And Advanced Java
</CheckBox>
<CheckBox Name="chk3">
PHP,CAKE PHP,Smarty
</CheckBox>
<CheckBox Name="chk4" >
Oracle,Sql Server
</CheckBox>

<!-- A separator between settings and buttons. -->
<Line
Margin="0,4"
SnapsToDevicePixels="True"
Stroke="{Binding
ElementName=settingsGroupBox,
Path=BorderBrush}"
Stretch="Fill"
X1="0" X2="1"
/>

<!-- The standard OK and Cancel Buttons. -->
<StackPanel
HorizontalAlignment="Right"
Orientation="Horizontal"
>
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="4" />
<Setter Property="Width" Value="60" />
</Style>
</StackPanel.Resources>
<Button Click="Button_Click">_OK</Button>
<Button Click="Button_Click_1">_Cancel</Button>
</StackPanel>
</StackPanel>
</GroupBox>

</Grid>
</Window>

.CS Code-

private void Button_Click(object sender, RoutedEventArgs e)
{
if (chk1.IsChecked == true)
{
MessageBox.Show("Your Selected Course is::" +
chk1.Content);
}
else if (chk2.IsChecked == true)
{
MessageBox.Show("Your Selected Course is::" +
chk2.Content);
}
else if (chk3.IsChecked == true)
{
MessageBox.Show("Your Selected Course is::" +
chk3.Content);
}
else if (chk4.IsChecked == true)
{
MessageBox.Show("Your Selected Course is::" +
chk4.Content);
}
}

Design Output:

TreeView Control in WPF Window Based
A TreeView Shows data in a hierarchical Form in a parent child relationship where a parent
node can be expanded .You can use the TreeView control to display information from a wide
variety of data sources such as an XML file, site-map file, string, or from a database. or you
can say TreeView control is a hierarchical structure to display the data. its look like a tree. it
also contain root node, parent node and child node like tree.
Features:
Internet Explorer Favorites style view.
Append a number to any node, allowing you to create an Outlook style folder list
with message counts.
Choose Font and Color on an item-by-item basis, and set the control's back color.
Bolding of items
Info Tip (multi-line tooltip) support with full control over Info Tip color
Works with Microsoft or API ImageList.
Item check boxes
Full-Row select mode
Single-Click expand mode
Supports Two Images per item: one standard icon and a state icon.
Disable Custom Draw for maximum speed
Speed-optimized Clear method
Example of TreeView Control:

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417"
Loaded="Window_Loaded">
<Grid>

<ListView>

<TreeView Name="tree1" Background="LightCyan" >


<TreeViewItem Header="File" Background="Red"
FontSize="15">

</TreeViewItem>

<TreeViewItem Header="Edit" Background="Red"
FontSize="15" >

</TreeViewItem>

</TreeView>

</ListView>


</Grid>
</Window>

XAML .CS Code

private void Window_Loaded(object sender, RoutedEventArgs e)
{
Dictionary<string, List<string>> items = new
Dictionary<string, List<string>>()

{

{"File",new List<string>()
{"New","Open","ADD","Save","Save As","Close"}},

{"Edit",new List<string>()
{"Undo","Cut","Copy","Paste","Delete"}},

};

foreach (TreeViewItem tv in tree1.Items)
{

foreach (string item in items[tv.Header.ToString()])

tv.Items.Add(item);

}
}

Designed Output-

UniformGrid Control in WPF Window Based
The UniformGrid Control arranges content in its area so that all the cells in the grid have the
same dimension. It represents a perfect solution if someone prefers to prevent the
headache of ordering or arrange controls within an ordinary Grid.
First, the Uniform grid belongs to the System.Windows.Controls. Primitives. It could be
found in the tool box at the bottom. A UniformGrid show child elements or control in
columns and rows of the same size. Or we can say The number of cells is adjusted to
accommodate the number of controls.
Example:
XAML Code-

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="370" Width="417"
Loaded="Window_Loaded">
<Grid>
<UniformGrid Margin="15,15,15,15" Name="uniformGrid1">
<Image Source="2.jpeg" Name="img1" ></Image>
<Image Source="2.jpeg" Name="img2" ></Image>
<Image Source="2.jpeg" Name="img3" ></Image>
<Line></Line>
<Line></Line>
<Line></Line>
<Image Source="2.jpeg" Name="img4" ></Image>
<Image Source="2.jpeg" Name="img5" ></Image>
<Image Source="2.jpeg" Name="img6" ></Image>


</UniformGrid>
</Grid>
</Window>

Output-

WrapPanel Control in WPF Window Based
Wrap panel wraps all child elements to new lines if no space is left. 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.
Example:

XAML Code-

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="336" Width="430"
Loaded="Window_Loaded">
<Grid x:Name="LayoutRoot" Background="White" >

<WrapPanel Orientation="Vertical" Margin="0,0,0,-39">

<Image Source="2.jpeg" Width="102" Height="57" />

<Ellipse Width="80" Height="80" Fill="Orange" />

<Image Source="2.jpeg" Width="100.224" Height="66" />

<Ellipse Width="40" Height="40" Fill="Green" />

<Ellipse Width="20" Height="20" Fill="Blue" />



<Rectangle Width="80" Height="80"
Fill="DarkGoldenrod"></Rectangle>

<Rectangle Width="60" Height="60"
Fill="Chartreuse"></Rectangle>

<Rectangle Width="40" Height="40"
Fill="Coral"></Rectangle>

<Rectangle Width="20" Height="20"
Fill="DarkGoldenrod"></Rectangle>



</WrapPanel>
</Grid>
</Window>
Image Control in WPF Window
The Image control provides rich features to display images of various formats like JPEG,
PNG, ICO, BMP, GIF etc. Displaying an image is as simple as setting the Image. Source
property to the appropriate image file path. No special coding is required to work with
different file formats.

Example:
.XAML CODE

<Window x:Class="WpfApplication7.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="312" Width="240"
Loaded="Window_Loaded">
<Grid>
<Image Margin="8,9,0,0" Name="image1" Stretch="Fill"
Height="231"
VerticalAlignment="Top" HorizontalAlignment="Left" Width="197" />
</Grid>
</Window>

.CS code to Add Image in Image Control-

private void Window_Loaded(object sender, RoutedEventArgs e)
{
image1.Source = new BitmapImage(new Uri("2.jpeg",
UriKind.Relative));

}

Designed Output-

Rectangle Control in WPF Window Based
Rectangle Means From Latin: rectus "right" + angle
A 4-sided polygon where all interior angles are 90 The rectangle, like the square, is one of
the most commonly known quadrilaterals. It is defined as having all four interior angles 90
(right angles). The Rectangle object represents a rectangle shape and draws a rectangle
with the given height and width. The <Rectangle /> element of XAML draws a rectangle.
The Height and Width attributes represent the height and width of the rectangle. The Stroke
and StrokeThickness represents the color and thickness of the rectangle boundary.
Example:
XAML Code-

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="312" Width="240" Loaded="Window_Loaded">
<Grid>
<Rectangle Margin="14,40,0,0" Name="rectangle1" Stroke="Violet"
StrokeThickness="9" Height="100"
VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" Fill="Pink"
RadiusX="6" RadiusY="6" />
</Grid>
</Window>

in This code The Fill attributes fill a rectangle with a color. The following code fills a
rectangle with pink color.
By setting RadiusX and RadiusY attributes, you can also draw a rectangle with rounded
corders.
Output: