User Tools

Site Tools


notes:uwp:textboxes

Text Controls and Elements in XAML

Text boxes:

  • TextBox
  • AutoSuggestBox
  • PasswordBox
  • RichEditBox
  • SearchBox - in Win10 use the AutoSuggestBox control instead of SearchBox

All text box elements support the PlaceholderText property.

Text elements:

  • TextBlock
  • RichTextBlock

AutoSuggestBox

AutoSuggestBox works well as a search box. It may also provide suggestions as the user types. To control how items are displayed in the suggestion list, you can use DisplayMemberPath or ItemTemplate.

Example: Use an AutoSuggestBox as a search box:

<AutoSuggestBox PlaceholderText="Enter a name"
                QueryIcon="Find"
                Header="What's your name?"
                IsSuggestionListOpen = "False"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted" /> 
private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    Debug.WriteLine("Search term: " + args.QueryText);
}

Example: Use an AutoSuggestBox as a suggestion list:

<AutoSuggestBox x:Name="AutoSuggestBox1"
                PlaceholderText="Enter a name"
                QueryIcon="Find"
                IsSuggestionListOpen="False"
                TextChanged="AutoSuggestBox_TextChanged"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted" />
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
 
namespace TestApp
{
    public sealed partial class MainPage : Page
    {
        private List<string> names = new List<string>();
 
        public MainPage()
        {
            this.InitializeComponent();
 
            Loaded += MainPage_Loaded;
        }
 
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            names = new List<string> { "john", "mike", "chris", "sophia", "jessica" };
 
            AutoSuggestBox1.ItemsSource = names;
        }
 
        private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            // CheckCurrent indicates if the value of the AutoSuggestBox has changed since the event was raised.
            // MSDN: Returns true if the text has not changed, false if it has (??? it seems to be opposite).
            if (args.CheckCurrent())
            {
                Debug.WriteLine("TextChanged: " + AutoSuggestBox1.Text);
 
                var searchTerm = AutoSuggestBox1.Text.ToLower();
                var results = names.Where(n => n.Contains(searchTerm.ToLower())).ToList();
                AutoSuggestBox1.ItemsSource = results;
            }
        }
 
        private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, 
                                                     AutoSuggestBoxSuggestionChosenEventArgs args)
        {
            var item = args.SelectedItem as string;
 
            AutoSuggestBox1.Text = item;
            Debug.WriteLine("SuggestionChosen: " + item);
        }
 
        private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, 
                                                   AutoSuggestBoxQuerySubmittedEventArgs args)
        {
            Debug.WriteLine("QuerySubmitted: " + args.QueryText);
 
            var searchTerm = args.QueryText.ToLower();
            var results = names.Where(n => n.Contains(searchTerm.ToLower())).ToList();
            AutoSuggestBox1.ItemsSource = results;
            AutoSuggestBox1.IsSuggestionListOpen = true;
        }
    }
}

Links:

PasswordBox

PasswordBox-specific properties:

  • PasswordChar property - the masking character (default is the bullet 0x2022 = 8226).
  • Password - the contents of the PasswordBox

Use the PasswordRevealMode to control if the password is obscured. In UWP apps, the PasswordRevealMode property replaces the IsPasswordRevealButtonEnabled property.

<PasswordBox PasswordRevealMode="Visible" />
<PasswordBox PasswordRevealMode="Hidden" />

TextBox

TextBox-specific properties:

  • PlaceholderText
  • TextWrapping - default: NoWrap
  • AcceptsReturn - set the AcceptsReturn property to true, to enable multi-line input.

You can restrict the number of characters the user can type by setting the MaxLength property. However, MaxLength does not restrict the length of pasted text.

A multi-line TextBox will continue to grow vertically unless it is constrained by its Height or MaxHeight property, or by a parent container. When in multi-line mode, vertical scrollbars are not shown by default. You can show the vertical scrollbars by setting the attached property ScrollViewer.VerticalScrollBarVisibility to Auto.

Example: Set focus on a TextBox programmatically:

TextBox1.Focus(Windows.UI.Xaml.FocusState.Programmatic);

TextBlock

The TextBlock element has a content property named Inlines of type InlineCollection. The InlineCollection can contain derivatives of the Inline class:

Object
    DependencyObject
        TextElement
            Inline
                InlineUIContainer (works only with RichTextBlock)
                LineBreak
                Run (defines Text as its content property)
                Span (defines Inlines property)
                    Bold
                    Hyperlink
                    Italic
                    Underline

The Inline class and its derivatives are located in the Windows.UI.Xaml.Documents namespace.

Properties of the TextBlock:

  • CharacterSpacing - Specified in units of a thousandth of an em.
  • FlowDirection - LeftToRight (the default) or RightToLeft.
  • IsTextSelectionEnabled - False or True
  • LineHeight - The height of each line in the TextBlock, specified in DIPs (device-independent pixels). A value of zero (the default value) indicates that the line height is determined automatically.
  • LineStackingStrategy - Specifies how a line box is determined for each line:
    • MaxHeight (the default value)
    • BlockLineHeight
    • BaselineToBaseline
  • TextTrimming:
    • None (the default value) - text is clipped when it overflows
    • WordEllipsis - an ellipsis is placed in the end
  • TextWrapping - NoWrap (the default) or Wrap

