Button Control is one of the most used control. Without button control, it’s hard to do anything.Button Control’s default event is Click event. Button Control have named and Text properties. The appearance of the button can also be changed using Font size, Background Color Properties.

Follow the below steps to know about the button functionality.

• Create a new window.
• Now go to xaml source and write the following code:

[csharp] <Window x:Class="WPFBtton.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Button Control" Height="350" Width="525" Background="LightCyan"> <Grid> <Button Content="WPF Button" HorizontalAlignment="Left" Margin="153,130,0,0" VerticalAlignment="Top" Width="198" Height="50" FontSize="25" FontStretch="UltraCondensed" RenderTransformOrigin="0.5,0.5" Background="Pink"> <Button.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="2" Y="2"/> </TransformGroup> </Button.RenderTransform> </Button> </Grid> </Window> [/csharp] Now run the application, then the result appears as shown in below figure. Double click on the button, then the click event is raised. Now, write the code as below to display a message after button click. [csharp] private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to SPlessons"); } }[/csharp] Press F5 or Start to run the application.Click on the WPF button, then it shows a message box.Below figure shows the output.

Basically, the label control is used to display output or display the result which is performed on the input calculation.

Width, height, horizontal alignments, vertical alignments, and background images or background color can be set for the label control. Create a new window and go to xmal source and write the following code: [csharp]<Window x:Class="WPFLable.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Lable" Height="350" Width="525" Background="Beige"> <Grid> <Label Content="Hello WPF Lable Control" Width="200" Height="30" FontSize="14" FontFamily="Georgia" FontWeight="Bold" Background="Wheat" Foreground="Orange" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid> </Window>[/csharp] Now run the application,the output comes as a new window like below

Set Background image for Lable: First, an image as to be added into Application Solution Explorer. After adding image into application write the following code: [csharp]</pre> <pre><Window x:Class="WPFLable.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Lable" Height="350" Width="525" Background="Beige"> <Grid> <Label Content="Hello WPF Lable Control" Width="200" Height="30" FontSize="14" FontFamily="Georgia" FontWeight="Bold" Foreground="Orange" VerticalAlignment="Center" HorizontalAlignment="Center"> <Label.Background> <ImageBrush ImageSource="E:\SPlessons images\WPF lesson\diamonds-small-blue-background.jpg" /> </Label.Background> </Label> </Grid> </Window></pre> <pre>[/csharp] Now run the application, then we should get label with background image.

Adding shapes to the Lable: Write the following code: [csharp]</pre> <pre>Window x:Class="WPFLable.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Lable" Height="350" Width="525" Background="Beige"> <Grid> <Label > <StackPanel Orientation="Horizontal"> <Rectangle Width="100" Height="100" Fill="Green" /> <Rectangle Width="80" Height="80" Fill="Red" /> <Rectangle Width="60" Height="60" Fill="Black" /> <Rectangle Width="40" Height="40" Fill="Green" /> <Rectangle Width="20" Height="20" Fill="Blue" /> <Rectangle Width="15" Height="15" Fill="Indigo" /> </StackPanel> </Label> </Grid> </Window></pre> <pre>[/csharp] Now run the application which shows the output as below.

In WPF, text box control has a property for spell checking which is known is Spell-check.

[csharp] <TextBox SpellCheck.IsEnabled="True" Language="en-US" /> [/csharp]

When a user moves the mouse over the control, that control has a tool tip. Tooltips in WPF are content controls. By using tooltips, time duration can be set to control the time of tooltip appearance and disappearance.[/post_flow_steps]

Example

Create a new window and take one button into the grid then write the following code. [csharp] <Window x:Class="WPFTooltip.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"/> <Grid< <Button ToolTip="Example for Tooltip control" Content="Register" Width="200" Height="100" Background="SaddleBrown"> </Button> </Grid> </Window> [/csharp] Then the window appears as shown in below figure.   Now run the application in the browser, to do that simply press on F5 then the following screen appears like below. In above window, a button control is provided. If mouseovered on that button one should get tooltip like below.

If wanted to show tooltip by using code behind, then write the following code in code behind file: [csharp] using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPFTooltip { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); ToolTip tp = new ToolTip(); tp.Content = "Exaple of Tooltip control"; btnregister.ToolTip = tp; } } } [/csharp] Now run the application same result as above appears.

(i) HasDropShadow : It determines, whether the control has a drop shadow or not. (ii) Placement : It determines the positioning of the ToolTip. The following code is an one example with this property.

Write the following code in XMAL file and set placement property value as Top: [csharp] <Window x:Class="WPFTooltip.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | ToolTips" Height="350" Width="525"> <Grid> <Button Name="btnregister" Content="Register" Width="200" Height="100" Background="SaddleBrown"> <Button.ToolTip> <ToolTip HasDropShadow="False" Placement="Top"> <StackPanel > <TextBlock>Example of ToolTip Control</TextBlock> </StackPanel> </ToolTip> </Button.ToolTip> </Button> </Grid> </Window> [/csharp] When the application is run then a window appears. In that window, button control is provided.When mouse is moved over on that control then the tooltip shows like below screen: Like above,  check with all the placement property values. (iii) HorzantalOffSet and VerticalOffSet : This is used to set the exact position of the ToolTip. Syntax: [csharp]<ToolTip HorizontalOffset="70,0,0,0"/>[/csharp] [csharp]<ToolTip VerticalAlignment="70,0,0,0/>[/csharp] (iv) PlacementRectangele : This also much similar to HorizantalOffSet and VerticalOffSet. (v)IsEnabled and IsOpen: IsEnabled property is used to disable the Tooltip and Isopen property is used to show the tooltip or hide the tooltip programmatically.

IntialShowDelay : This property is used to allows you set the delay of Tooltip when you mouse over on the control.

