Fermer

juin 13, 2022

Préparez-vous pour notre tout nouveau contrôle : RadVirtualKeyboard !

Préparez-vous pour notre tout nouveau contrôle : RadVirtualKeyboard !


J’ai l’honneur d’annoncer le dernier ajout à la suite Telerik UI pour WPF, le contrôle RadVirtualKeyboard. Né avec le Version R2 2022il est conçu pour permettre aux utilisateurs de saisir des caractères sans appareil physique et d’interagir avec celui-ci via la souris ou un appareil tactile.

Cela semble prometteur, n’est-ce pas? Vérifions-le ensemble.

Le but d’un clavier virtuel

Les claviers virtuels présentent de nombreux avantages. L’un de mes favoris personnels est que les utilisateurs peuvent taper directement dans leur langue sur des claviers de langue étrangère. Ils sont également extrêmement utiles pour les utilisateurs handicapés car ils peuvent utiliser la souris pour taper. Inutile de mentionner que de tels claviers peuvent augmenter la sécurité des utilisateurs, n’est-ce pas ? 😎

L'utilisateur entre un nom avec le clavier virtuel

Commencer

S’équiper du RadVirtualKeyboard est une tâche facile une fois que vous avez configuré un projet WPF. Ce dont vous avez besoin est une balise RadVirtualKeyboard en XAML et des références à Telerik.Controls.dll, Telerik.Windows.Data.dll et Telerik.Controls.Navigation.dll. Vérifiez-le:

<telerik:RadVirtualKeyboard />

RadVirtualKeyboard

Principales caractéristiques

Prêt à apprendre toutes les merveilleuses fonctionnalités du contrôle RadVirtualKeyboard ? Continuez ensuite avec cette section.

Disposition

Le contrôle a trois dispositions intégrées qui peuvent être contrôlées via le DefaultKeyboardLayout propriété:

  • Étendu – un clavier standard, comme un clavier physique standard, avec pavé numérique et touches F1-F12, etc.

    RadVirtualKeyboard avec les touches numériques à droite

  • Compact – un clavier sans pavé numérique ni autres touches

    RadVirtualKeyboard compact

  • Numpad – affiche uniquement les touches du pavé numérique

    Pavé numérique RadVirtualKeyboard

Besoin d’une mise en page personnalisée ? Ne t’en fais pas. Vous pouvez en créer un avec un fichier XML spécial, puis le charger à l’aide de la méthode LoadLayout du clavier virtuel. Plus d’informations à ce sujet, devinez où – dans le Interface utilisateur Telerik pour la documentation WPF.

Soutien à la culture linguistique

La langue par défaut des boutons de lettre dans le RadVirtualKeayboard est déterminée par la langue d’entrée sélectionnée du système d’exploitation. La modification de ce runtime de langue n’affectera pas le texte des boutons alphabétiques. La SynchroniserCultureAvecSystème la propriété vient ici à la rescousse. Réglez-le simplement sur Vrai et le suivi de la langue d’entrée actuelle sera activé – le texte sera mis à jour lorsque la langue changera au moment de l’exécution.

La langue actuelle des lettres peut également être modifiée manuellement en réglant le Culture propriété du contrôle. Laissez-moi vous montrer à quel point il est facile de montrer nos belles lettres bulgares sur ces touches. ⌨️

virtualKeyboard.Culture = new System.Globalization.CultureInfo("bg-BG");

Utiliser le son

Devine quoi? Ce clavier a un son de clic lorsque vous appuyez sur une touche ! 🤭 Si vous ne l’aimez pas, réglez simplement IsKeyPressSoundEnabled propriété à faux. Ou changez-le via le KeySoundPlayer. Je vais maintenant vous montrer comment cela fonctionne :

StreamResourceInfo info = Application.GetResourceStream(new Uri(@"/WpfApplication;component/myClickSoundFile.wav", UriKind.Relative));  
virtualKeyboard.KeySoundPlayer = new DefaultKeySoundPlayer(info.Stream);

Fenêtre du clavier

Une autre chose intéressante à propos du RadVirtualKeyboard est sa fenêtre spéciale qui est conçue en fonction de la conception du clavier :

var keyboardWindow = new RadVirtualKeyboardWindow(new RadVirtualKeyboard() { DefaultKeyboardLayout = DefaultKeyboardLayout.Compact});  
keyboardWindow.Show();

Personnalisation

Vous pensez que le look par défaut du composant est trop standard ? Eh bien, les boutons du clavier peuvent être personnalisés en utilisant le VirtualKeyboardTemplateSelectorVirtualKeyboardTemplateSelector propriété du contrôle. Amusons-nous ensemble et rendons ce clavier décalé !

<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>
<telerik:RadVirtualKeyboard VirtualKeyboardTemplateSelector="{StaticResource VirtualKeyboardTemplateSelector}"/>

Regardons ça:

Boutons arrondis RadVirtualKeyboard et surbrillances orange et vertes

Et ce n’est pas tout. La personnalisation du contrôle peut être portée au niveau supérieur en étendant les modèles de vue du contrôle et des propriétés supplémentaires qui peuvent être utilisées dans les DataTemplates du VirtualKeyboardTemplateSelectorVirtualKeyboardTemplateSelectorVirtualKeyboardTemplateSelectorVirtualKeyboardTemplateSelector. Je crois que vous pouvez et que vous le ferez, sachez simplement qu’une coutume Usine de clés La classe doit être implémentée pour utiliser les modèles de vue étendue. Je vais maintenant vous montrer comment ajouter des propriétés pour l’arrière-plan et le premier plan des boutons.

  1. Nous devons créer un modèle de vue clé personnalisé pour inclure les informations d’arrière-plan et de premier plan :

    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. L’étape suivante consiste à créer une fabrique de clés :

    
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. Nous allons maintenant définir le sélecteur de modèle de clé :

    4. <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. Et la dernière étape consiste à définir la fabrique de clés personnalisées et le sélecteur de modèle :

    <telerik:RadVirtualKeyboard VirtualKeyboardTemplateSelector="{StaticResource KeyTemplateSelector}" DefaultKeyboardLayout="Compact" Width="675" Height="240">
  <telerik:RadVirtualKeyboard.KeyFactory>
    <local:CustomKeyFactory />
  </telerik:RadVirtualKeyboard.KeyFactory>
</telerik:RadVirtualKeyboard>

C’est ça!

RadVirtualKeyboard couleurs vives

Ça a l’air génial, non ? 😊

Essayez-le et partagez vos commentaires

J’espère que vous avez apprécié la lecture de ce blog. N’oubliez pas de télécharger et d’essayer la dernière version de Telerik UI pour WPF et d’explorer les dernières fonctionnalités. Les utilisateurs existants peuvent obtenir les bits R2 2022 à partir de votre compte Teleriket les nouveaux utilisateurs peuvent télécharger une version d’évaluation de Interface utilisateur Telerik pour WPF.

Essayez l’interface utilisateur Telerik pour WPF

Une fois que vous l’avez fait, veuillez partager vos réflexions dans la section des commentaires ci-dessous ou dans le célèbre Portail de commentaires.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link