What is Windows Presentation Foundation (wpf)?

What is wpf ?

Windows Presentation Foundation (or WPF) is a graphical subsystem for rendering user interfaces in Windows-based applications by Microsoft. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0. Rather than relying on the older GDI subsystem, WPF uses DirectX.

WPF employs XAML, an XML-based language, to define and link various interface elements.[1] WPF applications can also be deployed as standalone desktop programs, or hosted as an embedded object in a website. WPF aims to unify a number of common user interface elements, such as 2D/3D rendering, fixed and adaptive documents, typography, vector graphics, runtime animation, and pre-rendered media. These elements can then be linked and manipulated based on various events, user interactions, and data bindings.

Windows Presentation Foundation (WPF) is a next-generation presentation system for building Windows client applications with visually stunning user experiences.

If you have been programming .NET, you must be familiar with Windows Forms and ASP.NET. Windows Forms are used to build Windows client application and ASP.NET is used to build Web applications.

Well, WPF is a new technology that may be used instead of both Windows Forms and ASP.NET.

Video Tutorial

How to Hosting a Windows Control in WPF Application?

Introduction:

Open Visual Studio 2008 and create a new project, a WPF application and name it myWpfApplication

Figure1
The new WPF form called Window1 appears in addition to the XAML code editor

Figure 2
Expand the project node in the solution explorer and right click the references menu item, then click add reference context menu item.

Figure 3
Select the .Net tab then add WindowsFormsIntegration assembly reference to the solution.

Figure 4
Then add another reference, it will be our well known Windows forms assembly

Figure 5
Now, as the references are added, switch to the C# code by right clicking the Window1 and clicking the view code context menu item

Do add the two namespaces

using System.Windows.Forms;
using System.Windows.Forms.Integration;
Expand the toolbox and go to the bottom, you find there an element witch called WindowsFormHost
Drag and drop it into the WPF window or simply add this couple of lines of XAML code into the XAML editor

<my:WindowsFormsHost Margin="18,20,38,73" Name="windowsFormsHost1">

</my:WindowsFormsHost>
Take a look on the XAML code, it will look like this

<Window x:Class="myWpfApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
         Loaded="Window_Loaded">
    <Grid>
        <WindowsFormsHost Height="100" Margin="39,27,39,0" Name="windowsFormsHost1"   VerticalAlignment="Top" >

        </WindowsFormsHost>

    </Grid>
</Window>
Within the WindowsFormHost tag, add those lines:

<WindowsFormsHost Height="100" Margin="39,27,39,0" Name="windowsFormsHost1"VerticalAlignment="Top" >
  <wf:ElementHost BackColor="Beige">
    <Button Background="Bisque" Margin="39,27,39,27" Click="Button_Click">Click me  please!</Button>
  </wf:ElementHost>
</WindowsFormsHost>
Now, switch to the code behind zone, you find there the button click event handler related stub, then implement it as follows

private void Button_Click(object sender, RoutedEventArgs e)
{
System.Windows.Forms.MessageBox.Show("My parent is the hosted window form","Message");
}
Do run the application and observe

Figure 6

how to use XAML GroupBox in WPF and Windows phone application?

The GroupBox element in XAML is used to add a header to an area and within that area you can place controls. By default, a GroupBox can have one child but multiple child controls can be added by placing a container control on a GroupBox such as a Grid or StackPanel.

How to create a GroupBox in WPF and Windows phone application,.

The GroupBox element in XAML represents a GroupBox control. The following code snippet creates a GroupBox control and sets its background and font. The code also sets the header using GroupBox.Header.

<Window x:Class="GroupBoxSample.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 Margin="10,10,10,10" FontSize="16" FontWeight="Bold"
Background="LightGray">
<GroupBox.Header>
Mindcracker Network
</GroupBox.Header>
<TextBlock FontSize="12" FontWeight="Regular">
This is a group box control content.
</TextBlock>
</GroupBox>
</Grid>
</Window>

The output looks like this.

How to use a XAML RichTextBox in WPF and windows phone application?

Introduction

The RichTextBox control allows you to view and edit text, paragraph, images, tables and other rich text format contents.

The RichTextBox tag represents a RichTextBox control in XAML.

The Width and Height properties represent the width and the height of a RichTextBox. The Name property represents the name of the control, that is a unique identifier of a control. The Margin property tells the location of a RichTextBox on the parent control. The HorizontalAlignment andVerticalAlignment properties are used to set horizontal and vertical alignments.

The following code snippet sets the name, height and width of a RichTextBox control. The code also sets the horizontal alignment to left and the vertical alignment to top.

<RichTextBox Margin="10,10,0,13" Name="RichTextBox1" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="500" Height="300" />

Displaying and Edit Text

