Device Independent Pixel (DPI)
WPF introduces Device Independent DPI Settings for the applications built with it. For a window, it is very
important to calculate how many Dots Per inch(DPI) the screen could draw. This is generally dependent on the
hardware device and operating system in which the application runs and also how the DPI settings is applied on
the Device. Any user can easily customize these settings and hence make the application look horrible. Windows
forms application uses pixel based approach so with changing DPI settings, each control will change its size and
look.
WPF addresses this issue and makes it independent of DPI settings of the computer. Let's look at
how it is possible:
Let's say you have drawn a box, just like the one in the figure, which is 1 inch long in 96 dpi
screen. Now if you see the same application in 120 dpi settings, the box will appear smaller. This is because
the things that we see on the screen are totally dependent on dpi settings.
In case of WPF, this is
modified to density based approach. That means when the density of pixel is modified, the elements will adjust
them accordingly and hence the pixel of WPF application is Device Independent Pixel. As you can see in the
figure, the size of the control remains the same in case of WPF application and it takes more pixels in
case of 120 DPI application to adjust the size properly.
Redefine Styles and Control Templates In addition to graphics and animation
capabilities, WPF also comes with a huge flexibility to define the styles and ControlTemplates.
Style based technique as you might come across with CSS is a set of definitions which defines how the controls
will look like when it is rendered on the screen. In case of traditional windows applications, styles are tightly
coupled with each control, so that you need to define color, style, etc. for each individual control to make it
look different. In case of WPF, Styles are completely separated from the UIElement. Once you define
a style, you can change the look and feel of any control by just putting the style on the element.
Most of
the UIElements that we generally deal with are actually made using more than one individual elements.
WPF introduces a new concept of Templates, which you might use to redefine the whole control itself.
Say for instance, you have a CheckBox, which has a Rectangle in it and a
ContentPresenter (one where the caption of the TextBox appears). Thus you can redefine
your checkbox and put a ToggleButton inside it, so that the check will appear on the
ToggleButton rather than on the Rectangle. This is very interesting. We will look into
more detail on Styles and ControlTemplates in later section of the article.
According to the definition, XAML is an XML based declarative markup language for specifying and setting the
characteristics of classes. In other words, XAML is a language used by WPF, Silverlight or any other application
which can declare classes by itself. So, you can declare a variable, define the properties of any class and
directly use it in your application. The XAML parser will automatically parse and create the actual object
while it renders the application.
XAML is generally used to define layout of UI, its elements and
objects for static and visual aspect. We cannot define flow of a program using XAML. So even though there are
large capabilities of XAML, it is actually not a programming language, rather it is used to design UI of the
application. Thus XAML employs other programming languages like C#, VB.NET, etc. to define the logic in code
behind.
ExpressionBuilder is the best tool to generate XAML.
WPF Architecture
For every new technology, it is very essential to have a clear idea about its architecture. So before beginning
your application, you must grab a few concepts. If you would not like to know WPF in detail, please skip this
section. As mentioned earlier, WPF is actually a set of assemblies that build up the entire framework. These
assemblies can be categorized as:
- Managed Layer
- UnManaged Layer
- Core API
Managed Layer: Managed layer of WPF is built using a number of
assemblies. These assemblies build up the WPF framework, communicate with lower level unmanaged API to render its
content. The few assemblies that comprise the WPF framework are:
- PresentationFramework.
dll: Creates the top level elements like layout panels, controls, windows, styles, etc.
- PresentationCore.dll: It holds base types such as
UIElement,
Visual from which all shapes and controls are Derived in PresentationFramework.dll.
- WindowsBase.dll: They hold even more basic elements which are capable of being used
outside the WPF environment like Dispatcher object, Dependency Objects. I will discuss
each of them later.
Unmanaged Layer (milcore.dll): The unmanaged layer
of WPF is called milcore or Media Integration Library Core. It basically translates the WPF higher level objects
like layout panels, buttons, animation, etc. into textures that Direct3D expects. It is the main
rendering engine of WPF.
WindowsCodecs.dll: This is another low level API which
is used for imaging support in WPF applications. WindowsCodecs.dll comprises a number of codecs which
encode / decode images into vector graphics that would be rendered into WPF screen.
Direct3D: It is the low level API in which the graphics of WPF is rendered.
User32: It is the primary core API which every program uses. It actually manages memory and process separation.
GDI & Device Drivers: GDI and Device Drivers are specific to the operating system which is also used from the application to access low level APIs.
Building Your First WPF Application :
Now the time has come to build your first WPF Application.
To do this, let's open Visual Studio 2008 / 2010. For this example, I used Visual Studio 2008. Create a new
Project. You will see a new window. The XAML will look like:
*******************************************************
<
Window x:Class
="FirstWindowsApplication.Window1"
xmlns
="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Window1"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>
*******************************************************
Here the blank window is produced. Height / Width represents the Size of the
Window. Title determines the text which is displayed in the TitleBar of the
window. Every control in XAML could be named with x:Name attribute. This will
be used to reference the Window object in your XAML. x:Class attribute
represents the class which should be associated with current Window.
As I already told you, that XAML is not self sufficient, so to define
logic you need a class in C# or VB.NET.
Grid is the primary layout for WPF application. Grid can take multiple
Child elements. So let us put some controls into the grid.
*******************************************************
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Enter Name :" Grid.Row="0" Grid.Column="0" />
<TextBox x:Name="txtName" Grid.Row="0" Grid.Column="1" MinWidth="50"/>
<Button Content="Click Me" Grid.Row="0" Grid.Column="2" Click="Button_Click"/>
</Grid>
*******************************************************
You can see that I have defined RowDefination and ColumnDefination.
This allows you to divide the grid into cells so that you can place your
control exactly where you want to. For each RowDefination and ColumnDefination,
you can use Height and Width of it. You can see I have used 50, Auto,
and * as width. Auto represents the size which we would define for the control
during control definition. * indicates the rest of the space which it can
take. Thus, you can see the button is spread the rest of the area of the
column it finds.
Now in the Behind, I put a Messagebox to show the content of TextBox.
********************************************************************
private void Button_Click(object sender, RoutedEventArgs e)
{ MessageBox.Show(string.Format("Hi {0}", this.txtName.Text)); }
********************************************************************
