WPF TextBox输入显示提示

在网上支付输入银行卡的时候，经常看到输入的数字会放大和提示。

下面是WPF版的一个例子。

Code public class ZoomTextTooltip : FrameworkElement

    {

        public object ZoomText

        {

            get { return (object)GetValue(ZoomTextProperty); }

            set { SetValue(ZoomTextProperty, value); }

        }



        // Using a DependencyProperty as the backing store for ZoomText. This enables animation, styling, binding, etc...

        public static readonly DependencyProperty ZoomTextProperty =

            DependencyProperty.Register("ZoomText", typeof(object), typeof(ZoomTextTooltip), new UIPropertyMetadata(null,

                (o, args) =>

                {

                    var textBox = args.NewValue as TextBox;

                    if (textBox == null)

                        return;

                    var zoomTextTooltip = o as ZoomTextTooltip;

                    if (zoomTextTooltip == null)

                        return;

                    var popup = new Popup();

                    var textBlock = new TextBlock

                    {

                        Text = textBox.Text,

                        FontWeight = FontWeights.Bold,

                        FontSize = zoomTextTooltip.CustomFontSize,

                        Background = zoomTextTooltip.CustomBackground,

                        Foreground = zoomTextTooltip.CustomForeground

                    };

                    var binding = new Binding();

                    binding.Source = textBox;

                    binding.Path = new PropertyPath("IsKeyboardFocused");

                    BindingOperations.SetBinding(popup, Popup.StaysOpenProperty, binding);



                    var inputText = zoomTextTooltip.AddBlockString(textBox.Text.Trim(), zoomTextTooltip.BlockCount);

                    textBlock.Text = inputText;

                    popup.Child = textBlock;



                    textBox.GotFocus += (sender, eventArgs) =>

                                               {

                                                   popup.PlacementTarget = textBox;

                                                   popup.Placement = PlacementMode.Top;

                                                   popup.IsOpen = true;

                                               };

                    textBox.TextChanged += (sender, eventArgs) =>

                                               {

                                                   var addBlockString = zoomTextTooltip.AddBlockString(textBox.Text.Trim(), zoomTextTooltip.BlockCount);

                                                   textBlock.Text = addBlockString;

                                               };



                    textBox.LostFocus += (sender, eventArgs) =>

                                             {

                                                 popup.IsOpen = false;

                                             };

                }

                ));

        //字符串截取

        private string AddBlockString(string input, int count)

        {

            if (count == 0)

                return input;

            var blockinput = string.Empty;

            var length = Math.Ceiling((double)input.Length / count);

            for (int i = 0; i < length; i++)

            {

                var firstStart = i * count;

                var endString = input.Length - firstStart;

                if (endString < count)

                {

                    blockinput += input.Substring(firstStart);

                }

                else

                {

                    blockinput += input.Substring(firstStart, count);

                    blockinput += " ";

                }



            }

            return blockinput;

        }

        public double CustomFontSize

        {

            get { return (double)GetValue(CustomFontSizeProperty); }

            set { SetValue(CustomFontSizeProperty, value); }

        }



        public static readonly DependencyProperty CustomFontSizeProperty =

            DependencyProperty.Register("CustomFontSize", typeof(double), typeof(ZoomTextTooltip), new UIPropertyMetadata(12.0));



        public Brush CustomBackground

        {

            get { return (Brush)GetValue(CustomBackgroundProperty); }

            set { SetValue(CustomBackgroundProperty, value); }

        }



        public static readonly DependencyProperty CustomBackgroundProperty =

            DependencyProperty.Register("CustomBackground", typeof(Brush), typeof(ZoomTextTooltip), new UIPropertyMetadata(Brushes.White));



        public Brush CustomForeground

        {

            get { return (Brush)GetValue(CustomForegroundProperty); }

            set { SetValue(CustomForegroundProperty, value); }

        }



        public static readonly DependencyProperty CustomForegroundProperty =

            DependencyProperty.Register("CustomForeground", typeof(Brush), typeof(ZoomTextTooltip), new UIPropertyMetadata(Brushes.Black));



        public int BlockCount

        {

            get { return (int)GetValue(BlockCountProperty); }

            set { SetValue(BlockCountProperty, value); }

        }



        public static readonly DependencyProperty BlockCountProperty =

            DependencyProperty.Register("BlockCount", typeof(int), typeof(ZoomTextTooltip), new UIPropertyMetadata(0));







    }

XAML<TextBox  x:Name="tb" /> 

<ControlTest:ZoomTextTooltip CustomFontSize="20"  ZoomText="{Binding ElementName=tb}" BlockCount="4"/>

图示: