WPF: Binding slider and textbox

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

When we move the slider, we can have the text in the TextBox updated accordingly.

Using a two-way mode, when we update the value in the TextBox, we can have the slider to move according to the value in the TextBox too.

In the previous example, when we move the slider, the font size changes accordingly.  This behaviour is actually controlled by UpdateSourceTrigger property.  As we did not specify its value, it is in its default state which then depends on the source that it is bound to.

The default value for most properties is PropertyChanged, while the Text property has a default value of LostFocus.

The example below best illustrate the LostFocus property of a slider which in this case is the source.  The TextBox is the target.

MainWindow.xaml
<Window x:Class="SliderName.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>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Path=Value, ElementName=slider, UpdateSourceTrigger=LostFocus, Mode=TwoWay}" Grid.Row="0" FontSize="20" MaxWidth="50"/>
        <Slider x:Name="slider" Grid.Row="1" Minimum="10" Maximum="80" Value="30" IsSnapToTickEnabled="True"/>
    </Grid>
</Window>

slidertextbox

If you click on the slider and move along the line, the value in the textbox will change accordingly.

In this example, we also have a two-way mode binding and a LostFucus value in UpdateSourceTrigger.  If you change the value in the TextBox and click the mouse pointer not on the slider but right below the slider simulating a lost focus click, the slider will move depending on the value in the TextBox.

WPF: Submitting textbox content

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

When we design a web form, we would test out if we could collect the submitted information.

Say now we need to collect some information from the user using a textbox.  We can design a submit button and let the user click on the button to submit the information.

As you can see below, this can be easily done by using tb.Text where tb is the instance name of the TextBox.

WindowMain.xaml
<Window x:Class="TextBox1.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">
    <StackPanel>
        <TextBox Name="tb" FontSize="16" Height="100">
            Type something here...
        </TextBox>
        <Button Click="OnClick" FontSize="24" HorizontalAlignment="Stretch" Margin="80,50,80,50">Submit</Button>
        <TextBlock Name="tbl" Text="Text Block" FontSize="24" Height="100"></TextBlock>
    </StackPanel>
</Window>

WindowMain.xaml
using System;
using System.Windows;

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

        private void OnClick(object sender, RoutedEventArgs e)
        {
            String someText = tb.Text;

            tbl.Text = someText;

        }
    }
}

You can type something in the textbox and after clicking on the submit button, you will see an output similar to below:

submittext

 

 

 

 

HTML Form: Placeholder text

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

Placeholder text is supported in HTML 5 and it is getting popular in mobile app because of limited screen size.

In the previous example, we could have created the form using placeholder text.

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

</head>
<body>

<form method='post'>
    <input type='text' name='name' placeholder='Name'>
    <br>
    <input type='text' name='phone' placeholder='Phone'>
    <br>

    Comments:
    <br>
    <textarea name='comment' rows='3' placeholder='Your comment here'></textarea>
    <br>
    <input type='submit' value='Send'>
    <input type='reset' value='Clear'>
</form>
</body>
</html>


Placeholder Text Output

HTML Form: Width of the text box

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

Without specifying the width of the textbox, the size of the box is 20 pixels.

We can specify the size of the text box using pixel, for example 30px.

size='30px'

The HTML script will look like below.

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

Phone: <input type='text' name='phone' size='30px'>
Name: <input type='text' name='name'>

</body>
</html>


Width of Textbox

HTML Form: Creating a text box

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

We start by creating a very simple text box.

<input type='text' name='name'>

Say you need to ask for the name of the user.

You can create a textbox form as below.

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

</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>
Text Box