WPF Part-4 Common Controls

Posted by : Sudhir Chekuri Thursday, 3 October 2013

WPF Common Controls
Checkbox - It allows the user to select more than one option
RadioButton - It allows the user to select one option from multiple option

You can drag and drop controls from toolbox to design WPF window.
Select a control and use arrow keys in keyboard to change their location.

Steps to create GUI for Common controls example

Create a new visual studio WPF project and name it as WPFAppControls.
Drag and drop three Checkboxes to the design page from toolbox.
Go to properties of each checkbox to give name for checkboxes as cb1, cb2, cb3 and Content as Cricket, Chess, Carroms.

<CheckBox x:Name="Cb1" Content="Cricket" HorizontalAlignment="Left" Margin="37.791,59.567,0,0" VerticalAlignment="Top"/>
<CheckBox x:Name="Cb2" Content="Chess" HorizontalAlignment="Left" Margin="37.791,79.665,0,0" VerticalAlignment="Top"/>
<CheckBox x:Name="Cb3" Content="Carroms" HorizontalAlignment="Left" Margin="37.791,99.763,0,0" VerticalAlignment="Top"/>

To show images on the window you have to copy images in a folder(Eg: images) in solution explorer.
Then drag and drop image control to the design page. Go to its properties - Name = Img1, Source =images/ip.jpg

<Image x:Name="Img1" HorizontalAlignment="Left" Height="100" Margin="119.88,59.567,0,0" VerticalAlignment="Top" Width="100" Source="images/ip.jpg" />

Drag and drop a label go to its properties - Content="Enter your name: "

<Label Content="Enter your name: " HorizontalAlignment="Left" Margin="237.79,61.715,0,0" VerticalAlignment="Top"/>

Drag and drop a textbox beside it and go to its properties - Name="txt1" and clear the content.

<TextBox x:Name="txt1" HorizontalAlignment="Left" Height="23" Margin="357.193,63.539,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>

Drag and drop a combobox - properties - Name: Cb1
Click on browse button beside items property - Select Comboboxitem from the below dropdown and click on Add 3 times to add 3 items.
Use Content property of each element to add items content Eg: MBA, MCA, BCA

<ComboBox x:Name="Cb2" HorizontalAlignment="Left" Margin="49.731,159.567,0,0" VerticalAlignment="Top" Width="120">
<ComboBoxItem Content="MBA"/>
<ComboBoxItem Content="MCA"/>
<ComboBoxItem Content="BCA"/>
</ComboBox>

Drag and drop listbox - properties - Name: Lb1,
Items - Listboxitems - Add, Content for items as Yellow, Green, Blue

<ListBox x:Name="Lb1" HorizontalAlignment="Left" Height="100" Margin="191.522,159.567,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.045,0.448">
<ListBoxItem Content="Yellow"/>
<ListBoxItem Content="Green"/>
<ListBoxItem Content="Blue"/>

</ListBox>

Drag and drop two radiobuttons - Properties - Name: Rb1, Rb2 and Content : Male, Female

<RadioButton x:Name="Rb2" Content="Female" HorizontalAlignment="Left" Margin="340.936,211.934,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="Rb1" Content="Male" HorizontalAlignment="Left" Margin="340.936,191.974,0,0" VerticalAlignment="Top"/>

Drag and drop a button -Properties - Name : BtnSubmit, Content: Submit

<Button x:Name="BtnSubmit" Content="Submit" HorizontalAlignment="Left" Margin="49.731,289.04,0,0" VerticalAlignment="Top" Width="75"/>

Drag and drop a textblock - Properties - Name: TBlockMsg , Content: Msg

Now double click on the button to create button click event to write C# code in it.

XAML code for Common controls example

<Window x:Class="WpfAppControls.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>
<CheckBox x:Name="Cb1" Content="Cricket" HorizontalAlignment="Left" Margin="37.791,59.567,0,0" VerticalAlignment="Top"/>
<CheckBox x:Name="Cb2" Content="Chess" HorizontalAlignment="Left" Margin="37.791,79.665,0,0" VerticalAlignment="Top"/>
<CheckBox x:Name="Cb3" Content="Carroms" HorizontalAlignment="Left" Margin="37.791,99.763,0,0" VerticalAlignment="Top"/>
<Image x:Name="Img1" HorizontalAlignment="Left" Height="100" Margin="119.88,59.567,0,0" VerticalAlignment="Top" Width="100" Source="images/ip.jpg" />
<Label Content="Enter your name: " HorizontalAlignment="Left" Margin="237.79,61.715,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txt1" HorizontalAlignment="Left" Height="23" Margin="357.193,63.539,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<ComboBox x:Name="Cb2" HorizontalAlignment="Left" Margin="49.731,159.567,0,0" VerticalAlignment="Top" Width="120">
<ComboBoxItem Content="MBA"/>
<ComboBoxItem Content="MCA"/>
<ComboBoxItem Content="BCA"/>
</ComboBox>
<ListBox x:Name="Lb1" HorizontalAlignment="Left" Height="100" Margin="191.522,159.567,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.045,0.448">
<ListBoxItem Content="Yellow"/>
<ListBoxItem Content="Green"/>
<ListBoxItem Content="Blue"/>
</ListBox>
<RadioButton x:Name="Rb2" Content="Female" HorizontalAlignment="Left" Margin="340.936,211.934,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="Rb1" Content="Male" HorizontalAlignment="Left" Margin="340.936,191.974,0,0" VerticalAlignment="Top"/>
<Button x:Name="BtnSubmit" Content="Submit" HorizontalAlignment="Left" Margin="49.731,289.04,0,0" VerticalAlignment="Top" Width="75" Click="BtnSubmit_Click"/>
<TextBlock x:Name="TBlockMsg" HorizontalAlignment="Left" Margin="143.761,293.04,0,0" TextWrapping="Wrap" Text="Msg" VerticalAlignment="Top"/>
</Grid>
</Window>

CSharp Code to display details about selected controls in Textblock on button click

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 WpfAppControls
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void BtnSubmit_Click(object sender, RoutedEventArgs e)
{
string Msg = string.Empty;
//Checkboxes checked or not
if (Cb1.IsChecked == true)
{
Msg += Cb1.Content + ",";
}
if (Cb2.IsChecked == true)
{
Msg += Cb2.Content + ",";
}
if (Cb3.IsChecked == true)
{
Msg += Cb3.Content + ",";
}//Radiobuttons checked or not
if (Rb1.IsChecked == true)
{
Msg += Rb1.Content + ",";
}
if (Rb2.IsChecked == true)
{
Msg += Rb2.Content + ",";
}//Textbox
if (txt1.Text != "")
{
Msg += txt1.Text + ",";
}//combobox
if (Combo1.SelectedIndex > -1)
{
Msg += Combo1.Text + ",";
}//listbox
if (Lb1.SelectedItems.Count > 0)
{
ListBoxItem l = (ListBoxItem)(Lb1.SelectedItem);
Msg += l.Content;
}
if (Msg != string.Empty)
{
TBlockMsg.Text = Msg;
}
else { TBlockMsg.Text = "No items selected"; }
}
}
}