WPF TextBox輸入顯示提示

在網上支付輸入銀行卡的時候，經常看到輸入的數字會放大和提示。

下面是WPF版的一個例子。

 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));



    }

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

圖示: