Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等创建的应用程序可靠且结构良好非常容易维护其直观的API将无缝地集成Visual Studio工具箱中。在上文中小编为大家介绍了虚拟键盘的用途、主要的一些功能等本文将继续为大家介绍如何为WPF应用程序制作一个虚拟键盘。主要功能自定义你觉得组件的默认外观太标准了可以使用控件的 VirtualKeayboardTemplateSelector 属性自定义键盘按钮让键盘与众不同ResourceDictionary ResourceDictionary.MergedDictionaries ResourceDictionary Source/Telerik.Windows.Themes.Crystal;component/Themes/System.Windows.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Crystal;component/Themes/Telerik.Windows.Controls.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Crystal;component/Themes/Telerik.Windows.Controls.Input.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Crystal;component/Themes/Telerik.Windows.Controls.Navigation.xaml/ /ResourceDictionary.MergedDictionaries Style x:KeyKeyButtonStyle TargetTypetelerik:RadButton BasedOn{StaticResource RadButtonStyle} Setter PropertyPadding Value4/ Setter PropertyFontSize Value11/ Setter PropertyFocusable ValueFalse/ Setter PropertyForeground Value#4b6159/ Setter PropertyCornerRadius Value20/ Setter PropertyMinWidth Value0/ /Style DataTemplate x:KeyRegularKeyTemplate telerik:RadButton Command{Binding KeyCommand} AutomationProperties.AutomationId{Binding DisplayText} Style{StaticResource KeyButtonStyle} VerticalContentAlignmentStretch HorizontalContentAlignmentStretch Grid Grid.RowDefinitions RowDefinition/ RowDefinition/ /Grid.RowDefinitions Grid.ColumnDefinitions ColumnDefinition/ ColumnDefinition/ /Grid.ColumnDefinitions TextBlock Text{Binding ShiftText} Margin3 0 0 0 Grid.Row0 Grid.Column0 Visibility{Binding ShowSecondaryText, Converter{StaticResource BooleanToVisibilityConverter}}/ TextBlock Text{Binding DisplayText} Grid.RowSpan2 Grid.ColumnSpan2 HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid /telerik:RadButton /DataTemplate DataTemplate x:KeySpecialKeyTemplate telerik:RadButton Content{Binding DisplayText} Command{Binding KeyCommand} AutomationProperties.AutomationId{Binding DisplayText} Style{StaticResource KeyButtonStyle} Background#ffdac1 MinWidth40 / /DataTemplate DataTemplate x:KeyNumpadKeyTemplate telerik:RadButton Content{Binding DisplayText} Command{Binding KeyCommand} AutomationProperties.AutomationId{Binding DisplayText} Style{StaticResource KeyButtonStyle}/ /DataTemplate DataTemplate x:KeyLockKeyTemplate telerik:RadToggleButton Foreground#4b6159 Content{Binding DisplayText} Command{Binding KeyCommand} IsChecked{Binding IsChecked} Background#b5ead7 AutomationProperties.AutomationId{Binding DisplayText} FocusableFalse FontSize{Binding FontSize, RelativeSource{RelativeSource AncestorType{x:Type telerikNavigation:RadVirtualKeyboard}}} Padding0 helpers:ThemeHelper.CornerRadius30 helpers:ThemeHelper.FocusVisualMargin0/ /DataTemplate telerikNavigation:VirtualKeyboardTemplateSelector x:KeyVirtualKeyboardTemplateSelector RegularTemplate{StaticResource RegularKeyTemplate} SpecialTemplate{StaticResource SpecialKeyTemplate} NumpadTemplate{StaticResource NumpadKeyTemplate} LockTemplate{StaticResource LockKeyTemplate} / /ResourceDictionary让我们来看看这还不是全部通过扩展控件的视图模型和可在 VirtualKeyboardTemplateSelector 的 DataTemplates 中使用的其他属性可以将控件的自定义提升到一个新的水平。您可以将需要实现自定义键的工厂类使用扩展视图模型现在将演示如何为按钮的背景和前景添加属性。1. 我们需要创建一个自定义键视图模型来包含背景和前景信息public class CustomLockKeyViewModel : LockKeyViewModel { public CustomLockKeyViewModel(int virtualKey, double keyWidth, double keyHeight, string displayText) : base(virtualKey, keyWidth, keyHeight, displayText) { } public Brush Background { get; set; } public Brush Foreground { get; set; } } public class CustomModifierKeyViewModel : ModifierKeyViewModel { public CustomModifierKeyViewModel(int virtualKey, double keyWidth, double keyHeight, string displayText) : base(virtualKey, keyWidth, keyHeight, displayText) { } public Brush Background { get; set; } public Brush Foreground { get; set; } } public class CustomRegularKeyViewModel : RegularKeyViewModel { public CustomRegularKeyViewModel(int virtualKey, double keyWidth, double keyHeight, bool showSecondaryText, string displayText null) : base(virtualKey, keyWidth, keyHeight, showSecondaryText, displayText) { } public Brush Background { get; set; } public Brush Foreground { get; set; } } public class CustomSpecialKeyViewModel : SpecialKeyViewModel { public CustomSpecialKeyViewModel(int virtualKey, double keyWidth, double keyHeight, string displayText) : base(virtualKey, keyWidth, keyHeight, displayText) { } public Brush Background { get; set; } public Brush Foreground { get; set; } }2. 下一步是创建一个密钥因素public class CustomKeyFactory : DefaultKeyFactory { private static readonly Listint specialColorKeyCodes new Listint() { 8, 20, /*CapsLock*/ 9, /*tilde*/ 160, /*Backspace*/ 226, 162, /*Ctrl*/ 91, /*Win*/ 164, /*Alt*/ 165, /*AltGr*/ 93, /*Menu*/ 163, /*Ctrl*/ 45, /*Backspace*/ 226, 192 }; public Brush DefaultBrush { get; set; } public Brush EnterBrush { get; set; } public Brush SpaceBrush { get; set; } public Brush SpecialBrush { get; set; } public Brush ShiftBrush { get; set; } public Brush DefaultForeground { get; set; } public CustomKeyFactory() { DefaultBrush new SolidColorBrush((Color)ColorConverter.ConvertFromString(#FCFCFC)); EnterBrush new SolidColorBrush((Color)ColorConverter.ConvertFromString(#F2E50B)); SpaceBrush new SolidColorBrush((Color)ColorConverter.ConvertFromString(#FF7F50)); SpecialBrush new SolidColorBrush((Color)ColorConverter.ConvertFromString(#21B20C)); ShiftBrush new SolidColorBrush((Color)ColorConverter.ConvertFromString(#17DEEE)); DefaultForeground new SolidColorBrush((Color)ColorConverter.ConvertFromString(#333333)); } public override BaseKeyViewModel CreateKey(int virtualKey, KeyType keyType KeyType.Normal, string displayText null, double width 1, double height 1, int alternateVirtualKey -1, string alternateText null, bool showSecondaryText false) { var keyModel CreateCustomKey(virtualKey, keyType, displayText, width, height, alternateVirtualKey, alternateText, showSecondaryText); if (virtualKey 13) // Enter { SetCustomViewModelProperty(keyModel, Background, EnterBrush); SetCustomViewModelProperty(keyModel, Foreground, Brushes.Black); } if (virtualKey 13) // Enter { SetCustomViewModelProperty(keyModel, Background, EnterBrush); SetCustomViewModelProperty(keyModel, Foreground, Brushes.Black); } else if (virtualKey 32) // Space { SetCustomViewModelProperty(keyModel, Background, SpaceBrush); } else if (virtualKey 160 || virtualKey 161) // Shift { SetCustomViewModelProperty(keyModel, Background, ShiftBrush); } else if (specialColorKeyCodes.Contains(virtualKey)) { SetCustomViewModelProperty(keyModel, Background, SpecialBrush); SetCustomViewModelProperty(keyModel, Foreground, Brushes.White); } return keyModel; } private BaseKeyViewModel CreateCustomKey(int virtualKey, KeyType keyType, string displayText, double width, double height, int alternateVirtualKey, string alternateText, bool showSecondaryText) { switch (keyType) { case KeyType.Normal: return new CustomRegularKeyViewModel(virtualKey, width, height, showSecondaryText, displayText) { Background DefaultBrush, Foreground DefaultForeground }; case KeyType.Special: return new CustomSpecialKeyViewModel(virtualKey, width, height, displayText) { Background DefaultBrush, Foreground DefaultForeground }; case KeyType.Modifier: return new CustomLockKeyViewModel(virtualKey, width, height, displayText) { Background DefaultBrush, Foreground DefaultForeground }; case KeyType.Lock: return new CustomLockKeyViewModel(virtualKey, width, height, displayText) { Background DefaultBrush, Foreground DefaultForeground }; case KeyType.Numpad: return new NumpadKeyViewModel(virtualKey, width, height, displayText, alternateVirtualKey, alternateText); default: throw new ArgumentException(Unknown key type); } } private static void SetCustomViewModelProperty(BaseKeyViewModel viewModel, string propertyName, object value) { var propertyInfo viewModel.GetType().GetProperty(propertyName); if (propertyInfo ! null) { propertyInfo.SetValue(viewModel, value); } } }3. 现在我们将定义键模板选择器telerik:VirtualKeyboardTemplateSelector x:KeyKeyTemplateSelector telerik:VirtualKeyboardTemplateSelector.RegularTemplate DataTemplate telerik:RadButton Command{Binding KeyCommand} VerticalContentAlignmentStretch HorizontalContentAlignmentStretch Padding0 Background{Binding Background} Foreground{Binding Foreground} Grid Grid.RowDefinitions RowDefinition/ RowDefinition/ /Grid.RowDefinitions Grid.ColumnDefinitions ColumnDefinition/ ColumnDefinition/ /Grid.ColumnDefinitions TextBlock Text{Binding ShiftText} Margin3 0 0 0 Visibility{Binding ShowSecondaryText, Converter{StaticResource BooleanToVisibilityConverter}}/ TextBlock Text{Binding DisplayText} Grid.RowSpan2 Grid.ColumnSpan2 HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid /telerik:RadButton /DataTemplate /telerik:VirtualKeyboardTemplateSelector.RegularTemplate telerik:VirtualKeyboardTemplateSelector.SpecialTemplate DataTemplate telerik:RadButton Content{Binding DisplayText} Command{Binding KeyCommand} Padding0 Background{Binding Background} Foreground{Binding Foreground}/ /DataTemplate /telerik:VirtualKeyboardTemplateSelector.SpecialTemplate telerik:VirtualKeyboardTemplateSelector.LockTemplate DataTemplate telerik:RadToggleButton Content{Binding DisplayText} Command{Binding KeyCommand} IsChecked{Binding IsChecked} Background{Binding Background} Foreground{Binding Foreground}/ /DataTemplate /telerik:VirtualKeyboardTemplateSelector.LockTemplate /telerik:VirtualKeyboardTemplateSelector4. 最后一步是设置自定义密钥因素和模板选择器telerik:RadVirtualKeyboard VirtualKeyboardTemplateSelector{StaticResource KeyTemplateSelector} DefaultKeyboardLayoutCompact Width675 Height240 telerik:RadVirtualKeyboard.KeyFactory local:CustomKeyFactory / /telerik:RadVirtualKeyboard.KeyFactory /telerik:RadVirtualKeyboard