Example: A few examples of the Inline derivatives. Note that the plain text is automatically converted to a Run element:

<TextBlock TextWrapping="Wrap" Foreground="Black" FontSize="25">
    <!-- this text is converted to a Run element automatically -->
    Examples of Inline derivatives:
    <LineBreak />
    <Bold>Bold</Bold>
    <Italic>Italic</Italic>
    <Underline>Underline</Underline>
    <Hyperlink>http://www.wbs.com</Hyperlink>
    <LineBreak />
</TextBlock>

Example: A TextBlock embedded in a ScrollViewer:

<Grid Background="White">
    <ScrollViewer Foreground="Navy" Padding="10" Width="400" Height="300" 
                  BorderBrush="Black" BorderThickness="1">
        <TextBlock TextWrapping="Wrap">
        <Run FontSize="25">
            Lorem ipsum...
        </Run>
        <!-- LineBreak is not allowed within a Run element -->
        <LineBreak />
        <LineBreak />
        <Run FontSize="25" FontStyle="Italic">
            Inermis docendi...
        </Run>
        </TextBlock>
    </ScrollViewer>
</Grid>

Example: TextAlignment values: Left, Right, Center, Justify.

<Grid Background="White" Width="300" Height="500">
    <StackPanel Margin="10">
        <TextBlock TextAlignment="Left" TextWrapping="Wrap">
            This text is a very long line of text in a TextBlock element. It is left-aligned.
        </TextBlock>
        <Rectangle Margin="0,5" Height="1" Fill="Black" />
 
        <TextBlock TextAlignment="Right" TextWrapping="Wrap">
            This text is a very long line of text in a TextBlock element. It is right-aligned.
        </TextBlock>
        <Rectangle Margin="0,5" Height="1" Fill="Black" />
 
        <TextBlock TextAlignment="Center" TextWrapping="Wrap">
            This text is a very long line of text in a TextBlock element. It is centered.
        </TextBlock>
        <Rectangle Margin="0,5" Height="1" Fill="Black" />
 
        <TextBlock TextAlignment="Justify" TextWrapping="Wrap">
            This text is a very long line of text in a TextBlock element. It is justified.
        </TextBlock>
    </StackPanel>
</Grid>

Example: The CharacterSpacing property sets the spacing between characters in units of a thousandth of an em (an em is the size of the the element's font).

Default spacing:

CharacterSpacing=“50”

CharacterSpacing=“-50”

<TextBlock TextWrapping="Wrap" Foreground="Black" FontSize="20" CharacterSpacing="50">
    Lorem ipsum...
</TextBlock>

Example: Left-justify text if it is short and clip it at the left if it is long:

<Grid Background="White" Width="300" Height="100">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Border HorizontalAlignment="Left" Padding="5"  Margin="5" 
            BorderThickness="1" BorderBrush="Blue" Grid.Row="0">
        <TextBlock Text="This is a short text" 
                   HorizontalAlignment="Right" VerticalAlignment="Top" />
    </Border>
    <Border HorizontalAlignment="Left" Padding="5" Margin="5" 
            BorderThickness="1" BorderBrush="Green" Grid.Row="1">
        <TextBlock Text="Testing a very long text that is clipped" 
                   HorizontalAlignment="Right" VerticalAlignment="Top" />
    </Border>
</Grid>

RichTextBlock

Set the content of a RichTextBlock using the Paragraph element and Bold, Italic, or Underline tags. You can also embed any element that derives from the UIElement class by using the InlineUIContainer element.

If text does not fit in the available area of a RichTextBlock control, you can continue remaining text in a sequence of RichTextBlockOverflow controls.

Example: Wrap a RichTextBlock element into a ScrollViewer and include an InlineUIContainer to display an image inline:

<Grid Background="White" Width="400" Height="400">
    <ScrollViewer>
        <RichTextBlock TextWrapping="Wrap">
            <Paragraph FontSize="20">
                Lorem ipsum dolor...
            </Paragraph>
            <Paragraph FontSize="20" FontStyle="Italic">
                <InlineUIContainer>
                    <Image Source="Assets/test.jpg" Stretch="None" />
                </InlineUIContainer>
                <Bold>
                    Nec altera utamur facilisi ex...
                </Bold>
            </Paragraph>
        </RichTextBlock>
    </ScrollViewer>
</Grid>

Example: Flow text into subsequent RichTextBlockOverflow elements:

<Grid Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
 
    <!-- column 1 -->
    <RichTextBlock Grid.Column="0" Margin="10" 
                   FontSize="20" Foreground="Navy" TextAlignment="Justify"
                   OverflowContentTarget="{Binding ElementName=OverflowContainer1}">
        <Paragraph>
            Lorem ipsum dolor sit amet...
        </Paragraph>
    </RichTextBlock>
 
    <!-- column 2 -->
    <RichTextBlockOverflow x:Name="OverflowContainer1" 
                           Grid.Column="1" Margin="10" 
                           OverflowContentTarget="{Binding ElementName=OverflowContainer2}" />
 
    <!-- column 3 -->
    <RichTextBlockOverflow x:Name="OverflowContainer2" 
                           Grid.Column="2" Margin="10" />
</Grid>
notes/uwp/textboxes.txt · Last modified: 2017/02/27 by admin