WPF Design a Page Using XAML In VB.Net

Here I am talking about a page designed with XAML. There are the controls which are TextBox, Label, Buttons etc. These are the WPF controls.
  • 1805

Introduction

Here I am talking about a page designed  with XAML. There are the controls which are TextBox, Label, Buttons etc. These are the WPF controls. Windows Presentation Foundation (WPF) ships with many of the common UI components that are used in almost every Windows application, such as , Label, TextBox , Button and ListBox.WPF is a advance version of window application and its provides a great feature to the .NET. we can create or designed a page By XAML code easily. These Classes which inherit from the Control class contain a ControlTemplate, which allows the customer or users  of a control to radically change the control's appearance without having to create a new subclass.We can add a control to an application by using either Extensible Application Markup Language (XAML) or code. This example shows how to create a simple application that asks a employee for their job details. Here is page which contain employee job details and its design by XAML code.

Code

<Window x:Class="MainWindow"
  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  
Title="MainWindow" Height="688" Width="1103">
<Grid Width="1055">
<
Grid.RowDefinitions>
<
RowDefinition Height="40"/>
<
RowDefinition Height="50"/>
<
RowDefinition Height="100"/>
<
RowDefinition Height="50"/>
<
RowDefinition Height="50"/>
<
RowDefinition Height="50"/>
<
RowDefinition Height="50"/>
<
RowDefinition Height="130"/>
<
RowDefinition Height="30"/>
<
RowDefinition Height="40"/>
<
RowDefinition/>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition/>
<
ColumnDefinition/>  
</
Grid.ColumnDefinitions>
<
Label Background="White" Foreground="#FF1C231C" Margin="0,0,398,0" 
FontWeight
="Bold" FontStretch="Expanded">
JOBS DETAILS
</Label>
<
Label Grid.Row="1" Margin="0,0,406,0">
Jobs Title:
</Label>
<
TextBox Grid.Row="1" Grid.Column="1" Margin="2,8,107,9"/>
<Label Grid.Row="2" Margin="0,0,406,0">Description:</Label>
<
TextBox Grid.Row="2" Grid.Column="1" 
Margin
="2,5,0,26" HorizontalAlignment="Left" Width="470" />
<Label Grid.Row="2" Margin="0,72,0,0" HorizontalAlignment="Left" Width="150" 
Grid.Column
="1">:Are Remaining Characters </Label>
<
Label Grid.Row="2" Margin="0,72,0,0" Grid.Column="1" HorizontalAlignment="Right" 
Width
="298">Brief Description should have At most 500 characters</Label>
<
Label Grid.Row="3" Margin="0,2,0,0" HorizontalAlignment="Left" Width="109">
Company Name:</Label>
<
TextBox Grid.Row="3" Grid.Column="1" 
Margin
="2,5,0,9" HorizontalAlignment="Left" Width="418" />
<Label Margin="0,0,408,0" Grid.Row="4">Contact Number:</Label>
<
TextBox Grid.Row="4" Grid.Column="1" Margin="2,5,0,9" 
  HorizontalAlignment
="Left" Width="260" />
<Label Margin="0,0,420,0" Grid.Row="5"> Email:</Label>
<
TextBox Grid.Row="5" Grid.Column="1" Margin="2,5,0,9" 
 HorizontalAlignment
="Left" Width="418" />
<Label Margin="0,0,420,0" Grid.Row="6">Location:</Label>
<
TextBox Grid.Row="6" Grid.Column="1" 
  Margin
="2,5,0,9" HorizontalAlignment="Left" Width="418" />
 <Label Margin="0,0,420,0" Grid.Row="7">Qualification:</Label>
<
ListBox Margin="3,3,396,8" Grid.Row="7" Grid.Column="1">
<
ListBoxItem>
<
TextBlock Text="M.tech" /></ListBoxItem>
<
ListBoxItem><TextBlock Text="MSc(IT)" /> </ListBoxItem><ListBoxItem>
<
TextBlock Text="MSc(CS)" /></ListBoxItem><ListBoxItem>
<
TextBlock Text="MCA" /> </ListBoxItem><ListBoxItem>
<
TextBlock Text="MBA" /></ListBoxItem><ListBoxItem>
<
TextBlock Text="BCA" /></ListBoxItem><ListBoxItem>
<
TextBlock Text="BBA" /></ListBoxItem><ListBoxItem>
<
TextBlock Text="B.tech" /></ListBoxItem><ListBoxItem>
<
TextBlock Text="Bsc(IT)" /></ListBoxItem><ListBoxItem>
<
TextBlock Text="Bsc(CS)" /></ListBoxItem></ListBox>
<
Button Grid.Row="9" Grid.Column="1"  Name="submit" Margin="2,4,383,0">
SUBMIT
</Button>
<
Button Grid.Row="9" Name="reset" Margin="216,4,169,0" Grid.Column="1">
RESET
</Button>
</
Grid>
</
Window>

img1.png

Background 

We can set the background colors to the page and controls. The output for page will look like this.

img22.png
 

Changing the appearence of a control

We can set the appearence of a control by value , style and background property. but there is a XAML code to changing buttons appearence. There are two buttons and code for Changing appearence for buttons in XAML.

<Button FontSize="14" FontWeight="Bold" Margin="89,12,80,206"><Button.Background>
<
LinearGradientBrush StartPoint="0,0.6" EndPoint="1,0.5">
<GradientStop Color="DeepSkyBlue" Offset="0.0" />
<
GradientStop Color="DarkOrange" Offset="0.9" />
</
LinearGradientBrush>
</
Button.Background>
   SUBMIT BUTTON
</Button>
<
Button FontSize="14" FontWeight="Bold" Margin="89,200,80,20">
<
Button.Background>
<
LinearGradientBrush StartPoint="0,0.5" 
  EndPoint
="1,0.5">
<GradientStop Color="DeepSkyBlue" Offset="0.0" />
<
GradientStop Color="Chocolate" Offset="0.9" />
</
LinearGradientBrush>
</
Button.Background>RESET BUTTON
</
Button
>

 

img3.png

When we Move cursor to buttons it becomes change.

img4.png

I hope this article will help you to create or design a page by XAML code.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.