A RichTextBox control hosts a collection of RichTextBoxItem. The following code snippet adds items to a RichTextBox control.

<RichTextBox Margin="10,10,0,13" Name="RichTextBox1" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="500" Height="300">
<FlowDocument>
<Paragraph>
I am a flow document. Would you like to edit me?
<Bold>Go ahead.</Bold>
</Paragraph>

<Paragraph Foreground="Blue">
I am blue I am blue I am blue.
</Paragraph>
</FlowDocument>
</RichTextBox>

The preceding code generates Figure 1 where you can begin editing text right away.

RichTextBox with editable text

Creating and Using RichTectBox Dynamically

In the previous section, we saw how to create and use a RichTextBox in XAML. WPF provides the RichTextBox class that represents a RichTextBox control. In this section, we will see how to use this class to create and use a RichTextBox control dynamically.

The code listed in Listing 1 creates a FlowDocument, adds a paragraph to the flow document and sets the Document property of the RichTextBox to FlowDocument.

private void CreateAndLoadRichTextBox()
{
// Create a FlowDocument
FlowDocument mcFlowDoc = new FlowDocument();

// Create a paragraph with text
Paragraph para = new Paragraph();
para.Inlines.Add(new Run("I am a flow document. Would you like to edit me? "));
para.Inlines.Add(new Bold(new Run("Go ahead.")));

// Add the paragraph to blocks of paragraph
mcFlowDoc.Blocks.Add(para);

// Create RichTextBox, set its hegith and width
RichTextBox mcRTB = new RichTextBox();
mcRTB.Width = 560;
mcRTB.Height = 280;

// Set contents
mcRTB.Document = mcFlowDoc;

// Add RichTextbox to the container
ContainerPanel.Children.Add(mcRTB);
}

Listing 1.

The output of Listing 1 generates Figure 2.

Listing 1 doc

Enable Spelling Check

A RichTextBox control comes with spell check functionality out-of-the-box. By setting theSpellCheck.IsEnabled property to true enables spell checking in a RichTextBox.

SpellCheck.IsEnabled="True"

You can set this in code as follows:

mcRTB.SpellCheck.IsEnabled = true;

Now if you type some text, the wrong word would be underlined with the Red color. See in Figure 3.

RichTextBox with Spell Check Enabled

Loading a Document in RichTextBox
We can use the RichTextBox.Items.Remove or RichTextBox.Items.RemoveAt methods to delete an item from the collection of items in the RichTextBox. The RemoveAt method takes the index of the item in the collection.
Now, we modify our application and add a new button called Delete Item. The XAML code for this button looks as in the following:

private void LoadTextDocument(string fileName)
{
TextRange range;
System.IO.FileStream fStream;
if (System.IO.File.Exists(fileName))
{
range = new TextRange(RichTextBox1.Document.ContentStart, RichTextBox1.Document.ContentEnd);
fStream = new System.IO.FileStream(fileName, System.IO.FileMode.OpenOrCreate);
range.Load(fStream, System.Windows.DataFormats.Text );
fStream.Close();
}
}

Used Material Design Themed TimePicker and Clock Controls for WPF and Windows Phone Application?

I've managed to get the existing WPF controls; DatePicker & Calendar themed as part of Material Design in XAML Toolkit as described in this blog post.

But the fun part was cranking a couple of brand new controls to build the Material Design time picker experience:

TimePicker
Clock

These are sibling controls to the existing DatePicker and Calendar controls. I wanted to keep the API experience similar so you can dive straight in without any kind of learning curve. The Clock can be used in isolation, or use the DatePicker for an easy picker/popup/drop down behaviour.

Here's a static glimpse at the picker:

And here's a gif of the clock in action:

There's nothing complicated about using these, but you will need to get Material Design In XAML Toolkit referenced and set up in your app. Follow the initial tutorial, and head over to GitHub to download the source/examples project.

How to use ListBox in WPF and windows phone application Part 6?

Data Binding with Controls

The last data binding type we will see is how to provide a data exchange between a ListBox and other controls using data binding in WPF.

We will create an application that looks as in Figure 12. In Figure 12, I have a ListBox with a list of colors, a TextBox and a Canvas. When we pick a color from the ListBox, the text of TextBox and color of Canvas changes dynamically to the color selected in the ListBox and this is possible to do all inXAML without writing a single line of code in the code behind file.

looks like Figure
Figure 12.

The XAML code of the page looks as in following.

     <StackPanel Orientation="Vertical">
