WPF: Creating a checkbox control using code

This entry is part 14 of 54 in the series Learn WPF

At times, you might find that it is faster to create a control such as a checkbox using code.

Here we illustrate a simple example using checkbox.

The following example also generates a CheckBox (cb), with a label CheckBox, and then adds the CheckBox as a child of a grid (grid1).

MainWindow.xaml
<Window x:Class="CheckBox2.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 Name="grid1" Margin="100,100,100,100">
        
    </Grid>
</Window>

MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;

namespace CheckBox2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            CheckBox cb = new CheckBox();
            cb.Content = "CheckBox";
            cb.FontSize = 24;
            grid1.Children.Add(cb);
        }
    }
}

In creating the CheckBox, we can also format the fontsize of the checkbox label.  The same method can be used to create other controls such as radio button.

checkbox_output

 

In line 5 in the XAML file, we have given a name grid1 to the Grid.  This is similar to instance name in C#.  You would probably see that in line 30 in the C# code, we use grid1 as an instance name directly.

It seems that we do not have to declare grid1 instance name and we can use it instantly.  This exactly is the case as we have already made the necessary declarations as shown in this earlier example.

 

WPF: A simple checkbox

This entry is part 13 of 54 in the series Learn WPF

This simple example shows how to create Checkbox controls and add event handlers.

When a user clicks the Checkbox the text of the control changes. The Checkbox is created using XAML.

MainWindow.xaml
<Window x:Class="CheckBox1.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 Margin="50, 50, 50, 50" Name="cb1" FontSize="24" Checked="HandleChange">Check Box</CheckBox>
    </Grid>
</Window>
MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;

namespace CheckBox1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void HandleChange(object sender, RoutedEventArgs e)
        {
            cb1.Content = "You clicked the check box";
        }
    }
}

We need to look at the click event handler HandleChange.  Once the checkbox is clicked, the text or content in the checkbox will be updated.

Here is the output:

checkbox1

HTML Form: Multiple selections using checkboxes

This entry is part 8 of 10 in the series HTML Form

Check boxes allow users to make multiple independent selections.

In the example below, we post a question to the users and as an example, we have England always checked.

This is done by using checked=’checked’.

The name=’country’ is the name for this set of checboxes.  If this form has a script, the value field will be used to identify the checkboxes that were selected.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Which countries would you like to visit?</p>

<form method='post'>
    <input type='checkbox' name='country' value='england' checked='checked'>England<br>
    <input type='checkbox' name='country' value='brazil'>Brazil<br>
    <input type='checkbox' name='country' value='malaysia'>Malaysia<br>

</form>

</body>
</html>

 

jQuery Mobile: Disabled Checkbox

This entry is part 19 of 73 in the series jQuery Mobile

To disable a checkbox,  we put a disabled attribute in the html.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Disabled Checkbox</h1></div>
    <br>
    <p>Disabled</p>
    <form>
        <input disabled='' type='checkbox' name='checkbox_n' id='checkbox_d' data-theme='a'>
        <label for='checkbox_d'>One</label>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: Horizontal Group Checkbox

This entry is part 16 of 73 in the series jQuery Mobile

To build a horizontal group checkbox, we use the code below.

Notice the data-type=’horizontal’ attribute:

<fieldset data-role='controlgroup' data-type='horizontal'>
Horizontal Group Checkbox
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Horizontal Checkbox</h1></div>
    <br>
    
    <p>Horizontal Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup' data-type='horizontal'>
            <input type='checkbox' name='checkbox_a' id='checkbox_a'>
            <label for='checkbox_a'>One</label>
            <input type='checkbox' name='checkbox_b' id='checkbox_b'>
            <label for='checkbox_b'>Two</label>
            <input type='checkbox' name='checkbox_c' id='checkbox_c'>
            <label for='checkbox_c'>Three</label>
        </fieldset>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code