[csharp]<button name="btnregister" content="Register" width="200" height="100" background="SaddleBrown" tooltipservice="" initialshowdelay="1000"></button>[/csharp]

The radio button control is used when a single value to be selected from the set of values. Radio button control allows only a single selected value.While using under multiple options or questions one need to group all the related radio buttons. So that one can be selected from each group.To group them, place radio buttons on the separate container like stack panel etc.

Create a new window, then go to XAML source and write the following code: [csharp]<Window x:Class="WPFRadioButton.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | RadioButton" Height="350" Width="525"> <Grid> <StackPanel Background="LemonChiffon" > <RadioButton GroupName="Iquick" Content="SPlessons1" /> <RadioButton GroupName="Iquick" Content="SPlessons1" /> <RadioButton GroupName="Iquick" Content="SPlessons3" /> <RadioButton GroupName="Iquick" Content="SPlessons4" /> <RadioButton GroupName="Iquick" Content="SPlessons5"/> </StackPanel> </Grid> </Window> [/csharp] Now run the application, to do that simply click on F5 then we should get a new window like below: In above window, only one option can be selected because radio button allows to select any one option.

Radio button provides a Boolean property IsChecked. If the value is checked, then it returns true.If unchecked, then it returns false value. Using this property, option can be choosen by the users.

Create a new window and write the following code: [csharp]<Window x:Class="WPFRadioButton.Radiobuttondatabind" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Radio Button" Height="300" Width="300" Background="Pink"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="161*" /> </Grid.RowDefinitions> <TextBlock Text="Male" Grid.Row="2" Margin="122,0,-122,0" /> <TextBlock Text="Female" Grid.Row="3" Margin="122,0,-122,0" /> <TextBlock Text="Female" Grid.Row="3" Margin="122,0,-122,0" /> <TextBlock Text="Other" Grid.Row="4" Margin="122,0,-122,0" /> <!--<CheckBox IsChecked="{Binding Gender}" Height="25" Width="80" Grid.Row="1"></CheckBox>--> <RadioButton IsChecked="{Binding Male}" Height="25" Width="80" Grid.Row="2"></RadioButton> <RadioButton IsChecked="{Binding Female}" Height="25" Width="80" Grid.Row="3"></RadioButton> <RadioButton IsChecked="{Binding Other}" Height="25" Width="80" Grid.Row="4"></RadioButton> <Button Height="25" Width="100" Content="Submit" Grid.Row="5" Click="Button_Click"></Button> </Grid> </Window> [/csharp] Then the window should become like below :

Then go to code behind and write the following code: [csharp]using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace WPFRadioButton { /// <summary> /// Interaction logic for Radiobuttondatabind.xaml /// </summary> public partial class Radiobuttondatabind : Window { public Radiobuttondatabind() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show(string.Format("Male: {0},Female: {1}, Other: {2}", Male, Female, Other)); } public bool Male { get; set; } public bool Female { get; set; } public bool Other { get; set; } } } [/csharp] Now run the application then the screen appears:   In above window, select male option and click on submit button. Then the result shows like below screen:  

The check box control is used to select multiple options from the set of values. Checkbox control allows multiple selection values.

Create a new window, then go to XAML source and write the following code: [csharp]<Window x:Class="WPFCheckbox.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Checkbox" Height="350" Width="525" Background="Gold"> <Grid> <StackPanel Margin="144,40,188,78" Background="Pink" Height="275"> <Label FontWeight="Bold">Months Selection</Label> <CheckBox>January</CheckBox> <CheckBox>February</CheckBox> <CheckBox>March</CheckBox> <CheckBox>April</CheckBox> <CheckBox>May</CheckBox> <CheckBox>June</CheckBox> <CheckBox>July</CheckBox> <CheckBox>August</CheckBox> <CheckBox>September</CheckBox> <CheckBox>October</CheckBox> <CheckBox>November</CheckBox> <CheckBox>December</CheckBox> </StackPanel> </Grid> </Window>[/csharp] Now run the application, to do that simply click on F5 then we should get a new window like below:   In above window, multiple options can be selected like below:

Create a new window and write the following code: [csharp]<Window x:Class="WPFCheckbox.Checkboxdatabind" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Checkboxdatabind" Height="300" Width="300"> <Grid Background="LightBlue"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="161*" /> </Grid.RowDefinitions> <TextBlock Text="India" Grid.Row="2" Margin="122,0,-122,0" FontWeight="Bold" /> <TextBlock Text="Australia" Grid.Row="3" Margin="122,0,-122,0" FontWeight="Bold"/> <TextBlock Text="America" Grid.Row="4" Margin="122,0,-122,0" FontWeight="Bold" /> <CheckBox IsChecked="{Binding India}" Height="25" Width="80" Grid.Row="2"></CheckBox> <CheckBox IsChecked="{Binding Australia}" Height="25" Width="80" Grid.Row="3"></CheckBox> <CheckBox IsChecked="{Binding America}" Height="25" Width="80" Grid.Row="4"></CheckBox> <Button Height="25" Width="100" Content="Submit" Grid.Row="5" Click="Button_Click"></Button> </Grid> </Window> [/csharp] Then the window should become like below : Then go to code behind and write the following code: [csharp]using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace WPFCheckbox { /// <summary> /// Interaction logic for Checkboxdatabind.xaml /// </summary> public partial class Checkboxdatabind : Window { public Checkboxdatabind() { InitializeComponent(); this.DataContext=this; } private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show(string.Format("India: {0}, Australia: {1}, America: {2}", India, Australia, America)); } public bool India { get; set; } public bool Australia { get; set; } public bool America { get; set; } } } [/csharp] Now run the application then following screen appears. In above window, if India and Australia options are selected and click on submit button, then the result appears as shown in below screen.