<TextBlock Margin="10,10,10,10" FontWeight="Bold">
Pick a color from below list
</TextBlock>
<ListBox Name="mcListBox" Height="100" Width="100"
Margin="10,10,0,0" HorizontalAlignment="Left" >
<ListBoxItem>Orange</ListBoxItem>
<ListBoxItem>Green</ListBoxItem>
<ListBoxItem>Blue</ListBoxItem>
<ListBoxItem>Gray</ListBoxItem>
<ListBoxItem>LightGray</ListBoxItem>
<ListBoxItem>Red</ListBoxItem>
</ListBox>
<TextBox Height="23" Name="textBox1" Width="120" Margin="10,10,0,0" HorizontalAlignment="Left" >
<TextBox.Text>
<Binding ElementName="mcListBox" Path="SelectedItem.Content"/>
</TextBox.Text>
</TextBox>
<Canvas Margin="10,10,0,0" Height="200" Width="200" HorizontalAlignment="Left" >
<Canvas.Background>
<Binding ElementName="mcListBox" Path="SelectedItem.Content"/>
</Canvas.Background>
</Canvas>
</StackPanel>

If you look at the TextBox XAML code, you will see the Binding within the TextBox.Text property that sets the binding from TextBox to another control and another control ID is ElementName and another control's property is Path. So in the following code, we are setting the SelectedItem.Content property ofListBox to the TextBox.Text property.

<TextBox.Text>

Now the same applies to the Canvas.Background property, where we set it to theSelectedItem.Content of the ListBox. Now, every time you select an item in the ListBox, theTextBox.Text and Canvas.Background properties are set to that selected item in the ListBox.

<Canvas.Background>
<Binding ElementName="mcListBox" Path="SelectedItem.Content"/>
</Canvas.Background>

Summary

In this article, I explained how to create and use a ListBox control available in WPF and WP8. We saw how to add items to a ListBox, change item properties and add images add check boxes. In the end of this article, we saw how data binding works in ListBox and how to bind a ListBox with data coming from objects, databases and other controls.

How to use ListBox in WPF and windows phone application Part 5?

Now we add a ListBox control and set its ItemsSource property as the first DataTable of the DataSetand set ItemTemplate to the resource defined above.

Now in our code behind, we define the following variables.

public SqlConnection connection;

public SqlCommand command;

string sql = "SELECT ContactName, Address, City, Country FROM Customers";

string connectionString = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\NORTHWND.MDF;Integrated Security=True;Connect Timeout=30;User Instance=True";

Now on the Windows_Loaded method, we call the BindData method and in the BindData method, we create a connection, data adapter and fill in the DataSet using the SqlDataAdapter.Fill() method.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
BindData();
}

private void BindData()
{
DataSet dtSet = new DataSet();
using (connection = new SqlConnection(connectionString))
{
command = new SqlCommand(sql, connection);
SqlDataAdapter adapter = new SqlDataAdapter();
connection.Open();
adapter.SelectCommand = command;
adapter.Fill(dtSet, "Customers");
listBox1.DataContext = dtSet;
}
}

Data Binding with XML

Now let's look at how to bind XML data to a ListBox control. The XmlDataProvider is used to bind XMLdata in WPF.

Here is an XmlDataProvider defined in XAML that contains books data. The XML data is defined within the x:Data tag.

<XmlDataProvider x:Key="BooksData" XPath="Inventory/Books">
<x:XData>
<Inventory xmlns="">
<Books>
<Book Category="Programming" >
<Title>A Programmer's Guide to ADO.NET</Title>
<Summary>Learn how to write database applications using ADO.NET and C#.
</Summary>
<Author>Mahesh Chand</Author>
<Publisher>APress</Publisher>
</Book>
<Book Category="Programming" >
<Title>Graphics Programming with GDI+</Title>
<Summary>Learn how to write graphics applications using GDI+ and C#.
</Summary>
<Author>Mahesh Chand</Author>
<Publisher>Addison Wesley</Publisher>
</Book>
<Book Category="Programming" >
<Title>Visual C#</Title>
<Summary>Learn how to write C# applications.
</Summary>
<Author>Mike Gold</Author>
<Publisher>APress</Publisher>
</Book>
<Book Category="Programming" >
<Title>Introducing Microsoft .NET</Title>
<Summary>Programming .NET
</Summary>
<Author>Mathew Cochran</Author>
<Publisher>APress</Publisher>
</Book>
<Book Category="Database" >
<Title>DBA Express</Title>
<Summary>DBA's Handbook
</Summary>
<Author>Mahesh Chand</Author>
<Publisher>Microsoft</Publisher>
</Book>
</Books>
</Inventory>
</x:XData>
</XmlDataProvider>

To bind an XmlDataProvider, we set the Source property inside the ItemsSource of a ListBox to thex:Key of XmlDataProvider and XPath is used to filter the data. In the ListBox.ItemTempate, we use the Binding property.

The output of the preceding code looks as in Figure 11.

code behind file

What is Windows Presentation Foundation (wpf)?

What is wpf ?

Video Tutorial

References

Your comment on this post:

Related Articles