none
TextBox caret symbol is not visible when using with ContentControl WinRT

    Question

  • Hi Experts,

    I am creating an WinRT app with Text Box inside a Content Control. In that the Caret symbol of the Text Box is not visible, i cant see the Caret symbol. Please help me anybody what is the wrong in my code.? Give me any suggestion.


    -Ramesh

    Sunday, January 06, 2013 2:56 AM

Answers

  • Scenario 1: The ContentControl is the first focusable control on your page. When the page loads or the user tabs [e.g.] , the ContentControl must be defined with "IsTabStop=False" in order for the Caret to appear on the inner TextBox.

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
            <ContentControl Grid.Row="0" IsTabStop="False">
                <TextBox Text="Caret1"/>
            </ContentControl>
            <ContentControl Grid.Row="1" IsTabStop="False">
                <TextBox Text="Caret2"/>
            </ContentControl>
        </Grid>

    ---

    Scenario 2:  The ContentControl is _not_ the first focusable control on your page. The ContentControl must still be defined with "IsTabStop=False" as in scenario 1. In addition, the focus must be set programmatically on the first TextBox in order to take it away from the preceding focusable UIElement [Button in example].

    <Page
        x:Class="App14.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App14"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="Button"/>
            <ContentControl Grid.Row="1" IsTabStop="False">
                <TextBox x:Name="t1" Text="Caret1"/>
            </ContentControl>
            <ContentControl Grid.Row="2" IsTabStop="False">
                <TextBox x:Name="t2" Text="Caret2"/>
            </ContentControl>
        </Grid>
    </Page>

    -

    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    namespace App14
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.Loaded += MainPage_Loaded;
            }
    
            void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                t1.Focus(Windows.UI.Xaml.FocusState.Programmatic);
            }
        }
    }

    ---

    Scenario 3:  If your TextBox has IsReadOnly='True', the Caret will not be displayed

    <TextBox x:Name="t1" Text="Caret1" IsReadOnly="True"/>






    Sunday, January 06, 2013 7:12 AM
  • Scenario 1: "it is not working in my app": lets try to synchronize our projects before taking any further steps.

    - please create a new 'blank' project and place the code above within the MainPage:
    - run
    - does caret display in Caret1 textbox: yes/no
    - tab
    - does caret display in Caret2 textbox: yes/no

    ---

    Scenario 2: use in case where your ContentControl is not the first UIElement on the Page.

    Sunday, January 06, 2013 4:28 PM

All replies

  • Scenario 1: The ContentControl is the first focusable control on your page. When the page loads or the user tabs [e.g.] , the ContentControl must be defined with "IsTabStop=False" in order for the Caret to appear on the inner TextBox.

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
            <ContentControl Grid.Row="0" IsTabStop="False">
                <TextBox Text="Caret1"/>
            </ContentControl>
            <ContentControl Grid.Row="1" IsTabStop="False">
                <TextBox Text="Caret2"/>
            </ContentControl>
        </Grid>

    ---

    Scenario 2:  The ContentControl is _not_ the first focusable control on your page. The ContentControl must still be defined with "IsTabStop=False" as in scenario 1. In addition, the focus must be set programmatically on the first TextBox in order to take it away from the preceding focusable UIElement [Button in example].

    <Page
        x:Class="App14.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App14"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="Button"/>
            <ContentControl Grid.Row="1" IsTabStop="False">
                <TextBox x:Name="t1" Text="Caret1"/>
            </ContentControl>
            <ContentControl Grid.Row="2" IsTabStop="False">
                <TextBox x:Name="t2" Text="Caret2"/>
            </ContentControl>
        </Grid>
    </Page>

    -

    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    namespace App14
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.Loaded += MainPage_Loaded;
            }
    
            void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                t1.Focus(Windows.UI.Xaml.FocusState.Programmatic);
            }
        }
    }

    ---

    Scenario 3:  If your TextBox has IsReadOnly='True', the Caret will not be displayed

    <TextBox x:Name="t1" Text="Caret1" IsReadOnly="True"/>






    Sunday, January 06, 2013 7:12 AM
  • Thanks for the quick response. I have tried this code but it is not working in my app. Can you please provide me some other solution..

    -Ramesh

    Sunday, January 06, 2013 3:42 PM
  • Scenario 1: "it is not working in my app": lets try to synchronize our projects before taking any further steps.

    - please create a new 'blank' project and place the code above within the MainPage:
    - run
    - does caret display in Caret1 textbox: yes/no
    - tab
    - does caret display in Caret2 textbox: yes/no

    ---

    Scenario 2: use in case where your ContentControl is not the first UIElement on the Page.

    Sunday, January 06, 2013 4:28 PM