locked
Content Highlight to input field GotFocus Question RRS feed

  • Question

  • I know I tend to lump questions in this forum not specific to just expression blend but I tend to like the readers/mods here more ;)

    Anyhow, what I'm looking for is a way to highlight the string or whatever content that exists in an input field when it receives focus but preferably with just xaml and on a per instance basis.

    So a scenario might be like if a user tabs to a TextBox that holds a string value, as soon as that TextBox receives focus the content should become highlighted so the user can immediately key over the existing content instead of having to manually highlight the content and delete it before being able to key in new content.

    Anyone got any creative ideas? I would think I could throw a trigger at it for the GotFocus event but I cant seem to find a way to highlight the darn content, so any enlightenment of course is always welcome.

    P.S. - This is for silverlight, not wpf - A quick example would be exactly like the TextBox in the DatePicker, Cheers!


    Check out the Gooroovster WP App! Also, please mark answers as helpful when used, and answered when completed.


    Thursday, July 5, 2012 7:11 PM

Answers

  • As far as I know, this cannot be done from xaml.  However, doing it from code is fairly simple.

    		private void TextBox_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    		{
    			TextBox tb = sender as TextBox;
    			tb.SelectAll();
    		}
    <TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width" GotFocus="TextBox_GotFocus"/>
    
    

    If you wanted this behavior for every TextBox in your UserContol (page).  There is a very handy Extension Method you could use.  It would work on any sort of element and traverse your visual tree to find all the element of the type you specify....

    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Media;
    
    namespace SilverlightApplication7
    {
    	public static class ExtensionMethods
    	{
    		public static IEnumerable<DependencyObject> Descendents(this DependencyObject root)
    		{
    			int count = VisualTreeHelper.GetChildrenCount(root);
    			for (int i = 0; i < count; i++)
    			{
    				var child = VisualTreeHelper.GetChild(root, i);
    				yield return child;
    				foreach (var descendent in Descendents(child))
    					yield return descendent;
    			}
    		}
    	}
    }

    And then you would call it like so...

    using System.Linq;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Shapes;
    
    namespace SilverlightApplication7
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();			
    		}
    
    		private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			foreach (var textbox in LayoutRoot.Descendents().OfType<TextBox>())
    			{
    				TextBox tb = textbox as TextBox;
    				tb.GotFocus += TextBox_GotFocus;  //Adds the "GotFocus" event to every TextBox in the MainPage
    			}
    			
    			foreach (var box in LayoutRoot.Descendents().OfType<Rectangle>())
    			{
    				Rectangle rect = box as Rectangle;
    				rect.Fill = new SolidColorBrush(Colors.Red);
    			}
    		}
    		
    		private void TextBox_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    		{
    			TextBox tb = sender as TextBox;
    			tb.SelectAll();
    		}
    	}
    }
    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    	x:Class="SilverlightApplication7.MainPage"
    	Width="300" Height="300" Loaded="UserControl_Loaded" >
    	
    
    	
    	<Grid x:Name="LayoutRoot" Background="White">
    		<StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" d:LayoutOverrides="Width" HorizontalAlignment="Center">
    			<StackPanel Orientation="Vertical" HorizontalAlignment="Left" d:LayoutOverrides="Height" Margin="5">
    				<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    				<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    				<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    				<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
    					<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
    						<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    						<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    						<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					</StackPanel>
    				</StackPanel>
    			</StackPanel>
    			<StackPanel Margin="5">
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    			</StackPanel>
    		</StackPanel>
    	</Grid>
    </UserControl>

    I put StackPanels filled with TextBoxes inside of other StackPanels just so you could see it really does travel the full visual tree.  I can also use the method to change all the rectangles from blue to red fill.

    Really a handy lil method at times to use.

    ~Christine


    My Gallery

    Thursday, July 5, 2012 10:45 PM

All replies

  • As far as I know, this cannot be done from xaml.  However, doing it from code is fairly simple.

    		private void TextBox_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    		{
    			TextBox tb = sender as TextBox;
    			tb.SelectAll();
    		}
    <TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width" GotFocus="TextBox_GotFocus"/>
    
    

    If you wanted this behavior for every TextBox in your UserContol (page).  There is a very handy Extension Method you could use.  It would work on any sort of element and traverse your visual tree to find all the element of the type you specify....

    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Media;
    
    namespace SilverlightApplication7
    {
    	public static class ExtensionMethods
    	{
    		public static IEnumerable<DependencyObject> Descendents(this DependencyObject root)
    		{
    			int count = VisualTreeHelper.GetChildrenCount(root);
    			for (int i = 0; i < count; i++)
    			{
    				var child = VisualTreeHelper.GetChild(root, i);
    				yield return child;
    				foreach (var descendent in Descendents(child))
    					yield return descendent;
    			}
    		}
    	}
    }

    And then you would call it like so...

    using System.Linq;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Shapes;
    
    namespace SilverlightApplication7
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();			
    		}
    
    		private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			foreach (var textbox in LayoutRoot.Descendents().OfType<TextBox>())
    			{
    				TextBox tb = textbox as TextBox;
    				tb.GotFocus += TextBox_GotFocus;  //Adds the "GotFocus" event to every TextBox in the MainPage
    			}
    			
    			foreach (var box in LayoutRoot.Descendents().OfType<Rectangle>())
    			{
    				Rectangle rect = box as Rectangle;
    				rect.Fill = new SolidColorBrush(Colors.Red);
    			}
    		}
    		
    		private void TextBox_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    		{
    			TextBox tb = sender as TextBox;
    			tb.SelectAll();
    		}
    	}
    }
    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    	x:Class="SilverlightApplication7.MainPage"
    	Width="300" Height="300" Loaded="UserControl_Loaded" >
    	
    
    	
    	<Grid x:Name="LayoutRoot" Background="White">
    		<StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" d:LayoutOverrides="Width" HorizontalAlignment="Center">
    			<StackPanel Orientation="Vertical" HorizontalAlignment="Left" d:LayoutOverrides="Height" Margin="5">
    				<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    				<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    				<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    				<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
    					<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
    						<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    						<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    						<TextBox TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width"/>
    					</StackPanel>
    				</StackPanel>
    			</StackPanel>
    			<StackPanel Margin="5">
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    				<Rectangle Fill="Blue" Height="20" Stroke="Black" Width="20" Margin="5"/>
    			</StackPanel>
    		</StackPanel>
    	</Grid>
    </UserControl>

    I put StackPanels filled with TextBoxes inside of other StackPanels just so you could see it really does travel the full visual tree.  I can also use the method to change all the rectangles from blue to red fill.

    Really a handy lil method at times to use.

    ~Christine


    My Gallery

    Thursday, July 5, 2012 10:45 PM
  • Oooh, I really like what you did with the Descendents there! I was hoping I could get lucky and get enlightened to some dependency property I missed in the docs I could flip and activate the functionality but this should work splendidly once I tweak it a bit for the included other sdk & telerik controls we've got being used. Thanks for the input christine, as always a pleasure :)




    Please mark answers as helpful when used, and answered when completed.

    Friday, July 6, 2012 7:10 PM