Telerik UI for WPF擁有超過100個控件來建立美觀、高性能的桌面應用程式，同時還能快速建構企業級辦公WPF應用程式。UI for WPF支援MVVM、觸摸等，建立的應用程式可靠且結構良好，非常容易維護，其直覺的API将無縫地內建Visual Studio工具箱中。
在上文中，小編為大家介紹了虛拟鍵盤的用途、主要的一些功能等（點選這裡回顧：如何為WPF應用程式制作一個虛拟鍵盤？這裡有答案（Part 1）），本文将繼續為大家介紹如何為WPF應用程式制作一個虛拟鍵盤。
Telerik UI for 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:Key="KeyButtonStyle" TargetType="telerik:RadButton" BasedOn="{StaticResource RadButtonStyle}">
<Setter Property="Padding" Value="4"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Foreground" Value="#4b6159"/>
<Setter Property="CornerRadius" Value="20"/>
<Setter Property="MinWidth" Value="0"/>
</Style>
<DataTemplate x:Key="RegularKeyTemplate">
<telerik:RadButton Command="{Binding KeyCommand}" AutomationProperties.AutomationId="{Binding DisplayText}" Style="{StaticResource KeyButtonStyle}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ShiftText}" Margin="3 0 0 0" Grid.Row="0" Grid.Column="0" Visibility="{Binding ShowSecondaryText, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<TextBlock Text="{Binding DisplayText}" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</telerik:RadButton>
</DataTemplate>
<DataTemplate x:Key="SpecialKeyTemplate">
<telerik:RadButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" AutomationProperties.AutomationId="{Binding DisplayText}" Style="{StaticResource KeyButtonStyle}" Background="#ffdac1" MinWidth="40" />
</DataTemplate>
<DataTemplate x:Key="NumpadKeyTemplate">
<telerik:RadButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" AutomationProperties.AutomationId="{Binding DisplayText}" Style="{StaticResource KeyButtonStyle}"/>
</DataTemplate>
<DataTemplate x:Key="LockKeyTemplate">
<telerik:RadToggleButton Foreground="#4b6159" Content="{Binding DisplayText}" Command="{Binding KeyCommand}" IsChecked="{Binding IsChecked}" Background="#b5ead7"
AutomationProperties.AutomationId="{Binding DisplayText}" Focusable="False" FontSize="{Binding FontSize, RelativeSource={RelativeSource AncestorType={x:Type telerikNavigation:RadVirtualKeyboard}}}"
Padding="0" helpers:ThemeHelper.CornerRadius="30" helpers:ThemeHelper.FocusVisualMargin="0"/>
</DataTemplate>
<telerikNavigation:VirtualKeyboardTemplateSelector x:Key="VirtualKeyboardTemplateSelector"
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 List<int> specialColorKeyCodes = new List<int>()
{
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:Key="KeyTemplateSelector">
<telerik:VirtualKeyboardTemplateSelector.RegularTemplate>
<DataTemplate>
<telerik:RadButton Command="{Binding KeyCommand}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Padding="0" Background="{Binding Background}" Foreground="{Binding Foreground}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ShiftText}" Margin="3 0 0 0" Visibility="{Binding ShowSecondaryText, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<TextBlock Text="{Binding DisplayText}" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</telerik:RadButton>
</DataTemplate>
</telerik:VirtualKeyboardTemplateSelector.RegularTemplate>
<telerik:VirtualKeyboardTemplateSelector.SpecialTemplate>
<DataTemplate>
<telerik:RadButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" Padding="0" 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:VirtualKeyboardTemplateSelector> 4. 最後一步是設定自定義密鑰因素和模闆選擇器：
<telerik:RadVirtualKeyboard VirtualKeyboardTemplateSelector="{StaticResource KeyTemplateSelector}" DefaultKeyboardLayout="Compact" Width="675" Height="240">
<telerik:RadVirtualKeyboard.KeyFactory>
<local:CustomKeyFactory />
</telerik:RadVirtualKeyboard.KeyFactory>
</telerik:RadVirtualKeyboard> 