在网上支付输入银行卡的时候,经常看到输入的数字会放大和提示。
下面是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"/>
图示: