History
The first GUI-based environment Microsoft started with windows 3.0 version.Within this, Microsoft achieved complete GUI based environment to provide GUI facilities. Microsoft used a component known as User32.dll.
User32.dll was able to provide complete GUI Facilities like creating textbox, buttons etc. But using User32.dill it was unable to create 2-Dimensional facilities and use hardware acceleration facilities.
Hardware acceleration facilities, in general, all the graphic cards provides inbuilt GUI Facilities directly without writing any code for creating 2-Dimensional images, figures etc. GUI facilities are not available in User32.dll. So to overcome this problem, Microsoft invented Graphical Device Interface.
Description
GDI provides 2-D facilities with the help of hardware acceleration.That means instead of re-writing code, inbuilt hardware facilities can be used.But through GUI provided hardware acceleration facilities it was unable to provide 3-D facilities.Even gaming programs were not satisfied with GDI to develop gaming applications.
To satisfy gaming developers, Microsoft invented Direct X which totally concentrates on gaming development.But it does not support application development facilities like hospital applications, bank applications etc.
To overcome the above problems, Microsoft Invented Windows Presentation Foundation (WPF).
Features
Description
A brush is used to draw the background color of the button, the foreground of text and fill of a shape.
Types of Brushes
- Brush
- Solid brush
- Linear gradient brush
- Radial gradient brush
- Image brush
Description
The solid brush is used to fill the fixed colors within the shapes or controls. With the help of solid colors, only one color is used within the shape or control.
Proprieties
- Color: Color property is used to set or get color value within the shape or control.
Syntax
[csharp]
<control>
<SolidColorBrush color="Value"/>
<control.Fill/>
</control>[/csharp]
Example
Create a new window and take one ellipse control into grid otherwise write the following XAML code:
[csharp]<Window x:Class="WPFBrushes.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Solid Brush" Height="350" Width="525">
<Grid>
<Ellipse Height="200" Width="250" Stroke="Red">
<Ellipse.Fill>
<SolidColorBrush Color="LightBlue"></SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Window>
[/csharp]
Now run the application then below screen appears.
In above image, ellipse shape color is red and the control fill with light blue.
Description
This brush is used to paint the combination of two or more colors within the image or control.Using linear gradient brush one can fill the colors in diagonal or horizontal or vertical.
Syntax
[csharp]
<LinearGradientBrush startPoint="value" EndPoint="value">
<GradientStart color="value" Endpoind="value"/>
</LinearGradientBrush>
[/csharp]
Properties
- StartPont
- EndPoint
Example
Example to paint the colors in horizontal axis:
Create a new window within the WPF application and take rectangle shape within that window or write the following XAML code.
[csharp]<Window x:Class="WPFBrushes.LinearGradientBrush" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | LinearGradientBrush" Height="300" Width="300">
<Grid>
<Rectangle Height="200" Width="200" Stroke="Green">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Black" Offset="0.0"/>
<GradientStop Color="Green" Offset="0.3"/>
<GradientStop Color="Blue" Offset="0.6"/>
<GradientStop Color="Yellow" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
[/csharp]
Now run the application then the window appears.
In above screen four colors are shown within one control and horizontal axis.
Description
This is used to paint the colors by taking from the center point radially.
Properties
- Center
- RadiusX
- RadiusY
Description
This property is used to set or get a center point location from where RadialgradiantBrush painting starts.
Description
These two properties are used to set or get the length on X axis and Y axis which indicates length of color continuation.
Example
By using width and height, to paint the circle of colors in square, create a new window and take one rectangle shape in that window or write the following code:
[csharp]<Window x:Class="WPFBrushes.RadialGradientBrush" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | RadialGradientBrush" Height="408.271" Width="406.015">
<Grid>
<Rectangle Height="300" Width="400" Stroke="Red">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0.0"></GradientStop>
<GradientStop Color="Yellow" Offset="0.3"></GradientStop>
<GradientStop Color="Blue" Offset="0.6"></GradientStop>
<GradientStop Color="Green" Offset="1.0"></GradientStop>
<GradientStop Color="Gray" Offset="1.4"></GradientStop>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>[/csharp]
Now run the application then following window appears.
Description
By using image brush, one can paint the required image within a graphical shape. Filling the images as a single or multiple in the form of the tile is possible.
Properties
- ImageSource: This property is used to provide the required path of the image that is to be filled within the graphical shape.
- TileMode: This property indicates, whether the image should be arranged in tile manner or by rotating into the required direction that is X and Y.
- Stretch: This is used to set or get the required stretch value.
- AlignmentX: It is used to set or get the required alignment for the image on the X axis.
- AlignmentY: It is used to set or get the required alignment for the image on the Y axis.
- ViewPoint: This is the combination of four points which indicates an Origin, X axis, Y axis location to repeat the tiles.[/alertmessages]
Example
Initially an image has to be uploaded into the application.
Create a new window and take one rectangle shape or write the following code:
[csharp]<Window x:Class="WPFBrushes.ImageBrush" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | ImageBrush" Height="300" Width="300">
<Grid>
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="E:\SPlessons images\WPF-Logo.png" TileMode="Tile" Viewport="0,0,0.2,0.2"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window[/csharp]
Now run the application then screen appears as:
Flipping
When we take a viewpoint as a 0, 0, 0.2, 0.2 0n x-axis and y-axis.For very 0.2 location in both the axis, an image is placed within the rectangle.
If flipX is used on x-axis, then every alternate column will have tilted images like:
If FlipY is used, every alternate row will have tilted image like:
FlipXY is the combination of both FlipX and FlipY.
Description
WPF Designer, VisualStudio will provide many panels that will help to achieve the layout. Layouts can be created with exact positioning or dynamic positioning.
In absolute positioning layouts, the child control size will be fixed and do not change with the size of the layout i.e. when the layout size is increased or decreased then control size will not increase or decrease.
Within dynamic positioning, the control size will not be fixed and rather will change according to the size of the layout. That is the child control sizes will increase or decrease according to the layout size.
Example
First a stack panel has to be taken by dragging and dropping from the toolbox or write the following to add stack panel.
[csharp]<Window x:Class="WpfApplicationlayout.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Layout" Height="350" Width="525">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="118*"/>
<ColumnDefinition Width="258*"/>
<ColumnDefinition Width="141*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="68*"/>
<RowDefinition Height="142*"/>
<RowDefinition Height="109*"/>
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Left" Height="142" VerticalAlignment="Top" Width="258" Grid.Column="1" Grid.Row="1" Background="Green"/>
</Grid>
</Window>
[/csharp]
Then the form should become like below screen:
Now press the f5 to run the application then you should get screen like below:
Now, if increased or decreased the WPF Layout window, then stack panel also automatically increases or decreases according to WPF Layout window like below screens:
In WPF, five panels are present.
Types of panels:
- Stack Panel
- Dock panel
- Wrap Panel
- Grid
- Canvas Panel