Understanding Text and List Controls in WPF

Discussion in 'C#' started by shabbir, May 24, 2014.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Almost every software application has to deal with some sort of text information. This information can be the content of some email, a network message or some input value obtained from the user. WPF contains Text controls for this purpose that can be used to get input from the user. Similarly, to organize data in the form of lists, WPF provides list controls. The topics of today’s article are these Text and List controls.

    For readers who are totally novice to WPF application structure and XAML code organization for front end development, check this tutorial which covers all the basics of WPF application. Beginners can take this tutorial and then come back and continue with this one. However, if you already find yourself comfortable with WPF basics, you can continue with this tutorial right away.

    WPF Text Controls



    WPF contains three types of Text controls. They are as follows:
    1. TextBox
    2. RichTextBox
    3. PasswordBox
    The first two Text controls derive themselves from the TextBox base control while the PasswordBox derive itself directly from the Control class.

    Creating Multiline Text

    The text written in a text box is by default single line and if the text is too long, it is cropped from the right edge of the text box. If the control in which text box is placed is resized and expanded to right, the content is displayed to the right. However, Text controls have a property which allows multi-line text to be displayed and added in the textbox. This property is called TextWrapping which when set to true display multiple lines of content in the predefined size of the container.

    By default, the Enter key pressed inside a text box will trigger the default button. To actually allow return inside the text box when enter key is pressed, the AcceptsReturn property of the text box would be set to true. Also, in order to allow user to insert tabs inside a text box, the AcceptsTab property.

    The first example of this article explains the usage of three of the aforementioned properties of a TextBox controls.

    Example1
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <TextBox TextWrapping="Wrap" MinLines="2" AcceptsReturn="True" AcceptsTab="True"> 
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
            </TextBox>
        </StackPanel>
    </Window>
    
    Here in the above tutorial, a StackPanel has been inserted in the top level Window element. Inside the StackPanel, one TextBox control has been added. The TextWrapping property has been set to Wrap which will allow multiline text, whereas both AcceptsReturn and AcceptsTab properties has also been set to True. The output of the above code will look like this:

    Output1

    [​IMG]

    The actual output window might not contain exactly the above output since, I have pressed enter and tabs to check if they work inside the TextBox or not and you can see for yourself, they work!

    Selecting Text in TextBox

    Text selection in TextBoxe control is similar to text selection where a mouse click, hold and drag can be used to select a portion of text or a shift key, along with right or left arrow can be used to select text content. However, there is one important selection properties which are worth of a mention here. That is AutoWordSelection property which, when true selects the lines of content in the form of a complete word. The following example demonstrates this concept.

    Example2:
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <TextBox TextWrapping="Wrap" AutoWordSelection="True"> 
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
            </TextBox>
        </StackPanel>
    </Window>
    
    The code is similar to the one in the last example, but here in this case, the AutoWordSelection property has been added to TextBox control and it has been set to true. The output of the above code will look like this:

    Output2:

    [​IMG]

    Now, in the output, if text is selected from the middle of any word, complete word would be selected. For instance, if the mouse cursor is placed in the middle of the first word Tutorial in the second row, complete word Tutorial would be selected. Same goes for the ending word in the selection, even if half of the letters in that word are selected, that complete word would be selected since, AutoWordSelection property has been set to true in TextBox control.

    Spell Check in TextBox

    Spell checking is one of the most exciting and exquisite features of WPF text boxes. Spell check feature, when enable underlines the unrecognized word with redline. Also, if you right click on the word that has been underlined, a list of possible correct words appear from which you can choose and insert. To enable spell check in a text box, the SpellCheck.IsEnabled property of the text box has to be set to true. The next example of this article explains this feature. Have a look at the third example of this tutorial.

    Example3:
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <TextBox TextWrapping="Wrap" AutoWordSelection="True" SpellCheck.IsEnabled="True"> 
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Experte Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
                      Go 4 Expert Have Best Tutorials
            </TextBox>        
        </StackPanel>
    </Window>
    
    The code in Example3 is similar to the last examples except that here in this case, the SpellCheck.IsEnable property of the text box has been set to true and in the fifth line of the text box, a word “Experte” has been added which has wrong spellings.

    In the output, this word would be highlighted and if it is right clicked, a list of possible spelling matches appears from which correct spelling can be selected and inserted. The output looks like this:

    Output3:

    [​IMG]

    PasswordBox control

    PasswordBox is different from the TextBox and RichTextBox class in terms of its inheritance. PasswordBox is used to get password type data from the user. By default, the text entered in the PasswordBox appears in the form of circle symbols. However, this property of the text box can be altered by setting the PasswordChar property to any character that you want. Next example of this tutorial demonstrates the concept of PasswordBox control. Have a look at the 4th example of this article:

    Example4
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <PasswordBox HorizontalContentAlignment="Center"> 
            </PasswordBox>
        
            <PasswordBox HorizontalContentAlignment= "Center" PasswordChar="*">
            </PasswordBox>
        </StackPanel>
    </Window>
    
    Here in the above example, the StackPanel from the last examples contain two PasswordBox elements rather than TextBox as was the case with previous example. For the first PasswordBox, the PasswordChar property has been left to default and for the second PasswordBox, the PasswordChar property has been set to steric. In the output, if you type in the top PasswordBox, you will notice that the characters you enter appear as circles, while in the second PasswordBox, the entered characters appear as steric. The output of the code in Example4 is as follows:

    Output4:

    [​IMG]

    WPF List Controls



    WPF contains several items that can be used to hold or store a list of other controls or items. All the controls in the List Controls category are derived from ItemsControl class. The most commonly used list controls are:
    • ListBox
    • ComboBox
    • TreeView
    • ListView
    • ToolBar
    The base class for all the list controls provides the ability to add the items to the list control. This can be done via programmatically in code or it can be done in the XAML front end file. However, most of the time, list controls are used to display data from a data source. This is done via the ItemsSource property of the list control which is set to refer to the object that contains the collection of elements that have to be bound to the control. In this article, ListBox and Combobox controls have been explained.

    The ListBox control

    A ListBox control is simplest of all the list control and is used to contain a selectable list of items. To add items to the ListBox controls, ListBoxItem controls are used which can hold variety of content types ranging from simple strings to complex images. Controls to ListBox can be added both in WPF, as well as programmatically. This has been explained in the next tutorial of this article. Have a look at the 5th example of this tutorial:

    Example5
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <ListBox Name="topListBox">
                <ListBoxItem>Small</ListBoxItem>
                <ListBoxItem>Medium</ListBoxItem>
                <ListBoxItem>Large</ListBoxItem>
                <ListBoxItem>X-Large</ListBoxItem>
            </ListBox>
            <Button Click="ButtonClicked">
                Add more
            </Button>
        </StackPanel>
    </Window>
    
    Here in the above example, the StackPanel control contains one ListBox control named “topListBox.” Inside the ListBox control, four ListBoxItem controls have been added and some string values have been added to these controls. This is how items are added in the ListBox control via front end XAML. The last item in the StackPanel is a Button control with name and click event set to some value.

    However, items can also be added to the ListBox control programmatically in the code behind CS file. For instance, if you open your MainWindow.xaml.cs file and modify it so that it looks exactly like that.
    Code:
    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 WPFTutorial
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
    
            }
    
            private void ButtonClicked(object sender, RoutedEventArgs e)
            {
                topListBox.Items.Add("Red");
                topListBox.Items.Add("Green");
                topListBox.Items.Add("Blue");
            }   
        }
    }
    
    The output of the above code would initially have a ListBox control with four items added in it as specified in the front end XAML file, however if you click the button, three more elements would be added to the ListBox control programmatically. The output of the code in Example5 would look like this:

    Output5:

    [​IMG]

    Adding check boxes to ListBox Controls

    ListBox controls do not only hold, the ListBoxItems but they can also be used to hold as many other controls. In windows form based applications, check box was a separate control but here in case of WPF applications, check box controls can be incorporated with in the ListBox control. The next example of the tutorial demonstrates this concept. Have a look at our 6th example.

    Example6:
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <ListBox Name="topListBox">
                <CheckBox>Small</CheckBox>
                <CheckBox>Medium</CheckBox>
                <CheckBox>Large</CheckBox>
                <CheckBox>X-Large</CheckBox>
            </ListBox>
        </StackPanel>
    </Window>
    
    The code in the above example is similar to the one in Example5 but here in this case, the ListBox control holds CheckBox controls as items. Four CheckBox controls with different string type content have been added. Check boxes allow user to check or uncheck a particular item whose value appears to the right of box that can be checked. The output of the code in Example6 is as follows:

    Output6:

    [​IMG]

    The ComboBox Controls



    The ComboBox control is another list control that is used to hold a list of items. ComboBox control is similar to ListBox control but it displays items in the form of selectable drop down list from which a particular item can be selected. Also, if the IsEditable property of the ComboBox is set to true, it allows the user to enter some value in the ComboBox as well. The last example of this tutorial demonstrates this concept.

    Example7:
    Code:
    <Window x:Class="WPFTutorial.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="400" MinWidth="200">
    
        <StackPanel>
            <ComboBox IsEditable="True">
                <ComboBoxItem>Small</ComboBoxItem>
                <ComboBoxItem>Medium</ComboBoxItem>
                <ComboBoxItem>Large</ComboBoxItem>
                <ComboBoxItem>Extra</ComboBoxItem>
            </ComboBox>
        </StackPanel>
    </Window>
    
    Here, in the above code, the StackPanel that has been used in all of our previous examples contain a ComboBox control. The IsEditable property of the ComboBox has been set to true so that it can allow user to edit the data. The ComboBox control contains four ComboBoxItem controls which can hold any content type. In example, they contain four string values. The output of the code in Example7 is as follows:

    Output7

    [​IMG]
     
    Last edited: Jan 21, 2017

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice